graphite_vue/src/views/addLiquid/index.vue

<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>