灭菌机页面整改

src/views/equipment/sterilizationMachine.vue

@@ -1,125 +1,115 @@
 <template>
   <div>
-    <van-nav-bar :title="$t('threadHead.title')" left-text="" left-arrow @click-left="onClickLeft"> </van-nav-bar>
+    <van-nav-bar :title="$t('printingMachine.title')" left-text="" left-arrow @click-left="onClickLeft"> </van-nav-bar>
     <equipmentTop></equipmentTop>
-    <div style="padding: 8px 8px 0 8px">
-      <van-row :gutter="8">
+    <div style="padding: 12px 12px 0 12px">
+      <van-row :gutter="12">
         <van-col span="12">
-          <div class="modules">
-            <van-row>
-              <van-col span="10" class="centerStyle">
-                <van-icon style="font-size: 36px" name="setting-o" />
-              </van-col>
-              <van-col span="14">
-                <div>{{ $t("threadHead.state") }}</div>
-                <div style="color: green">{{ $t("threadHead.stateName") }}</div>
-              </van-col>
-            </van-row>
+          <div class="modules" style="display: flex">
+            <div class="img">
+              <img src="../../assets/images/icon_sbzt@2x.png" alt="" />
+            </div>
+            <div>
+              <div class="label">设备状态</div>
+              <div class="value" style="color: #3fbf31">工作中</div>
+            </div>
           </div>
         </van-col>
         <van-col span="12">
-          <div class="modules">
-            <van-row>
-              <van-col span="10" class="centerStyle">
-                <van-icon style="font-size: 36px" name="cart-circle-o" />
-              </van-col>
-              <van-col span="14">
-                <div>{{ $t("threadHead.mode") }}</div>
-                <div style="color: orange">{{ $t("threadHead.modeName") }}</div>
-              </van-col>
-            </van-row>
+          <div class="modules" style="display: flex">
+            <div class="img">
+              <img src="../../assets/images/icon_gzms@2x.png" alt="" />
+            </div>
+            <div>
+              <div class="label">工作模式</div>
+              <div class="value" style="color: #ff8800">Humidity Up</div>
+            </div>
           </div>
         </van-col>
       </van-row>
     </div>
-    <div style="padding: 8px 8px 0 8px">
-      <van-row :gutter="8">
+    <div style="margin: 12px">
+      <van-row :gutter="12">
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="vip-card-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <div style="font-size: 26px; height: 41px; margin-top: 4px">60 bar</div>
+              <img style="position: absolute; width: 16px; height: 16px; right: -4px; top: -4px" src="../../assets/images/icon_ss@2x.png" alt="" />
             </div>
-            <div style="text-align: center">{{ $t("threadHead.textOne") }}</div>
+            <div style="text-align: center; font-size: 14px; color: #666666; height: 19px; line-height: 19px">气压</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="vip-card-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <div style="font-size: 26px; height: 41px; margin-top: 4px">80℃</div>
+              <img style="position: absolute; width: 16px; height: 16px; right: -4px; top: -4px" src="../../assets/images/icon_xj@2x.png" alt="" />
             </div>
-            <div style="text-align: center">{{ $t("threadHead.textTwo") }}</div>
+            <div style="text-align: center; font-size: 14px; color: #666666; height: 19px; line-height: 19px">Gas Temp</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="vip-card-o" />
-              <div class="point" style="background-color: #c8c9cc"></div>
+              <div style="font-size: 26px; height: 41px; margin-top: 4px">35.3℃</div>
+              <img style="position: absolute; width: 16px; height: 16px; right: -4px; top: -4px" src="../../assets/images/icon_zc@2x.png" alt="" />
             </div>
-            <div style="text-align: center">{{ $t("threadHead.textThree") }}</div>
+            <div style="text-align: center; font-size: 14px; color: #666666; height: 19px; line-height: 19px">E.O.温度</div>
           </div>
         </van-col>
       </van-row>
     </div>
-    <div style="padding: 8px 8px 0 8px">
-      <van-row :gutter="8">
+    <div style="margin: 12px">
+      <van-row :gutter="12">
         <van-col span="12">
-          <div class="modules">
-            <van-row>
-              <van-col span="10" class="centerStyle">
-                <van-icon style="font-size: 36px" name="setting-o" />
-              </van-col>
-              <van-col span="14">
-                <div>{{ $t("threadHead.state") }}</div>
-                <div style="color: green">{{ $t("threadHead.stateName") }}</div>
-              </van-col>
-            </van-row>
+          <div class="submodule" style="position: relative; display: flex">
+            <img class="imgTwo" src="../../assets/images/icon_sw.png" alt="" />
+            <div>
+              <div style="height: 25px; line-height: 25px; padding-left: 12px; color: black; font-weight: 700">65.7℃</div>
+              <div style="height: 25px; line-height: 25px; padding-left: 12px; color: #666666">水温</div>
+            </div>
+            <img style="position: absolute; width: 16px; height: 16px; right: 8px; top: 8px" src="../../assets/images/icon_zc@2x.png" alt="" />
           </div>
         </van-col>
         <van-col span="12">
