From bb4e9d4896a577d59616020a44814db78be752b7 Mon Sep 17 00:00:00 2001
From: ZtRXR <Zengtudor@outlook.com>
Date: Sat, 9 Sep 2023 18:47:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A4=A7=E6=97=B6=E9=92=9F?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/index/TopBar.vue |  1 +
 pages/map/index.vue         |  3 ++-
 pages/tools/time.vue        | 42 +++++++++++++++++++++++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 pages/tools/time.vue

diff --git a/components/index/TopBar.vue b/components/index/TopBar.vue
index d64bd49..73ffa74 100644
--- a/components/index/TopBar.vue
+++ b/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>
diff --git a/pages/map/index.vue b/pages/map/index.vue
index 70653da..52b8af2 100644
--- a/pages/map/index.vue
+++ b/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>
diff --git a/pages/tools/time.vue b/pages/tools/time.vue
new file mode 100644
index 0000000..f850218
--- /dev/null
+++ b/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>
\ No newline at end of file