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 { Icon } from '@iconify/vue'
|
||||||
import { siteConfig } from '~/config/site'
|
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({
|
useHead({
|
||||||
script: [
|
script: [
|
||||||
{ src: '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js', async: true, defer: true },
|
{ src: '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js', async: true, defer: true },
|
||||||
@@ -80,8 +116,29 @@ onMounted(() => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</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="card relative overflow-hidden py-6">
|
||||||
<div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-0">
|
<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>
|
<span class="text-5xl font-black tracking-widest" style="color: var(--color-text); opacity: 0.04;">社交</span>
|
||||||
@@ -107,7 +164,7 @@ onMounted(() => {
|
|||||||
</div>
|
</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="card relative overflow-hidden py-6">
|
||||||
<div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-0">
|
<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>
|
<span class="text-5xl font-black tracking-widest" style="color: var(--color-text); opacity: 0.04;">导航</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user