From 1db2ebb3ec0e22136412015b28624c12de4a4d48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=A2=A6=E8=BF=9C?= <1063331231@qq.com>
Date: Mon, 30 Jun 2025 20:45:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=B2=E4=BD=8D=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/liquid/LiquidLevel.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

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