# 页面截图与还原指南 本文档用于小程序和移动端APP开发时的界面还原参考。 ## 设计规范 ### 颜色系统 ```css /* 主色调 */ --app-brand: #00CED1; /* 主品牌色 - 青色 */ --app-brand-light: #00CED1/20; /* 浅品牌色 */ /* 辅助色 */ --gold: #FFD700; /* 金色 - 用于收益/VIP */ --green: #07C160; /* 绿色 - 微信相关 */ --orange: #FFA500; /* 橙色 - 警告/即将过期 */ --red: #E91E63; /* 红色 - 重要/热门 */ --purple: #7B61FF; /* 紫色 - 资源对接 */ /* 背景色 */ --bg-primary: #000000; /* 纯黑背景 */ --bg-card: #1c1c1e; /* 卡片背景 */ --bg-input: #0a0a0a; /* 输入框背景 */ /* 文字色 */ --text-primary: #ffffff; /* 主文字 */ --text-secondary: rgba(255,255,255,0.7); /* 次要文字 */ --text-tertiary: rgba(255,255,255,0.4); /* 三级文字 */ ``` ### 字体规范 ``` 标题: 18-24px, font-weight: 600-700 副标题: 14-16px, font-weight: 500 正文: 14px, font-weight: 400 辅助文字: 12px, font-weight: 400 极小文字: 10px, font-weight: 400 ``` ### 圆角规范 ``` 按钮: 12px (rounded-xl) 卡片: 16px (rounded-2xl) 头像: 50% (rounded-full) 输入框: 12px (rounded-xl) 标签: 6px (rounded-md) ``` --- ## 页面清单 ### 1. 首页 (`/`) **页面尺寸**: 375 x 812 (iPhone标准) **页面结构**: ``` ┌─────────────────────────────────────┐ │ 状态栏 (44px) │ ├─────────────────────────────────────┤ │ │ │ 书籍封面图片 (200x280) │ │ │ │ 一场SOUL的创业实验场 │ │ (text-3xl, gradient) │ │ │ │ 来自Soul派对房的真实商业故事 │ │ (text-sm, gray-400) │ │ │ │ ┌──────────────────────────────┐ │ │ │ 62个真实案例 │ 每日更新 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ 立即阅读 │ │ ¥9.9购买 │ │ │ │ (白底黑字) │ │ (渐变背景) │ │ │ └────────────┘ └────────────┘ │ │ │ ├─────────────────────────────────────┤ │ 底部导航栏 (60px) │ │ [首页] [目录] [找伙伴] [我的] │ └─────────────────────────────────────┘ ``` **关键元素**: - 书籍封面: 居中, 带阴影 - 标题: 渐变色 from-[#00CED1] to-[#20B2AA] - 购买按钮: 渐变色 from-[#FFD700] to-[#FFA500] --- ### 2. 目录页 (`/chapters`) **页面结构**: ``` ┌─────────────────────────────────────┐ │ Header: ← 目录 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────────┐ │ │ │ 📚 一场SOUL的创业实验场 62章 │ │ │ │ 书籍信息卡片 │ │ │ └─────────────────────────────────┘ │ │ │ │ [基础版 ¥9.9] [最新版 ¥XX.X] │ ← 版本切换(可隐藏) │ │ │ ┌─────────────────────────────────┐ │ │ │ 📖 序言｜为什么我每天... [免费]│ │ │ └─────────────────────────────────┘ │ │ │ │ ▼ 01 第一篇｜真实的人 │ │ ├ 1.1 荷包：电动车出租... [免费]│ │ ├ 1.2 老墨:资源整合... [¥1] │ │ └ 1.3 笑声背后的MBTI [¥1] │ │ │ │ ▶ 02 第二篇｜真实的行业 │ │ ▶ 03 第三篇｜真实的错误 │ │ ... │ │ │ ├─────────────────────────────────────┤ │ 底部导航 │ └─────────────────────────────────────┘ ``` **关键元素**: - 章节状态标签: 免费(绿色), 已购(蓝色), ¥1(灰色) - 折叠/展开: 点击篇标题切换 - 版本切换: 两个并排按钮 --- ### 3. 阅读页 (`/read/[id]`) **页面结构**: ``` ┌─────────────────────────────────────┐ │ ← 返回 第1章 人与人... [分享] │ ├─────────────────────────────────────┤ │ │ │ 1.1 荷包：电动车出租的被动收入模式 │ │ (text-2xl, font-bold) │ │ │ │ 文章内容... │ │ (text-base, leading-relaxed) │ │ │ │ ... 更多内容 ... │ │ │ │ ┌─────────────────────────────────┐│ │ │ 🔒 需要购买才能继续阅读 ││ │ │ ││ │ │ ┌─────────┐ ┌─────────┐ ││ │ │ │购买本章 │ │购买全书 │ ││ │ │ │ ¥1 │ │ ¥9.9 │ ││ │ │ └─────────┘ └─────────┘ ││ │ └─────────────────────────────────┘│ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ ← 上一篇 │ │ 下一篇 → │ │ │ └────────────┘ └────────────┘ │ │ │ └─────────────────────────────────────┘ ``` **关键元素**: - 付费墙: 半透明渐变遮罩 - 购买按钮: 两个并排, 不同颜色 - 导航按钮: 宽度适中(flex-1, max-w-[140px]) --- ### 4. 找伙伴页 (`/match`) **页面结构**: ``` ┌─────────────────────────────────────┐ │ ← 返回 找伙伴 │ ├─────────────────────────────────────┤ │ │ │ ┌─────────┐ │ │ │ │ │ │ │ 👥 │ ← 匹配按钮 │ │ │开始匹配 │ (圆形) │ │ │匹配创业伙伴│ │ │ │ │ │ │ └─────────┘ │ │ │ │ 当前模式: 创业合伙 │ │ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ ⭐ │ │ 👥 │ │ ❤️ │ │ 🎮 │ │ │ │创业 │ │资源 │ │导师 │ │团队 │ │ │ │合伙 │ │对接 │ │顾问 │ │招募 │ │ │ └────┘ └────┘ └────┘ └────┘ │ │ │ │ 免费匹配机会: 3/3 │ │ │ └─────────────────────────────────────┘ ``` **匹配结果卡片**: ``` ┌─────────────────────────────────────┐ │ ✨ 匹配成功！ │ │ │ │ ┌─────────────────────────────────┐│ │ │ 👤 创业先锋 85%匹配度 ││ │ │ [创业者] [私域运营] ││ │ │ ││ │ │ 共同兴趣: ││ │ │ 📚 都在读《创业实验》 ││ │ │ 💼 对私域运营感兴趣 ││ │ │ ││ │ │ 核心理念: ││ │ │ 专注私域流量运营5年... ││ │ └─────────────────────────────────┘│ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ 一键加好友 │ │ 重新匹配 │ │ │ └────────────┘ └────────────┘ │ └─────────────────────────────────────┘ ``` --- ### 5. 我的页面 (`/my`) **页面结构**: ``` ┌─────────────────────────────────────┐ │ 我的 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────────┐ │ │ │ 👤 用户昵称 VIP │ │ │ │ ID: 3f92**** │ │ │ │ │ │ │ │ ┌────┐ ┌────┐ ┌────┐ │ │ │ │ │ 12 │ │ 5 │ │ ¥89│ │ │ │ │ │已购 │ │推荐 │ │收益│ │ │ │ │ └────┘ └────┘ └────┘ │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 💰 我的收益 │ │ │ │ 累计收益: ¥89.00 │ │ │ │ 可提现: ¥89.00 │ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ 推广中心 │ │ 提现 │ │ │ │ │ └──────────┘ └──────────┘ │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 📦 我的订单 → │ │ │ │ 🎁 推广中心 → │ │ │ │ ℹ️ 关于作者 → │ │ │ │ ⚙️ 设置 → │ │ │ └─────────────────────────────────┘ │ │ │ ├─────────────────────────────────────┤ │ 底部导航 │ └─────────────────────────────────────┘ ``` --- ### 6. 分销中心页 (`/my/referral`) **页面结构**: ``` ┌─────────────────────────────────────┐ │ ← 返回 分销中心 🔔 ⚙️ │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────────┐ │ │ │ 累计收益 ¥89.00 │ │ │ │ 90%返利 待结算: ¥0.00 │ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ 申请提现 │ │自动提现:开启│ │ │ │ │ └──────────┘ └──────────┘ │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ 3 │ │ 1 │ │ 2 │ │ 0 │ │ │ │绑定中│ │已付款│ │即将过期│ │总邀请│ │ │ └────┘ └────┘ └────┘ └────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ ⚠️ 推广规则 │ │ │ │ • 好友通过你的链接购买，立享5%优惠│ │ │ │ • 好友成功付款后，你获得90%收益 │ │ │ │ • 绑定期30天，期满未付款自动解除 │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 👥 绑定用户 (5) ▼ │ │ │ │ ├ [绑定中] [已付款] [已过期] │ │ │ │ │ │ │ │ │ │ 小明 2025/12/24 [5天] │ │ │ │ │ 小红 2026/1/8 [20天] │ │ │ │ │ 阿强 2025/12/21 [2天后过期] │ │ │ └─────────────────────────────────┘ │ │ │ │ 我的邀请码: REFMKEL7JAC │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 🖼️ 生成推广海报 → │ │ │ │ 💬 分享到朋友圈 → │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘ ``` --- ### 7. 设置页 (`/my/settings`) **页面结构**: ``` ┌─────────────────────────────────────┐ │ ← 返回 设置 │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────────┐ │ │ │ 🛡️ 账号绑定 │ │ │ │ 绑定后可用于提现和找伙伴功能 │ │ │ ├─────────────────────────────────┤ │ │ │ 📱 手机号 │ │ │ │ 138****1234 ✓ │ │ │ ├─────────────────────────────────┤ │ │ │ 💬 微信号 │ │ │ │ 未绑定 去绑定 │ │ │ ├─────────────────────────────────┤ │ │ │ 💳 支付宝 │ │ │ │ 未绑定 去绑定 │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ ⚠️ 提示：绑定至少一个支付方式才能提现│ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 退出登录 │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘ ``` --- ### 8. 推广海报弹窗 **弹窗结构**: ``` ┌─────────────────────────────────────┐ │ × │ ├─────────────────────────────────────┤ │ [真实商业案例] [每日更新] │ │ │ │ 一场SOUL的 │ │ 创业实验场 │ │ 来自Soul派对房的真实商业故事 │ │ │ │ ┌────┐ ┌────┐ ┌────┐ │ │ │ 62 │ │ 5% │ │90%│ │ │ │真实案例│ │好友优惠│ │你的收益│ │ │ └────┘ └────┘ └────┘ │ │ │ │ [人性观察] [行业揭秘] [赚钱逻辑] │ │ [创业复盘] [资源对接] │ │ │ │ ┌─────────────────────────────────┐│ │ │ 通过我的链接购买，立省5% ││ │ └─────────────────────────────────┘│ │ │ │ [卡] 卡若 推荐你来读 │ │ │ │ ┌───────────┐ │ │ │ QR Code │ │ │ │ (扫码) │ │ │ └───────────┘ │ │ │ │ 长按识别 · 立即试读 │ │ 邀请码: REFMKEL7JAC │ ├─────────────────────────────────────┤ │ 长按上方图片保存，或截图分享 │ │ │ │ [ 复制链接 ] [ 保存图片 ] │ └─────────────────────────────────────┘ ``` --- ### 9. 支付弹窗 **弹窗结构**: ``` ┌─────────────────────────────────────┐ │ × │ ├─────────────────────────────────────┤ │ 确认支付 │ │ │ │ ┌─────────────────────────────────┐│ │ │ 📚 整本购买 ││ │ │ 一场SOUL的创业实验场 ││ │ │ ¥9.9 ││ │ └─────────────────────────────────┘│ │ │ │ 选择支付方式: │ │ │ │ ┌─────────────────────────────────┐│ │ │ 💚 微信支付 ● ││ │ └─────────────────────────────────┘│ │ │ │ ┌───────────┐ │ │ │ QR Code │ │ │ │ (微信扫码) │ │ │ └───────────┘ │ │ │ │ 请使用微信扫码完成支付 │ │ │ │ ┌─────────────────────────────────┐│ │ │ 确认支付 ¥9.9 ││ │ └─────────────────────────────────┘│ └─────────────────────────────────────┘ ``` --- ### 10. 管理后台 (`/admin`) **桌面端布局**: ``` ┌────────────────────────────────────────────────────────────────┐ │ 一场SOUL的创业实验 · 管理后台 │ ├──────────┬─────────────────────────────────────────────────────┤ │ │ │ │ 📊 概览 │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ │ 156 │ │¥1234│ │ 89 │ │57.1%│ │ │ 📝 内容 │ │总用户 │ │总收入 │ │订单数 │ │转化率 │ │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ 👥 用户 │ │ │ │ ┌───────────────────────────────────────────────┐ │ │ 🎁 分销 │ │ 最近订单 │ │ │ │ ├───────────────────────────────────────────────┤ │ │ 💰 提现 │ │ 整本购买 2026-01-18 14:30 +¥9.9 微信 │ │ │ │ │ 单节购买 2026-01-18 13:15 +¥1.0 微信 │ │ │ ⚙️ 设置 │ │ 整本购买 2026-01-18 11:20 +¥9.9 微信 │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ │ │ │ ┌───────────────────────────────────────────────┐ │ │ 退出 │ │ 新注册用户 │ │ │ │ └───────────────────────────────────────────────┘ │ └──────────┴─────────────────────────────────────────────────────┘ ``` --- ## 开发还原注意事项 ### 1. 响应式适配 - 以 iPhone 13/14 (375px宽) 为基准设计 - 使用相对单位: rem, %, vh/vw - 使用 flex 布局 ### 2. 动画效果 - 页面切换: 从右滑入 - 弹窗: 从底部滑入 + 背景淡入 - 按钮: active 状态缩放 95% - 匹配中: 旋转动画 + 脉冲 ### 3. 触摸反馈 - 按钮点击: scale(0.95) + 背景变化 - 列表项: 背景色 white/5% ### 4. 图标使用 - 使用 Lucide Icons 图标库 - 或使用相似的线性图标 ### 5. 字体 - iOS: -apple-system - Android: Roboto - 备用: sans-serif --- *文档版本：v2.0 | 更新日期：2026-01-18*