|
|
@ -56,38 +56,38 @@ |
|
|
</script> |
|
|
</script> |
|
|
<style scoped> |
|
|
<style scoped> |
|
|
.title{ |
|
|
.title{ |
|
|
font-size: 40px; |
|
|
|
|
|
|
|
|
font-size: 1.25rem; |
|
|
font-weight: 500; |
|
|
font-weight: 500; |
|
|
line-height: 22px; |
|
|
|
|
|
padding-top: 80px; |
|
|
|
|
|
margin-left:90px; |
|
|
|
|
|
|
|
|
line-height: .75rem; |
|
|
|
|
|
padding-top: 2.5rem; |
|
|
|
|
|
margin-left:2.875rem; |
|
|
color: #323233; |
|
|
color: #323233; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.waste_main{ |
|
|
.waste_main{ |
|
|
height: 900px; |
|
|
|
|
|
|
|
|
height: 28.125rem; |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
display: flex; |
|
|
display: flex; |
|
|
.waste_area{ |
|
|
.waste_area{ |
|
|
height: 330px; |
|
|
|
|
|
width: 480px; |
|
|
|
|
|
|
|
|
height: 10.375rem; |
|
|
|
|
|
width: 15rem; |
|
|
border: 2px solid #275EFB; |
|
|
border: 2px solid #275EFB; |
|
|
margin-top: 100px; |
|
|
|
|
|
margin-left: 70px; |
|
|
|
|
|
|
|
|
margin-top: 3.125rem; |
|
|
|
|
|
margin-left: 2.25rem; |
|
|
background: rgb(243 251 255); |
|
|
background: rgb(243 251 255); |
|
|
border-radius: 20px; |
|
|
border-radius: 20px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
.waste_percentage{ |
|
|
.waste_percentage{ |
|
|
position: relative; |
|
|
position: relative; |
|
|
width: 141px; |
|
|
|
|
|
height: 198px; |
|
|
|
|
|
|
|
|
width: 4.5rem; |
|
|
|
|
|
height: 6.25rem; |
|
|
background-image: url('@/assets/container.svg'); |
|
|
background-image: url('@/assets/container.svg'); |
|
|
background-size: cover; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
background-position: center; |
|
|
z-index: 1; |
|
|
z-index: 1; |
|
|
border-radius: 10px; |
|
|
border-radius: 10px; |
|
|
margin-top: 33px; |
|
|
|
|
|
margin-left: 32px; |
|
|
|
|
|
|
|
|
margin-top: 1rem; |
|
|
|
|
|
margin-left: 1rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.percent_num{ |
|
|
.percent_num{ |
|
|
@ -100,7 +100,7 @@ |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
left: 0; |
|
|
width: 141px; |
|
|
|
|
|
|
|
|
width: 4.375rem; |
|
|
height: 50%; |
|
|
height: 50%; |
|
|
background-color: blue; |
|
|
background-color: blue; |
|
|
opacity: 0.5; |
|
|
opacity: 0.5; |
|
|
@ -109,25 +109,25 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.waste_name{ |
|
|
.waste_name{ |
|
|
margin-left: 76px; |
|
|
|
|
|
margin-top: 27px; |
|
|
|
|
|
font-size: 26px; |
|
|
|
|
|
|
|
|
margin-left: 2rem; |
|
|
|
|
|
margin-top: .875rem; |
|
|
|
|
|
font-size: .75rem; |
|
|
color: #393F46; |
|
|
color: #393F46; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.waste_edit{ |
|
|
.waste_edit{ |
|
|
background: #ffffff; |
|
|
background: #ffffff; |
|
|
width: 256px; |
|
|
|
|
|
height: 220px; |
|
|
|
|
|
margin-left: 30px; |
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
padding-top: 30px; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
padding-left: 35px; |
|
|
|
|
|
|
|
|
width: 8rem; |
|
|
|
|
|
height: 6.875rem; |
|
|
|
|
|
margin-left: 1rem; |
|
|
|
|
|
margin-top: .625rem; |
|
|
|
|
|
padding-top: 1rem; |
|
|
|
|
|
font-size: .625rem; |
|
|
|
|
|
padding-left: 1.125rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.waste_field{ |
|
|
.waste_field{ |
|
|
width: 210px; |
|
|
|
|
|
|
|
|
width: 6.625rem; |
|
|
display: flex; |
|
|
display: flex; |
|
|
border: 1px solid; |
|
|
border: 1px solid; |
|
|
border-radius: 304px; |
|
|
border-radius: 304px; |
|
|
@ -140,7 +140,7 @@ |
|
|
background-color: #26D574; |
|
|
background-color: #26D574; |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
color: #ffffff; |
|
|
color: #ffffff; |
|
|
width: 200px; |
|
|
|
|
|
|
|
|
width: 6.25rem; |
|
|
border-radius: 100px; |
|
|
border-radius: 100px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -151,23 +151,23 @@ |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
padding-top: 50px; |
|
|
padding-top: 50px; |
|
|
margin-left: 35%; |
|
|
margin-left: 35%; |
|
|
height: 200px; |
|
|
|
|
|
|
|
|
height: 6.25rem; |
|
|
.btn{ |
|
|
.btn{ |
|
|
width:438px; |
|
|
|
|
|
height: 90px; |
|
|
|
|
|
font-size: 40px; |
|
|
|
|
|
|
|
|
width:13.75rem; |
|
|
|
|
|
height: 2.875rem; |
|
|
|
|
|
font-size: 1.25rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.ml{ |
|
|
.ml{ |
|
|
margin-right: 20px; |
|
|
|
|
|
|
|
|
margin-right: .625rem; |
|
|
padding-top: 5px; |
|
|
padding-top: 5px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.add_result{ |
|
|
.add_result{ |
|
|
font-size: 26px; |
|
|
|
|
|
|
|
|
font-size: .75rem; |
|
|
color: #393f46; |
|
|
color: #393f46; |
|
|
margin-top: 18px; |
|
|
|
|
|
margin-left: 45px; |
|
|
|
|
|
|
|
|
margin-top: .625rem; |
|
|
|
|
|
margin-left: 1.375rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
</style> |
|
|
</style> |
LiLongLong
6 months ago