# 企业出海三版文案低分辨率留白修复报告

## 设计源文件
- 页面实现源文件：`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` 以下窗口高度
- 验证点：
  - 文案区底部是否存在足够留白
  - 右侧服务卡片底部是否贴边
  - 左右栏是否发生重叠
  - 文案可读性和整体版式是否保持统一
  - 高分辨率桌面样式是否被误伤

## 验证结果
- 代码诊断通过，未引入新的语法或样式错误。
- 项目构建通过。
- 低分辨率适配规则仅在目标断点内生效，高分辨率桌面原有版式不受影响。
- 三版文案区的底部留白、服务栏下缘空间和整体纵向节奏均已统一收口。

## 备注
- 当前环境无法直接输出真实设计软件源文件，也无法进行真机截图回归；本报告基于代码实现、断点覆盖和构建结果生成。