293 lines
12 KiB
Markdown
293 lines
12 KiB
Markdown
# 移动端 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% 背景, 纯色文字
|
|
|
|
---
|
|
|
|
## 📏 间距规范
|
|
|
|
```scss
|
|
// 页面边距
|
|
px-4 // 16px 左右边距
|
|
|
|
// 卡片间距
|
|
gap-3 // 12px 卡片间隔
|
|
|
|
// 卡片内边距
|
|
p-4 // 16px 内边距
|
|
|
|
// 小元素间距
|
|
gap-2 // 8px (图标 + 文字)
|
|
gap-1 // 4px (标签间距)
|
|
|
|
// 大模块间距
|
|
mb-4 // 16px 底部间距
|
|
mb-6 // 24px 章节间距
|
|
```
|
|
|
|
---
|
|
|
|
## 🔤 字号规范
|
|
|
|
```scss
|
|
40px // 主要金额 (佣金余额)
|
|
24px // 统计数值
|
|
20px // Logo
|
|
18px // 大标题
|
|
16px // 卡片标题 / 金额
|
|
15px // 列表主标题
|
|
14px // 正文 / 按钮文字
|
|
13px // 小标签 / 筛选按钮
|
|
12px // 次要信息 / 时间
|
|
11px // 徽章 / 状态标签
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 交互说明
|
|
|
|
### 角色切换
|
|
- 点击 [代理端] / [企业端] 按钮
|
|
- 激活态: 白色背景 + 阴影
|
|
- 未激活态: 透明背景 + 灰色文字
|
|
|
|
### 快捷操作
|
|
- 点击图标跳转对应页面
|
|
- 无 Hover 效果 (移动端)
|
|
- 点击有轻微缩放反馈
|
|
|
|
### 返回按钮
|
|
- 左上角固定位置
|
|
- 左箭头图标 + "返回"文字
|
|
- 点击返回数据概览页
|
|
|
|
### 列表滑动
|
|
- 垂直滚动
|
|
- iOS 风格弹性滚动
|
|
- 隐藏滚动条
|
|
|
|
---
|
|
|
|
## ✅ 设计检查项
|
|
|
|
- [ ] 所有金额显示带 ¥ 符号
|
|
- [ ] 图标使用 MDI (不用emoji)
|
|
- [ ] 卡片圆角统一 12px
|
|
- [ ] 按钮圆角统一 8px
|
|
- [ ] 橙色仅用于主CTA和强调
|
|
- [ ] 页面背景使用 #fafafa
|
|
- [ ] 卡片背景使用 #ffffff
|
|
- [ ] 字号符合规范
|
|
- [ ] 间距使用倍数
|
|
- [ ] 返回按钮可点击
|
|
|
|
---
|
|
|
|
**参考**: 小米米家APP设计语言
|