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 响应底部导航点击事件
2026-09-13 18:43:08 +08:00
parent 1a2031325b
commit f80abe659f
4 changed files with 105 additions and 7 deletions
@@ -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>