You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.7 KiB
96 lines
2.7 KiB
<template>
|
|
<div class="disinfectant_liquid_container">
|
|
<div class="top_progress">
|
|
<svg
|
|
class="icon"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
fill="none"
|
|
version="1.1"
|
|
width="28"
|
|
height="28.00116729736328"
|
|
viewBox="0 0 28 28.00116729736328"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M13.9994,0C6.26711,0,0,6.26827,0,14.0012C0,21.7329,6.26711,28.0012,13.9994,28.0012C21.7329,28.0012,28,21.7323,28,14.0012C28,6.26711,21.7329,0,13.9994,0ZM13.3306,2.65913L15.1107,2.65913L15.1107,6.15243L13.3306,6.15243L13.3306,2.65913ZM8.00532,9.19343L5.53538,6.72291L6.79393,5.46437L9.26387,7.93489L8.00532,9.19343ZM8.88432,3.93979L10.4945,3.18886L11.9713,6.35385L10.3594,7.10595L8.88432,3.93979ZM14.2445,24.2046C12.6966,24.2046,11.4433,22.9495,11.4433,21.4034C11.4433,20.1938,12.2088,19.1681,13.2828,18.7751L13.2828,10.7838L15.0612,10.7838L15.0612,18.7227C16.2091,19.0714,17.0462,20.139,17.0462,21.404C17.0462,22.9495,15.7923,24.2046,14.2445,24.2046ZM16.3302,6.35035L17.8071,3.1842L19.419,3.93688L17.9439,7.10304L16.3302,6.35035ZM20.2421,9.19343L18.9835,7.93489L21.4535,5.46437L22.712,6.72291L20.2421,9.19343Z"
|
|
fill="#FFFFFF"
|
|
fill-opacity="1"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
消毒液
|
|
<div class="progress">
|
|
<div
|
|
class="pro"
|
|
:style="{
|
|
'--height': '50px',
|
|
}"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">500 (g)</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup></script>
|
|
|
|
<style lang="scss" scoped>
|
|
.disinfectant_liquid_container {
|
|
width: 353px;
|
|
height: 225px;
|
|
box-sizing: border-box;
|
|
border-radius: 17.5px;
|
|
overflow: hidden;
|
|
.top_progress {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
letter-spacing: 0.1em;
|
|
color: #ffffff;
|
|
width: 353px;
|
|
height: 141px;
|
|
box-sizing: border-box;
|
|
.icon {
|
|
top: 15px;
|
|
left: 15px;
|
|
position: absolute;
|
|
}
|
|
.progress {
|
|
top: 19px;
|
|
right: 29px;
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 100px;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
.pro {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 6px;
|
|
height: var(--height);
|
|
background: #1f6397;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #1f6397;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
letter-spacing: 0.06em;
|
|
color: #ffffff;
|
|
height: 84px;
|
|
}
|
|
}
|
|
</style>
|