docs(spec): clarify script detail spacing targets
This commit is contained in:
@@ -51,6 +51,17 @@ status: approved-in-chat
|
|||||||
- 调整详情页滚动内容区的外层边距,使其与创造未来页卡片的横向节奏一致
|
- 调整详情页滚动内容区的外层边距,使其与创造未来页卡片的横向节奏一致
|
||||||
- 保留详情页卡片各自的内部 padding,不将屏幕边距职责下放到卡片本身
|
- 保留详情页卡片各自的内部 padding,不将屏幕边距职责下放到卡片本身
|
||||||
|
|
||||||
|
### 4.1.1 目标 spacing 基准
|
||||||
|
|
||||||
|
为保证实施时不再围绕 `24rpx / 40rpx` 反复摇摆,本次明确以下目标值:
|
||||||
|
|
||||||
|
- 参考基准:`mini-program/src/pages/main/index.vue` 中 `tab-page` 的横向 padding `32rpx`
|
||||||
|
- 详情页 `detail-content`:横向 padding 目标为 `32rpx`
|
||||||
|
- 详情页 `detail-content`:顶部 padding 可保持 `24rpx`
|
||||||
|
- 详情页 `detail-content`:底部 padding 目标为 `32rpx` 起,若真机验证仍出现底部圆角不完整,可增加到 `40rpx`
|
||||||
|
- `content-container`:保持承担卡片栈间距,目标 gap 为 `24rpx`
|
||||||
|
- `info-card` 与 `full-content`:不新增额外横向 margin,继续依赖外层容器提供屏幕留白
|
||||||
|
|
||||||
### 4.2 不采用的方案
|
### 4.2 不采用的方案
|
||||||
|
|
||||||
#### 方案 A:只加大详情页右侧 padding
|
#### 方案 A:只加大详情页右侧 padding
|
||||||
@@ -115,9 +126,10 @@ status: approved-in-chat
|
|||||||
修复完成后,应满足:
|
修复完成后,应满足:
|
||||||
|
|
||||||
1. 从“创造未来”页进入详情页后,详情页两张卡片的左右起止线与上一页卡片的横向节奏一致。
|
1. 从“创造未来”页进入详情页后,详情页两张卡片的左右起止线与上一页卡片的横向节奏一致。
|
||||||
2. “主题 / 风格 / 篇幅”卡片右侧不再贴屏,能清晰看到完整留白。
|
2. `detail-content` 的横向留白与 `tab-page` 视觉一致,即按 `32rpx` 基准实现。
|
||||||
3. 信息卡片和完整剧本卡片的圆角边框完整展示,不再产生贴边或截断感。
|
3. “主题 / 风格 / 篇幅”卡片右侧不再贴屏,能清晰看到完整留白。
|
||||||
4. 修复不引入以下副作用:
|
4. 信息卡片和完整剧本卡片的圆角边框完整展示,不再产生贴边或截断感。
|
||||||
|
5. 修复不引入以下副作用:
|
||||||
- 内容区过窄
|
- 内容区过窄
|
||||||
- 顶部栏错位
|
- 顶部栏错位
|
||||||
- Markdown 异常换行
|
- Markdown 异常换行
|
||||||
|
|||||||
Reference in New Issue
Block a user