rain
23 lines
1.3 KiB
Markdown
23 lines
1.3 KiB
Markdown
# G09 申请卡片九宫格边框设计
|
||
|
||
## 问题
|
||
|
||
`list-slip-frame.png` 原始尺寸为 `720×144`，比例为 `5:1`。G09 卡片当前约为 `672×228rpx`，比例约 `2.95:1`，并使用 `background-size: 100% 100%`，导致整张边框素材被纵向拉伸。卡片上、下内距和卡片间距也偏宽。
|
||
|
||
## 方案
|
||
|
||
- `.application-card` 停止使用拉伸背景，改用 CSS `border-image` 九宫格切片。
|
||
- 使用原素材 `list-slip-frame.png`，切片固定为上/下 `24px`、左/右 `32px`；四角不变，只拉伸中间边线。
|
||
- 卡片边框宽度使用上/下 `18rpx`、左/右 `24rpx`。
|
||
- 卡片最小高度从 `228rpx` 收紧到 `210rpx`，卡片间距从 `18rpx` 收紧到 `12rpx`。
|
||
- 卡片正文最小高度使用 `174rpx`，网格间距使用 `8rpx 14rpx`，内距使用 `26rpx 28rpx 22rpx 40rpx`。
|
||
- 保留 `white-space: nowrap`，不修改操作文案、状态、模拟数据和交互。
|
||
|
||
## 验证
|
||
|
||
- 合同禁止 `.application-card` 继续使用 `background: ... list-slip-frame.png ... 100% 100%`。
|
||
- 合同要求 `border-image-source`、`border-image-slice: 24 32`、边框宽度和收紧后的布局值。
|
||
- G09 视觉、文档流和业务状态合同通过。
|
||
- MuMu 原生画面中四角比例正常，卡片内容间距更紧凑，“修改后重新提交”保持单行且不溢出。
|
||
- 不执行 Git 操作，不启用多代理。
|