From dd0a2238bd0b3b1561e6d258730d2d04da34ace9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E5=87=A4=E5=90=89?= <baifengji@163.com>
Date: Mon, 30 Jun 2025 21:12:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E8=B0=83=E6=95=B4=E6=B6=88=E6=AF=92?=
 =?UTF-8?q?=E6=B6=B2=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/liquid/LiquidLevel.vue b/src/components/liquid/LiquidLevel.vue
index b7d155d..b8d45aa 100644
--- a/src/components/liquid/LiquidLevel.vue
+++ b/src/components/liquid/LiquidLevel.vue
@@ -30,17 +30,18 @@ const nowLiquid = computed(() => {
 
 // 计算液位高度（根据比例计算，假设图片高度固定为200px，可根据实际调整）
 const liquidHeight = computed(() => {
-  return (Number(nowLiquid.value) / Number(liquidTotal.value)) * elementHeight.value
+  return (Number(nowLiquid.value) / Number(liquidTotal.value)) * 100
 })
 </script>
 
 <template>
   <div class="liquid-level-main">
-    <img :src="liquidScaleSvg" alt="刻度" class="liquid-level-img">
+    <img :src="liquidScaleSvg" alt="刻度" class="liquid-level-img-l">
     <div class="liquid-level-contailner">
-      <img :src="liquidLevelSvg" alt="液位图" class="liquid-level-img">
+      <div class="liquid-level" :style="{ height: `${liquidHeight}%` }" />
+      <img :src="liquidLevelSvg" alt="液位图" class="liquid-level-img-r">
       <!-- <div class="liquid-level-middle" :style="{ height: `${liquidHeight}px` }" /> -->
-      <div class="liquid-level" :style="{ height: `${liquidHeight}px` }" />
+
       <div class="current-level">
         <span>当前液位</span>
         <span class="text">{{ nowLiquid }}</span>
@@ -59,9 +60,11 @@ const liquidHeight = computed(() => {
   position: relative;
   height: 60vh;; /* 根据实际调整 */
 }
-.liquid-level-img {
-  /* width: 100%;
-  height: 100%; */
+.liquid-level-img-l {
+  height: 62.5vh;
+  margin-top: -1.5vh;
+}
+.liquid-level-img-r {
   height: 60vh;
 }
 .liquid-level {
@@ -69,9 +72,9 @@ const liquidHeight = computed(() => {
   bottom: 0;
   left: 0;
   width: 100%;
-  background: linear-gradient(to top, #0099ff, #e6f7ff); /* 颜色渐变，可按需调整 */
+  background: linear-gradient(to top, #0099ff, #7fc8fa); /* 颜色渐变，可按需调整 */
   min-height: .8rem;
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 20px 20px;
 }
 .liquid-level-middle{
     background: linear-gradient(352deg, #0093f5, #effafe);