ExamAware/ExamShowboard-Legacy
3
0
Fork 0
mirror of https://hub.gitmirror.com/https://github.com/ExamAware/ExamShowboard-Legacy.git synced 2025-04-29 13:46:32 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

add: 点击时间更换显示大小

Browse Source
This commit is contained in:
MKStoler1024 2024-08-23 10:22:25 +08:00 committed by GitHub
parent 18c2b5b5fa
commit d7a35cdf72
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/src/components/Clock.vue
View File

@ -1,7 +1,7 @@
<template>
<v-card class="mx-auto" max-width="600">
<v-card class="mx-auto" max-width="750">
<v-card-text class="text-center">
<div class="display-1 font-weight-bold">
<div class="display-1 font-weight-bold" @click="cycleFontSize">
{{ formattedTime }}
</div>
</v-card-text>
@ -15,13 +15,15 @@ import moment from 'moment';
// 使用ref来存储当前时间
const formattedTime = ref('');
const fontSizeIndex = ref(2); // 默认字体大小为7rem
const fontSizes = ['3rem', '5rem', '7rem'];//不同分辨率适合使用不同大小的字体
// 在页面加载完成后初始化时间
onMounted(() => {
updateTime();
});
const formatDateTime = (isoString) => moment(isoString).format('HH:mm:ss');
const formatDateTime = (isoString: moment.MomentInput) => moment(isoString).format('HH:mm:ss');
// 更新时间的函数
function updateTime() {
@ -31,10 +33,15 @@ function updateTime() {
// 每隔一分钟更新一次时间
useIntervalFn(updateTime, 250);
// 切换字体大小的函数
function cycleFontSize() {
fontSizeIndex.value = (fontSizeIndex.value + 1) % fontSizes.length;
}
</script>
<style scoped>
.display-1 {
font-size: 5rem; /* 调整字号以适应大屏幕 */
font-size: v-bind(fontSizes[fontSizeIndex]); /* 动态绑定字体大小 */
}
</style>