|
|
|
|
@ -6,13 +6,37 @@ |
|
|
|
|
<img src="@/assets/headerBg.png" alt=""> |
|
|
|
|
<div class="headerText"> |
|
|
|
|
<div class="title">垃圾转运站大数据管理中心</div> |
|
|
|
|
<!-- <div class="time"> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
<div class="time"> |
|
|
|
|
<img src="@/assets/shijian.png" alt=""> |
|
|
|
|
<span>2024-09-09 13:24:13</span> |
|
|
|
|
</div> --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="infoContent"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<span>数量统计</span> |
|
|
|
|
<div class="all">全部</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="totalInfo"> |
|
|
|
|
<img src="../assets/leftborder.png" class="border" alt=""> |
|
|
|
|
<div class="section"> |
|
|
|
|
<div class="sec1"> |
|
|
|
|
<img src="../assets/btn.png" alt=""> |
|
|
|
|
<div class="peopleNum"> |
|
|
|
|
<span>当日出纳</span> |
|
|
|
|
<span>3</span> |
|
|
|
|
<span>人</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="center"></div> |
|
|
|
|
<div class="right"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -53,6 +77,10 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@font-face { |
|
|
|
|
font-family: "myfont"; |
|
|
|
|
src: url('../assets/DIN-Condensed-Bold-2.ttf') format('truetype'); |
|
|
|
|
} |
|
|
|
|
.index{ |
|
|
|
|
background: #010E25; |
|
|
|
|
border:1px solid blue; |
|
|
|
|
@ -70,6 +98,9 @@ export default { |
|
|
|
|
.contentContainer{ |
|
|
|
|
position: relative; |
|
|
|
|
z-index:1; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
height:100%; |
|
|
|
|
.header{ |
|
|
|
|
border:1px solid red; |
|
|
|
|
position: relative; |
|
|
|
|
@ -81,7 +112,10 @@ export default { |
|
|
|
|
} |
|
|
|
|
.headerText{ |
|
|
|
|
position: absolute; |
|
|
|
|
border:2px solid pink; |
|
|
|
|
top:2.7rem; |
|
|
|
|
z-index:2; |
|
|
|
|
left:50%; |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
.title{ |
|
|
|
|
font-family: Source Han Sans CN; |
|
|
|
|
font-weight: bold; |
|
|
|
|
@ -89,21 +123,114 @@ export default { |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
text-shadow: 0px 4px 7px rgba(0,0,1,0.86); |
|
|
|
|
} |
|
|
|
|
// .time{ |
|
|
|
|
// display: flex; |
|
|
|
|
// align-items: center; |
|
|
|
|
// border:1px solid #fff; |
|
|
|
|
// &>img{ |
|
|
|
|
// width: 20px; |
|
|
|
|
// height: 20px; |
|
|
|
|
// } |
|
|
|
|
// &>span{ |
|
|
|
|
// font-weight: bold; |
|
|
|
|
// font-size: 20px; |
|
|
|
|
// color: #FFFFFF; |
|
|
|
|
// margin-left:16px; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.time{ |
|
|
|
|
position: absolute; |
|
|
|
|
z-index:2; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
top: 2.7rem; |
|
|
|
|
right:2rem; |
|
|
|
|
&>img{ |
|
|
|
|
width: 20px; |
|
|
|
|
height: 20px; |
|
|
|
|
} |
|
|
|
|
&>span{ |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
margin-left:16px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.infoContent{ |
|
|
|
|
flex:1; |
|
|
|
|
border:2px solid #fff; |
|
|
|
|
padding:2rem 0; |
|
|
|
|
display: flex; |
|
|
|
|
.left{ |
|
|
|
|
width:28%; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
border:1px solid red; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
.title{ |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-left:5.3rem; |
|
|
|
|
span{ |
|
|
|
|
font-family: "myfont", sans-serif; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 2.4rem; |
|
|
|
|
color: #DFEEF3; |
|
|
|
|
background: linear-gradient(0deg, #0C8DF8 0%, #AFD1FF 100%); |
|
|
|
|
-webkit-background-clip: text; |
|
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
|
} |
|
|
|
|
.all{ |
|
|
|
|
background: #3F87F6; |
|
|
|
|
border-radius: 0.8rem; |
|
|
|
|
// width: 6rem; |
|
|
|
|
// height: 3.2rem; |
|
|
|
|
padding:0.2rem 1.6rem; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 3.2rem; |
|
|
|
|
|
|
|
|
|
font-family: Microsoft YaHei; |
|
|
|
|
font-weight: 400; |
|
|
|
|
font-size: 1.6rem; |
|
|
|
|
color: #DFEEF3; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.totalInfo{ |
|
|
|
|
flex:1; |
|
|
|
|
border:1px solid red; |
|
|
|
|
position: relative; |
|
|
|
|
// border: 1px solid #fff; |
|
|
|
|
// border-image-source: url("../assets/leftborder.png"); |
|
|
|
|
// border-image-slice: 100 235 100 235; |
|
|
|
|
// border-image-width: 100px 220px 100px 220px; |
|
|
|
|
// border-image-repeat: round; |
|
|
|
|
.border{ |
|
|
|
|
position: absolute; |
|
|
|
|
width:100%; |
|
|
|
|
height: 100%; |
|
|
|
|
left:0; |
|
|
|
|
top:0; |
|
|
|
|
z-index:0; |
|
|
|
|
} |
|
|
|
|
.section{ |
|
|
|
|
position: relative; |
|
|
|
|
z-index:2; |
|
|
|
|
.sec1{ |
|
|
|
|
padding:0 1rem; |
|
|
|
|
&>img{ |
|
|
|
|
width:100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.center{ |
|
|
|
|
flex:1; |
|
|
|
|
border:1px solid blue; |
|
|
|
|
} |
|
|
|
|
.right{ |
|
|
|
|
width: 28%; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
border:1px solid red |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
liudan
5 days ago
