feat: 首页添加放假倒计时,头像旋转动画调整

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-29 23:46:34 +08:00
parent d7b7fc0398
commit 19b770c948
+59 -2
View File
@@ -2,6 +2,42 @@
import { Icon } from '@iconify/vue'
import { siteConfig } from '~/config/site'
const now = new Date()
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
// 下一个周六或周日
const dayOfWeek = today.getDay()
const daysToSat = dayOfWeek === 6 ? 0 : (6 - dayOfWeek + 7) % 7
const nextWeekend = new Date(today)
nextWeekend.setDate(today.getDate() + daysToSat)
const weekendDays = daysUntil(nextWeekend)
// 从 API 获取法定节假日
const { data: holidaysData } = await useAsyncData('holidays', () =>
$fetch('https://timor.tech/api/holiday/year/' + today.getFullYear()).catch(() => null)
)
const nextHoliday = computed(() => {
if (!holidaysData.value) return null
const list = holidaysData.value?.holiday
if (!list) return null
const entries = Object.values(list) as any[]
const upcoming = entries
.filter((h: any) => h.date && new Date(h.date + 'T00:00:00') >= today)
.sort((a: any, b: any) => a.date.localeCompare(b.date))
return upcoming[0] || null
})
const holidayDays = computed(() => {
if (!nextHoliday.value) return null
return daysUntil(new Date(nextHoliday.value.date + 'T00:00:00'))
})
function daysUntil(d: Date): number {
return Math.ceil((d.getTime() - today.getTime()) / 86400000)
}
useHead({
script: [
{ src: '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js', async: true, defer: true },
@@ -80,8 +116,29 @@ onMounted(() => {
</p>
</div>
<!-- 放假倒计时 -->
<div class="w-full max-w-sm anim-fade-in-up anim-delay-3">
<div class="card relative overflow-hidden py-4">
<div class="flex items-center justify-center gap-6 text-sm">
<div class="flex items-center gap-2">
<img src="https://api.iconify.design/mdi:calendar-weekend.svg?color=%239ca3af" alt="" class="w-4 h-4" />
<span class="text-muted-foreground">周末</span>
<span class="font-semibold" style="color: var(--color-primary);">{{ weekendDays }} </span>
</div>
<template v-if="nextHoliday">
<span class="text-muted-foreground/30">|</span>
<div class="flex items-center gap-2">
<img src="https://api.iconify.design/mdi:pine-tree.svg?color=%239ca3af" alt="" class="w-4 h-4" />
<span class="text-muted-foreground">{{ nextHoliday.name }}</span>
<span class="font-semibold" style="color: var(--color-primary);">{{ holidayDays }} </span>
</div>
</template>
</div>
</div>
</div>
<!-- 社交卡片 -->
<div class="w-full max-w-2xl mx-auto anim-fade-in-up anim-delay-3">
<div class="w-full max-w-2xl mx-auto anim-fade-in-up anim-delay-4">
<div class="card relative overflow-hidden py-6">
<div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-0">
<span class="text-5xl font-black tracking-widest" style="color: var(--color-text); opacity: 0.04;">社交</span>
@@ -107,7 +164,7 @@ onMounted(() => {
</div>
<!-- 导航卡片 -->
<div class="w-full max-w-2xl mx-auto anim-fade-in-up anim-delay-4">
<div class="w-full max-w-2xl mx-auto anim-fade-in-up anim-delay-5">
<div class="card relative overflow-hidden py-6">
<div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-0">
<span class="text-5xl font-black tracking-widest" style="color: var(--color-text); opacity: 0.04;">导航</span>