指示器

src/components/LiquidHandle.vue

@@ -100,7 +100,9 @@
         :style="{
           '--height': `${(disinfectantCapacity / 5000) * 427}px`,
         }"
-      ></div>
+      >
+        <p class="indicator">{{ disinfectantCapacity }}g</p>
+      </div>
     </div>
     <LiquidModal
       v-if="tabType == 2 && tipModalVisible"
@@ -278,6 +280,18 @@ const { disinfectantCapacity } = storeToRefs(deviceStore)
       height: var(--height);
       border-radius: 0px 12px 12px 0px;
       background: linear-gradient(0deg, #06518b 0%, rgba(6, 81, 139, 0.7) 58%);
+      .indicator {
+        position: absolute;
+        top: -10px;
+        right: -50px;
+        font-family: Source Han Sans CN;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.06em;
+
+        color: #06518b;
+      }
     }
   }
 }