消毒页面

src/components/Operator.vue

@@ -1,7 +1,30 @@
 <template>
   <div class="operator_main_content">
-    <div class="left_contaienr"></div>
-    <div class="right_container"></div>
+    <div class="left_contaienr">
+      <div class="info_cards">
+        <div class="card"></div>
+        <div class="card"></div>
+        <div class="card"></div>
+        <div class="card"></div>
+      </div>
+      <div class="warn_wrap">
+        <p class="warn_text">警报信息</p>
+        <div class="detail_btn">详情</div>
+      </div>
+    </div>
+    <div class="right_container">
+      <div class="setting_title">
+        <p>消毒设置</p>
+        <p>SET</p>
+      </div>
+      <div class="set_form"></div>
+      <div class="start">开始消毒</div>
+      <div class="progress">
+        <p class="title">消毒进度</p>
+        <div class="tube"></div>
+        <div class="num">000/100</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -21,6 +44,56 @@
     box-sizing: border-box;
     border-radius: 16px;
     background: #ffffff;
+    padding: 20px;
+    .info_cards {
+      width: 726px;
+      height: 470px;
+      box-sizing: border-box;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      column-gap: 20px;
+      row-gap: 20px;
+      margin-bottom: 20px;
+      .card {
+        width: 353px;
+        height: 225px;
+        border-radius: 17.5px;
+        background: #06518b;
+      }
+    }
+    .warn_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 0 20px;
+      width: 726px;
+      height: 50px;
+      border-radius: 6px;
+      background: #f6f6f6;
+      .warn_text {
+        font-family: Source Han Sans CN;
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        color: #fa1c1c;
+      }
+      .detail_btn {
+        width: 105px;
+        height: 31px;
+        border-radius: 16px;
+        background: #06518b;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: Source Han Sans CN;
+        font-size: 12px;
+        font-weight: normal;
+        letter-spacing: 0.1em;
+        color: #ffffff;
+      }
+    }
   }
   .right_container {
     height: 580px;
@@ -28,6 +101,79 @@
     border-radius: 16px;
     background: #ffffff;
     flex: 1;
+    padding: 42px;
+    padding-top: 32px;
+    .setting_title {
+      width: 340px;
+      height: 45px;
+      border-radius: 23px;
+      background: #06518b;
+      padding: 0 24px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-family: Source Han Sans CN;
+      font-size: 14px;
+      font-weight: normal;
+      letter-spacing: 0.1em;
+      color: #ffffff;
+      margin-bottom: 41px;
+    }
+    .set_form {
+      width: 340px;
+      height: 190px;
+      box-sizing: border-box;
+      margin-bottom: 41px;
+    }
+    .start {
+      margin-bottom: 30px;
+      width: 340px;
+      height: 45px;
+      border-radius: 23px;
+      background: #06518b;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: Source Han Sans CN;
+      font-size: 14px;
+      font-weight: normal;
+      letter-spacing: 0.1em;
+      color: #ffffff;
+    }
+    .progress {
+      width: 340px;
+      height: 114px;
+      border-radius: 16px;
+      opacity: 1;
+      background: #f6f6f6;
+      box-sizing: border-box;
+      padding: 27px 24px 18px 27px;
+      .title {
+        font-family: Source Han Sans CN;
+        font-size: 12px;
+        font-weight: 350;
+        letter-spacing: 0.06em;
+        color: #9e9e9e;
+        margin-bottom: 13px;
+      }
+      .tube {
+        width: 292px;
+        height: 14px;
+        border-radius: 7px;
+        background: #ffffff;
+        margin-bottom: 11px;
+      }
+      .num {
+        display: flex;
+        justify-content: flex-end;
+        font-family: Source Han Sans CN;
+        font-size: 10px;
+        font-weight: normal;
+        letter-spacing: 0.06em;
+        color: #9e9e9e;
+      }
+    }
   }
 }
 </style>

src/pages/Home.vue

@@ -118,8 +118,8 @@
         <p class="text">设置</p>
       </div>
     </div>
-    <!-- <Operator v-if="activeTab == 1" /> -->
-    <Progress v-if="activeTab == 1" />
+    <Operator v-if="activeTab == 1" />
+    <!-- <Progress v-if="activeTab == 1" /> -->
     <LiquidHandle v-if="[2, 3].includes(activeTab)" />
     <Test v-if="activeTab == 4" />
     <Setting v-if="activeTab == 5" />