布局与导航壳

移动站点的骨架与桌面同源，但三段结构固定：顶部精简导航（logo + 高频动作）、 中部单列内容（纵向叙事流）、底部固定区（标签栏或吸底 CTA）。桌面的横向 多级导航在移动端没有生存空间——一级入口进底部标签栏，次级入口进抽屉或页脚。

页面壳

页面壳按「真机全宽、桌面居中」双向兼容：

.mb-shell {
  max-width: 420px;   /* 桌面浏览器预览时呈现为居中手机列 */
  margin: 0 auto;
  min-height: 100dvh; /* 真机动态视口 */
}

内容区独立滚动（overflow-y: auto + overscroll-behavior: contain），底部固定区 吸底不动；全面屏安全区用 env(safe-area-inset-bottom) 适配（EwTabbar 已内置）。

底部标签栏

一级导航压平为 3~5 个底部页签，用 EwTabbar 承载：真机上 fixed 默认吸底 + 安全区适配 + 自动等高占位；页内内容切换由 v-model 驱动。

Tabbar 驱动的页面切换

点击底部页签，内容区实时切换；badge 角标与页面数据同源。

9:41

首页

品牌首屏与精选内容

首页

作品3

关于

<script setup>
import { ref } from 'vue'

const tab = ref('home')
</script>

<template>
  <component :is="pages[tab]" />

  <!-- 真机：fixed 吸底 + 安全区适配 + 自动占位 -->
  <EwTabbar v-model="tab">
    <EwTabbarItem name="home">首页</EwTabbarItem>
    <EwTabbarItem name="work" badge="3">作品</EwTabbarItem>
    <EwTabbarItem name="about">关于</EwTabbarItem>
  </EwTabbar>
</template>

完整 API 见 Tabbar 组件文档。

顶部导航的移动表达

EwNavbar 在移动端只保留一个高频动作位（如「联系我们」「下载」），次级链接收进 抽屉或页脚——不要把桌面导航链接原样搬到窄屏。移动端层级感由「页栈返回」承担： 二级页面导航栏 = 返回箭头 + 页标题 + 单个动作位，标题即位置。

二级页面导航栏

返回箭头 + 居中标题 + 右侧单动作；动作位只放一个高频操作。

9:41

作品详情收藏

云笔记工作台 · 视觉稿

Clean Navy · 2026-08

设计说明：以藏青墨色为基底，留白切分层次，卡片轻抬 2px。

规则：右侧动作位只放一个文字级高频操作，更多操作进底部动作面板 （ActionSheet），不要在导航栏堆按钮组。