案例：H5 官网

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

整站演示

移动端官网 · 全页交互

真实组件组装：首屏（大字重标题 + 双 CTA）、作品流（下拉刷新）、合作表单入口、精简页脚、底部标签栏；「更多」打开分享动作面板。

9:41

Aurora Studio

下拉刷新

AURORA STUDIO

为品牌而生的
设计工作室

以 Clean Navy 设计语言，为认真做产品的团队打造官网与产品界面。

云笔记工作台

工作台 · Clean Navy

品牌官网改版

官网 · Launch Blue

数据大屏控制台

中后台 · 07-28

© 2026 Aurora Studio · 用 Evoke UI 搭建

首页

作品2

合作

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

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

搭建清单

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

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