<script lang="ts" setup>
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
|
defineOptions({ name: 'BiClockWidget' });
|
|
const clockTime = ref('');
|
const clockDate = ref('');
|
let timer: ReturnType<typeof setInterval>;
|
|
function update() {
|
const now = new Date();
|
clockTime.value = now.toLocaleTimeString('zh-CN', { hour12: false });
|
clockDate.value = now.toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
|
}
|
|
onMounted(() => {
|
update();
|
timer = setInterval(update, 1000);
|
});
|
onBeforeUnmount(() => clearInterval(timer));
|
</script>
|
|
<template>
|
<div class="clock-widget">
|
<span class="clock-time">{{ clockTime }}</span>
|
<span class="clock-date">{{ clockDate }}</span>
|
</div>
|
</template>
|
|
<style scoped>
|
.clock-widget {
|
display: none;
|
flex-direction: column;
|
align-items: flex-end;
|
}
|
|
@media (min-width: 640px) {
|
.clock-widget { display: flex; }
|
}
|
|
.clock-time {
|
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
font-size: 16px;
|
font-weight: 700;
|
font-variant-numeric: tabular-nums;
|
letter-spacing: 1px;
|
color: rgba(230, 236, 250, 0.95);
|
}
|
|
.clock-date {
|
font-size: 10px;
|
color: rgba(180, 190, 215, 0.7);
|
}
|
</style>
|
