---
url: /mobile/case-profile.md
---
# 案例：个人中心

「我的」页是 H5 站点里仅次于首页的高频页面：身份卡、资产统计、订单快捷入口、
功能分组列表。桌面版的 [ProfileCard](/components/profile-card) 与分栏 Section 在
375px 上重排为**纵向分组卡片流**——本案例给出可直接对照搭建的完整交互版，
头像点按还有动作面板（更换头像 / 退出登录）。

## 整页演示

## 拆解：桌面 → 移动做了什么

| 桌面版式 | 本案例的移动表达 |
| --- | --- |
| ProfileCard 身份卡（横向大卡） | 深色渐变身份条：头像 + 昵称 + 会员标签，一行说完身份 |
| Statistic 数值块并排 | 三列等分统计行，字号收敛到 18px 级 |
| 订单状态分栏表格 | 四宫格快捷入口，`EvBadge` 挂在图标右上角报数 |
| 设置项两栏表单 | 单元行分组卡（`mb-cell`）：图标 + 文案 + 右侧值，开关用 `EvSwitch` 收进行尾 |
| hover 右键菜单 | `EvActionSheet` 账户面板，退出登录标危险色并与普通动作分隔 |
| 顶部横向导航 | `EvTabbar` 吸底一级导航（首页 / 发现 / 购物袋 / 我的），当前项由 `v-model` 驱动 |

## 搭建清单

1. 身份卡：`linear-gradient(135deg, var(--ev-color-primary-dark-2), var(--ev-color-primary))`
   一条到底，头像用 `EvAvatar` + `icon="user"` 回退，浅白底融入深色卡。
2. 统计行与宫格：等分交给 `grid`，数字层级靠字重与颜色，不加边框线。
3. 单元行：图标容器 30px 方圆角 + `--ev-color-primary-light-9` 淡底；整行可点，
   右侧「值 + 箭头」的组合表达「这里能进」。
4. 开关行：`EvSwitch` 直接放行尾（`size="small"`），不用跳转二级页。
5. 账户面板：`EvActionSheet` 的危险动作（退出登录）用 `color` 标红；壳内演示记得
   `:append-to-body="false"` + `:lock-scroll="false"`（见[演示壳说明](/mobile/#演示壳说明)）。