灭菌机

src/router/routerLXF.js

@@ -60,6 +60,11 @@ export function routesLXF() {
       name: "滚印机",
       component: () => import("../views/equipment/printingMachine.vue"),
     },
+    {
+      path: "sterilizationMachine",
+      name: "灭菌机",
+      component: () => import("../views/equipment/sterilizationMachine.vue"),
+    },
   ];
   return routesLXF;
 }

src/views/equipment/sterilizationMachine.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <van-nav-bar :title="$t('threadHead.title')" left-text="" left-arrow @click-left="onClickLeft"> </van-nav-bar>
+    <equipmentTop></equipmentTop>
+    <div style="padding: 8px 8px 0 8px">
+      <van-row :gutter="8">
+        <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>
+        </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>
+        </van-col>
+      </van-row>
+    </div>
+    <div style="padding: 8px 8px 0 8px">
+      <van-row :gutter="8">
+        <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>
+            <div style="text-align: center">{{ $t("threadHead.textOne") }}</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>
+            <div style="text-align: center">{{ $t("threadHead.textTwo") }}</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>
+            <div style="text-align: center">{{ $t("threadHead.textThree") }}</div>
+          </div>
+        </van-col>
+      </van-row>
+    </div>
+    <div style="padding: 8px 8px 0 8px">
+      <van-row :gutter="8">
+        <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>
+        </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>
+        </van-col>
+      </van-row>
+    </div>
+    <div style="padding: 8px">
+      <van-row :gutter="8">
+        <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>
+            <div style="text-align: center">{{ $t("threadHead.textOne") }}</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>
+            <div style="text-align: center">{{ $t("threadHead.textTwo") }}</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>
+            <div style="text-align: center">{{ $t("threadHead.textThree") }}</div>
+          </div>
+        </van-col>
+      </van-row>
+    </div>
+  </div>
+</template>
+<script setup>
+import equipmentTop from "@/components/equipment-top.vue";
+
+const onClickLeft = () => proxy.$router.push("/main/working");
+</script>
+
+<style lang="scss" scoped>
+.modules {
+  background-color: white;
+  padding: 8px;
+  border-radius: 6px;
+}
+.submodule {
+  background-color: white;
+  padding: 8px;
+  border-radius: 6px;
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    .point {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border-radius: 50px;
+      right: 0px;
+      top: 0px;
+    }
+  }
+  .pointTwo {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50px;
+    right: 8px;
+    top: 8px;
+  }
+}
+.centerStyle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.centerStyleRight {
+  height: 48px;
+  line-height: 48px;
+}
+</style>