质检工单 / 我的质检任务 · 卡片间距选型

针对列表中相邻工单卡片(及组内质检任务小卡片)边界不够清晰的问题,提供若干 Fresh Mint 风格 HTML 静态 Demo,可直接在浏览器打开对比。每个 Demo 含 3 条模拟工单,可切换「质检工单 / 我的质检任务」视角。

现状:列表区白底 + 卡片白底 + 仅 1px 浅灰边框 + 14px 间距,相邻卡片在视觉上容易「糊成一片」;组内任务区为 #f8fafc 浅灰底,任务小卡片同样是白底细边框,三列并排时区分度也不足。

01 · 现状基线

与现网一致:gap 14px、1px #e2e8f0 边框、无默认阴影。作为对照组。

对照组

02 · 列表区浅灰底

卡片容器改为 #f1f5f9,卡片保持白底并加轻阴影,利用背景色差拉开层次。

推荐候选

03 · 加大间距 + 常驻阴影

gap 增至 20px,卡片默认 box-shadow,hover 时阴影略加深。

推荐候选

04 · 左侧主色竖条

每条工单卡片左侧 3px 薄荷绿竖条(对齐 panel 标题竖条语义),强化条目边界。

结构感强

05 · 卡片间分隔带

卡片之间插入 1px 虚线或实线分隔带,间距不变但边界更明确。

轻改动

06 · 无边框浮起卡片

去掉外边框,仅靠阴影与圆角区分;列表区用浅灰底衬托。

现代感

07 · 组内任务小卡片

聚焦工单内三列任务卡片的 4 种分隔方案并排对比(与工单级方案可组合)。

内层卡片

09 · 强化标题栏背景

每条卡标题栏薄荷 #ecfdf5 vs 现网 #fafafa;6 条可滚动对比,含推荐组合方案。

标题栏方案

10 · 样本组绿底白字顶栏

入库同样本分组 qc-sample-row__ctx:绿渐变/深绿底 + 白字,对比现网白底。

样本组顶栏

08 · 一屏纵览对比

在同一页面纵向排列全部工单级方案缩略预览,便于快速扫视选型。

总览