378 lines
13 KiB
Markdown
378 lines
13 KiB
Markdown
# 门户页面边距统一改造说明
|
||
|
||
| 属性 | 内容 |
|
||
| --- | --- |
|
||
| 文档版本 | v1.0 |
|
||
| 创建日期 | 2026-05-19 |
|
||
| 状态 | 已确认，待开发 |
|
||
| 适用项目 | txw-mhzc-web |
|
||
| 关联需求 | 首页 / 服务中心 / 共性能力 / 企业出海 / 行业专题 五页边距统一 |
|
||
|
||
---
|
||
|
||
## 一、文档说明
|
||
|
||
### 1.1 目的
|
||
|
||
统一五个门户页面的版心宽度、左右留白（gutter）与区块上下间距，使各板块四向边距格式一致，降低维护成本，并保证桌面端与移动端视觉对齐。
|
||
|
||
### 1.2 读者
|
||
|
||
- 前端开发（实施改造）
|
||
- UI / 设计（验收对齐）
|
||
- 测试（回归用例）
|
||
|
||
### 1.3 飞书阅读说明
|
||
|
||
- 本文档使用标准 Markdown，可直接粘贴至飞书文档或导入。
|
||
- 表格、待办清单、引用块在飞书中可正常渲染。
|
||
- 代码块为 CSS / Less 片段，便于复制到工程。
|
||
|
||
---
|
||
|
||
## 二、已确认的设计决策
|
||
|
||
> **说明**：以下选项已与产品 / 需求方确认，开发阶段不得擅自变更；若需调整须更新本文档版本号。
|
||
|
||
| 编号 | 决策项 | 确认结果 |
|
||
| --- | --- | --- |
|
||
| A | 版心最大宽度 | **1300px**（对标政务站版心，`max-width` 非固定 `width`） |
|
||
| B | 桌面端左右边距（gutter） | **25px**（与政务站侧栏留白对齐） |
|
||
| C | 大区块上下内边距（section 级） | **64px**（原首页为 80px，需下调对齐） |
|
||
| D | 服务中心原 200px 大留白 | **改为版心 gutter（25px）**，通过 `page-content-wrap` 实现 |
|
||
| E | 首页三屏（核心驱动 / 共性能力 / 企业出海） | **保持 100vh 全屏**；仅统一标题区与内容区相对版心的 gutter |
|
||
| F | 改造范围 | **仅 5 个页面**，不含服务中心子市场页 |
|
||
| G | 文档与代码路径 | 说明文档：`public/docs/`；公共样式建议：`src/pages/index/styles/` |
|
||
| H | 语言 | **仅中文** |
|
||
|
||
---
|
||
|
||
## 三、设计 Token 规范
|
||
|
||
### 3.1 CSS 变量定义（建议）
|
||
|
||
新建文件：`src/pages/index/styles/page-layout.less`
|
||
|
||
```less
|
||
// 页面级布局 Token（门户五页共用）
|
||
:root {
|
||
--page-content-max-width: 1300px;
|
||
--page-gutter-x: 25px;
|
||
--page-section-padding-y: 64px;
|
||
--page-block-gap-y: 48px; // 区块内：标题 ↔ 内容
|
||
--page-block-margin-bottom: 64px; // 同级模块间距（锚点页多模块）
|
||
--page-banner-height: 350px;
|
||
--page-offset-top: 60px; // 固定顶栏下的安全区
|
||
}
|
||
```
|
||
|
||
### 3.2 响应式 Token
|
||
|
||
| 断点 | `--page-gutter-x` | `--page-section-padding-y` | 版心 |
|
||
| --- | --- | --- | --- |
|
||
| ≥ 1280px | 40px | 64px | `max-width: 1400px` |
|
||
| 768px ~ 1279px | 24px | 48px | `width: 100%` |
|
||
| < 768px | 16px | 40px | `width: 100%` |
|
||
|
||
媒体查询建议与首页 `home2` 现有断点协调，避免五页断点不一致。
|
||
|
||
### 3.3 内容区容器（标准写法）
|
||
|
||
**类名建议**：`.page-content-wrap`（全站门户页根级或 section 级复用）
|
||
|
||
```less
|
||
.page-content-wrap {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
max-width: var(--page-content-max-width);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: var(--page-gutter-x);
|
||
padding-right: var(--page-gutter-x);
|
||
}
|
||
|
||
.page-section {
|
||
box-sizing: border-box;
|
||
padding-top: var(--page-section-padding-y);
|
||
padding-bottom: var(--page-section-padding-y);
|
||
}
|
||
```
|
||
|
||
**板块四向边距统一格式（流式内容区块）**：
|
||
|
||
```
|
||
上：64px（section-padding-y）
|
||
下：64px（section-padding-y）
|
||
左：40px（gutter-x）
|
||
右：40px（gutter-x）
|
||
版心：max-width 1400px，水平居中
|
||
```
|
||
|
||
### 3.4 全宽 Banner 与内容分离原则
|
||
|
||
| 类型 | 背景 | 内部文字 / 卡片 |
|
||
| --- | --- | --- |
|
||
| Banner / Hero 背景 | 宽度 100%，高度见 `--page-banner-height` | 文案、按钮包在 `.page-content-wrap` 内 |
|
||
| 内容板块 | 可选全宽背景色 / 图 | 主体必须使用 `.page-content-wrap` |
|
||
|
||
### 3.5 首页三屏（E1 专项规则）
|
||
|
||
以下三个 section **保持** `height: 100vh` 与现有绝对定位布局，**不改为**普通流式 section：
|
||
|
||
- `#section-core` 核心驱动
|
||
- `#section-capability` 共性能力（首页区块）
|
||
- `#section-overseas` 企业出海（首页区块）
|
||
|
||
**仅调整**：
|
||
|
||
1. 标题区（`.section-title` / `.capability-header` / `.overseas2-header`）左右对齐 gutter **40px**，移除 `margin-left: 40px` 等 hack。
|
||
2. 内容网格在版心 **1400px** 内水平居中，左右留白 **40px**。
|
||
3. `--block-title-top` 等内部变量可保留，但与 `--page-gutter-x` 对齐，避免重复偏移。
|
||
|
||
---
|
||
|
||
## 四、改造范围清单
|
||
|
||
### 4.1 纳入改造
|
||
|
||
| 序号 | 页面 | 路由 | 文件路径 |
|
||
| --- | --- | --- | --- |
|
||
| 1 | 首页 | `/home`（home2） | `src/pages/index/views/home2/index.vue` |
|
||
| 2 | 服务中心 | `/fwsc` | `src/pages/index/views/fwsc/index.vue` |
|
||
| 3 | 共性能力 | `/gxnlpt` | `src/pages/index/views/gxnlpt/index.vue` |
|
||
| 4 | 企业出海 | `/qych` | `src/pages/index/views/qych/index.vue` |
|
||
| 5 | 行业专题 | `/hyzt` | `src/pages/index/views/hyzt/index.vue` |
|
||
|
||
### 4.2 不纳入改造（首轮）
|
||
|
||
- `/tfwsc`、`/txqsc`、`/tsjsc`、`/tjrsc` 等服务中心子页
|
||
- 字体、配色、圆角、动效、业务逻辑
|
||
- 卡片内部 padding（如 `24px`、`28px`）除非与版心冲突
|
||
|
||
---
|
||
|
||
## 五、现状与目标对照
|
||
|
||
### 5.1 版心与 gutter
|
||
|
||
| 页面 | 现状 | 目标 |
|
||
| --- | --- | --- |
|
||
| 首页 | `1400px` + `40px`；三屏标题有 margin hack | 保持版心；section 上下 **80px → 64px**；清理 hack |
|
||
| 服务中心 | `padding: 60px 200px 80px` | `64px 40px 64px` + `.page-content-wrap` |
|
||
| 共性能力 | `1448px`，无统一 gutter | `1400px` + 左右 **40px** |
|
||
| 企业出海 | `width: 1300px` 固定 | `max-width: 1400px` + **40px** |
|
||
| 行业专题 | `width: 1300px` 固定 | `max-width: 1400px` + **40px** |
|
||
|
||
### 5.2 区块垂直间距
|
||
|
||
| 页面 | 现状（典型） | 目标 |
|
||
| --- | --- | --- |
|
||
| 首页 section | `80px 0` | `64px 0` |
|
||
| 服务中心 | `60px` 上 / `80px` 下 | `64px` 上下 |
|
||
| 共性能力 | 模块 `margin-bottom: 70px` | `64px`（`--page-block-margin-bottom`） |
|
||
| 企业出海 | `30px` 等零散值 | 模块间距 **64px** |
|
||
| 行业专题 | Banner `60px`、列表 `20px 0` | Banner 内容走 wrap；列表区 section **64px** |
|
||
|
||
---
|
||
|
||
## 六、分页面改造要点
|
||
|
||
### 6.1 首页（home2/index.vue）
|
||
|
||
**模板**
|
||
|
||
- 为 `.container` 下各 `<section>` 内容区统一包裹或复用 `.page-content-wrap`（已有 `.section-container` 可重命名或映射为同一套 Token）。
|
||
- 新闻、合作伙伴、底部 CTA 等流式区块与 core 系列共用 gutter。
|
||
|
||
**样式**
|
||
|
||
| 选择器 / 区域 | 操作 |
|
||
| --- | --- |
|
||
| `.section-container` | `max-width: 1400px`；`padding: 0 40px`（改为 CSS 变量） |
|
||
| `.core-section` 等 | `padding: 80px 0` → `padding: 64px 0` |
|
||
| `.news-section`、`.partner-section` | 同上 **64px** |
|
||
| `.core-section .section-title` 等 | 删除 `margin-left: 40px`；使用 `left` + `width: 100%` + `max-width` + `padding: 0 40px` |
|
||
| 移动端 `@media` | `16px` gutter 映射变量 |
|
||
|
||
**注意**：Hero（`#section-hero`）全宽保留；搜索区 `6%` / `10%` 可保留百分比，或评估是否改为 `40px`（需 UI 确认，默认 Hero 不强制改百分比）。
|
||
|
||
---
|
||
|
||
### 6.2 服务中心（fwsc/index.vue）
|
||
|
||
**模板**
|
||
|
||
- `.banner-content` 外包 `.page-content-wrap`。
|
||
- `.services-section` 内 `.services-grid` 已在 `1400px` 内，改为外层 section 使用统一 padding。
|
||
|
||
**样式**
|
||
|
||
| 选择器 | 现状 | 目标 |
|
||
| --- | --- | --- |
|
||
| `.services-section` | `padding: 60px 200px 80px` | `padding: 64px 0`；内部 wrap 负责左右 40px |
|
||
| `.banner-content` | `padding: 0 40px` | 并入 `.page-content-wrap` |
|
||
| 响应式 `@media` | `100px` / `40px` / `16px` 多级 | 统一为 **24px / 16px** 两档 |
|
||
|
||
**保留**：`margin-top: -120px` 卡片上浮效果（仅间距体系变化，不改视觉层级）。
|
||
|
||
---
|
||
|
||
### 6.3 共性能力（gxnlpt/index.vue）
|
||
|
||
**模板**
|
||
|
||
- `.gxnlpt-main` 增加 `portal-page` + `.page-content-wrap` 结构。
|
||
- 锚点 Tab 与 `#anchor-container` 同级置于 wrap 内。
|
||
|
||
**样式**
|
||
|
||
| 选择器 | 操作 |
|
||
| --- | --- |
|
||
| `.gxnlpt-main` | `max-width: 1448px` → `1400px`；增加左右 padding **40px** |
|
||
| `.gxnlpt-tab` | `margin-bottom: 70px` → **64px** |
|
||
| `.anchor-container-box` | `margin-bottom: 70px` → **64px** |
|
||
| `.body-main` | `padding-top: 60px` → 使用 `--page-offset-top` |
|
||
|
||
---
|
||
|
||
### 6.4 企业出海（qych/index.vue）
|
||
|
||
**模板**
|
||
|
||
- `.header-wrap`、`.top-nav`、各 `.module` 容器统一为 `.page-content-wrap`。
|
||
|
||
**样式**
|
||
|
||
| 选择器 | 操作 |
|
||
| --- | --- |
|
||
| `.header-wrap` | `width: 1300px` → `max-width: 1400px` + gutter |
|
||
| `.top-nav` | 同上 |
|
||
| `.content-wrapper2` 等 | `max-width: 1300px` → **1400px** + **40px** padding |
|
||
| `.header` | `padding-top: 120px` 保留或收敛为设计稿一致（与 Banner 视觉相关，不改高度 350px） |
|
||
| 模块间距 | 零散 `30px` → **64px**（`--page-block-margin-bottom`） |
|
||
|
||
---
|
||
|
||
### 6.5 行业专题（hyzt/index.vue）
|
||
|
||
**模板**
|
||
|
||
- Banner 内 `.word` 与 `.hyzt-list` 均使用 `.page-content-wrap`。
|
||
|
||
**样式**
|
||
|
||
| 选择器 | 操作 |
|
||
| --- | --- |
|
||
| `.banner .word` | `width: 1300px` → wrap + `max-width: 1400px` |
|
||
| `.hyzt-list` | `width: 1300px` → 100% + wrap |
|
||
| `.banner` | `padding: 60px 0` 可保留；左右由 wrap 提供 **40px** |
|
||
| `.hyzt-list-wrap` | 增加 section 级上下 **64px**（按视觉与背景图协调） |
|
||
|
||
---
|
||
|
||
## 七、工程实施步骤
|
||
|
||
### 7.1 阶段划分
|
||
|
||
| 阶段 | 任务 | 预估工时 |
|
||
| --- | --- | --- |
|
||
| P0 | 新增 `page-layout.less` 并在入口样式引入 | 0.5h |
|
||
| P1 | 改造 fwsc、hyzt、gxnlpt（结构相对简单） | 4h |
|
||
| P2 | 改造 qych（模块多、选择器多） | 4h |
|
||
| P3 | 改造 home2（三屏 + 响应式 + 清理 hack） | 6h |
|
||
| P4 | 三端走查 + 修复溢出 | 2h |
|
||
|
||
### 7.2 开发检查清单
|
||
|
||
- [ ] 创建 `page-layout.less` 并定义 Token
|
||
- [ ] 五页根节点增加 `portal-page` class（可选，便于 scoped 覆盖）
|
||
- [ ] 替换所有 `1300px` / `1448px` 固定宽为 `max-width: 1400px`
|
||
- [ ] 替换 `200px` / `100px` 等大留白为 Token
|
||
- [ ] 首页 section `80px` → `64px`
|
||
- [ ] 删除首页三屏标题 `margin-left` hack
|
||
- [ ] 响应式 gutter 24px / 16px 五页一致
|
||
- [ ] 1366px、1920px、768px、375px 无横向滚动条
|
||
|
||
### 7.3 引入方式示例
|
||
|
||
在 `src/pages/index` 入口或各页公共父级引入：
|
||
|
||
```less
|
||
@import '@/pages/index/styles/page-layout.less';
|
||
```
|
||
|
||
各页 scoped 样式中仅保留页面特有样式，版心相关改为：
|
||
|
||
```less
|
||
@import (reference) '@/pages/index/styles/page-layout.less';
|
||
// 或直接使用 .page-content-wrap / .page-section
|
||
```
|
||
|
||
---
|
||
|
||
## 八、测试与验收
|
||
|
||
### 8.1 验收标准
|
||
|
||
| 编号 | 标准 | 通过条件 |
|
||
| --- | --- | --- |
|
||
| AC-01 | 版心对齐 | 五页主内容区在 1920 屏宽下左右边缘对齐 |
|
||
| AC-02 | gutter | 桌面端内容距视口边缘均为 **40px**（通过 wrap 实现） |
|
||
| AC-03 | section 间距 | 流式大区块上下均为 **64px** |
|
||
| AC-04 | 首页三屏 | 仍为 100vh；标题与网格不贴边、无双重偏移 |
|
||
| AC-05 | 服务中心 | 无 200px 留白；卡片区域与首页视觉宽度一致 |
|
||
| AC-06 | 响应式 | 768px、375px 下 gutter 为 24px / 16px |
|
||
| AC-07 | 兼容性 | 1366px 宽度无横向滚动条 |
|
||
| AC-08 | 范围 | 子市场页样式无意外改动 |
|
||
|
||
### 8.2 测试用例（手工）
|
||
|
||
| 用例 ID | 页面 | 分辨率 | 操作 | 预期 |
|
||
| --- | --- | --- | --- | --- |
|
||
| TC-01 | 五页 | 1920×1080 | 打开首页并依次进入四入口 | 主内容左右对齐，无宽窄不一 |
|
||
| TC-02 | fwsc | 1920×1080 | 查看服务卡片区域 | 左右留白约 40px，非大留白 |
|
||
| TC-03 | home2 | 1920×1080 | 滚动三屏区块 | 每屏标题不漂移、不重复缩进 |
|
||
| TC-04 | 五页 | 1366×768 | 全页滚动 | 无横向滚动条 |
|
||
| TC-05 | 五页 | 768×1024 | 查看边距 | 左右约 24px |
|
||
| TC-06 | 五页 | 375×812 | 查看边距 | 左右约 16px |
|
||
| TC-07 | gxnlpt | 1920×1080 | 切换锚点模块 | 模块间距 64px，版心 1400px |
|
||
|
||
### 8.3 回归风险
|
||
|
||
> **警告**：服务中心由 200px 改为 40px 后，主内容视觉变宽，卡片可能更接近屏幕边缘，需在 1920 与 1366 下重点确认。
|
||
|
||
> **说明**：首页 section 由 80px 改为 64px 后，区块纵向更紧凑，若设计认为过密，需走变更流程调整 C 项决策。
|
||
|
||
---
|
||
|
||
## 九、附录
|
||
|
||
### 9.1 关键文件路径速查
|
||
|
||
```
|
||
txw-mhzc-web/
|
||
├── public/docs/page-layout-margin-refactor.md # 本文档
|
||
├── src/pages/index/styles/page-layout.less # 待新建
|
||
├── src/pages/index/views/home2/index.vue
|
||
├── src/pages/index/views/fwsc/index.vue
|
||
├── src/pages/index/views/gxnlpt/index.vue
|
||
├── src/pages/index/views/qych/index.vue
|
||
└── src/pages/index/views/hyzt/index.vue
|
||
```
|
||
|
||
### 9.2 变更记录
|
||
|
||
| 版本 | 日期 | 变更说明 | 作者 |
|
||
| --- | --- | --- | --- |
|
||
| v1.0 | 2026-05-19 | 根据需求确认 A1/B1/C2/D1/E1/F1 编写初版 | — |
|
||
|
||
---
|
||
|
||
## 十、后续行动
|
||
|
||
1. 开发按第七章 checklist 实施改造。
|
||
2. 测试按第八章用例验收。
|
||
3. 验收通过后更新本文档状态为「已上线」，并注明实际上线日期。
|
||
|
||
> **待办**：开发启动前由 UI 确认 Hero 区 `6%` / `10%` 是否纳入 gutter 统一（默认保留现状）。
|