From f80abe659f1d345be86e6a5ae9c7523be85048b4 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sun, 13 Sep 2026 18:43:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E4=B8=8E=20Hero=20?=
 =?UTF-8?q?=E6=8F=92=E7=94=BB=E5=8F=8A=E9=A1=B5=E8=84=9A=E6=B5=85=E8=89=B2?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MobileBottomNav.vue(新增): 三 Tab 底部导航栏（点歌/排期/我的）
  lg 1024px 以上隐藏；iOS safe-area 兼容；点击平滑滚动或跳转 /account
- HeroIllustration.vue(新增): 纯 SVG 广播园艺六花瓣+麦克风插画
  紫粉蓝三色渐变花瓣+花蕊麦克风+三层虚线装饰环；viewBox 400×400
- SiteFooter.vue: 改浅色适配（白底+薄边+紫强调色 hover）
- index.vue: Hero 插图槽替换为 HeroIllustration；集成 MobileBottomNav；
  新增 handleMobileNav 响应底部导航点击事件
---
 app/components/SiteFooter.vue          | 13 ++++----
 app/components/UI/HeroIllustration.vue | 42 ++++++++++++++++++++++++++
 app/components/UI/MobileBottomNav.vue  | 40 ++++++++++++++++++++++++
 app/pages/index.vue                    | 17 ++++++++++-
 4 files changed, 105 insertions(+), 7 deletions(-)
 create mode 100644 app/components/UI/HeroIllustration.vue
 create mode 100644 app/components/UI/MobileBottomNav.vue

