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.
143 lines
4.1 KiB
143 lines
4.1 KiB
<template>
|
|
<div class="add_liquid_bottle">
|
|
<div class="add_liquid">
|
|
<div class="config_title">
|
|
<div class="config_name">
|
|
<div>1 硝酸</div>
|
|
<img :src="ArrowSvg" class="arrow_img"/>
|
|
</div>
|
|
</div>
|
|
<div class="bottle_ml">
|
|
<div class="liquid_pos">
|
|
<div class="contail_percentage"></div>
|
|
<div class="liquid_percent bottle_wd"></div>
|
|
<div class="percent_num">300ml</div>
|
|
</div>
|
|
<div class="ml_name">
|
|
300ml
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="add_liquid">
|
|
<div class="config_title">
|
|
<div class="config_name">
|
|
<div>1 硝酸</div>
|
|
<img :src="ArrowSvg" class="arrow_img"/>
|
|
</div>
|
|
</div>
|
|
<div class="bottle_ml">
|
|
<div class="liquid_pos">
|
|
<div class="contail_percentage"></div>
|
|
<div class="liquid_percent bottle_wd"></div>
|
|
<div class="percent_num">300ml</div>
|
|
</div>
|
|
<div class="ml_name">
|
|
300ml
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import ArrowSvg from '@/assets/arrow.svg'
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@use "@/assets/style/mixin.scss" as *;
|
|
.add_liquid_bottle{
|
|
display: flex;
|
|
}
|
|
.add_liquid{
|
|
background: #F4F9FF;
|
|
width: $addLiquidWidth;
|
|
height: 430px;
|
|
border:1px solid #275EFB;
|
|
margin-left: 135px;
|
|
margin-top: 160px;
|
|
border-radius: 20px;
|
|
.config_title{
|
|
width: $addLiquidWidth;
|
|
height: 80px;
|
|
background: rgba(25, 137, 250, 0.1216);
|
|
padding-top: 16px;
|
|
.config_name{
|
|
width: 248px;
|
|
height: 50px;
|
|
background: #FFFFFF;
|
|
margin-left: 80px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 50px;
|
|
.arrow_img{
|
|
width: 15px;
|
|
height: 23px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottle_ml{
|
|
|
|
.liquid_pos{
|
|
position: relative;
|
|
width: 162px;
|
|
height: 228px;
|
|
margin-top: 36px;
|
|
margin-left: 120px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.bottle_wd{
|
|
height: 30%;
|
|
background-color:red;
|
|
width: 162px;
|
|
}
|
|
}
|
|
.liquid_status{
|
|
height: 29px;
|
|
font-family: Source Han Sans;
|
|
font-size: 30px;
|
|
font-weight: 500;
|
|
color: #40474E;
|
|
padding-top: 19px;
|
|
}
|
|
|
|
.contail_percentage{
|
|
position: absolute;
|
|
width: 162px;
|
|
height: 228px;
|
|
background-image: url('@/assets/container.svg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
z-index: 1;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.liquid_percent {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 83px;
|
|
background-color: blue;
|
|
opacity: 0.5;
|
|
z-index: 2;
|
|
border-radius: 0 0 10px 10px;
|
|
}
|
|
|
|
|
|
}
|
|
.percent_num{
|
|
font-size: 30px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.ml_name{
|
|
width: 174px;
|
|
height: 50px;
|
|
background: #FFFFFF;
|
|
margin-left: 120px;
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
border-radius: 195px;
|
|
}
|
|
}
|
|
</style>
|