mirror/MCSManager
2
0
Fork 1
mirror of https://github.com/MCSManager/MCSManager.git synced 2024-12-27 07:59: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"> <script setup lang="ts">
import CardPanel from "@/components/CardPanel.vue"; import CardPanel from "@/components/CardPanel.vue";
import type { LayoutCard } from "@/types"; 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 // eslint-disable-next-line no-unused-vars
const props = defineProps<{ const props = defineProps<{
card: LayoutCard; 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; let timer: NodeJS.Timer | null;
onMounted(() => { onMounted(() => {
timer = setInterval(() => { timer = setInterval(() => {
time.value = new Date().toTimeString().substring(0, 8); time.value = getTime();
}, 1000); }, 1000);
sizeTime.value = (`font-size: ${(<HTMLDivElement>getCurrentInstance()?.refs.boxTime).offsetHeight * .6}px;`);
sizeDate.value = (`font-size: ${(<HTMLDivElement>getCurrentInstance()?.refs.boxTime).offsetHeight * .1}px;`);
}); });
onUnmounted(() => { onUnmounted(() => {
@ -29,10 +38,13 @@ onUnmounted(() => {
<CardPanel> <CardPanel>
<template #title>{{ card.title }}</template> <template #title>{{ card.title }}</template>
<template #body> <template #body>
<div class="h-100 items-center flex"> <div ref="boxTime" class="h-100 items-center flex flex-wrap">
<div class="value ml-auto mr-auto mb-8"> <div class="value ml-auto mr-auto mb-2" :style="sizeTime">
{{ time }} {{ time }}
</div> </div>
<div ref="boxDate" class="ml-auto" :style="sizeDate">
{{ date }}
</div>
</div> </div>
</template> </template>
</CardPanel> </CardPanel>
@ -42,6 +54,5 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.value { .value {
font-weight: bolder; font-weight: bolder;
font-size: 36px;
} }
</style> </style>