---
url: /mobile/case.md
---
# 案例：H5 官网

一个可以直接对照搭建的 **Web 级移动端官网**微缩案例：与桌面版同一套 Ew 组件和
Clean Navy 令牌，按[适配总览](/mobile/)的范式重排为 375px 叙事流——紧凑首屏、
单列作品流、吸底转化区、底部标签栏，外加下拉刷新与分享动作面板。真机上配一个
`max-width: 420px` 的页面壳即为完整 H5 站点。

## 整站演示

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

| 桌面版式 | 本案例的移动表达 |
| --- | --- |
| Hero：96px 级上下留白 + 多栏布局 | 首屏留白减半，大字重标题两行换行，双 CTA 等宽并排 |
| 作品网格 3 列 | 单列整宽卡片流 + 下拉刷新，详情靠整卡点按 |
| 横向导航（关于/作品/联系） | 收进底部标签栏（EvTabbar），当前页高亮由 `v-model` 驱动 |
| 页脚多栏链接 | 精简为一行版权，说明「用 Evoke UI 搭建」 |
| hover 菜单 / 分享按钮组 | 底部动作面板（EvActionSheet），破坏性与普通动作分离 |
| 表单双栏行 | 单列表单 + label 上置 + 吸底主按钮 |

## 搭建清单

1. 页面壳：`max-width: 420px` 居中 + `min-height: 100dvh`（真机全宽、桌面居中）。
2. 一级入口：`EvTabbar` fixed 吸底（安全区与占位已内置），`v-model` 切页。
3. 内容流：`EvPullRefresh` + `EvLoadMore` 包住卡片列表（见[内容流](/mobile/content)）。
4. 对象操作：`EvActionSheet` 替代 hover 菜单，壳内记得 `:append-to-body="false"`（并配 `:lock-scroll="false"` 防止锁文档页滚动）。
5. 转化表单：单列 `EvField` + 吸底提交（见[表单与转化](/mobile/forms)）。

对照的桌面版案例见 [案例总览](/cases/)（企业官网 / 个人博客 / 云笔记工作台）——同一套
组件，两种版式，设计语言完全一致。