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

Merge pull request #1083 from Bluemangoo/clock-panel-fix

Browse Source 
Fix: clock card
This commit is contained in:
unitwk 2023-12-03 16:19:24 +08:00 committed by GitHub
commit 840af89188
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>