mirror/MCSManager
2
0
Fork 1
mirror of https://github.com/MCSManager/MCSManager.git synced 2024-12-21 07:49:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: clock card

Browse Source
This commit is contained in:
unitwk 2023-12-29 16:29:50 +08:00
parent 498b92363c
commit 80052e6afc
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/widgets/others/ClockCard.vue
View File

@ -14,8 +14,6 @@ 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;
@ -23,8 +21,6 @@ onMounted(() => {
timer = setInterval(() => {
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(() => {
@ -38,11 +34,14 @@ onUnmounted(() => {
<CardPanel>
<template #title>{{ card.title }}</template>
<template #body>
<div ref="boxTime" class="h-100 items-center flex flex-wrap">
<div class="value ml-auto mr-auto mb-2" :style="sizeTime">
<div class="h-100 flex-center">
<div class="value pb-40" style="font-size: 60px">
{{ time }}
</div>
<div ref="boxDate" class="ml-auto" :style="sizeDate">
<div
class="ml-auto"
style="font-size: 10px; position: absolute; right: 40px; bottom: 20px"
>
{{ date }}
</div>
</div>