From e85b788509c650b5e9cb31189e1219c6fb764ad7 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Mon, 4 Sep 2023 09:44:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Operator.vue |   2 +-
 src/pages/Home.vue          | 102 ++++++++++++++++++++++++++++++++++++++------
 2 files changed, 90 insertions(+), 14 deletions(-)

diff --git a/src/components/Operator.vue b/src/components/Operator.vue
index 1b68449..201b8a2 100644
--- a/src/components/Operator.vue
+++ b/src/components/Operator.vue
@@ -217,7 +217,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .operator_main_content {
-  margin-bottom: 30px;
+  margin-bottom: 19px;
   height: 580px;
   box-sizing: border-box;
   display: flex;
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index af4c8ee..6c98142 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -151,12 +151,52 @@
     />
     <LiquidHandle v-if="activeTab == 2" :tabType="1" />
     <LiquidHandle v-if="activeTab == 3" :tabType="2" />
-    <!-- <Test v-if="activeTab == 4" /> -->
-    <Test />
+    <Test v-if="activeTab == 4" />
     <Setting v-if="activeTab == 5" />
     <div class="other_info">
-      <p>IP {{ settingStore.deviceIp }}</p>
-      <p class="time">{{ nowTime }}</p>
+      <p class="ip">IP {{ settingStore.deviceIp }}</p>
+      <div class="time_wrap">
+        <div class="date_wrap">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            fill="none"
+            version="1.1"
+            width="23"
+            height="23"
+            viewBox="0 0 23 23"
+          >
+            <g>
+              <path
+                d="M0.0000112331,21.1495C0.0000111223,22.1715,0.82871,23,1.85096,23L21.149,23C22.1713,23,23,22.1715,23,21.1495L23,8.16307L0.0000112331,8.16307L0.0000112331,21.1495ZM15.6071,11.5028L17.25,11.5028C17.702,11.5051,18.0671,11.8721,18.0671,12.324C18.0671,12.7759,17.702,13.1428,17.25,13.1452L15.6071,13.1452C15.1552,13.1428,14.79,12.7759,14.79,12.324C14.79,11.8721,15.1552,11.5051,15.6071,11.5028ZM10.6786,11.5028L12.3214,11.5028C12.7734,11.5051,13.1385,11.8721,13.1385,12.324C13.1385,12.7759,12.7734,13.1428,12.3214,13.1452L10.6786,13.1452C10.2266,13.1428,9.86145,12.7759,9.86145,12.324C9.86145,11.8721,10.2266,11.5051,10.6786,11.5028ZM10.6786,16.4849L12.3214,16.4849C12.7734,16.4872,13.1386,16.8542,13.1386,17.3061C13.1386,17.758,12.7734,18.125,12.3214,18.1274L10.6786,18.1274C10.2266,18.125,9.86138,17.758,9.86138,17.3061C9.86138,16.8542,10.2266,16.4872,10.6786,16.4849ZM5.75003,11.5028L7.3929,11.5028C7.84487,11.5051,8.21001,11.8721,8.21001,12.324C8.21001,12.7759,7.84487,13.1428,7.3929,13.1452L5.75003,13.1452C5.29805,13.1428,4.93291,12.7759,4.93291,12.324C4.93291,11.8721,5.29805,11.5051,5.75003,11.5028ZM5.75003,16.4849L7.3929,16.4849C7.8449,16.4872,8.21009,16.8542,8.21009,17.3061C8.21009,17.758,7.8449,18.125,7.3929,18.1274L5.75003,18.1274C5.29803,18.125,4.93284,17.758,4.93284,17.3061C4.93284,16.8542,5.29803,16.4872,5.75003,16.4849ZM23,3.49847C23,2.47646,22.1713,1.64796,21.1491,1.64796L18.0714,1.64796L18.0714,0.925278C18.0714,0.414274,17.6571,0.0000222804,17.146,0.0000222804C16.6348,0.0000222804,16.2205,0.414273,16.2205,0.925278L16.2205,1.64796L6.77952,1.64796L6.77952,0.925278C6.77952,0.414274,6.36517,0.0000226113,5.85405,0.0000226113C5.34292,0.0000226113,4.92857,0.414274,4.92857,0.925278L4.92857,1.64796L1.85096,1.64796C0.82871,1.64796,0.0000112442,2.47646,0.0000112331,3.49847L0.0000112331,6.37826L23,6.37826L23,3.49847Z"
+                fill="#FFFFFF"
+                fill-opacity="1"
+              />
+            </g>
+          </svg>
+          <p class="ml">{{ moment(nowTime).format('YYYY-MM-DD') }}</p>
+        </div>
+        <div class="min_wrap">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            fill="none"
+            version="1.1"
+            width="22"
+            height="22"
+            viewBox="0 0 22 22"
+          >
+            <g>
+              <path
+                d="M11,22C17.075,22,22,17.075,22,11C22,4.92497,17.075,0,11,0C4.92497,0,0,4.92497,0,11C0,17.075,4.92497,22,11,22ZM6.29173,14.5417L10.175,10.6582L10.175,6.05C10.175,5.59436,10.5444,5.225,11,5.225C11.4556,5.225,11.825,5.59436,11.825,6.05L11.825,11C11.825,11.2188,11.738,11.4286,11.5833,11.5833L7.45828,15.7083C7.13785,16.0401,6.60764,16.0447,6.28149,15.7185C5.95534,15.3924,5.95995,14.8622,6.29173,14.5417Z"
+                fill="#FFFFFF"
+                fill-opacity="1"
+              />
+            </g>
+          </svg>
+          <p class="ml time_txt">{{ moment(nowTime).format('HH:mm:ss') }}</p>
+        </div>
+      </div>
       <div class="log_out_btn style-btn" @click="handleLogout">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -357,29 +397,65 @@ const handleLogout = () => {
     justify-content: space-between;
     align-items: center;
     font-family: Source Han Sans CN;
-    font-size: 14px;
+    font-size: 20px;
+    font-weight: bold;
     font-weight: normal;
+    height: 45px;
     letter-spacing: 0.06em;
     color: #ffffff;
-    padding: 0 30px;
+    padding: 0 10px;
     position: relative;
+    box-sizing: border-box;
+    .time_wrap {
+      display: flex;
+      align-items: center;
+      margin-left: 30px;
+      .date_wrap {
+        display: flex;
+        align-items: center;
+        font-family: Source Han Sans CN;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0.06em;
+        color: #ffffff;
+        margin-left: 10px;
+        margin-right: 24px;
+        .ml {
+          margin-left: 10px;
+        }
+      }
+      .min_wrap {
+        margin-right: 10px;
+        display: flex;
+        align-items: center;
+        font-family: Source Han Sans CN;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0.06em;
+        color: #ffffff;
+        .ml {
+          margin-left: 10px;
+        }
+        .time_txt {
+          width: 94px;
+        }
+      }
+    }
     .log_out_btn {
-      width: 123px;
+      width: 124px;
       height: 45px;
       border-radius: 23px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #064b81;
-      right: 276px;
-      top: -17px;
+      right: 370px;
+      top: 0px;
       position: absolute;
       z-index: 1;
     }
-    .time {
-      width: 156px;
-      white-space: nowrap;
-    }
   }
 }
 .wrapper {