time width

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.3.4",
+    "moment": "^2.29.4",
     "pinia": "^2.0.32",
     "vue": "^3.2.45",
     "vue-router": "^4.0.13"

src/pages/Home.vue

@@ -125,23 +125,41 @@
     <Setting v-if="activeTab == 5" />
     <div class="other_info">
       <p>IP192.0.0.0.0</p>
-      <p>2023-8-23 11:40:20</p>
+      <p class="time">{{ nowTime }}</p>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import moment from 'moment'
 import Operator from 'cpns/Operator'
 import Progress from 'cpns/Progress'
 import LiquidHandle from 'cpns/LiquidHandle'
 import Setting from 'cpns/Setting'
 import Test from 'cpns/Test'
 const activeTab = ref(1)
+const nowTime = ref('')
+const timer = ref(null)
 
 const changeTab = index => {
   activeTab.value = index
 }
+
+const getdateTime = () => {
+  nowTime.value = moment().format('YYYY-MM-DD HH:mm:ss')
+}
+
+onMounted(() => {
+  getdateTime()
+  timer.value = setInterval(() => {
+    getdateTime()
+  }, 1000)
+})
+
+onBeforeUnmount(() => {
+  timer.value = null
+})
 </script>
 
 <style lang="scss" scoped>
@@ -199,6 +217,10 @@ const changeTab = index => {
     letter-spacing: 0.06em;
     color: #ffffff;
     padding: 0 30px;
+    .time {
+      width: 156px;
+      white-space: nowrap;
+    }
   }
 }
 </style>

yarn.lock

@@ -416,6 +416,11 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"