状态上方

src/components/Progress.vue

@@ -1,5 +1,17 @@
 <template>
-  <div class="progress_container"></div>
+  <div class="progress_container">
+    <div class="header_wrap">
+      <div class="left_progress">
+        <div class="left_time_tag">剩余时间</div>
+        <p class="time">1000:00:00</p>
+        <div class="progress_bg"></div>
+      </div>
+      <div class="right_btns">
+        <div class="btn active">暂停消毒</div>
+        <div class="btn ml">继续消毒</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup></script>
@@ -11,5 +23,82 @@
   box-sizing: border-box;
   background: #ffffff;
   border-radius: 16px;
+  padding: 20px;
+  padding-bottom: 30px;
+  .header_wrap {
+    display: flex;
+    align-items: center;
+    .left_progress {
+      width: 860px;
+      height: 80px;
+      border-radius: 14px;
+      background: #f6f6f6;
+      box-sizing: border-box;
+      padding: 0 23px;
+      display: flex;
+      align-items: center;
+      .left_time_tag {
+        width: 158.66px;
+        height: 45px;
+        border-radius: 23px;
+        opacity: 1;
+        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;
+        margin-right: 73px;
+      }
+      .time {
+        width: 90px;
+        height: 20px;
+        font-family: Source Han Sans CN;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        color: #000000;
+        margin-right: 85px;
+        display: flex;
+        align-items: center;
+      }
+      .progress_bg {
+        width: 396px;
+        height: 14px;
+        border-radius: 7px;
+        background: #ffffff;
+      }
+    }
+    .right_btns {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      margin-left: 20px;
+      .btn {
+        width: 140px;
+        height: 45px;
+        border-radius: 23px;
+        background: #f6f6f6;
+        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: #d8d8d8;
+      }
+      .active {
+        color: #ffffff;
+        background: #06518b;
+      }
+      .ml {
+        margin-left: 20px;
+      }
+    }
+  }
 }
 </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" />