fix:加液ui

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{