sqxp/mobile-ui/sanqiang-supplier-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; }
    .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; }
    .merchant { display: flex; gap: 12px; align-items: center; }
    .avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); }
    .merchant 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); }
    .section { margin: 12px 16px; }
    .title { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
    .title h2 { font-size: 16px; }
    .title a { color: var(--muted); font-size: 12px; }
    .tools {
      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; font-size: 12px; gap: 6px; text-align: center; }
    .icon { width: 24px; height: 24px; border-radius: 8px; background: #dff1e8; }
    .tasks { 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);
    }
    .task-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; }
    .task-no { font-size: 13px; font-weight: 600; }
    .tag { min-height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center; font-size: 11px; }
    .tag.pending { background: #fff4dd; color: var(--warn); }
    .tag.stocking { background: #e9f9f2; color: var(--ok); }
    .line { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 7px; }
    .goods { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0 10px; }
    .goods-item { width: 96px; flex: 0 0 auto; border: 1px solid #e8f3ee; border-radius: 10px; overflow: hidden; background: #fff; }
    .goods-img { height: 56px; background: linear-gradient(145deg, #f4faf7, #e9f4ef); border-bottom: 1px solid #e8f3ee; }
    .goods-txt { padding: 6px; font-size: 11px; color: #4f5f58; }
    .foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
    .money { color: #be7a12; font-weight: 700; font-size: 16px; }
    .btn { min-height: 34px; padding: 0 12px; border-radius: 17px; background: var(--green); color: #fff; display: inline-flex; align-items: center; font-size: 12px; }
  </style>
</head>
<body>
  <main class="phone">
    <header class="header">
      <div class="topline">
        <h1>供应商工作台</h1>
        <span class="logout">退出登录</span>
      </div>
      <div class="merchant">
        <div class="avatar"></div>
        <div>
          <strong>叁强鲜配 - 福田供应站</strong>
          <p>区域：深圳市福田区</p>
        </div>
      </div>
    </header>

    <section class="stats">
      <article class="stat"><strong>18</strong><span>待报价询价单</span></article>
      <article class="stat"><strong>42</strong><span>我的报价</span></article>
      <article class="stat"><strong>9</strong><span>待备货任务</span></article>
    </section>

    <section class="section">
      <div class="title"><h2>常用功能</h2></div>
      <div class="tools">
        <article class="tool"><div class="icon"></div><span>询价单</span></article>
        <article class="tool"><div class="icon"></div><span>我的报价</span></article>
        <article class="tool"><div class="icon"></div><span>备货任务</span></article>
        <article class="tool"><div class="icon"></div><span>价格清单</span></article>
        <article class="tool"><div class="icon"></div><span>取货地址</span></article>
        <article class="tool"><div class="icon"></div><span>库存预警</span></article>
        <article class="tool"><div class="icon"></div><span>售后处理</span></article>
        <article class="tool"><div class="icon"></div><span>联系客服</span></article>
      </div>
    </section>

    <section class="section">
      <div class="title"><h2>待处理备货任务</h2><a>查看全部</a></div>
      <div class="tasks">
        <article class="task">
          <div class="task-h"><span class="task-no">任务号：PS20260417001</span><span class="tag pending">待备货</span></div>
          <div class="line"><span>配送员：刘师傅 138****3392</span><span>截止 09:30</span></div>
          <div class="goods">
            <div class="goods-item"><div class="goods-img"></div><div class="goods-txt">有机生菜 x30</div></div>
            <div class="goods-item"><div class="goods-img"></div><div class="goods-txt">圣女果 x20</div></div>
            <div class="goods-item"><div class="goods-img"></div><div class="goods-txt">土鸡蛋 x10</div></div>
          </div>
          <div class="foot"><span>共 60 件</span><span class="money">¥2,360.00</span><span class="btn">开始备货</span></div>
        </article>

        <article class="task">
          <div class="task-h"><span class="task-no">任务号：PS20260417002</span><span class="tag stocking">备货中</span></div>
          <div class="line"><span>配送员：王师傅 136****9021</span><span>截止 10:00</span></div>
          <div class="goods">
            <div class="goods-item"><div class="goods-img"></div><div class="goods-txt">精品黄瓜 x25</div></div>
            <div class="goods-item"><div class="goods-img"></div><div class="goods-txt">胡萝卜 x18</div></div>
          </div>
          <div class="foot"><span>完成度 68%</span><span class="money">¥1,140.00</span><span class="btn">查看详情</span></div>
        </article>
      </div>
    </section>
  </main>
</body>
</html>