市场部列表卡片右侧遮挡修复设计

问题与根因

市场部通用列表卡片 .market-list-card 同时设置了 width: 100%、padding: 14px 和 border: 1px，但未设置 box-sizing: border-box。在默认 content-box 盒模型下，卡片实际外宽比父容器多 30px，因此右侧超出视口并被遮挡。

影响范围

市场部共有 12 个列表入口，由“市场专员 / 地区经理”两个角色与 6 个业务模块组合生成。

模块	专员页	经理页	当前布局
预签约订单	不受影响	不受影响	独立 `PresignOrderCard`
协议单	受影响	受影响	共用 `MarketListCard`
催缴信息	受影响	受影响	共用 `MarketListCard`
缴费信息	受影响	受影响	共用 `MarketListCard`
样本信息	受影响	受影响	共用 `MarketListCard`
运费信息	受影响	受影响	共用 `MarketListCard`

修复方案

仅在 .market-list-card 上增加 box-sizing: border-box。保留现有 width: 100%、内边距、边框和卡片内容布局，使内边距与边框计入容器宽度。

不修改预签约订单的独立卡片，不引入全局盒模型规则，不调整数据和业务交互。

验证方案

先在 mobile-parity-ui.test.js 增加卡片宽度约束回归测试，并确认测试在修复前失败。
增加最小 CSS 修复后，确认相同测试通过。
运行市场移动端相关 Node 测试与 mobile-oa-h5 生产构建。
在窄屏视口下检查通用列表卡片左右留白对称，并确认预签约订单卡片未回归。

完成标准

受影响的 10 个通用市场列表页卡片不再超出父容器。
12 个入口的卡片均保持左右间距，无水平遮挡。
不改变卡片内容、按钮、状态标签和列表加载行为。

1.8 KiB Raw Blame History