fix:调整消毒液页面显示效果

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);