-          <div class="modules">
-            <van-row>
-              <van-col span="10" class="centerStyle">
-                <van-icon style="font-size: 36px" name="cart-circle-o" />
-              </van-col>
-              <van-col span="14">
-                <div>{{ $t("threadHead.mode") }}</div>
-                <div style="color: orange">{{ $t("threadHead.modeName") }}</div>
-              </van-col>
-            </van-row>
+          <div class="submodule" style="position: relative; display: flex">
+            <img class="imgTwo" src="../../assets/images/icon_shidu.png" alt="" />
+            <div>
+              <div style="height: 25px; line-height: 25px; padding-left: 12px; color: black; font-weight: 700">40%</div>
+              <div style="height: 25px; line-height: 25px; padding-left: 12px; color: #666666">湿度</div>
+            </div>
+            <img style="position: absolute; width: 16px; height: 16px; right: 8px; top: 8px" src="../../assets/images/icon_zc@2x.png" alt="" />
           </div>
         </van-col>
       </van-row>
     </div>
-    <div style="padding: 8px">
-      <van-row :gutter="8">
+    <div style="margin: 12px">
+      <van-row :gutter="12">
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="vip-card-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <div style="font-size: 26px; height: 41px; margin-top: 4px">80℃</div>
+              <img style="position: absolute; width: 16px; height: 16px; right: -4px; top: -4px" src="../../assets/images/icon_ss@2x.png" alt="" />
             </div>
-            <div style="text-align: center">{{ $t("threadHead.textOne") }}</div>
+            <div style="text-align: center; font-size: 14px; color: #666666; height: 19px; line-height: 19px">平均温度</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="vip-card-o" />
-              <div class="point" style="background-color: #12cc12"></div>
+              <div style="font-size: 26px; height: 41px; margin-top: 4px">80℃</div>
+              <img style="position: absolute; width: 16px; height: 16px; right: -4px; top: -4px" src="../../assets/images/icon_xj@2x.png" alt="" />
             </div>
-            <div style="text-align: center">{{ $t("threadHead.textTwo") }}</div>
+            <div style="text-align: center; font-size: 14px; color: #666666; height: 19px; line-height: 19px">温箱1#</div>
           </div>
         </van-col>
         <van-col span="8">
           <div class="submodule">
             <div class="top">
-              <van-icon style="font-size: 30px" name="vip-card-o" />
-              <div class="point" style="background-color: #c8c9cc"></div>
+              <div style="font-size: 26px; height: 41px; margin-top: 4px">35.3℃</div>
+              <img style="position: absolute; width: 16px; height: 16px; right: -4px; top: -4px" src="../../assets/images/icon_zc@2x.png" alt="" />
             </div>
-            <div style="text-align: center">{{ $t("threadHead.textThree") }}</div>
+            <div style="text-align: center; font-size: 14px; color: #666666; height: 19px; line-height: 19px">温箱2#</div>
           </div>
         </van-col>
       </van-row>
@@ -135,27 +125,57 @@ const onClickLeft = () => proxy.$router.push("/main/working");
 <style lang="scss" scoped>
 .modules {
   background-color: white;
-  padding: 8px;
-  border-radius: 6px;
+  padding: 12px;
+  border-radius: 5px;
+  .img {
+    width: 50px;
+    height: 50px;
+    margin-right: 8px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .label {
+    font-size: 12px;
+    color: #666;
+  }
+  .value {
+    font-weight: bold;
+    font-size: 16px;
+    color: #ff8800;
+    margin-top: 6px;
+    text-align: center;
+    height: 21px;
+    line-height: 21px;
+  }
 }
 .submodule {
   background-color: white;
-  padding: 8px;
-  border-radius: 6px;
+  padding: 12px;
+  border-radius: 5px;
   .top {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
+    .imgOne {
+      width: 41px;
+      height: 41px;
+    }
     .point {
       position: absolute;
       width: 12px;
       height: 12px;
       border-radius: 50px;
       right: 0px;
-      top: 0px;
+      top: -4px;
     }
   }
+  .imgTwo {
+    width: 50px;
+    height: 50px;
+  }
   .pointTwo {
     position: absolute;
     width: 12px;
@@ -165,13 +185,4 @@ const onClickLeft = () => proxy.$router.push("/main/working");
     top: 8px;
   }
 }
-.centerStyle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.centerStyleRight {
-  height: 48px;
-  line-height: 48px;
-}
 </style>