142 lines
4.0 KiB
Vue
142 lines
4.0 KiB
Vue
<template>
|
|
<div class='leftTopBox'>
|
|
<div class='title'>
|
|
<svg-icon icon-class="dataBoard1" class='icon'/>
|
|
<span>近期数据对比</span>
|
|
</div>
|
|
<div class='title-split'>
|
|
<img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
|
|
<span class='text'>本日</span>
|
|
<img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
|
|
</div>
|
|
<div class='data-box'>
|
|
<div class='left-icon' style="top:19px;">
|
|
<img src="../../../../assets//images/dataBoard/leftTopIcon1.png" alt="" width='54'>
|
|
<div>总投入</div>
|
|
</div>
|
|
<div class='left-icon' style="top:139px;">
|
|
<img src="../../../../assets//images/dataBoard/leftTopIcon2.png" alt="" width='48'>
|
|
<div>总生产</div>
|
|
</div>
|
|
<div class='right-data' style="top:15px;">
|
|
<p><span class='num'>932,261</span><span class='text'>片数</span></p>
|
|
<p><span class='num'>894</span><span class='text'>面积/㎡</span></p>
|
|
</div>
|
|
<div class='right-data' style="top:132px;">
|
|
<p><span class='num'>932,261</span><span class='text'>片数</span></p>
|
|
<p><span class='num'>894</span><span class='text'>面积/㎡</span></p>
|
|
</div>
|
|
</div>
|
|
<div class='title-split'>
|
|
<img src="../../../../assets//images/dataBoard/leftbar.png" alt="">
|
|
<span class='text'>昨日</span>
|
|
<img src="../../../../assets//images/dataBoard/rightbar.png" alt="">
|
|
</div>
|
|
<div class='data-box'>
|
|
<div class='left-icon' style="top:19px;">
|
|
<img src="../../../../assets//images/dataBoard/leftTopIcon1.png" alt="" width='54'>
|
|
<div>总投入</div>
|
|
</div>
|
|
<div class='left-icon' style="top:139px;">
|
|
<img src="../../../../assets//images/dataBoard/leftTopIcon2.png" alt="" width='48'>
|
|
<div>总生产</div>
|
|
</div>
|
|
<div class='right-data' style="top:15px;">
|
|
<p><span class='num'>932,261</span><span class='text'>片数</span></p>
|
|
<p><span class='num'>894</span><span class='text'>面积/㎡</span></p>
|
|
</div>
|
|
<div class='right-data' style="top:132px;">
|
|
<p><span class='num'>932,261</span><span class='text'>片数</span></p>
|
|
<p><span class='num'>894</span><span class='text'>面积/㎡</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'LeftTop',
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.leftTopBox {
|
|
width: 402px;
|
|
height: 600px;
|
|
background: url('../../../../assets/images/dataBoard/left-top.png') no-repeat;
|
|
background-size: 100%;
|
|
position: absolute;
|
|
left: 23px;
|
|
top:113px;
|
|
.title {
|
|
margin: 10px 0 0 15px;
|
|
.icon {
|
|
width: 33px;
|
|
height: 33px;
|
|
margin-right: 5px;
|
|
vertical-align:middle;
|
|
}
|
|
span {
|
|
font-size: 24px;
|
|
color: #52FFF1;
|
|
line-height: 24px;
|
|
vertical-align:middle;
|
|
}
|
|
}
|
|
.title-split {
|
|
margin-left: 95px;
|
|
margin-top: 10px;
|
|
.text{
|
|
display: inline-block;
|
|
width: 100px;
|
|
font-size: 22px;
|
|
color: #01CFCC;
|
|
line-height: 24px;
|
|
letter-spacing: 7px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.data-box {
|
|
width: 358px;
|
|
height: 230px;
|
|
background: url('../../../../assets/images/dataBoard/leftTopDataBox.png') no-repeat;
|
|
background-size: 100%;
|
|
margin-top: 8px;
|
|
position: relative;
|
|
left: 24px;
|
|
.left-icon {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #9DEAF5;
|
|
line-height: 22px;
|
|
letter-spacing: 1px;
|
|
text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
|
|
position: absolute;
|
|
left: 30px;
|
|
}
|
|
.right-data {
|
|
position: absolute;
|
|
left: 100px;
|
|
p{
|
|
margin: 0;
|
|
};
|
|
.num {
|
|
font-weight: 500;
|
|
font-size: 32px;
|
|
color: #FFFFFF;
|
|
text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
|
|
margin-right: 5px;
|
|
}
|
|
.text {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 1px;
|
|
text-shadow: 0px 4px 2px rgba(0,0,0,0.62);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |