feat(frontend): 移动端底部导航与 Hero 插画及页脚浅色化

- 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/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')