mtsd/mobile-ui/sanqiang-deliverer-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-dark: #087f57;
      --yellow: #d6a343;
      --bg: #f3f7f5;
      --card: #ffffff;
      --text: #1f2a26;
      --muted: #6f7e77;
      --border: #d9e9e1;
      --warn: #cf8a19;
      --ok: #189b65;
      --shadow: 0 8px 20px rgba(10, 159, 109, 0.1);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
    .phone {
      max-width: 420px;
      margin: 0 auto;
      min-height: 100vh;
      padding-bottom: 20px;
      position: relative;
      overflow: hidden;
    }
    .phone > *:not(.watermark-layer) {
      position: relative;
      z-index: 1;
    }
    .watermark-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .watermark-grid {
      width: 100%;
      min-height: 100%;
      padding: 24px 10px;
      opacity: 0.055;
      transform: rotate(-16deg) scale(1.08);
      transform-origin: center;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 34px 14px;
    }
    .watermark-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .watermark-item img {
      width: 84px;
      height: 84px;
      object-fit: contain;
      display: block;
      filter: grayscale(10%);
    }
    .watermark-item span {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #0b8a61;
    }
    .header {
      background: linear-gradient(145deg, var(--green-dark), var(--green));
      border-bottom-left-radius: 24px; border-bottom-right-radius: 24px;
      color: #fff; padding: 16px;
      box-shadow: var(--shadow);
    }
    .topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
    .topline h1 { font-size: 18px; font-weight: 700; }
    .logout { min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.4); display: inline-flex; align-items: center; font-size: 12px; }
    .driver { display: flex; gap: 12px; align-items: center; }
    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.24);
      border: 1px solid rgba(255, 255, 255, 0.35);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .deliverer-logo {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.92);
      color: var(--green-dark);
      font-size: 14px;
      font-weight: 700;
      line-height: 30px;
      text-align: center;
    }
    .driver p { font-size: 12px; opacity: 0.9; margin-top: 2px; }
    .stats {
      margin: -14px 16px 12px; background: var(--card); border-radius: 16px; border: 1px solid var(--border);
      display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 8px;
    }
    .stat { text-align: center; }
    .stat strong { font-size: 20px; color: var(--green-dark); display: block; }
    .stat span { font-size: 11px; color: var(--muted); }
    .tabs { margin: 10px 16px; display: flex; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 4px; }
    .tab { flex: 1; min-height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
    .tab.active { background: #e9f9f2; color: var(--ok); font-weight: 600; }
    .section { margin: 12px 16px; }
    .section-head { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
    .section-head h2 { font-size: 16px; }
    .section-head a { color: var(--muted); font-size: 12px; }
    .task-list { display: flex; flex-direction: column; gap: 10px; }
    .task {
      background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px;
      box-shadow: 0 4px 12px rgba(10, 159, 109, 0.06);
    }
    .line1 { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .no { font-size: 13px; font-weight: 600; }
    .status { min-height: 26px; padding: 0 10px; border-radius: 13px; font-size: 11px; display: inline-flex; align-items: center; }
    .status.pending { background: #fff4dd; color: var(--warn); }
    .status.delivering { background: #e9f9f2; color: var(--ok); }
    .blk { border: 1px dashed #e4efe9; border-radius: 10px; padding: 8px; background: #f8fcfa; margin-bottom: 8px; }
    .blk h3 { font-size: 12px; margin-bottom: 6px; color: #3f5d51; }
    .blk p { font-size: 12px; color: #52615b; line-height: 1.45; }
    .phone-row { margin-top: 5px; display: flex; align-items: center; justify-content: space-between; }
    .dial { min-height: 30px; padding: 0 10px; border-radius: 15px; background: #fff; border: 1px solid #cce5d8; color: var(--ok); font-size: 11px; display: inline-flex; align-items: center; }
    .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
    .qty { font-size: 12px; color: var(--muted); }
    .action { min-height: 34px; padding: 0 12px; border-radius: 17px; background: var(--green); color: #fff; font-size: 12px; display: inline-flex; align-items: center; }
    .tools {
      margin-top: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px;
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    }
    .tool { min-height: 74px; border-radius: 12px; background: #f8fcfa; border: 1px solid #e8f3ee; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; text-align: center; }
    .tool .ico { width: 24px; height: 24px; border-radius: 8px; background: #dff1e8; }
  </style>
</head>
<body>
  <main class="phone">
    <div class="watermark-layer" aria-hidden="true">
      <div class="watermark-grid">
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
        <div class="watermark-item"><img src="../web-admin/public/logo1.jpg" alt="" /><span>陇耘鲜达</span></div>
      </div>
    </div>
    <header class="header">
      <div class="topline">
        <h1>配送员工作台</h1>
        <span class="logout">退出登录</span>
      </div>
      <div class="driver">
        <div class="avatar">
          <span class="deliverer-logo">配</span>
        </div>
        <div>
          <strong>张师傅</strong>
          <p>当前区域：南山区 · 在线接单中</p>
        </div>
      </div>
    </header>

    <section class="stats">
      <article class="stat"><strong>7</strong><span>待取货</span></article>
      <article class="stat"><strong>4</strong><span>配送中</span></article>
      <article class="stat"><strong>26</strong><span>今日完成</span></article>
    </section>

    <nav class="tabs">
      <a class="tab active">待取货</a>
      <a class="tab">配送中</a>
      <a class="tab">已完成</a>
    </nav>

    <section class="section">
      <div class="tools">
        <article class="tool"><div class="ico"></div><span>抢单大厅</span></article>
        <article class="tool"><div class="ico"></div><span>我的任务</span></article>
        <article class="tool"><div class="ico"></div><span>异常上报</span></article>
        <article class="tool"><div class="ico"></div><span>联系客服</span></article>
      </div>

      <div class="section-head" style="margin-top: 12px;"><h2>当前任务</h2><a>查看全部</a></div>
      <div class="task-list">
        <article class="task">
          <div class="line1"><span class="no">任务号：DL20260417007</span><span class="status pending">待取货</span></div>
          <div class="blk">
            <h3>取货信息</h3>
            <p>供应商：陇耘鲜达福田站</p>
            <p>地址：福田区车公庙仓配中心 A2-08</p>
            <div class="phone-row"><span>联系人：陈师傅</span><span class="dial">联系取货人</span></div>
          </div>
          <div class="blk">
            <h3>配送信息</h3>
            <p>客户：南山科技园 5 号楼员工食堂</p>
            <p>收货地址：南山区高新南六道 19 号</p>
            <div class="phone-row"><span>收货人：李主管</span><span class="dial">联系客户</span></div>
          </div>
          <div class="foot"><span class="qty">共 42 件 · 预计 24 分钟</span><span class="action">导航并取货</span></div>
        </article>

        <article class="task">
          <div class="line1"><span class="no">任务号：DL20260417008</span><span class="status delivering">配送中</span></div>
          <div class="blk">
            <h3>取货信息</h3>
            <p>供应商：陇耘鲜达龙岗站</p>
            <p>地址：龙岗区平湖冷链仓 3 层</p>
          </div>
          <div class="foot"><span class="qty">共 18 件 · 截止 10:15</span><span class="action">查看详情</span></div>
        </article>
      </div>
    </section>
  </main>
</body>
</html>