# 移动端 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设计语言