# cfc-web 管理后台手机自适应改造

**日期:** 2026-07-24
**状态:** 已批准实施
**范围:** cfc-web (Vue 2 + Element UI)

---

## 1. 改造策略

**原则：只改布局层，不改页面内部逻辑。**

所有列表页、表单页的 `el-table` 在小屏下依赖 Element UI 自带的横向滚动，不做每个页面的单独调整。

## 2. Layout.vue 改造

### 2.1 侧边栏响应式折叠

- 768px 以下：侧边栏默认折叠，显示汉堡菜单按钮
- 折叠时 sidebar 宽度为 0 / 隐藏，用 `position: fixed` 遮罩弹出
- 768px 以上：保持现有 200px 固定侧边栏
- 汉堡按钮放在 header 左侧

### 2.2 Header 调整

- 左侧加汉堡菜单按钮（移动端可见）
- 右侧按钮间距缩小

### 2.3 Main 内容区

- 移动端 padding 从 20px → 12px
- el-card__body padding 缩小

## 3. 全局 CSS

- body 背景保持 `#f0f2f5`
- 768px 断点：`el-table` 字号 13px → 12px
- 搜索表单区域：el-form-item 在小屏下换行

## 4. Login.vue 调整

- 已有 900px 断点，768px 以下进一步优化
- 表单卡片去除圆角、边距，全屏展示

## 5. 不做的范围

- 不改造每个页面的表格列（靠横向滚动）
- 不改造统计卡片布局（Dashboard 4列在移动端变2列，由 el-col 响应式属性处理）
- 不改造复杂表单的布局

## 6. 风险

- `.v-modal { display: none !important }` 全局遮罩隐藏 — 侧边栏弹出遮罩需用自定义遮罩，不能用 Element UI 的遮罩层
- 路由跳转关闭侧边栏的逻辑需正确处理