新增大时钟功能

components/index/TopBar.vue

@@ -36,6 +36,7 @@ $fetch("https://data.zziyu.cn/hot/webs").then(data=>{
       <el-sub-menu index="/tools">
         <template #title>工具</template>
         <el-menu-item index="/tools/qqazk/">笔顺码字典</el-menu-item>
+        <el-menu-item index="/tools/time/">大屏时钟</el-menu-item>
       </el-sub-menu>
     </el-menu>
   </client-only>

pages/map/index.vue

@@ -14,9 +14,10 @@ useHead({
 <!--    <NuxtLink to="/data/bilibili">数据收集Bilibili</NuxtLink>-->
 <!--    <NuxtLink to="/data/baidu">数据收集百度</NuxtLink>-->
     <NuxtLink v-for="(item,index) in HotArray" :to="'/data/'+item"  :key="index">数据收集 {{item}}</NuxtLink>
-    <NuxtLink to="/">主页</NuxtLink>
+<!--    <NuxtLink to="/">主页</NuxtLink>-->
     <NuxtLink to="/tools/qqazk/">笔顺码字典首页</NuxtLink>
     <NuxtLink to="/tools/qqazk/about">笔顺码字典关于</NuxtLink>
+    <NuxtLink to="/tools/time/">大屏时钟</NuxtLink>
     <NuxtLink to="/map/qqazk">所有笔顺码</NuxtLink>
   </div>
 </template>

pages/tools/time.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const showTime = ref<Date>(new Date())
+const renewTime = ()=>{
+  console.log("正在更新时间")
+  showTime.value = new Date()
+
+}
+let st: string | number | NodeJS.Timeout | undefined
+onMounted(()=>{
+  st = setInterval(renewTime,1000)
+})
+onBeforeUnmount(()=>{
+  clearInterval(st)
+})
+
+</script>
+
+<template>
+<Title>大屏时钟</Title>
+  <client-only>
+    <div>
+      <el-text>{{showTime.getHours()%12}}</el-text>
+      <el-text style="font-size: xxx-large" type="primary">{{(showTime.getHours()/12>1?"PM":"AM")}}</el-text>
+      <el-text>:</el-text>
+      <el-text>{{showTime.getMinutes()}}</el-text>
+      <el-text style="font-size: 5vw">:</el-text>
+      <el-text style="font-size: 5vw">{{showTime.getSeconds()}}</el-text>
+    </div>
+  </client-only>
+</template>
+
+<style scoped>
+div{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+div *{
+  font-size: 20vw;
+}
+</style>