fix:消毒液ui优化

src/components/liquid/LiquidLevel.vue

@@ -62,9 +62,9 @@ const liquidHeight = computed(() => {
   display: flex;
   gap: 5px;
 }
-.liquid-level-container{
+.liquid-level-container {
   position: relative;
-  height: 60vh;; /* 根据实际调整 */
+  height: 60vh; /* 根据实际调整 */
 }
 .liquid-level-img-l {
   height: 62.5vh;
@@ -79,26 +79,27 @@ const liquidHeight = computed(() => {
   left: 0;
   width: 100%;
   background: linear-gradient(to top, #0099ff, #7fc8fa); /* 颜色渐变，可按需调整 */
-  min-height: .8rem;
+  min-height: 0.8rem;
   border-radius: 0 0 20px 20px;
 }
-.liquid-level-middle{
+.liquid-level-middle {
   background: linear-gradient(352deg, #0093f5, #effafe);
   bottom: 0;
   left: 0;
   position: absolute;
   width: 50%;
   z-index: 1;
-    margin-left: 23%
+  margin-left: 23%;
 }
 .current-level {
+  width: 100%;
+  display: flex;
+  justify-content: center;
   position: absolute;
   top: 2rem;
-  left: 50%;
-  transform: translateX(-50%);
   font-size: 1.3rem;
   font-weight: bold;
-  .text{
+  .text {
     color: #007bff;
     padding: 3px;
   }

src/views/seal/index.vue

@@ -23,9 +23,7 @@ const leakRemainingTime = computed(() => sealStore.leakRemainingTime)
 const currentPressure = computed(() => sealStore.currentPressure)
 const diffPressure = computed<number>(() => {
   if (sealInfo.value.workState === 'leakTesting') {
-    return Math.abs(
-      Number(currentPressure.value) - Number(initialPressure.value),
-    )
+    return Math.abs(Number(currentPressure.value) - Number(initialPressure.value))
   }
   return 0
 })
@@ -46,16 +44,16 @@ watch(
 )
 
 onMounted(async () => {
-  const res = await sendCmd({ className: 'AirLeakDetectTest', fnName: 'getServiceConfig', params: { inflationTimeMs: 0.3 } })
+  const res = await sendCmd({
+    className: 'AirLeakDetectTest',
+    fnName: 'getServiceConfig',
+    params: { inflationTimeMs: 0.3 },
+  })
   inflationTime.value = res.inflationTimeMs
 })
 
-const stopText = computed(() =>
-  sealInfo.value.workState === 'stopping' ? '停止中...' : '停止测试',
-)
-const stopDisabled = computed(() =>
-  sealInfo.value.workState === 'stopping' || sealInfo.value.workState === 'idle',
-)
+const stopText = computed(() => (sealInfo.value.workState === 'stopping' ? '停止中...' : '停止测试'))
+const stopDisabled = computed(() => sealInfo.value.workState === 'stopping' || sealInfo.value.workState === 'idle')
 
 function onStartTest() {
   const statusName = getDeviceStatus()
@@ -74,7 +72,9 @@ function onStartTest() {
         FtMessage.error('指令发送失败，请稍候再试')
       }
     })
-    .finally(() => { loading.value = false })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 function onFinishTest() {
@@ -86,7 +86,9 @@ function onFinishTest() {
         FtMessage.success('测试已停止')
       }
     })
-    .finally(() => { loading.value = false })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 function handleConfirm(value: string) {
@@ -195,7 +197,7 @@ function handleConfirm(value: string) {
       v-model="inputValue"
       :is-visible="keyboardVisible"
       :keyboard-type="keyboardType"
-      @update-keyboard-visible="(visible: boolean) => keyboardVisible = visible"
+      @update-keyboard-visible="(visible: boolean) => (keyboardVisible = visible)"
       @confirm="handleConfirm"
       @close="keyboardVisible = false"
     />
@@ -203,48 +205,49 @@ function handleConfirm(value: string) {
 </template>
 
 <style lang="scss" scoped>
-.main-content{
+.main-content {
   display: grid;
-  grid-template-columns: repeat(3,1fr);
+  grid-template-columns: repeat(3, 1fr);
   height: $main-container-height;
   gap: 10px;
-  .seal-left{
-    background: #FFFFFF;
+  .seal-left {
+    background: #ffffff;
     grid-column: 1 / 3;
     box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
     background: $gradient-color;
-    .seal-chart{
+    .seal-chart {
     }
-    .chart-ml{
+    .chart-ml {
       margin: 2rem;
       height: 32rem;
     }
   }
 }
-.seal-opt{
+.seal-opt {
   display: flex;
   gap: 2rem;
   margin-left: 9rem;
   margin-top: -2rem;
-  .seal-status{
+  .seal-status {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: #F6FAFE;
-    width: 16rem;
+    background: #f6fafe;
+    //width: 16rem;
     height: 5rem;
     border-radius: 15px;
+    padding: 0 2 0px;
   }
-  .seal-time-text{
+  .seal-time-text {
     font-size: 1.5rem;
     font-weight: 500;
     padding-left: 0.5rem;
   }
-  .seal-test-time{
+  .seal-test-time {
     font-size: 24px;
-    color: #2892F3;
+    color: #2892f3;
   }
-  .seal-time-statue{
+  .seal-time-statue {
     height: 3rem;
     width: 5rem;
     display: flex;
@@ -252,12 +255,12 @@ function handleConfirm(value: string) {
     align-items: center;
     font-weight: 600;
   }
-  .seal-diff-text{
+  .seal-diff-text {
     font-size: 1.5rem;
     font-weight: 500;
     padding-left: 0.5rem;
   }
-  .seal-diff-statue{
+  .seal-diff-statue {
     height: 3rem;
     width: 5rem;
     display: flex;
@@ -267,57 +270,57 @@ function handleConfirm(value: string) {
   }
 }
 
-.seal-right{
+.seal-right {
   background: $gradient-color;
   display: grid;
   grid-template-rows: repeat(2, 1fr);
-  .left-title{
+  .left-title {
     //padding-top: 3.5vw;
     padding-left: 2.5vw;
     display: flex;
-    .title-text-test{
+    .title-text-test {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 1rem;
-      .title-text{
+      .title-text {
         font-size: 20px;
       }
-      .title-text-kpa{
-        color: #409EFF;
+      .title-text-kpa {
+        color: #409eff;
       }
-      .title-kpa-pl{
+      .title-kpa-pl {
         padding-left: 5px;
         font-weight: bold;
       }
     }
   }
-  .seal-right-btn{
+  .seal-right-btn {
     height: 30vh;
     grid-row: 2 / 4;
     margin-top: -6rem;
     display: flex;
     justify-content: center;
-    .seal-input{
+    .seal-input {
       padding-left: 2rem;
       height: 8rem;
       font-size: 2.143vw;
       font-weight: 400;
-      .inflation-time{
+      .inflation-time {
         height: 4rem;
       }
-      .seal-diff-text{
+      .seal-diff-text {
         height: 4rem;
       }
-      .input{
+      .input {
         width: 25vw;
       }
     }
-    .seal-add-btn{
+    .seal-add-btn {
       width: 25vw;
       height: 12vh;
       border-radius: 12px;
-      color: #FFFFFF;
+      color: #ffffff;
       display: flex;
       align-items: center;
       justify-content: center;