案例：个人中心
「我的」页是 H5 站点里仅次于首页的高频页面：身份卡、资产统计、订单快捷入口、 功能分组列表。桌面版的 ProfileCard 与分栏 Section 在 375px 上重排为纵向分组卡片流——本案例给出可直接对照搭建的完整交互版， 头像点按还有动作面板（更换头像 / 退出登录）。
整页演示
个人中心 · 全页交互
身份卡 + 三列统计 + 订单四宫格 + 分组单元行 + 设置开关 + 底部标签栏；点按头像打开账户动作面板。
9:41
林岸PRO 会员
会员有效期至 2027-09-08
32
收藏
8
关注
6
优惠券
我的订单全部订单
1待付款
待发货
待收货
退款/售后
收货地址2 个
我的收藏32 件
优惠券6 张
客服与帮助
消息通知
清理缓存12.6 MB
关于 Evokev2.4.0
拆解：桌面 → 移动做了什么
| 桌面版式 | 本案例的移动表达 |
|---|---|
| ProfileCard 身份卡（横向大卡） | 深色渐变身份条：头像 + 昵称 + 会员标签，一行说完身份 |
| Statistic 数值块并排 | 三列等分统计行，字号收敛到 18px 级 |
| 订单状态分栏表格 | 四宫格快捷入口，EwBadge 挂在图标右上角报数 |
| 设置项两栏表单 | 单元行分组卡（mb-cell）：图标 + 文案 + 右侧值，开关用 EwSwitch 收进行尾 |
| hover 右键菜单 | EwActionSheet 账户面板，退出登录标危险色并与普通动作分隔 |
| 顶部横向导航 | EwTabbar 吸底一级导航（首页 / 发现 / 购物袋 / 我的），当前项由 v-model 驱动 |
搭建清单
- 身份卡：
linear-gradient(135deg, var(--ew-color-primary-dark-2), var(--ew-color-primary))一条到底，头像用EwAvatar+icon="user"回退，浅白底融入深色卡。 - 统计行与宫格：等分交给
grid，数字层级靠字重与颜色，不加边框线。 - 单元行：图标容器 30px 方圆角 +
--ew-color-primary-light-9淡底；整行可点， 右侧「值 + 箭头」的组合表达「这里能进」。 - 开关行：
EwSwitch直接放行尾（size="small"），不用跳转二级页。 - 账户面板：
EwActionSheet的危险动作（退出登录）用color标红；壳内演示记得:append-to-body="false"+:lock-scroll="false"（见演示壳说明）。