2026-08-09-login-before-redesign.md 18 KB
登录前页面改版设计
日期: 2026-08-09 关联设计: 健康数据中心设计 (2026-08-08) 状态: 设计稿
一、目标
- 提升登录转化率：用户登录后能立刻获得可感知的价值
- 为健康数据中心改版做准备：四个维度页面登录后需展示底部"维度介绍卡片"
- 保持品牌调性：五维幸福、科技+温情
二、登录前各核心页面设计
2.1 首页（pages/index-home/index.vue）
当前状态（游客态 discover-container :184-316）：
- PageBanner「浠艾福 · Care Family」
- 五维沙盘 preview 模式（badge「登录查看完整报告」）
- 热门推荐商品 / 热门活动 / 推荐阅读（占位卡）
- 底部固定「登录/注册」按钮
改版设计：
┌────────────────────────────────┐
│ 🏠 浠艾福 · Care Family │ ← PageBanner（保留）
├────────────────────────────────┤
│ 给全家的一站式幸福提案 │ ← 新增：品牌定位语
│ 身·心·智·行·富 五维成长 │
├────────────────────────────────┤
│ [五维沙盘 preview 模式] │ ← 保留，点击跳转登录
├────────────────────────────────┤
│ 🔥 热门推荐 │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │商品卡│ │商品卡│ │商品卡│ │
│ └──────┘ └──────┘ └──────┘ │
├────────────────────────────────┤
│ 📰 近期活动 │
│ ┌──────────────────────┐ │
│ │活动卡（标题+时间+图标）│ │
│ └──────────────────────┘ │
├────────────────────────────────┤
│ 📖 精选文章 │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │文章卡│ │文章卡│ │文章卡│ │
│ └──────┘ └──────┘ └──────┘ │
├────────────────────────────────┤
│ 👤 登录/注册 ← 底部固定按钮 │
│ 已有账号？立即登录 › │
└────────────────────────────────┘
改动点：
- PageBanner 下方新增品牌定位语区块（橙色渐变底）
- 热门内容区保留，增强视觉吸引力
- 底部登录按钮升级为渐变主按钮（#F97316→#FB923C）
- 新增"已有账号？立即登录 ›"链接，引导快速登录
2.2 健康页（pages/body-detail/index.vue）
当前状态（游客态 :39-48）：
- LoginGuideCard「登录后查看全家健康数据」+ 3 条权益
- HealthTips（悬挂引用，实际不渲染）
- 七维雷达图（人群均值）+ 功能入口 grid（全部需要登录）
改版设计：
┌────────────────────────────────┐
│ 🌏 身 · 主动健康 │ ← PageBanner（保留）
├────────────────────────────────┤
│ 身体健康是幸福的基础 │ ← 新增：品牌定位语
│ 科学管理全家健康数据 │
├────────────────────────────────┤
│ 📊 七维健康数据 │ ← 雷达图（保留，人群均值展示）
│ [雷达图 + 同龄平均值提示] │
├────────────────────────────────┤
│ 💡 您还没有健康数据 │ ← 新增：LoginGuideCard 升级版
│ · 查看全家身体能量数据 │
│ · 上传体检/肠道/舌诊报告 │ ← 更新：具体化权益
│ · 记录每日健康打卡，获取能量 │
│ [🔒 立即登录] │
├────────────────────────────────┤
│ 📋 功能入口 │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │运动│ │饮食│ │作息│ │冥想│ │
│ └────┘ └────┘ └────┘ └────┘ │
├────────────────────────────────┤
│ 🔬 精准营养（登录后） │ ← 保留现有登录区块
│ [上传健康报告卡片] │
├────────────────────────────────┤
│ AIFloatingAvatar │ ← 保留
└────────────────────────────────┘
改动点：
- 新增品牌定位语（橙色渐变底，与首页一致）
- LoginGuideCard 文案更新：具体化"上传报告""记录打卡"等权益
- HealthTips 替换为更简洁的引导文案
- 精准营养区块（目前仅上传报告卡）保留
- 修复 funcList 中的死链（/pages/body/exercise-record、/pages/body/sleep-record 改为 /pages/body-detail/exercise-record 等，或移除）
2.3 成长页（pages/mind-detail/index.vue）
当前状态（游客态 :30-38）：
- LoginGuideCard「登录后查看心理成长报告」+ 3 条权益
- 功能入口 grid 8 项（仅"阅读"无需登录）
改版设计：
┌────────────────────────────────┐
│ 🔥 心 · 大爱相随 │ ← PageBanner（保留）
├────────────────────────────────┤
│ 心智成长 · 智慧人生 │ ← 新增：品牌定位语
│ 关注全家心理健康 │
├────────────────────────────────┤
│ 💡 探索心理成长 │ ← 新增： LoginGuideCard 升级版
│ · EMI 心理测评四维分析 │
│ · 大五人格报告 + 情绪趋势 │
│ · 专属文章 + 情绪打卡 │
│ [🔒 立即登录] │
├────────────────────────────────┤
│ 📋 功能入口 │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │阅读│ │测评│ │档案│ │打卡│ │
│ └────┘ └────┘ └────┘ └────┘ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │趋势│ │自评│ │天盘│ │疏导│ │
│ └────┘ └────┘ └────┘ └────┘ │
├────────────────────────────────┤
│ AIFloatingAvatar │ ← 保留
└────────────────────────────────┘
改动点：
- 新增品牌定位语
- LoginGuideCard 文案更新：具体化"EIMI 测评""大五人格""情绪趋势"等权益
- 功能入口保留，但需确认各入口的跳转链接是否正确
2.4 我的页（pages/profile-main/profile.vue）
当前状态（游客态 :5-10）：
- login-prompt 区块：大图标 + 标题「登录浠艾福」+ 描述 + 渐变按钮
改版设计：
┌────────────────────────────────┐
│ │
│ 👤 │
│ 登录浠艾福 │
│ │
│ 登录后查看个人资料 │
│ 积分记录、能量数据、家庭管理 │
│ │
│ ┌──────────────────────┐ │
│ │ 登录 / 注册 │ │ ← 渐变主按钮（#667eea→#764ba2）
│ └──────────────────────┘ │
│ │
│ ─────── 或 ─────── │
│ │
│ 暂不登录，先逛逛 › │ ← 新增：跳过入口
│ │
├────────────────────────────────┤
│ AIFloatingAvatar │ ← 保留
└────────────────────────────────┘
改动点：
- 视觉优化：增大图标，增强品牌感
- 描述文案更新：具体化"积分、能量、家庭管理"
- 新增"暂不登录，先逛逛"链接（跳转 index-home）
- 颜色与登录页保持一致（紫渐变 #667eea→#764ba2）
三、登录后各维度底部"维度介绍卡片"设计
3.1 卡片结构
┌────────────────────────────────┐
│ [维度图标] [维度名称] │ ← 头部：图标 + 名称
│ [维度英文] [核心定位语] │ ← 副标题
├────────────────────────────────┤
│ ● 核心功能 1 │
│ ● 核心功能 2 │
│ ● 核心功能 3 │
├────────────────────────────────┤
│ [了解更多 ›] │ ← 跳转知识库/文章
└────────────────────────────────┘
3.2 各维度卡片内容
| 维度 | 图标 | 名称 | 定位语 | 核心功能 |
|---|---|---|---|---|
| 身 | 🌏 | 身 · 主动健康 | 科学管理全家健康数据 | 七维雷达图 · 健康报告 · 能量打卡 · 精准营养 |
| 心 | 🔥 | 心 · 大爱相随 | 关注全家心理健康成长 | EMI 测评 · 情绪趋势 · 家庭天盘 · 疏导工具 |
| 智 | ⚡ | 智 · 赋能未来 | 提升全家认知与学习能力 | 认知雷达 · 认知训练 · 测评预约 · 成长档案 |
| 行 | 🌿 | 行 · 人际和谐 | 改善全家关系与沟通能力 | 关系问卷 · 互动记录 · 任务协作 · 家庭挑战 |
3.3 视觉规范
- 背景色：对应维度色 + 渐变（从亮到淡）
- 身：#FFF7ED → rgba(255,140,66,0.15)
- 心：#FFF0F5 → rgba(255,107,157,0.15)
- 智：#F0F0FF → rgba(99,102,241,0.15)
- 行：#F0FFF4 → rgba(16,185,129,0.15)
- 字体：名称 28rpx bold，定位语 22rpx #666，功能列表 24rpx #333
- 圆角：16rpx
- 阴影：0 2rpx 8rpx rgba(0,0,0,0.04)
- 位置：插入在 bottom-spacer 之前（AIFloatingAvatar 之前）
3.4 实现位置
| 页面 | 插入位置 | 当前行号 |
|---|---|---|
| body-detail/index.vue | bottom-spacer 之前 | 94 |
| mind-detail/index.vue | bottom-spacer 之前 | 132 |
| wisdom-detail/index.vue | bottom-spacer 之前 | 107 |
| action-detail/member-action-detail.vue | DimensionProducts 之后 | 60 |
四、实施步骤
登录前改版（3 个页面）
- body-detail/index.vue：品牌定位语 + LoginGuideCard 升级
- mind-detail/index.vue：品牌定位语 + LoginGuideCard 升级
- profile-main/profile.vue：视觉优化 + 新增跳过入口
登录后介绍卡片（4 个维度）
- body-detail/index.vue：新增 身维度介绍卡片
- mind-detail/index.vue：新增 心维度介绍卡片
- wisdom-detail/index.vue：新增 智维度介绍卡片
- action-detail/member-action-detail.vue：新增 行维度介绍卡片
统一组件（可选）
- 新建 DimensionIntroCard.vue 组件，支持 props: dimCode, title, subtitle, features[]
- 四个页面复用同一组件
五、验收标准
- 游客访问首页：可见品牌定位语 + 热门内容 + 登录按钮
- 游客访问身/心/智页面：可见品牌定位语 + LoginGuideCard + 功能入口预览
- 游客访问我的页：可见登录引导 + "暂不登录"跳转入口
- 登录后访问各维度页面：底部可见对应维度介绍卡片（图标+名称+定位语+功能列表）
- 卡片样式：颜色、圆角、阴影与规范一致
六、富维度（pages/wealth/index.vue）补充设计
6.1 登录前设计
当前状态（游客态 :7-21）：
- PageBanner theme="wealth"（tagline「利他创富·价值共享」）
- login-guide-section：纯文字引导「登录后查看财富能量、推广收益、邀请返利等更多内容」+ 登录按钮
- 无其他内容展示
改版设计：
┌────────────────────────────────┐
│ 💧 富 · 利他创富 │ ← PageBanner（保留）
├────────────────────────────────┤
│ 富足源于利他与坚持 │ ← 新增：品牌定位语
│ 分享价值，收获财富 │
├────────────────────────────────┤
│ 💰 财富能量，越分享越丰盛 │ ← LoginGuideCard 升级版
│ · 查看家庭财富能量数据 │
│ · 管理推广收益与邀请返利 │
│ · 开通会员享专属折扣 │
│ [🔒 立即登录] │
├────────────────────────────────┤
│ 🛍️ 商城精选 │ ← 新增：商品预览（无需登录）
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │商品卡│ │商品卡│ │商品卡│ │
│ └──────┘ └──────┘ └──────┘ │
│ [查看全部商品 ›] │
├────────────────────────────────┤
│ AIFloatingAvatar │ ← 保留
└────────────────────────────────┘
改动点：
- 品牌定位语区块（橙色渐变，与其他维度一致）
- LoginGuideCard 文案升级：具体化"财富能量""推广收益""会员折扣"
- 新增商城精选商品预览区（3 张商品卡，吸引用户登录后购买）
- 登录按钮保持紫色渐变（#667eea→#764ba2，与"我的"页一致）
6.2 登录后底部介绍卡片
┌────────────────────────────────┐
│ 💧 富 · 利他创富 │ ← 紫色渐变底 #F59E0B
├────────────────────────────────┤
│ 分享价值，收获财富 │
├────────────────────────────────┤
│ ● 财富能量仪表盘 │
│ ● 推广收益实时统计 │
│ ● 邀请返利与会员权益 │
├────────────────────────────────┤
│ [了解更多 ›] │
└────────────────────────────────┘
插入位置：消费中心区块之后、menu-list 之前（约 line 150 附近）
七、五维统一视觉规范
| 维度 | 图标 | 主色 | 卡片背景渐变 | 品牌定位语 |
|---|---|---|---|---|
| 身 | 🌏 | #FF8C42 | #FFF7ED → rgba(255,140,66,0.15) | 科学管理全家健康数据 |
| 心 | 🔥 | #FF6B9D | #FFF0F5 → rgba(255,107,157,0.15) | 关注全家心理健康成长 |
| 智 | ⚡ | #6366F1 | #F0F0FF → rgba(99,102,241,0.15) | 提升全家认知与学习能力 |
| 行 | 🌿 | #10B981 | #F0FFF4 → rgba(16,185,129,0.15) | 改善全家关系与沟通能力 |
| 富 | 💧 | #F59E0B | #FFFBEB → rgba(245,158,11,0.15) | 分享价值，收获财富 |
统一样式：
- 圆角：16rpx
- 内边距：24rpx 28rpx
- 阴影：0 2rpx 8rpx rgba(0,0,0,0.04)
- 标题：28rpx bold，主色
- 定位语：22rpx，#666
- 功能列表：24rpx，#333，每行前加 ●
- 了解更多按钮：16rpx，主色，右对齐
八、实施优先级
- P0：身/心/智/行/富 五个维度的登录前改版（LoginGuideCard 升级）
- P1：五个维度的登录后介绍卡片（DimensionIntroCard 组件）
- P2：首页品牌定位语区块
- P3：我的页视觉优化 + 跳过入口
九、验收标准
- 游客访问身/心/智/行/富页面：可见品牌定位语 + LoginGuideCard（具体化权益文案）
- 游客访问我的页：可见登录引导 + "暂不登录，先逛逛"链接
- 游客访问首页：可见品牌定位语 + 热门内容 + 渐变登录按钮
- 登录后访问各维度页面：底部可见对应维度介绍卡片（5行标准样式）
- 五维卡片颜色、图标、文案与规范表一致