修改页面

src/views/dashboard/console/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="console">
-    <div>
-      功能开发中...
+    <div class="current-time-card">
+      <div class="current-time-time">{{ time }}</div>
+      <div class="current-time-date">{{ date }}</div>
     </div>
+    <!-- <div>
+      功能开发中...
+    </div> -->
     <!-- <CardList></CardList> -->
 
     <!-- <el-row :gutter="20">
@@ -39,12 +43,64 @@
   import TodoList from './widget/TodoList.vue'
   import AboutProject from './widget/AboutProject.vue'
   import { useCommon } from '@/composables/useCommon'
+  import { ref, onMounted, onUnmounted } from 'vue'
 
   defineOptions({ name: 'Console' })
 
   useCommon().scrollToTop()
+
+  const time = ref('')
+  const date = ref('')
+
+  function updateTime() {
+    const now = new Date()
+    time.value = now.toLocaleTimeString('zh-CN', { hour12: false })
+    date.value = now.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' })
+  }
+
+  let timer: number
+  onMounted(() => {
+    updateTime()
+    timer = window.setInterval(updateTime, 1000)
+  })
+  onUnmounted(() => {
+    clearInterval(timer)
+  })
 </script>
 
 <style lang="scss" scoped>
   @use './style';
+  .console {
+    min-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .current-time-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 28px auto;
+    padding: 18px 28px 14px 28px;
+    background: transparent;
+    border-radius: 14px;
+    color: #222;
+    font-family: 'Segoe UI', 'Arial', sans-serif;
+    box-shadow: none;
+    max-width: 400px;
+  }
+  .current-time-time {
+    font-size: 2.4rem;
+    font-weight: bold;
+    letter-spacing: 2px;
+    color: #222;
+  }
+  .current-time-date {
+    font-size: 1.15rem;
+    margin-top: 6px;
+    opacity: 0.88;
+    color: #444;
+  }
 </style>