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.
99 lines
2.8 KiB
99 lines
2.8 KiB
|
|
<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: 40px;
|
|
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>
|