483 lines
25 KiB
Markdown
483 lines
25 KiB
Markdown
# 页面截图与还原指南
|
||
|
||
本文档用于小程序和移动端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*
|