art-design/src/views/dashboard/console/index.vue

<template>
  <div class="console">
    <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">
      <el-col :sm="24" :md="12" :lg="10">
        <ActiveUser />
      </el-col>
      <el-col :sm="24" :md="12" :lg="14">
        <SalesOverview />
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :sm="24" :md="24" :lg="12">
        <NewUser />
      </el-col>
      <el-col :sm="24" :md="12" :lg="6">
        <Dynamic />
      </el-col>
      <el-col :sm="24" :md="12" :lg="6">
        <TodoList />
      </el-col>
    </el-row> -->

    <!-- <AboutProject /> -->
  </div>
</template>

<script setup lang="ts">
  import CardList from './widget/CardList.vue'
  import ActiveUser from './widget/ActiveUser.vue'
  import SalesOverview from './widget/SalesOverview.vue'
  import NewUser from './widget/NewUser.vue'
  import Dynamic from './widget/Dynamic.vue'
  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>