---
url: /mobile/layout.md
---
# 布局与导航壳

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

## 页面壳

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

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

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

## 底部标签栏

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

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

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

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

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

完整 API 见 [Tabbar 组件文档](/mobile/components/tabbar)。

## 顶部导航的移动表达

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

规则：右侧动作位只放**一个**文字级高频操作，更多操作进底部动作面板
（[ActionSheet](/mobile/components/action-sheet)），不要在导航栏堆按钮组。