2.8 KiB
2.8 KiB
企业出海三版文案低分辨率留白修复报告
设计源文件
- 页面实现源文件：
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 7201366 x 7681366 x 820以下窗口高度
- 验证点：
- 文案区底部是否存在足够留白
- 右侧服务卡片底部是否贴边
- 左右栏是否发生重叠
- 文案可读性和整体版式是否保持统一
- 高分辨率桌面样式是否被误伤
验证结果
- 代码诊断通过，未引入新的语法或样式错误。
- 项目构建通过。
- 低分辨率适配规则仅在目标断点内生效，高分辨率桌面原有版式不受影响。
- 三版文案区的底部留白、服务栏下缘空间和整体纵向节奏均已统一收口。
备注
- 当前环境无法直接输出真实设计软件源文件，也无法进行真机截图回归；本报告基于代码实现、断点覆盖和构建结果生成。