126 lines
2.3 KiB
Vue
126 lines
2.3 KiB
Vue
<template>
|
|
<div class="index-view flex-col">
|
|
<div class="app-view-header">
|
|
<span>{{ appDesc }}</span>
|
|
</div>
|
|
<div class="app-view-content">
|
|
|
|
<div class="date-time">
|
|
<div class="time-info">{{ timeInfo.time }}</div>
|
|
<div class="date-info">
|
|
<div class="date-info-row">
|
|
<span>{{ timeInfo.date1 }}</span>
|
|
<span>{{ timeInfo.week }}</span>
|
|
<span v-show="timeInfo.festival">{{ timeInfo.festival }}</span>
|
|
<span v-show="timeInfo.solarTerm">{{ timeInfo.solarTerm }}</span>
|
|
</div>
|
|
<div class="date-info-row">
|
|
<span>{{ timeInfo.date2 }}</span>
|
|
<span>{{ timeInfo.date3 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
description as appDesc,
|
|
} from '@package-json';
|
|
|
|
import {
|
|
reactive, ref,
|
|
onBeforeMount, onBeforeUnmount,
|
|
} from 'vue';
|
|
|
|
import lunisolar from 'lunisolar';
|
|
|
|
/** 当前时间信息 */
|
|
const timeInfo = reactive({
|
|
|
|
/** 公历 */
|
|
date1: '',
|
|
|
|
/** 农历 */
|
|
date2: '',
|
|
|
|
/** 八字 */
|
|
date3: '',
|
|
|
|
/** 节日 */
|
|
festival: '',
|
|
|
|
/** 节气 */
|
|
solarTerm: '',
|
|
|
|
/** 时间 */
|
|
time: '',
|
|
|
|
/** 星期 */
|
|
week: '',
|
|
|
|
});
|
|
|
|
/** 时间更新定时器 */
|
|
const timeUpdater = ref(null);
|
|
|
|
/** 更新时间信息 */
|
|
function updateTime() {
|
|
|
|
let date = lunisolar();
|
|
|
|
let { markers, solarTerm } = date;
|
|
|
|
// 公历
|
|
timeInfo.date1 = date.format('YYYY 年 M 月 D 日');
|
|
// 农历
|
|
timeInfo.date2 = date.format('lMlD');
|
|
// 八字
|
|
timeInfo.date3 = date.format('cY年 cM月 cD日');
|
|
// 节日
|
|
timeInfo.festival = markers.list.map(v => v.name).join(' & ');
|
|
// 节气
|
|
timeInfo.solarTerm = solarTerm ? solarTerm.name : '';
|
|
// 时间
|
|
timeInfo.time = date.format('HH:mm:ss');
|
|
// 星期
|
|
timeInfo.week = date.format('dddd');
|
|
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
updateTime();
|
|
timeUpdater.value = setInterval(updateTime, 1000);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
clearInterval(timeUpdater.value);
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.app-view-content {
|
|
display: flex;
|
|
}
|
|
|
|
.date-time {
|
|
margin: auto;
|
|
text-align: center;
|
|
|
|
.time-info {
|
|
font-size: 80px;
|
|
}
|
|
|
|
.date-info {
|
|
margin-bottom: 160px;
|
|
font-size: 16px;
|
|
|
|
span:not(:first-child)::before {
|
|
content: " / ";
|
|
}
|
|
}
|
|
}
|
|
</style>
|