zkxw/docs/qc-card-separation-demos/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>质检卡片间距 · Demo 索引</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="_shared.css" />
    <style>
      .index-hero {
        max-width: 960px;
        margin: 0 auto;
        padding: 32px 24px 12px;
      }

      .index-hero h1 {
        margin: 0 0 8px;
        font-size: 22px;
      }

      .index-hero p {
        margin: 0;
        color: var(--text-muted);
        max-width: 680px;
        line-height: 1.6;
      }

      .index-grid {
        max-width: 960px;
        margin: 0 auto;
        padding: 16px 24px 48px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
      }

      .index-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 18px;
        text-decoration: none;
        color: inherit;
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .index-card:hover {
        border-color: #a7f3d0;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
      }

      .index-card h2 {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 600;
        color: var(--primary-dark);
      }

      .index-card p {
        margin: 0;
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.5;
      }

      .index-card .tag {
        display: inline-block;
        margin-top: 12px;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        background: #f1f5f9;
        color: var(--text-muted);
      }

      .index-card .tag--rec {
        background: var(--primary-bg);
        color: var(--primary-dark);
      }

      .index-card .tag--inner {
        background: #eff6ff;
        color: #2563eb;
      }

      .problem-box {
        max-width: 960px;
        margin: 0 auto 8px;
        padding: 0 24px;
      }

      .problem-box-inner {
        padding: 14px 16px;
        border: 1px dashed #fca5a5;
        border-radius: 10px;
        background: #fef2f2;
        font-size: 13px;
        color: #991b1b;
        line-height: 1.55;
      }

      .problem-box-inner strong {
        color: #b91c1c;
      }
    </style>
  </head>
  <body>
    <div class="index-hero">
      <h1>质检工单 / 我的质检任务 · 卡片间距选型</h1>
      <p>
        针对列表中相邻工单卡片（及组内质检任务小卡片）边界不够清晰的问题，提供若干 Fresh Mint
        风格 HTML 静态 Demo，可直接在浏览器打开对比。每个 Demo 含 3 条模拟工单，可切换「质检工单 /
        我的质检任务」视角。
      </p>
    </div>

    <div class="problem-box">
      <div class="problem-box-inner">
        <strong>现状：</strong>列表区白底 + 卡片白底 + 仅 1px 浅灰边框 + 14px 间距，相邻卡片在视觉上容易「糊成一片」；组内任务区为
        #f8fafc 浅灰底，任务小卡片同样是白底细边框，三列并排时区分度也不足。
      </div>
    </div>

    <div class="index-grid">
      <a class="index-card" href="01-baseline.html">
        <h2>01 · 现状基线</h2>
        <p>与现网一致：gap 14px、1px #e2e8f0 边框、无默认阴影。作为对照组。</p>
        <span class="tag">对照组</span>
      </a>

      <a class="index-card" href="02-tinted-canvas.html">
        <h2>02 · 列表区浅灰底</h2>
        <p>卡片容器改为 #f1f5f9，卡片保持白底并加轻阴影，利用背景色差拉开层次。</p>
        <span class="tag tag--rec">推荐候选</span>
      </a>

      <a class="index-card" href="03-gap-and-shadow.html">
        <h2>03 · 加大间距 + 常驻阴影</h2>
        <p>gap 增至 20px，卡片默认 box-shadow，hover 时阴影略加深。</p>
        <span class="tag tag--rec">推荐候选</span>
      </a>

      <a class="index-card" href="04-left-accent-bar.html">
        <h2>04 · 左侧主色竖条</h2>
        <p>每条工单卡片左侧 3px 薄荷绿竖条（对齐 panel 标题竖条语义），强化条目边界。</p>
        <span class="tag">结构感强</span>
      </a>

      <a class="index-card" href="05-divider-separator.html">
        <h2>05 · 卡片间分隔带</h2>
        <p>卡片之间插入 1px 虚线或实线分隔带，间距不变但边界更明确。</p>
        <span class="tag">轻改动</span>
      </a>

      <a class="index-card" href="06-elevated-no-border.html">
        <h2>06 · 无边框浮起卡片</h2>
        <p>去掉外边框，仅靠阴影与圆角区分；列表区用浅灰底衬托。</p>
        <span class="tag">现代感</span>
      </a>

      <a class="index-card" href="07-inner-task-cards.html">
        <h2>07 · 组内任务小卡片</h2>
        <p>聚焦工单内三列任务卡片的 4 种分隔方案并排对比（与工单级方案可组合）。</p>
        <span class="tag tag--inner">内层卡片</span>
      </a>

      <a class="index-card" href="09-strong-header-bg.html">
        <h2>09 · 强化标题栏背景</h2>
        <p>每条卡标题栏薄荷 #ecfdf5 vs 现网 #fafafa；6 条可滚动对比，含推荐组合方案。</p>
        <span class="tag tag--rec">标题栏方案</span>
      </a>

      <a class="index-card" href="10-sample-ctx-green-header.html">
        <h2>10 · 样本组绿底白字顶栏</h2>
        <p>入库同样本分组 qc-sample-row__ctx：绿渐变/深绿底 + 白字，对比现网白底。</p>
        <span class="tag tag--rec">样本组顶栏</span>
      </a>

      <a class="index-card" href="compare-all.html">
        <h2>08 · 一屏纵览对比</h2>
        <p>在同一页面纵向排列全部工单级方案缩略预览，便于快速扫视选型。</p>
        <span class="tag">总览</span>
      </a>
    </div>
  </body>
</html>