威海数字文旅 · 组件库
统一视觉 · 多端复用 · 主题配置化 — 基于 design-v2.css 的组件设计系统
📍 导航系统 (PC导航 / 移动Tab / 侧边栏)
PC端顶部导航
背景
rgba(255,255,255,.92) + blur(16px)
移动端底部Tab导航（5项）
🏠
首页
✨
AI旅行
🗺️
地图
🛍️
商城
👤
我的
🗃️ 卡片系统 (暗色卡片 / 玻璃卡片 / 统计卡片)
🔘 按钮系统 (主按钮 / AI按钮 / 描边按钮 / 尺寸规格)
海洋按钮
var(--gradient-ocean)
Hover效果
translateY(-1px) + glow
💬 AI聊天气泡 (用户消息 / AI回复 / 打字动画)
AI
您好！我是AI文旅助手，可以帮您规划威海之旅 😊
🎯 积分组件 (积分徽章 / 可抵扣标签 / 签到按钮)
🎯 1,280 积分
🎯 可抵扣100积分
🏷️ 商品组件 (商品卡片 / 价格 / 购买按钮)
📊 数据展示组件 (统计数字 / KPI卡片 / 趋势指标)
🎨 设计原子 (颜色 / 渐变 / 圆角 / 阴影 / 间距)
📖 使用说明
<link rel="stylesheet" href="/static/design-v2.css">
/* 海洋渐变标题 */
.ocean-heading { background: var(--gradient-ocean); -webkit-background-clip: text; }
/* 玻璃卡片 */
.glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(20px); }
/* 海洋按钮 */
<button class="btn-ocean">按钮</button>
/* AI按钮 */
<button class="btn-ai">AI按钮</button>
/* 主题切换 */
<link rel="stylesheet" href="/static/themes.css">
document.body.classList.add('theme-spring');