From 6b5e79e433827b9243bda21faeb74bfbcddf2409 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Wed, 21 May 2025 16:08:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=8A=A0=E6=B6=B2ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/container/liquidItem.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/views/container/liquidItem.vue b/src/views/container/liquidItem.vue
index 045c4d4..d65224d 100644
--- a/src/views/container/liquidItem.vue
+++ b/src/views/container/liquidItem.vue
@@ -27,9 +27,13 @@ const solutionStore = useSolutionStore()
 const solutionId = ref()
 const selectedSolutionItem = ref()
 const solutionInfo = ref(props.solutionItem)
-const solutionProcess = computed(() => {
+const solutionStyle = computed(() => {
   const difference = solutionInfo.value.capacityUsed / solutionInfo.value.capacityTotal
-  return 100 - (difference * 100)
+  const process = 100 - (difference * 100)
+  const color = difference > 0.4 ? '#26D574' : difference > 10 ? '#EE8223' : '#FE0A0A'
+  return {
+    '-webkit-mask': `linear-gradient(to bottom, transparent ${process}%, #EEEFF8 ${process + 0.1}%, ${color})`,
+  }
 })
 const onInputBlur = () => {
   if (solutionInfo.value.capacityUsed > 5000) {
@@ -108,7 +112,7 @@ const onSubmitSolution = () => {
       <div class="bottle_base">
         <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
       </div>
-      <div class="bottle" :style="{ '-webkit-mask': `linear-gradient(to bottom, transparent ${solutionProcess}%, rgb(38, 219, 50))` }">
+      <div class="bottle" :style="solutionStyle">
         <img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
       </div>
     </div>
@@ -116,14 +120,6 @@ const onSubmitSolution = () => {
       <div class="footer-content">
         <span>{{ solutionInfo.capacityTotal }}ml</span>
       </div>
-      <!--      <div class="footer-edit"> -->
-      <!--        <span>预充</span> -->
-      <!--        <el-input v-model.number="solutionInfo.filled" type="number" size="small" @blur="onInputBlur"> -->
-      <!--          <template #append> -->
-      <!--            ml -->
-      <!--          </template> -->
-      <!--        </el-input> -->
-      <!--      </div> -->
       <div class="footer-edit">
         <span>剩余</span>
         <el-input v-model.number="solutionInfo.capacityUsed" type="number" max="5000" size="small" @blur="onInputBlur">
@@ -184,7 +180,7 @@ const onSubmitSolution = () => {
   width: 100%;
 }
 .content-img{
-  height: 100px;
+  height: 150px;
   margin: 10px;
 }
 .footer-content{