feat: unify project responsive layouts

2026-07-21 20:59:10 +08:00
parent a0d19f4aab
commit 5d99bae3f2
94 changed files with 2324 additions and 404 deletions
@@ -0,0 +1,22 @@
+# 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 操作，不启用多代理。