12 KiB
12 KiB
移动端 H5 页面布局预览
📱 页面结构
数据概览页 (Dashboard)
┌─────────────────────────────────────┐
│ GT Agent [代理端] [企业端] │ ← 固定顶部
│ 🔍 [搜索资产、套餐...] │
├─────────────────────────────────────┤
│ │
│ ┌──────────┬──────────┐ │ ← 2列统计卡片
│ │ 💰 │ 💼 │ │
│ │ 今日收益 │ 累计佣金 │ │
│ │ 1,280 │ 12,580 │ │
│ │ 元 │ 元 │ │
│ └──────────┴──────────┘ │
│ │
│ ┌──────────┬──────────┐ │
│ │ 📦 │ 🎁 │ │
│ │ 资产数量 │ 套餐数量 │ │
│ │ 156 │ 24 │ │
│ │ 个 │ 个 │ │
│ └──────────┴──────────┘ │
│ │
│ ┌───────────────────────────┐ │ ← 快捷操作
│ │ 快捷操作 │ │
│ │ │ │
│ │ 🏦 💰 💳 📦 │ │
│ │ 申请 佣金 余额 我的 │ │
│ │ 提现 钱包 钱包 资产 │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │ ← 收益趋势
│ │ 收益趋势 │ │
│ │ │ │
│ │ [图表区域] │ │
│ │ │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │ ← 最近动态
│ │ 最近动态 查看全部 → │ │
│ │ │ │
│ │ 资产 A001 获得佣金 │ │
│ │ 2分钟前 +¥128.00 │ │
│ │ │ │
│ │ 新增套餐 VIP Pro │ │
│ │ 15分钟前 — │ │
│ │ │ │
│ │ 提现申请已通过 │ │
│ │ 1小时前 -¥2,000.00 │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────┘
💰 佣金钱包详情页
┌─────────────────────────────────────┐
│ GT Agent [代理端] [企业端] │
│ 🔍 [搜索资产、套餐...] │
├─────────────────────────────────────┤
│ │
│ ← 返回 │
│ │
│ ┌───────────────────────────┐ │ ← 橙色渐变卡片
│ │ 佣金余额 │ │
│ │ │ │
│ │ ¥ 12,580.00 │ │ ← 大字号金额
│ │ │ │
│ │ 本月收益 待结算 │ │
│ │ ¥3,280.00 ¥1,520.00 │ │
│ │ │ │
│ │ [立即提现] │ │ ← 白色按钮
│ └───────────────────────────┘ │
│ │
│ 全部 本月 上月 近三月 → │ ← 筛选标签
│ │
│ ┌───────────────────────────┐ │ ← 收益明细列表
│ │ 资产 A001 销售佣金 +128.00│ │
│ │ 2024-03-18 14:32 已到账 │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ 套餐 VIP 订阅佣金 +256.00│ │
│ │ 2024-03-18 10:15 已到账 │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ 资产 C015 续费佣金 +89.50│ │
│ │ 2024-03-17 16:48 已到账 │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────┘
📦 资产管理页
┌─────────────────────────────────────┐
│ GT Agent [代理端] [企业端] │
│ 🔍 [搜索资产、套餐...] │
├─────────────────────────────────────┤
│ │
│ ← 返回 [+ 添加] │
│ │
│ ┌───────────────────────────┐ │ ← 资产卡片
│ │ 📦 │ │
│ │ 资产名称A1│ │
│ │ 编号: AST-2024-001 │ │
│ │ │ │
│ │ [热门] ¥128.00 → │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ 📦 │ │
│ │ 资产名称B2│ │
│ │ 编号: AST-2024-002 │ │
│ │ │ │
│ │ [新品] ¥256.00 → │ │
│ └───────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ │
│ │ 📦 │ │
│ │ 资产名称C3│ │
│ │ 编号: AST-2024-003 │ │
│ │ │ │
│ │ ¥89.50 → │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────┘
🏷️ 标签管理页 (企业端)
┌─────────────────────────────────────┐
│ GT Agent [代理端] [企业端] │
│ 🔍 [搜索资产、套餐...] │
├─────────────────────────────────────┤
│ │
│ ← 返回 [+ 创建] │
│ │
│ ┌──────────┬──────────┐ │ ← 2列标签网格
│ │ 🏷️ ⋮│ 🏷️ ⋮│ │
│ │ 热门推荐 │ 新品上架 │ │
│ │ 热门高转 │ 最近30天 │ │
│ │ 化资产 │ 上架 │ │
│ │ │ │ │
│ │ 已分配12个资产 │ │
│ │ 已分配8个资产 │ │
│ └──────────┴──────────┘ │
│ │
│ ┌──────────┬──────────┐ │
│ │ 🏷️ ⋮│ 🏷️ ⋮│ │
│ │ VIP专享 │ 限时优惠 │ │
│ │ VIP用户 │ 限时促销 │ │
│ │ 专属 │ 活动 │ │
│ │ │ │ │
│ │ 已分配6个资产 │ │
│ │ 已分配15个资产 │ │
│ └──────────┴──────────┘ │
│ │
└─────────────────────────────────────┘
🎨 颜色示例
顶部导航栏
- 背景:
#ffffff(白色) - Logo文字:
#212121(深灰) - 搜索框背景:
#f5f5f5(浅灰) - 阴影:
rgba(0,0,0,0.04)(柔和)
统计卡片
- 卡片背景:
#ffffff - 数值:
#212121(24px 粗体) - 标签:
#9e9e9e(13px) - 图标背景: 对应颜色 20% 透明度
佣金钱包卡
- 背景: 渐变
#ff6700→#ff8533 - 文字:
#ffffff - 按钮:
#ffffff背景,#ff6700文字
快捷操作
- 图标背景: 对应颜色 20% 透明度
- 图标: 对应纯色
- 文字:
#757575
列表项
- 背景:
#ffffff - 标题:
#212121(15px 粗体) - 副标题:
#9e9e9e(12px) - 金额:
#4caf50(绿色) 或#f44336(红色)
标签
- 橙色标签:
#fff7f0背景,#ff6700文字 - 状态标签: 对应颜色 10% 背景, 纯色文字
📏 间距规范
// 页面边距
px-4 // 16px 左右边距
// 卡片间距
gap-3 // 12px 卡片间隔
// 卡片内边距
p-4 // 16px 内边距
// 小元素间距
gap-2 // 8px (图标 + 文字)
gap-1 // 4px (标签间距)
// 大模块间距
mb-4 // 16px 底部间距
mb-6 // 24px 章节间距
🔤 字号规范
40px // 主要金额 (佣金余额)
24px // 统计数值
20px // Logo
18px // 大标题
16px // 卡片标题 / 金额
15px // 列表主标题
14px // 正文 / 按钮文字
13px // 小标签 / 筛选按钮
12px // 次要信息 / 时间
11px // 徽章 / 状态标签
🎯 交互说明
角色切换
- 点击 [代理端] / [企业端] 按钮
- 激活态: 白色背景 + 阴影
- 未激活态: 透明背景 + 灰色文字
快捷操作
- 点击图标跳转对应页面
- 无 Hover 效果 (移动端)
- 点击有轻微缩放反馈
返回按钮
- 左上角固定位置
- 左箭头图标 + "返回"文字
- 点击返回数据概览页
列表滑动
- 垂直滚动
- iOS 风格弹性滚动
- 隐藏滚动条
✅ 设计检查项
- 所有金额显示带 ¥ 符号
- 图标使用 MDI (不用emoji)
- 卡片圆角统一 12px
- 按钮圆角统一 8px
- 橙色仅用于主CTA和强调
- 页面背景使用 #fafafa
- 卡片背景使用 #ffffff
- 字号符合规范
- 间距使用倍数
- 返回按钮可点击
参考: 小米米家APP设计语言