液位计算

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
 })
 </script>
 
@@ -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{