13 KiB
13 KiB
门户页面边距统一改造说明
| 属性 | 内容 |
|---|---|
| 文档版本 | 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
// 页面级布局 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 级复用）
.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企业出海（首页区块）
仅调整：
- 标题区（
.section-title/.capability-header/.overseas2-header）左右对齐 gutter 40px，移除margin-left: 40px等 hack。 - 内容网格在版心 1400px 内水平居中，左右留白 40px。
--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-pageclass（可选，便于 scoped 覆盖） - 替换所有
1300px/1448px固定宽为max-width: 1400px - 替换
200px/100px等大留白为 Token - 首页 section
80px→64px - 删除首页三屏标题
margin-lefthack - 响应式 gutter 24px / 16px 五页一致
- 1366px、1920px、768px、375px 无横向滚动条
7.3 引入方式示例
在 src/pages/index 入口或各页公共父级引入：
@import '@/pages/index/styles/page-layout.less';
各页 scoped 样式中仅保留页面特有样式，版心相关改为：
@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 编写初版 | — |
十、后续行动
- 开发按第七章 checklist 实施改造。
- 测试按第八章用例验收。
- 验收通过后更新本文档状态为「已上线」，并注明实际上线日期。
待办：开发启动前由 UI 确认 Hero 区
6%/10%是否纳入 gutter 统一（默认保留现状）。