设备统一零售价 ¥5990，三级代理（经理 / 区域经理 / 董事）分销奖励体系。本页为 UI 交付总入口：包含设计规范、信息架构、21 个页面的实时预览与页面模块清单，可直接交付 UI 设计师与前端开发。
商务稳重 · 科技简约：深蓝主色承载信息与操作，金色专用于等级与收益金额，白底为主、卡片化数据。
小程序 5 个 Tab + 7 个子页；后台 9 个功能模块。可直接对照墨刀 / Figma 建帧。
每屏为可交互的真实页面，点击标题下方链接可打开全屏原型操作。
左侧导航切换模块，表格数据、审核弹层、团队树均可交互演示。
左侧为页面，中间为核心模块，右侧为 UI / 交互要点，便于开发按行验收。
| 页面 | 核心模块 | UI / 交互要点 | 对应文件 |
|---|---|---|---|
| 首页 | Banner 轮播、产品主卡（¥5990）、三级等级入口卡、我的进度卡（登录后显示）、收益快捷入口、推广拉新按钮、公告栏 | 等级卡差异化配色（蓝 / 金 / 黑金）；金额数字放大加粗；未登录隐藏进度卡 | #p-home |
| 产品详情 | 大图轮播、标题 + 统一零售价、我的拿货价、产品参数与图文、台数输入、零售 / 代理双下单、购买须知 | 代理进货价权限控制：游客只见零售价 + 登录引导；登录后按等级显示 4300 / 3800 / 3300 与对应单台利润 | #p-product |
| 我的团队 | 个人信息、团队总览（总人数 / 直接下级 / 累计台数 / 累计奖励）、下级列表、团队奖励明细入口、推荐奖励说明、邀请海报按钮 | 每行显示昵称·等级·注册时间·直接下级·累计拿货；列表下拉加载；树形架构可折叠 | #p-team |
| 订单中心 | 分类 Tab（全部 / 待付款 / 已发货 / 已完成）、订单卡（订单号、时间、台数、类型、金额、状态） | 零售单 / 代理进货单用不同色 pill 区分；状态色：待付款橙、已发货蓝、已完成绿 | #p-orders |
| 订单详情 | 状态条、商品与单价（零售价 / 拿货价）、结算信息、收货地址、物流时间轴、本单关联收益 | 收益卡片金色底，明确写出「零售价 − 拿货价 = 零售利润」，奖励可溯源至来源订单 | #p-order-detail |
| 我的 | 个人信息卡 + 升级进度条、资金卡（可提现 / 待结算 / 累计）、收益构成拆分、功能菜单 | 可提现余额为页面视觉焦点（金色渐变 + 34px）；进度条标注还差台数 | #p-mine |
| 收益明细 | 汇总头（累计 / 可提现 / 待结算）、四类 Tab、流水列表（时间、类型、台数、金额、来源） | 每条收益必须标注来源下级或来源订单，支持按类型筛选；支出项（提现）用灰色区分 | #p-earnings |
| 提现管理 | 可提现余额、提现表单（金额 + 银行卡）、提现规则提示、提现记录 | 银行卡做成卡面视觉；记录状态：待审核 / 已打款 / 已驳回（含驳回原因） | #p-withdraw |
| 代理等级权益 | 三级横向对比卡（升级条件、首次拿货金额、二次进货价、单台零售利润、推荐奖励规则）、差价与奖励示意表 | 横向可滑动对比；董事列用深色 + 金色强调；用于给意向代理看懂模式 | #p-levels |
| 邀请海报 | 海报（头像、昵称、等级、邀请二维码、邀请码、文案）、邀请信息、保存按钮、邀请规则 | 海报为深蓝 + 金色视觉，二维码含邀请码；一键保存到相册；注册自动绑定下级 | #p-poster |
| 地址管理 / 设置 | 地址列表（默认标记 / 编辑删除 / 新增）、账户信息、实名认证、银行卡、通知开关、客服、退出 | 实名未认证用橙色提示；提现前需完成实名（与银行卡一致） | #p-address #p-settings |
| 后台 9 模块 | 登录、仪表盘、用户管理、订单管理、收益与奖励、提现审核、产品管理、系统配置、消息模板 | 数据表格 + 筛选 + 分页；关键操作走弹层二次确认；团队树可视化；等级价格与奖励参数可配置 | admin.html |
index.html — 本页：设计规范 + 信息架构 + 页面预览 + 交付对照表mobile.html + assets/app.css + assets/mobile.js — 小程序端 12 屏可交互原型（含游客 / 三级代理身份切换演示价格权限）admin.html + assets/admin.css + assets/admin.js — PC 后台 9 模块可交互原型mobile.html / admin.html 的结构落地；后台「等级价格配置」「奖励参数配置」为运营可调项，务必与前端价格权限逻辑打通。