shanxia2.0/docs/demos/pl-plan-pair-stack-simple.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>装/送 · 无色中性</title>
  <style>
    body {
      margin: 0;
      padding: 32px 24px;
      font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 14px;
      color: #1e293b;
      background: #f8fafc;
    }
    h1 { margin: 0 0 6px; font-size: 18px; }
    p { margin: 0 0 16px; color: #64748b; font-size: 13px; line-height: 1.5; }
    .box {
      max-width: 520px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 16px;
    }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th {
      padding: 8px;
      font-size: 12px;
      color: #64748b;
      font-weight: 600;
      text-align: center;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
    }
    th.l { text-align: left; }
    td {
      padding: 8px;
      border-bottom: 1px solid #e2e8f0;
      vertical-align: middle;
      text-align: center;
    }
    td.l { text-align: left; }
    .pair { display: flex; flex-direction: column; width: 100%; }
    .line { padding: 1px 0; line-height: 1.4; color: #1e293b; }
    .line + .line {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px dashed #e2e8f0;
    }
    .addr { font-weight: 600; }
    .time { margin-top: 2px; font-size: 12px; color: #64748b; font-weight: 400; }
    .num { font-variant-numeric: tabular-nums; font-weight: 600; }
  </style>
</head>
<body>
  <h1>无色中性</h1>
  <p>不写「装」「送」，也不用绿/蓝字色。上下两行中间用虚线分隔（上=装、下=送）。</p>
  <div class="box">
    <table>
      <thead>
        <tr>
          <th class="l">地址</th>
          <th>计划数量</th>
          <th>单价</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="l">
            <div class="pair">
              <div class="line">
                <div class="addr">宜昌西陵化工园 A12</div>
                <div class="time">09-16 08:30</div>
              </div>
              <div class="line">
                <div class="addr">武汉东西湖物流大道 88</div>
                <div class="time">09-16 16:00</div>
              </div>
            </div>
          </td>
          <td>
            <div class="pair">
              <div class="line"><span class="num">0.01</span></div>
              <div class="line"><span class="num">0.01</span></div>
            </div>
          </td>
          <td>
            <div class="pair">
              <div class="line"><span class="num">10</span></div>
              <div class="line"><span class="num" style="color:#64748b;font-weight:500">—</span></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>