1.3 KiB
1.3 KiB
G09 申请卡片九宫格边框设计
问题
list-slip-frame.png 原始尺寸为 720×144,比例为 5:1。G09 卡片当前约为 672×228rpx,比例约 2.95:1,并使用 background-size: 100% 100%,导致整张边框素材被纵向拉伸。卡片上、下内距和卡片间距也偏宽。
方案
.application-card停止使用拉伸背景,改用 CSSborder-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 操作,不启用多代理。