sqxp/mobile-ui/sanqiang-client-order-ui-demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>叁强鲜配 - 客户端订单UI Demo</title>
  <style>
    :root {
      --green: #0a9f6d; --green-soft: #e9f9f2; --yellow: #d6a343; --bg: #f5f8f7;
      --card: #fff; --text: #1f2a26; --muted: #6b7b74; --border: #dcebe4; --warn: #cf8a19;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; background: var(--bg); color: var(--text); }
    .phone { max-width: 420px; margin: 0 auto; min-height: 100vh; padding-bottom: 20px; }
    .top { background: linear-gradient(145deg, #0a9f6d, #11b37a); color: #fff; padding: 16px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
    .title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
    .tabs { display: flex; gap: 8px; overflow-x: auto; }
    .tab { min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 12px; display: inline-flex; align-items: center; }
    .tab.active { background: #fff; color: var(--green); font-weight: 600; }
    .section { margin: 12px 16px; }
    .order { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
    .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .no { font-size: 13px; font-weight: 600; }
    .status { min-height: 24px; padding: 0 10px; border-radius: 12px; display: inline-flex; align-items: center; font-size: 11px; }
    .status.pending { background: #fff4dd; color: var(--warn); }
    .status.delivering { background: var(--green-soft); color: var(--green); }
    .goods { display: flex; gap: 8px; margin-bottom: 8px; }
    .img { width: 58px; height: 58px; border-radius: 8px; background: linear-gradient(145deg, #f4fbf8, #e4f6ef); }
    .meta { font-size: 12px; color: var(--muted); line-height: 1.45; }
    .ft { padding-top: 8px; border-top: 1px solid #edf5f1; display: flex; align-items: center; justify-content: space-between; }
    .sum { font-size: 12px; color: var(--muted); }
    .actions { display: inline-flex; gap: 8px; }
    .btn { min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid #bedfce; color: var(--green); font-size: 12px; display: inline-flex; align-items: center; }
    .btn.primary { background: var(--yellow); border-color: var(--yellow); color: #fff; }
  </style>
</head>
<body>
  <main class="phone">
    <header class="top">
      <div class="title">我的订单</div>
      <nav class="tabs">
        <a class="tab active">全部</a>
        <a class="tab">待支付</a>
        <a class="tab">待配送</a>
        <a class="tab">配送中</a>
        <a class="tab">已完成</a>
      </nav>
    </header>
    <section class="section">
      <article class="order">
        <div class="head"><span class="no">订单号：SQ202604170021</span><span class="status pending">待支付</span></div>
        <div class="goods">
          <div class="img"></div>
          <div class="meta">
            <p>南山供应站 · 生鲜组合 3 件</p>
            <p>下单时间：2026-04-17 08:26</p>
            <p>预计配送：今日 10:30 前</p>
          </div>
        </div>
        <div class="ft"><span class="sum">合计：¥148.30</span><span class="actions"><span class="btn">取消订单</span><span class="btn primary">立即支付</span></span></div>
      </article>
      <article class="order">
        <div class="head"><span class="no">订单号：SQ202604160118</span><span class="status delivering">配送中</span></div>
        <div class="goods">
          <div class="img"></div>
          <div class="meta">
            <p>福田供应站 · 蔬果套餐 4 件</p>
            <p>配送员：刘师傅 138****3392</p>
            <p>当前节点：已取货，预计 15 分钟送达</p>
          </div>
        </div>
        <div class="ft"><span class="sum">合计：¥232.00</span><span class="actions"><span class="btn">查看物流</span><span class="btn">联系配送员</span></span></div>
      </article>
    </section>
  </main>
</body>
</html>