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 响应底部导航点击事件
43 lines
2.5 KiB
Vue
43 lines
2.5 KiB
Vue
<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>
|