|
|
@@ -0,0 +1,263 @@
|
|
|
+# 登录前页面改版设计
|
|
|
+
|
|
|
+**日期**: 2026-08-09
|
|
|
+**关联设计**: 健康数据中心设计 (2026-08-08)
|
|
|
+**状态**: 设计稿
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 一、目标
|
|
|
+
|
|
|
+1. 提升登录转化率：用户登录后能立刻获得可感知的价值
|
|
|
+2. 为健康数据中心改版做准备：四个维度页面登录后需展示底部"维度介绍卡片"
|
|
|
+3. 保持品牌调性：五维幸福、科技+温情
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 二、登录前各核心页面设计
|
|
|
+
|
|
|
+### 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 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 四、实施步骤
|
|
|
+
|
|
|
+1. **登录前改版**（3 个页面）
|
|
|
+ - [ ] body-detail/index.vue：品牌定位语 + LoginGuideCard 升级
|
|
|
+ - [ ] mind-detail/index.vue：品牌定位语 + LoginGuideCard 升级
|
|
|
+ - [ ] profile-main/profile.vue：视觉优化 + 新增跳过入口
|
|
|
+
|
|
|
+2. **登录后介绍卡片**（4 个维度）
|
|
|
+ - [ ] body-detail/index.vue：新增 身维度介绍卡片
|
|
|
+ - [ ] mind-detail/index.vue：新增 心维度介绍卡片
|
|
|
+ - [ ] wisdom-detail/index.vue：新增 智维度介绍卡片
|
|
|
+ - [ ] action-detail/member-action-detail.vue：新增 行维度介绍卡片
|
|
|
+
|
|
|
+3. **统一组件**（可选）
|
|
|
+ - [ ] 新建 DimensionIntroCard.vue 组件，支持 props: dimCode, title, subtitle, features[]
|
|
|
+ - [ ] 四个页面复用同一组件
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 五、验收标准
|
|
|
+
|
|
|
+1. 游客访问首页：可见品牌定位语 + 热门内容 + 登录按钮
|
|
|
+2. 游客访问身/心/智页面：可见品牌定位语 + LoginGuideCard + 功能入口预览
|
|
|
+3. 游客访问我的页：可见登录引导 + "暂不登录"跳转入口
|
|
|
+4. 登录后访问各维度页面：底部可见对应维度介绍卡片（图标+名称+定位语+功能列表）
|
|
|
+5. 卡片样式：颜色、圆角、阴影与规范一致
|
iwt