graphite_vue/src/views/components/Footer.vue

<template>
    <div class="h-[--footerHeight] bg-[--bgColor] footer">
        <div class="footer_ins">
            <van-icon name="discount-o" size="15" style="padding:5px"/>
            <span class="ins_text text_size">等待指令</span>
        </div>

        <div class="footer_waste">
            <van-popover v-model:show="showContainerPopover" placement="top-end">
                <template #reference>
                    <div class="footer_container">
                        <div class="circle" style="background-color: #F2652D;"></div>
                        <div class="waste_status text_size" style="color:#F2652D">碱中和容器余量低</div>
                        <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
                    </div>
                </template>
                <Liquid></Liquid>
            </van-popover>
        </div>

        <div class="footer_normal">
            <van-popover v-model:show="showWastePopover" placement="top-end" class="waste_popover">
                <template #reference>
                    <div class="footer_container">
                        <div class="circle"></div>
                        <div class="waste_status text_size">溶液正常</div>
                        <div class="waste_detail"><button class="text_size"><van-icon name="arrow" /></button></div>
                    </div>
                </template>
                <Liquid></Liquid>
            </van-popover>
        </div>
    </div>

</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import Liquid from './Liquid.vue'
const showContainerPopover = ref(false)
const showWastePopover = ref(false)

</script>
<style scoped>
    .footer{
       display: flex; 
       align-items: center;
    }
    .footer_ins{
        display: flex;
        align-items: center;
        border-radius: 5px;
        background: #FFFFFF;
        height: 1.25rem;
        width: 39.625rem;
        margin-left: 11.875rem;
    }
    .footer_waste{
        display: flex;
        align-items: center;
        border-radius: 5px;
        width: 13.4375rem;
        height: 2.5rem;
        background: #FFFFFF;
        margin-left: 10px;
    }

    .footer_normal{
        margin-left: 3.125rem;
    }

    .text_size{
        font-size:1rem;
        padding-right: 5px;
    }
    .footer_container{
        display: flex;
        align-items: center;
        border-radius: 5px;
        width: 15.625rem;
        height: 2.5rem;
        background: #FFFFFF;
        .circle {
            width: 1rem; 
            height: 1rem; 
            background-color: green; 
            border-radius: 50%; 
            margin-left: 10px;
        }

        .waste_status{
            padding:5px 5px;
        }

        .waste_detail{
            margin-left: auto
        }
    }
</style>