feat: 完善首页内容
This commit is contained in:
@@ -1,9 +1,115 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="index-view"></div>
|
<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">
|
||||||
|
<span>{{ timeInfo.date1 }}</span>
|
||||||
|
<span>{{ timeInfo.week }}</span>
|
||||||
|
<span>{{ timeInfo.date2 }}</span>
|
||||||
|
<span v-show="timeInfo.festival">{{ timeInfo.festival }}</span>
|
||||||
|
<span v-show="timeInfo.solarTerm">{{ timeInfo.solarTerm }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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: '',
|
||||||
|
|
||||||
|
/** 节日 */
|
||||||
|
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.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>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<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>
|
</style>
|
||||||
|
Reference in New Issue
Block a user