diff --git a/src/components/liquid/LiquidLevel.vue b/src/components/liquid/LiquidLevel.vue index c98cb03..b7d155d 100644 --- a/src/components/liquid/LiquidLevel.vue +++ b/src/components/liquid/LiquidLevel.vue @@ -2,10 +2,19 @@ import liquidLevelSvg from 'assets/images/liquid/liquid-container.svg' import liquidScaleSvg from 'assets/images/liquid/liquid-scale.svg' import { roundNumber } from 'libs/utils' -import { computed, ref, watchEffect } from 'vue' +import { computed, onMounted, ref, watchEffect } from 'vue' import { useLiquidStore } from '@/stores/liquidStore' +const elementHeight = ref(200) + +onMounted(() => { + const element = document.querySelector('.liquid-level-img') + if (element) { + elementHeight.value = element.clientHeight + console.log('元素高度:', elementHeight.value) + } +}) const liquidStore = useLiquidStore() const liquidStateData = ref(liquidStore.liquidStateData) const liquidTotal = ref(liquidStore.liquidTotal) @@ -21,7 +30,7 @@ const nowLiquid = computed(() => { // 计算液位高度(根据比例计算,假设图片高度固定为200px,可根据实际调整) const liquidHeight = computed(() => { - return (Number(nowLiquid.value) / Number(liquidTotal.value)) * 200 + return (Number(nowLiquid.value) / Number(liquidTotal.value)) * elementHeight.value }) @@ -61,7 +70,7 @@ const liquidHeight = computed(() => { left: 0; width: 100%; background: linear-gradient(to top, #0099ff, #e6f7ff); /* 颜色渐变,可按需调整 */ - min-height: 1.5rem; + min-height: .8rem; border-radius: 0 0 10px 10px; } .liquid-level-middle{