From 6f49364da922e2da43fc06ee7f08bb71634820fa Mon Sep 17 00:00:00 2001
From: bluemangoo <chenfy2006@qq.com>
Date: Sun, 3 Dec 2023 10:54:08 +0800
Subject: [PATCH] Fix: clock card

---
 frontend/src/widgets/others/ClockCard.vue | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/widgets/others/ClockCard.vue b/frontend/src/widgets/others/ClockCard.vue
index c6951eb7..b63d3abc 100644
--- a/frontend/src/widgets/others/ClockCard.vue
+++ b/frontend/src/widgets/others/ClockCard.vue
@@ -1,21 +1,30 @@
 <script setup lang="ts">
 import CardPanel from "@/components/CardPanel.vue";
 import type { LayoutCard } from "@/types";
-import { onMounted, onUnmounted, ref } from "vue";
+import { getCurrentInstance, onMounted, onUnmounted, ref } from "vue";
+import dayjs from "dayjs";
 
 // eslint-disable-next-line no-unused-vars
 const props = defineProps<{
   card: LayoutCard;
 }>();
 
-const time = ref(new Date().toTimeString().substring(0, 8));
+const getTime = () => dayjs().format("HH:mm:ss");
+const getDate = () => dayjs().format("YYYY/MM/DD dddd");
+
+const time = ref(getTime());
+const date = ref(getDate());
+const sizeTime = ref(`font-size: 60px;`);
+const sizeDate = ref(`font-size: 10px;`);
 
 let timer: NodeJS.Timer | null;
 
 onMounted(() => {
   timer = setInterval(() => {
-    time.value = new Date().toTimeString().substring(0, 8);
+    time.value = getTime();
   }, 1000);
+  sizeTime.value = (`font-size: ${(<HTMLDivElement>getCurrentInstance()?.refs.boxTime).offsetHeight * .6}px;`);
+  sizeDate.value = (`font-size: ${(<HTMLDivElement>getCurrentInstance()?.refs.boxTime).offsetHeight * .1}px;`);
 });
 
 onUnmounted(() => {
@@ -29,10 +38,13 @@ onUnmounted(() => {
     <CardPanel>
       <template #title>{{ card.title }}</template>
       <template #body>
-        <div class="h-100 items-center flex">
-          <div class="value ml-auto mr-auto mb-8">
+        <div ref="boxTime" class="h-100 items-center flex flex-wrap">
+          <div class="value ml-auto mr-auto mb-2" :style="sizeTime">
             {{ time }}
           </div>
+          <div ref="boxDate" class="ml-auto" :style="sizeDate">
+            {{ date }}
+          </div>
         </div>
       </template>
     </CardPanel>
@@ -42,6 +54,5 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .value {
   font-weight: bolder;
-  font-size: 36px;
 }
 </style>