Update Clock.vue

src/renderer/src/components/Clock.vue

@@ -1,11 +1,7 @@
 <template>
   <v-card class="mx-auto" max-width="750">
     <v-card-text class="text-center">
-      <div
-        :style="{ fontSize: fontSizes[fontSizeIndex] }"
-        class="display-1 font-weight-bold"
-        @click="cycleFontSize"
-      >
+      <div class="display-1 font-weight-bold" @click="cycleFontSize">
         {{ formattedTime }}
       </div>
     </v-card-text>
@@ -17,23 +13,28 @@ import { ref, onMounted } from 'vue';
 import { useIntervalFn } from '@vueuse/core';
 import moment from 'moment';
 
+// 使用ref来存储当前时间
 const formattedTime = ref('');
-const fontSizeIndex = ref(2);
-const fontSizes = ['4rem', '6rem', '8rem'];
+const fontSizeIndex = ref(2); // 默认字体大小为7rem
+const fontSizes = ['3rem', '5rem', '7rem']; //不同分辨率适合使用不同大小的字体
 
+// 在页面加载完成后初始化时间
 onMounted(() => {
   updateTime();
 });
 
 const formatDateTime = (isoString: moment.MomentInput) => moment(isoString).format('HH:mm:ss');
 
+// 更新时间的函数
 function updateTime() {
   const now = new Date();
   formattedTime.value = formatDateTime(now);
 }
 
+// 每隔一分钟更新一次时间
 useIntervalFn(updateTime, 250);
 
+// 切换字体大小的函数
 function cycleFontSize() {
   fontSizeIndex.value = (fontSizeIndex.value + 1) % fontSizes.length;
 }
@@ -41,7 +42,6 @@ function cycleFontSize() {
 
 <style scoped>
 .display-1 {
-  margin-top: 30px;
-  margin-bottom: 30px;
+  font-size: v-bind(fontSizes[fontSizeIndex]); /* 动态绑定字体大小 */
 }
 </style>