diff --git a/app/components/SiteFooter.vue b/app/components/SiteFooter.vue
index c5d528d..6021b2a 100644
--- a/app/components/SiteFooter.vue
+++ b/app/components/SiteFooter.vue
@@ -96,8 +96,9 @@ onMounted(() => {
   text-align: center;
   padding: 20px 0;
   margin-top: 30px;
-  border-top: 1px solid var(--border-primary);
+  border-top: 1px solid #E5E7EB;
   width: 100%;
+  background-color: #ffffff;
 }
 
 .footer-info {
@@ -109,7 +110,7 @@ onMounted(() => {
 }
 
 .footer-item {
-  color: var(--text-tertiary);
+  color: #374151;
   font-size: 12px;
   white-space: nowrap;
 }
@@ -117,7 +118,7 @@ onMounted(() => {
 .footer-item:not(:last-child)::after {
   content: ' | ';
   margin: 0 10px;
-  color: var(--text-quaternary);
+  color: #6B7280;
 }
 
 .footer-item a {
@@ -127,7 +128,7 @@ onMounted(() => {
 }
 
 .footer-item a:hover {
-  color: var(--text-secondary);
+  color: #7C3AED;
 }
 
 .icp-link,
@@ -139,7 +140,7 @@ onMounted(() => {
 
 .icp-link:hover,
 .voicehub-link:hover {
-  color: var(--text-secondary);
+  color: #7C3AED;
 }
 
 .netlify-badge {
@@ -150,7 +151,7 @@ onMounted(() => {
 
 .netlify-badge img {
   height: 16px;
-  opacity: 0.8;
+  opacity: 0.9;
   transition: opacity 0.2s ease;
 }
 
diff --git a/app/components/UI/HeroIllustration.vue b/app/components/UI/HeroIllustration.vue
new file mode 100644
index 0000000..ebc7205
--- /dev/null
+++ b/app/components/UI/HeroIllustration.vue
@@ -0,0 +1,42 @@
+<template>
+  <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" style="display:block; width:100%; height:auto; max-width:100%; max-width:320px; margin:0 auto;">
+    <defs>
+      <linearGradient id="petalGrad" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0%" stop-color="#A855F7"/>
+        <stop offset="50%" stop-color="#EC4899"/>
+        <stop offset="100%" stop-color="#3B82F6"/>
+      </linearGradient>
+      <linearGradient id="micGrad" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="#1f2937"/>
+        <stop offset="100%" stop-color="#111827"/>
+      </linearGradient>
+    </defs>
+
+    <ellipse cx="200" cy="80" rx="50" ry="110" fill="url(#petalGrad)" opacity="0.92" transform="rotate(0 200 190)"/>
+    <ellipse cx="200" cy="80" rx="50" ry="110" fill="url(#petalGrad)" opacity="0.92" transform="rotate(60 200 190)"/>
+    <ellipse cx="200" cy="80" rx="50" ry="110" fill="url(#petalGrad)" opacity="0.92" transform="rotate(120 200 190)"/>
+    <ellipse cx="200" cy="80" rx="50" ry="110" fill="url(#petalGrad)" opacity="0.92" transform="rotate(180 200 190)"/>
+    <ellipse cx="200" cy="80" rx="50" ry="110" fill="url(#petalGrad)" opacity="0.92" transform="rotate(240 200 190)"/>
+    <ellipse cx="200" cy="80" rx="50" ry="110" fill="url(#petalGrad)" opacity="0.92" transform="rotate(300 200 190)"/>
+
+    <circle cx="310" cy="190" r="4" fill="url(#petalGrad)"/>
+    <circle cx="255" cy="285.26" r="4" fill="url(#petalGrad)"/>
+    <circle cx="145" cy="285.26" r="4" fill="url(#petalGrad)"/>
+    <circle cx="90" cy="190" r="4" fill="url(#petalGrad)"/>
+    <circle cx="145" cy="94.74" r="4" fill="url(#petalGrad)"/>
+    <circle cx="255" cy="94.74" r="4" fill="url(#petalGrad)"/>
+
+    <circle cx="200" cy="200" r="170" stroke="url(#petalGrad)" stroke-width="1" stroke-dasharray="2 6" fill="none"/>
+    <circle cx="200" cy="200" r="185" stroke="url(#petalGrad)" stroke-width="1" stroke-dasharray="2 6" fill="none"/>
+    <circle cx="200" cy="200" r="200" stroke="url(#petalGrad)" stroke-width="1" stroke-dasharray="2 6" fill="none"/>
+
+    <circle cx="200" cy="190" r="46" fill="#ffffff" stroke="url(#petalGrad)" stroke-width="3"/>
+    <circle cx="200" cy="190" r="28" fill="url(#micGrad)"/>
+    <rect x="195" y="216" width="10" height="80" rx="5" fill="#1f2937"/>
+    <rect x="170" y="288" width="60" height="10" rx="5" fill="#111827"/>
+    <line x1="150" y1="304" x2="250" y2="304" stroke="#D1D5DB" stroke-width="2" stroke-linecap="round"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/app/components/UI/MobileBottomNav.vue b/app/components/UI/MobileBottomNav.vue
new file mode 100644
index 0000000..f4586b8
--- /dev/null
+++ b/app/components/UI/MobileBottomNav.vue
@@ -0,0 +1,40 @@
+<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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index ca013c7..39e73a7 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -85,7 +85,9 @@
           </div>
         </div>
 
-        <div id="hero-illustration-slot" class="w-full max-w-sm"></div>
+        <div id="hero-illustration-slot" class="w-full max-w-sm">
+          <ClientOnly><HeroIllustration /></ClientOnly>
+        </div>
       </section>
 
       <!-- Section Schedule -->
@@ -489,6 +491,10 @@
 
       <!-- 页脚信息显示 -->
       <SiteFooter />
+
+      <ClientOnly>
+        <MobileBottomNav @navigate="handleMobileNav" />
+      </ClientOnly>
     </div>
 
     <!-- 规则弹窗 -->
@@ -616,6 +622,8 @@ import { useRouter } from 'vue-router'
 import logo from '~~/public/images/logo.png'
 import Icon from '~/components/UI/Icon.vue'
 import ConfirmDialog from '~/components/UI/ConfirmDialog.vue'
+import HeroIllustration from '~/components/UI/HeroIllustration.vue'
+import MobileBottomNav from '~/components/UI/MobileBottomNav.vue'
 
 import { useNotifications } from '~/composables/useNotifications'
 import { useSiteConfig } from '~/composables/useSiteConfig'
@@ -1477,6 +1485,13 @@ const scrollToSection = (id) => {
   if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
 
+// 移动端底部导航处理
+const handleMobileNav = (target) => {
+  if (target === 'account') { router.push('/account'); return }
+  const el = document.getElementById(target)
+  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
 // 添加导航到登录页面的方法
 const navigateToLogin = () => {
   router.push('/login')