# 登录前页面改版设计 **日期**: 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. 卡片样式：颜色、圆角、阴影与规范一致 --- ## 六、富维度（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，主色，右对齐 --- ## 八、实施优先级 1. **P0**：身/心/智/行/富 五个维度的登录前改版（LoginGuideCard 升级） 2. **P1**：五个维度的登录后介绍卡片（DimensionIntroCard 组件） 3. **P2**：首页品牌定位语区块 4. **P3**：我的页视觉优化 + 跳过入口 --- ## 九、验收标准 1. 游客访问身/心/智/行/富页面：可见品牌定位语 + LoginGuideCard（具体化权益文案） 2. 游客访问我的页：可见登录引导 + "暂不登录，先逛逛"链接 3. 游客访问首页：可见品牌定位语 + 热门内容 + 渐变登录按钮 4. 登录后访问各维度页面：底部可见对应维度介绍卡片（5行标准样式） 5. 五维卡片颜色、图标、文案与规范表一致