微调耗材页面样式

src/pages/Index/Index.vue

@@ -81,7 +81,7 @@
       <el-dropdown placement="top-start">
         <div class="user-card">
           <img class="user-logo" src="@/assets/Index/user.svg" />
-          <div class="user-name">操作人:{{ username || '未登录' }}</div>
+          <div class="user-name">{{ username || '未登录' }}</div>
         </div>
         <template #dropdown>
           <el-dropdown-menu>
@@ -671,37 +671,47 @@ onMounted(() => {
 
   .footer-info {
     width: 100%;
-    height: 40px;
+    height: 50px;
     display: flex;
-    justify-content: space-between;
+    justify-content: end;
     align-items: center;
     position: relative;
     bottom: 0;
     margin-top: auto;
 
+    > *:first-child {
+      margin-right: auto;
+    }
+
     .user-logo,
     .time-logo {
-      width: 40px;
-      height: 40px;
+      width: 36px;
+      height: 36px;
+      margin-right: 8px;
     }
 
+    .user-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
     .user-card,
     .time-card {
       display: flex;
       align-items: center;
-      font-size: 26px;
+      font-size: 24px;
     }
 
     .equipment-status {
       background-color: #f5f5f5;
-      width: 400px;
-      height: 40px;
-      line-height: 40px;
+      width: 440px;
+      height: 44px;
+      line-height: $height;
       text-align: center;
       border-radius: 10px;
-
+      margin-right: 20px;
       .status-text {
-        font-size: 26px;
+        font-size: 24px;
       }
     }
     .logout {

src/pages/Index/Regular/Consumables.vue

@@ -433,15 +433,15 @@ const updateTipNum = async ({
   .main-top {
     display: flex;
     justify-content: space-between;
-    margin-top: 10px;
+    margin-top: 5px;
     height: 100%;
 
     .plate-area {
-      width: 355px;
+      width: 360px;
     }
 
     .move-liquid-area {
-      width: calc(100% - 355px);
+      width: calc(100% - 360px);
     }
   }
 
@@ -469,7 +469,7 @@ const updateTipNum = async ({
     .ball-area {
       display: flex;
       flex-wrap: wrap;
-      column-gap: 20px;
+      column-gap: 26px;
       row-gap: 12px;
       padding: 0 24px;
       .ball-grid {

src/pages/Index/components/Consumables/MoveLiquidArea.vue

@@ -417,12 +417,12 @@ const changePlate = (index: number) => {
   }
 
   .load-consumables {
-    margin: 0 8px;
+    margin: 0 16px 12px 10px;
     padding: 0;
     height: 100px;
     font-size: 40px;
     border-radius: 10px;
-    margin-bottom: 15px;
+    // margin-bottom: 15px;
   }
 
   .move-liquid-area {
@@ -451,12 +451,13 @@ const changePlate = (index: number) => {
     }
 
     .move-liquid-controller {
+
       display: flex;
       justify-content: space-between;
       flex-wrap: nowrap;
 
       .controller {
-        width: 140px;
+        width: 136px;
         height: 130px;
         color: #54a4e8;
         border: 3px solid #54a4e8;
@@ -472,22 +473,26 @@ const changePlate = (index: number) => {
         }
 
         .controller-number {
-          font-size: 30px;
+          font-size: 26px;
           font-weight: 600;
           border-radius: 10px;
-          border: 3px solid #54a4e8;
+          border: 2px solid #54a4e8;
           padding: 0 4px;
         }
       }
 
       .selected-controller {
-        background-color: #f0f9ff;
+        // background-color: #f0f9ff;
         /* 高亮背景 */
-        border-color: #007bff;
+        border-color: #528dfe;
         /* 选中时边框颜色 */
         background-color: #528dfe;
         color: #e9f1ff;
         /* 选中时文字颜色 */
+        .controller-number {
+          background-color: #3D7AF1;
+          border-color: #3D7AF1;
+        }
       }
     }
   }

src/pages/Index/components/Consumables/SpttingPlates.vue

@@ -112,7 +112,7 @@ const updateSliderEndVal = async (plateNum, order) => {
   display: flex;
   flex-direction: column;
   background-color: #f6f6f6;
-
+  // padding-left: 4px;
   // 温度区域
   .temperature {
     width: 100%;
@@ -121,7 +121,7 @@ const updateSliderEndVal = async (plateNum, order) => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px; // 增加底部间距
+    margin-bottom: 5px; // 增加底部间距
 
     .area {
       width: 180px;
@@ -179,14 +179,14 @@ const updateSliderEndVal = async (plateNum, order) => {
       padding: 0px;
 
       border: 1px solid black;
-      border-radius: 10px;
+      border-radius: 8px;
       overflow: hidden;
       position: relative;
       background-color: #f6f6f6;
 
       .plate-area {
-        width: 100%;
-        height: 100%;
+        // width: 100%;
+        // height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -197,6 +197,7 @@ const updateSliderEndVal = async (plateNum, order) => {
           display: flex;
           justify-content: center;
           align-items: center;
+          transform: translateY(8px);
         }
 
         .slider-area {