针对列表中相邻工单卡片(及组内质检任务小卡片)边界不够清晰的问题,提供若干 Fresh Mint 风格 HTML 静态 Demo,可直接在浏览器打开对比。每个 Demo 含 3 条模拟工单,可切换「质检工单 / 我的质检任务」视角。
与现网一致:gap 14px、1px #e2e8f0 边框、无默认阴影。作为对照组。
对照组卡片容器改为 #f1f5f9,卡片保持白底并加轻阴影,利用背景色差拉开层次。
推荐候选gap 增至 20px,卡片默认 box-shadow,hover 时阴影略加深。
推荐候选每条工单卡片左侧 3px 薄荷绿竖条(对齐 panel 标题竖条语义),强化条目边界。
结构感强卡片之间插入 1px 虚线或实线分隔带,间距不变但边界更明确。
轻改动去掉外边框,仅靠阴影与圆角区分;列表区用浅灰底衬托。
现代感聚焦工单内三列任务卡片的 4 种分隔方案并排对比(与工单级方案可组合)。
内层卡片每条卡标题栏薄荷 #ecfdf5 vs 现网 #fafafa;6 条可滚动对比,含推荐组合方案。
标题栏方案入库同样本分组 qc-sample-row__ctx:绿渐变/深绿底 + 白字,对比现网白底。
样本组顶栏在同一页面纵向排列全部工单级方案缩略预览,便于快速扫视选型。
总览