feat: 首页添加放假倒计时,头像旋转动画调整
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+59
-2
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user