添加系统时间显示

src/components/zidingyi/topHeader.vue

@@ -4,14 +4,40 @@
     <!-- <dv-decoration-5 class="header-center-decoration" /> -->
     <dv-decoration-8 class="header-right-decoration" :reverse="false" />
     <div class="center-title" :style="'font-size:'+$fontSize(0.3)+'px'">{{Name}}</div>
+    <div class="center-date" :style="'font-size:'+$fontSize(0.25)+'px'">{{currentTime}}</div>
     <!-- ({{ Times[0]+ ' 到 ' +Times[1] }}) -->
+    <!-- <div style="font-size: 1rem;">系统时间</div> -->
   </div>
 </template>
 
 <script>
 export default {
   name: 'TopHeader',
-  props: ['Name', 'Times']
+  props: ['Name', 'Times'],
+  data(){
+    return{
+      timer:'',
+      currentTime:null
+    }
+  },
+  mounted() {
+    this.updateTime() // 立即更新一次
+    this.timer = setInterval(this.updateTime, 1000) // 每秒更新一次
+  },
+  beforeDestroy() {
+    clearInterval(this.timer) // 组件销毁时清除定时器
+  },
+  methods:{
+    updateTime() {
+      const now = new Date()
+      const month = now.getMonth() + 1
+      const day = now.getDate()
+      const hours = now.getHours().toString().padStart(2, '0')
+      const minutes = now.getMinutes().toString().padStart(2, '0')
+      
+      this.currentTime = `${month}月${day}日 ${hours}:${minutes}`
+    }
+  }
 }
 </script>
 
@@ -42,6 +68,13 @@ export default {
     top: 0.15rem;
     transform: translateX(-50%);
   }
-  
+  .center-date{
+    position: absolute;
+    // font-size: 30px;
+    font-weight: bold;
+    right: 0;
+    top: 0.33rem;
+    transform: translateX(-50%);
+  }
 }
 </style>