Henry_Du
f80abe659f
- MobileBottomNav.vue(新增): 三 Tab 底部导航栏（点歌/排期/我的） lg 1024px 以上隐藏；iOS safe-area 兼容；点击平滑滚动或跳转 /account - HeroIllustration.vue(新增): 纯 SVG 广播园艺六花瓣+麦克风插画 紫粉蓝三色渐变花瓣+花蕊麦克风+三层虚线装饰环；viewBox 400×400 - SiteFooter.vue: 改浅色适配（白底+薄边+紫强调色 hover） - index.vue: Hero 插图槽替换为 HeroIllustration；集成 MobileBottomNav； 新增 handleMobileNav 响应底部导航点击事件
41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<template>
|
|
<nav
|
|
class="fixed bottom-0 left-0 right-0 z-40 lg:hidden bg-white border-t border-gray-200 px-4 py-2 pb-[max(8px,env(safe-area-inset-bottom))] backdrop-blur-sm shadow-[0_-2px_16px_rgba(0,0,0,0.04)]"
|
|
>
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<button
|
|
type="button"
|
|
class="flex flex-col items-center justify-center gap-1 py-1 text-gray-500"
|
|
@click="$emit('navigate', 'request-section')"
|
|
>
|
|
<Music :size="20" />
|
|
<span class="text-[11px] font-semibold">点歌</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="flex flex-col items-center justify-center gap-1 py-1 text-gray-500"
|
|
@click="$emit('navigate', 'schedule-section')"
|
|
>
|
|
<CalendarDays :size="20" />
|
|
<span class="text-[11px] font-semibold">排期</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="flex flex-col items-center justify-center gap-1 py-1 text-gray-500"
|
|
@click="$emit('navigate', 'account')"
|
|
>
|
|
<User :size="20" />
|
|
<span class="text-[11px] font-semibold">我的</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Music, CalendarDays, User } from '@lucide/vue'
|
|
|
|
defineEmits(['navigate'])
|
|
</script>
|