style: 首页耗材优化

src/pages/Index/Index.vue

@@ -1012,8 +1012,7 @@ watch(
 
   .nav-bar {
     width: 100%;
-    height: 7rem;
-    margin-bottom: 2px;
+    height: 100px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1153,8 +1152,7 @@ watch(
   }
 
   .main-content {
-    flex: 1;
-    min-height: 0; // 添加：防止溢出
+    height: calc(100% - 155px);
   }
 }
 .msg-container {

src/pages/Index/Regular.vue

@@ -1,13 +1,11 @@
 <template>
-  <div id="regular-container">
+  <div id="regular">
     <TabBar />
-    <div>
-      <router-view v-slot="{ Component }">
+      <router-view v-slot="{ Component }" class="content">
         <keep-alive>
           <component :is="Component" />
         </keep-alive>
       </router-view>
-    </div>
   </div>
 </template>
 
@@ -17,11 +15,14 @@ import TabBar from './components/Consumables/TabBar.vue'
 </script>
 
 <style scoped lang="less">
-#regular-container {
+#regular {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
+  .content {
+    height: calc(100% - 4.5rem);
+  }
 
   .main-top {
     display: flex;
@@ -33,7 +34,7 @@ import TabBar from './components/Consumables/TabBar.vue'
 
     .buffer-little-title {
       display: flex;
-      margin: 5px 0 0 5px 0;
+      margin: 5px 0 0 5px;
 
       .line {
         margin-right: 5px;

src/pages/Index/Regular/Consumables.vue

@@ -47,6 +47,7 @@
 
     <!--耗材页面 -->
     <div class="main-top">
+<!--      反应板夹区-->
       <div class="plate-area">
         <SpttingPlates
           :plates="consumableStore.consumableData?.reactionPlateGroup"
@@ -54,16 +55,12 @@
           @updateReactionPlateNum="updateReactionPlateNum"
           @unloadConsumable="handleUnloadConsumable"
         />
-
-        <!-- <SliderAreaEx v-model="sliderValue" v-model:totalValue="totalVal"/>
-        <DragAreaEx v-model:hVal="hVal" v-model:hTotal="hTotal" v-model:vVal="vVal" v-model:vTotal="vTotal"/> -->
       </div>
+<!--      移液头区-->
       <div class="move-liquid-area">
         <MoveLiquidArea
           :moveLiquids="consumableStore.consumableData?.tips"
-          :tempTipNum="
-            consumableStore.consumableData?.tips.map((t) => t.tipNum)
-          "
+          :tempTipNum="consumableStore.consumableData?.tips.map((t) => t.tipNum)"
           :bufferBig="consumableStore.consumableData.larBottleGroup"
           :emergencyInfo="emergencyInfo"
           :wasteStatus="deviceStore.sensorState?.wasteBinFullFlag || false"
@@ -375,8 +372,9 @@ const updateTipNum = async ({
 
 <style scoped lang="less">
 #regular-container {
+
   width: 100%;
-  height: 100%;
+  height: calc(100% - 60px);
   display: flex;
   flex-direction: column;
 
@@ -443,9 +441,9 @@ const updateTipNum = async ({
 
   .main-top {
     display: flex;
-    justify-content: space-between;
-    margin-top: 5px;
-    height: 100%;
+    box-sizing: border-box;
+    padding-top: 5px;
+    background: #DDE4E9;
 
     .plate-area {
       width: 360px;
@@ -457,32 +455,39 @@ const updateTipNum = async ({
   }
 
   .main-bottom {
+    background: #DDE4E9;
     width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
     flex: 1;
     .buffer-little-title {
+      background: #f6f6f6;
       display: flex;
-      height: 40px;
-      line-height: 40px;
+      height: 26px;
       align-items: center;
+      padding: 0 5px;
 
       .line {
         width: 4px;
         height: 20px;
-        background-color: #4caf50;
-        margin: 0 10px 0;
+        background-color: #11d900;
+        margin: 0 5px;
+        border-radius: 10px;
       }
 
       .content {
-        font-size: 26px;
+        font-size: 20px;
       }
     }
 
     .ball-area {
+      height: calc(100% - 26px);
       display: flex;
+      align-items: center;
+      justify-content: space-between;
       flex-wrap: wrap;
-      column-gap: 26px;
-      row-gap: 12px;
-      padding: 0 24px;
+      column-gap: 20px;
+      row-gap: 20px;
       .ball-grid {
         overflow: hidden;
       }

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

@@ -48,7 +48,7 @@ const props = defineProps({
   },
   innerColor: {
     type: String,
-    default: 'lightgray', // 未激活时内部小球的颜色
+    default: '#D2DAE0', // 未激活时内部小球的颜色
   },
 })
 
@@ -91,7 +91,7 @@ const innerCircleStyle = (index) => {
   width: 100%;
   height: 100%;
   display: flex;
-  background-color: #666;
+  background-color: #F6F6F6;
   border-radius: 10px;
   flex-wrap: wrap;
   column-gap: 4px;

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

@@ -68,7 +68,7 @@ const props = defineProps({
   },
   innerColor: {
     type: String,
-    default: 'lightgray', // 未激活时内部小球的颜色
+    default: '#D2DAE0', // 未激活时内部小球的颜色
   },
   inUse: {
     type: Boolean,
@@ -150,9 +150,8 @@ watch(
   display: flex;
   flex-wrap: wrap-reverse;
   flex-direction: row-reverse;
-  background-color: #666;
-  border-radius: 10px;
-  padding-right: 4px;
+  background-color: #F6F6F6;
+  //border-radius: 10px;
 }
 .drag-area {
   position: absolute;

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

@@ -57,7 +57,7 @@ const { projectName, currentCount, maxCount } = toRefs(props)
   background-color: #808080;
   font-size: 22px;
   font-weight: 600;
-  height: 30px;
+  height: 40px;
   color: #fff;
   padding: 0 20px;
 }

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

@@ -93,8 +93,6 @@ const handleUpdateBottleNum = (
 .combined-container {
   display: flex;
   flex-direction: column;
-  /* align-items: center; */
-  background-color: #555555;
   border-radius: 10px;
 }
 </style>

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

@@ -1,14 +1,6 @@
 <template>
   <div id="move-liquid-area-container">
-    <!-- 扫描耗材按钮-->
-    <el-button
-      type="primary"
-      class="load-consumables"
-      @touchstart.prevent="handleTouchStart"
-      @touchend="handleTouchEnd"
-      @touchcancel="handleTouchEnd"
-      >扫描耗材</el-button
-    >
+
     <div class="info-show-area">
       <!-- 移液区 -->
       <div class="move-liquid-area">
@@ -155,6 +147,18 @@
         </div>
       </div>
     </div>
+    <!-- 扫描耗材按钮-->
+    <div class="load-consumables-area">
+      <el-button
+        type="primary"
+        class="load-consumables"
+        @touchstart.prevent="handleTouchStart"
+        @touchend="handleTouchEnd"
+        @touchcancel="handleTouchEnd"
+      >扫描耗材</el-button
+      >
+    </div>
+
   </div>
 
   <InitWarn
@@ -325,6 +329,7 @@ const changePlate = (index: number) => {
   flex-direction: column;
   // justify-content: space-between;
   width: 100%;
+  height: 100%;
 
   .info-show-area {
     display: flex;
@@ -335,37 +340,51 @@ const changePlate = (index: number) => {
     font-weight: bold;
   }
 
-  .load-consumables {
-    margin: 0 16px 12px 10px;
-    padding: 0;
-    height: 70px;
-    font-size: 40px;
-    border-radius: 10px;
-    // margin-bottom: 15px;
+  .load-consumables-area {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    width: 100%;
+    .load-consumables {
+      width: calc(100% - 20px);
+      padding: 0;
+      height: 60px;
+      font-size: 30px;
+      background: #528dfe;
+      border-radius: 10px;
+    }
   }
 
+
   .move-liquid-area {
     width: 70%;
     display: flex;
     flex-direction: column;
     margin-left: 10px;
-    gap: 9px;
-    background-color: #f6f6f6;
+    gap: 10px;
+    //background-color: #fff;
     border-radius: 10px;
 
     .move-liquid-title {
       width: 100%;
       display: flex;
-      font-size: 26px;
       font-weight: 400;
       align-items: center;
-      margin-left: 10px;
+      background: #f6f6f6;
+      height: 26px;
+      padding: 0 5px;
+      box-sizing: border-box;
 
       .line {
         width: 4px;
         height: 20px;
-        background-color: #00d800;
-        margin-right: 5px;
+        background-color: #11d900;
+        margin: 0 5px;
+        border-radius: 10px;
+      }
+      .content {
+        font-size: 20px;
       }
     }
 
@@ -375,10 +394,10 @@ const changePlate = (index: number) => {
       flex-wrap: nowrap;
 
       .controller {
-        width: 136px;
-        height: 6rem;
+        width: 120px;
+        padding: 5px 5px;
         color: #54a4e8;
-        border: 3px solid #54a4e8;
+        border: 1px solid #54a4e8;
         border-radius: 10px;
         display: grid;
         place-content: center;
@@ -391,7 +410,7 @@ const changePlate = (index: number) => {
         }
 
         .controller-number {
-          font-size: 26px;
+          font-size: 20px;
           font-weight: 600;
           border-radius: 10px;
           border: 2px solid #54a4e8;
@@ -416,29 +435,31 @@ const changePlate = (index: number) => {
   }
 
   .right-area {
+    box-sizing: border-box;
     width: 30%;
     display: flex;
     flex-direction: column;
     justify-content: stretch;
-    padding-left: 8px;
-    gap: 6px;
+    padding:0 10px;
+    gap: 10px;
 
     .emergency-area,
     .id-area,
     .waste-area,
     .buffer-area {
-      width: 90%;
+      width: 100%;
     }
 
     .emergency-title,
     .id-title,
     .waste-title,
     .buffer-title {
-      font-size: 26px;
-      font-weight: 500;
+      font-size: 20px;
+      box-sizing: border-box;
+      padding: 0 5px;
     }
     .content{
-      font-size: 1.36rem;
+      font-size: 20px;
     }
 
     .controller-button,
@@ -446,31 +467,29 @@ const changePlate = (index: number) => {
     .waste-button,
     .buffer-controller {
       width: 100%;
-      height: 80px;
+      height: 50px;
     }
 
     .line {
       width: 4px;
       height: 20px;
-      background-color: #00d800;
+      background-color: #11d900;
       margin: 0 5px;
+      border-radius: 10px;
     }
 
     //急诊区域
     .emergency-area {
-      background-color: #f6f6f6;
-      border-radius: 10px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
 
       .emergency-title {
-        width: 155px;
+        width: 100%;
         display: flex;
+        height: 26px;
         align-items: center;
         background-color: #f6f6f6;
-        margin: 0 5px;
-        font-weight: 400;
       }
 
       .emergency-controller {
@@ -480,16 +499,15 @@ const changePlate = (index: number) => {
 
         .controller {
           width: 100%;
-          height: 60px;
+          margin: 10px 0;
           display: flex;
           justify-content: space-around;
-          background-color: #fff;
           align-items: center;
 
           .emergency-desc {
             width: 100%;
             border-radius: 6px;
-            background-color: #ddd;
+            background-color: #ccc;
             line-height: 40px;
             font-weight: 600;
             font-size: 24px;
@@ -504,7 +522,8 @@ const changePlate = (index: number) => {
           border-radius: 7px;
           background-color: #c84141;
           color: white;
-          font-size: 32px;
+          font-size: 28px;
+          line-height: 50px;
           font-weight: 400;
           display: flex;
           justify-content: center;
@@ -515,14 +534,14 @@ const changePlate = (index: number) => {
 
     //ID卡区域
     .id-area {
-      background-color: #f6f6f6;
-      border-radius: 10px;
-
+      margin-top: 8px;
       .id-title {
-        width: 155px;
+        width: 100%;
+        height: 26px;
         display: flex;
         align-items: center;
         background-color: #f6f6f6;
+        margin-bottom: 10px;
       }
 
       .id-button {
@@ -543,11 +562,10 @@ const changePlate = (index: number) => {
 
     //废料区域
     .waste-area {
-      // width: 166px;
-      background-color: #f6f6f6;
-      border-radius: 10px;
-
+      margin-top: 10px;
       .waste-title {
+        height: 26px;
+        margin-bottom: 10px;
         display: flex;
         align-items: center;
         background-color: #f6f6f6;
@@ -568,34 +586,31 @@ const changePlate = (index: number) => {
         }
 
         .button-icon {
-          width: 64px;
+          width: 50px;
           height: 64px;
           display: grid;
           place-content: center;
           margin-right: 5px;
 
           img {
-            width: 40px;
-            height: 40px;
+            width: 25px;
           }
         }
 
         .button-text {
-          width: 65px;
-          height: 24px;
           font-size: 26px;
           font-weight: 400;
-          line-height: 30px;
         }
       }
     }
 
     //大缓冲液体区域
     .buffer-area {
-      background-color: #f6f6f6;
-      border-radius: 10px;
+      margin-top: 10px;
 
       .buffer-title {
+        height: 26px;
+        margin-bottom: 10px;
         display: flex;
         align-items: center;
         background-color: #f6f6f6;
@@ -603,4 +618,10 @@ const changePlate = (index: number) => {
     }
   }
 }
+.move-liquid-graph {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

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

@@ -116,25 +116,27 @@ const updateSliderEndVal = async (plateNum, order) => {
 .sptting-plates-container {
   display: flex;
   flex-direction: column;
-  background-color: #f6f6f6;
   padding-left: 8px;
   // 温度区域
   .temperature {
     width: 100%;
-    height: 10%;
-    margin: 0 auto;
+    height: 26px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 5px; // 增加底部间距
+    // 增加底部间距
+    margin: 0 auto 10px;
+    background: #f6f6f6;
+    padding: 0 5px;
+    box-sizing: border-box;
 
     .area {
       width: 180px;
-      height: 33px;
       align-items: center;
-      font-size: 32px;
+      font-size: 26px;
       display: flex;
 
+
       .line {
         width: 4px;
         height: 20px;
@@ -144,8 +146,7 @@ const updateSliderEndVal = async (plateNum, order) => {
       }
 
       .area-text {
-        font-size: 26px;
-        font-weight: 300;
+        font-size: 20px;
       }
     }
 
@@ -175,15 +176,15 @@ const updateSliderEndVal = async (plateNum, order) => {
   // 反应板区域
   .sptting-plates {
     display: flex;
-    gap: 10px; // 统一间距
+    gap: 5px; // 统一间距
     flex-direction: column;
 
     .card {
-      width: 355px;
-      height: 5.5rem;
-      padding: 0px;
+      width: 100%;
+      height: 85px;
+      padding: 0;
 
-      border: 1px solid black;
+      border: 1px solid #ccc;
       border-radius: 8px;
       overflow: hidden;
       position: relative;

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

@@ -53,11 +53,10 @@ const onTabClick = (index: any) => {
 
 <style scoped lang="less">
 .tab-bar {
-  height: 4.5rem;
+  height: 60px;
   display: flex;
   justify-content: space-around;
   background-color: #fff;
-  margin: 5px;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 
   .tab-item {

src/pages/Login/index.vue

@@ -211,12 +211,15 @@ const version = __APP_VERSION__
           margin-left: 30px;
           font-size: 25px;
           font-weight: bold;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 150px;
         }
         .el-icon {
           animation: iconAnim 0.3s ease forwards;
           font-size: 30px;
           margin-left: auto;
-
         }
       }
       .user-info-active {
@@ -248,6 +251,10 @@ const version = __APP_VERSION__
         margin-left: 30px;
         font-size: 25px;
         font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 150px;
       }
     }
   }