64 lines
2.8 KiB
Markdown
64 lines
2.8 KiB
Markdown
# 企业出海三版文案低分辨率留白修复报告
|
||
|
||
## 设计源文件
|
||
- 页面实现源文件：`src/pages/index/views/qych/index.vue`
|
||
- 关联样式变量：`src/pages/index/styles/home-figma-variables.less`
|
||
|
||
说明：当前仓库未包含独立的 Figma/PSD 设计源文件，本次输出的是已调整完成的前端实现源文件与测试报告。
|
||
|
||
## 应用场景
|
||
- 电池法案：`#section0`
|
||
- CBAM（碳边境调节机制）：`#section1`
|
||
- 航运燃料：`#section2`
|
||
|
||
三版文案均定义在 `src/pages/index/views/qych/index.vue`，共用同一套 `text-section / content-item1 / content-item2 / service-section-dcfa` 结构。
|
||
|
||
## 问题表现
|
||
- 在 `720P` 及以下高度场景中，文案区底部留白不足。
|
||
- 右侧申请服务卡片下缘空间偏紧，整体显得贴底。
|
||
- 左侧滚动文案区和右侧服务栏之间的纵向节奏偏紧，影响可读性和视觉呼吸感。
|
||
|
||
## 根因分析
|
||
- 三版文案区被统一锁定为固定高度：
|
||
- `@qych-policy-card-height: 490px`
|
||
- `@qych-policy-panel-height: 376px`
|
||
- 低分辨率场景下，整体卡片高度、正文滚动区高度、右侧服务栏卡片内边距都没有针对设备高度做单独放大或重分配。
|
||
- 底部留白主要依赖固定像素 `padding-bottom`，在 `720P` 一类场景中无法随视口高度自适应。
|
||
|
||
## 调整方案
|
||
- 在 `@media (max-width: 1366px), (max-height: 820px)` 下新增企业出海专题内容区适配。
|
||
- 调整项：
|
||
- 增大专题上下留白：`--qych-topic-py`
|
||
- 放宽模块内部块间距：`.module gap`
|
||
- 文案主卡片改为响应式最小高度：`.text-section min-height`
|
||
- 标题区上下内边距改为 `clamp(...)`
|
||
- 正文区左右和底部内边距改为响应式值
|
||
- 左侧滚动文案区底部内边距提升到 `clamp(34px, 5vh, 48px)`
|
||
- 右侧服务栏底部内边距和卡片堆叠间距同步提升
|
||
- 服务卡片底部内边距提升到 `clamp(28px, 4.4vh, 40px)`
|
||
- 针对 CBAM 长文案单独上调正文滚动区高度
|
||
|
||
## 关键修改文件
|
||
- `src/pages/index/views/qych/index.vue`
|
||
|
||
## 测试范围
|
||
- 目标场景：
|
||
- `1280 x 720`
|
||
- `1366 x 768`
|
||
- `1366 x 820` 以下窗口高度
|
||
- 验证点：
|
||
- 文案区底部是否存在足够留白
|
||
- 右侧服务卡片底部是否贴边
|
||
- 左右栏是否发生重叠
|
||
- 文案可读性和整体版式是否保持统一
|
||
- 高分辨率桌面样式是否被误伤
|
||
|
||
## 验证结果
|
||
- 代码诊断通过，未引入新的语法或样式错误。
|
||
- 项目构建通过。
|
||
- 低分辨率适配规则仅在目标断点内生效，高分辨率桌面原有版式不受影响。
|
||
- 三版文案区的底部留白、服务栏下缘空间和整体纵向节奏均已统一收口。
|
||
|
||
## 备注
|
||
- 当前环境无法直接输出真实设计软件源文件，也无法进行真机截图回归；本报告基于代码实现、断点覆盖和构建结果生成。
|