sqxp/mobile-ui/sanqiang-client-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 {
      --brand-green: #0a9f6d;
      --brand-green-soft: #e9f9f2;
      --barley-yellow: #d6a343;
      --bg: #f5f8f7;
      --card: #ffffff;
      --text: #1f2a26;
      --muted: #6b7b74;
      --border: #dcebe4;
      --danger: #d14343;
      --shadow: 0 8px 20px rgba(10, 159, 109, 0.12);
    }
    * { 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: 94px; }
    .top {
      position: sticky; top: 0; z-index: 30;
      background: linear-gradient(145deg, #0a9f6d 0%, #11b37a 70%, #d6a343 160%);
      padding: 14px 16px 16px;
      border-bottom-left-radius: 22px; border-bottom-right-radius: 22px;
      box-shadow: var(--shadow);
    }
    .top-row { display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 14px; margin-bottom: 10px; }
    .search { background: #fff; min-height: 44px; border-radius: 22px; display: flex; align-items: center; padding: 0 14px; color: #8aa39a; font-size: 14px; }
    .section { margin: 12px 16px; }
    .section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .section-head h3 { font-size: 17px; }
    .section-head span { font-size: 12px; color: var(--muted); }

    .first-level {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 2px 2px 2px;
      scrollbar-width: none;
    }
    .first-level::-webkit-scrollbar {
      display: none;
    }
    .first-level-indicator {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 8px auto 0;
    }
    .indicator-dot {
      width: 18px;
      height: 4px;
      border-radius: 999px;
      background: #dbe9e2;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .indicator-dot.active {
      width: 28px;
      background: linear-gradient(145deg, #11b37a, #0a9f6d);
    }
    .first-page {
      flex: 0 0 100%;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      padding: 4px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      scroll-snap-align: start;
    }
    .first-chip {
      min-height: 92px;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 11px;
      border: none;
      background: transparent;
      color: #4f665d;
      text-align: center;
      line-height: 1.2;
      box-shadow: none;
    }
    .first-chip::before {
      content: "";
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: linear-gradient(145deg, #dff1e8, #cdebdc);
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.04);
    }
    .first-chip.active {
      background: linear-gradient(145deg, #e7f8f0, #f1fbf6);
      color: var(--brand-green);
      border: none;
      font-weight: 600;
      box-shadow: 0 8px 16px rgba(10, 159, 109, 0.16);
      transform: translateY(-2px);
    }
    .first-chip.active::before {
      background: linear-gradient(145deg, #0a9f6d, #11b37a);
    }

    .category-layout {
      margin-top: 10px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 92px 1fr;
      min-height: 440px;
    }
    .second-level {
      background: #f8fcfa;
      border-right: 1px solid #edf5f1;
      padding: 6px 0;
    }
    .second-item {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      color: #5f726a;
      font-size: 12px;
      text-align: center;
      border-left: 3px solid transparent;
    }
    .second-item.active {
      color: var(--brand-green);
      background: #fff;
      font-weight: 600;
      border-left-color: var(--brand-green);
    }

    .goods-area { padding: 10px; }
    .goods-tip {
      min-height: 30px;
      background: #f4fbf8;
      border: 1px solid #ddefe7;
      border-radius: 8px;
      color: #5e746a;
      font-size: 11px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-bottom: 10px;
    }
    .goods-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .goods-card {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 10px;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }
    .thumb { background: linear-gradient(145deg, #f4fbf8, #e4f6ef); min-height: 92px; }
    .info { padding: 8px 10px 8px 0; }
    .name { font-size: 13px; line-height: 1.35; min-height: 34px; }
    .meta { color: var(--muted); font-size: 11px; margin: 4px 0 8px; }
    .price-row { display: flex; align-items: center; justify-content: space-between; }
    .price { color: var(--danger); font-size: 16px; font-weight: 700; }
    .add { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }

    .cart-bar {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 72px;
      width: min(420px, 100%);
      padding: 0 12px;
      z-index: 40;
    }
    .cart-inner {
      min-height: 58px;
      border-radius: 18px;
      background: linear-gradient(145deg, #ffffff, #f5fbf8);
      border: 1px solid #d9ebe3;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
      box-shadow: 0 8px 18px rgba(10, 159, 109, 0.12);
    }
    .cart-left {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-left: 4px;
    }
    .cart-count {
      min-width: 26px;
      height: 26px;
      border-radius: 13px;
      background: linear-gradient(145deg, #0a9f6d, #11b37a);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
    }
    .cart-text { display: flex; flex-direction: column; gap: 1px; }
    .cart-items { font-size: 11px; color: #6f8179; }
    .cart-total { font-size: 16px; font-weight: 700; letter-spacing: 0.2px; color: #1f2a26; }
    .settle {
      min-height: 42px;
      padding: 0 18px;
      border-radius: 14px;
      background: linear-gradient(145deg, #d6a343, #e4b458);
      color: #fff;
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    }
    .tab {
      position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(420px, 100%);
      background: #fff; border-top: 1px solid var(--border); min-height: 64px; display: grid; grid-template-columns: repeat(4, 1fr); z-index: 45;
    }
    .tab-item { font-size: 11px; color: #7f8c87; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
    .tab-item.active { color: var(--brand-green); font-weight: 600; }
    .tab-dot { width: 20px; height: 20px; border-radius: 6px; background: #dfeee7; }
  </style>
</head>
<body>
  <main class="phone">
    <header class="top">
      <div class="top-row">
        <span>配送到：南山区科技园</span>
        <span>叁强鲜配</span>
      </div>
      <div class="search">搜索商品、品牌、一级/二级分类</div>
    </header>

    <section class="section">
      <div class="section-head">
        <h3>商品分类</h3>
        <span>选大类后再选二级分类</span>
      </div>

      <div class="first-level" id="firstLevelPager">
        <div class="first-page">
          <div class="first-chip active">蔬菜</div>
          <div class="first-chip">水果</div>
          <div class="first-chip">肉禽蛋</div>
          <div class="first-chip">水产海鲜</div>
          <div class="first-chip">粮油干货</div>
          <div class="first-chip">冻品速食</div>
          <div class="first-chip">豆乳制品</div>
          <div class="first-chip">调味辅料</div>
          <div class="first-chip">鲜面主食</div>
          <div class="first-chip">饮品冲调</div>
        </div>
        <div class="first-page">
          <div class="first-chip">烘焙甜品</div>
          <div class="first-chip">地方特产</div>
          <div class="first-chip">净菜套餐</div>
          <div class="first-chip">节日礼盒</div>
          <div class="first-chip">门店热销</div>
          <div class="first-chip">新品上市</div>
          <div class="first-chip">限时秒杀</div>
          <div class="first-chip">企业采购</div>
          <div class="first-chip">食堂专供</div>
          <div class="first-chip">更多分类</div>
        </div>
      </div>
      <div class="first-level-indicator" id="firstLevelIndicator">
        <span class="indicator-dot active" data-page="0"></span>
        <span class="indicator-dot" data-page="1"></span>
      </div>

      <div class="category-layout">
        <aside class="second-level">
          <div class="second-item active">全部</div>
          <div class="second-item">叶菜类</div>
          <div class="second-item">根茎类</div>
          <div class="second-item">菌菇类</div>
          <div class="second-item">豆制品</div>
          <div class="second-item">净菜半成品</div>
        </aside>

        <section class="goods-area">
          <div class="goods-tip">当前：一级分类「蔬菜」 / 二级分类「全部」</div>
          <div class="goods-list">
            <article class="goods-card">
              <div class="thumb"></div>
              <div class="info">
                <div class="name">云南有机小青菜 500g</div>
                <div class="meta">叶菜类 · 24 小时内采收</div>
                <div class="price-row"><span class="price">¥8.80</span><span class="add">+</span></div>
              </div>
            </article>
            <article class="goods-card">
              <div class="thumb"></div>
              <div class="info">
                <div class="name">山东胡萝卜 500g</div>
                <div class="meta">根茎类 · 脆甜少渣</div>
                <div class="price-row"><span class="price">¥6.50</span><span class="add">+</span></div>
              </div>
            </article>
            <article class="goods-card">
              <div class="thumb"></div>
              <div class="info">
                <div class="name">杏鲍菇 400g</div>
                <div class="meta">菌菇类 · 门店直发</div>
                <div class="price-row"><span class="price">¥9.90</span><span class="add">+</span></div>
              </div>
            </article>
          </div>
        </section>
      </div>
    </section>
  </main>

  <div class="cart-bar">
    <div class="cart-inner">
      <div class="cart-left">
        <span class="cart-count">6</span>
        <span class="cart-text">
          <span class="cart-items">已选商品</span>
          <span class="cart-total">¥148.30</span>
        </span>
      </div>
      <span class="settle">去结算</span>
    </div>
  </div>

  <nav class="tab">
    <a class="tab-item active"><span class="tab-dot"></span><span>首页</span></a>
    <a class="tab-item"><span class="tab-dot"></span><span>订单</span></a>
    <a class="tab-item"><span class="tab-dot"></span><span>购物车</span></a>
    <a class="tab-item"><span class="tab-dot"></span><span>我的</span></a>
  </nav>

  <script>
    (function () {
      var pager = document.getElementById("firstLevelPager");
      var indicator = document.getElementById("firstLevelIndicator");
      if (!pager || !indicator) return;

      var dots = Array.prototype.slice.call(indicator.querySelectorAll(".indicator-dot"));
      var pages = Array.prototype.slice.call(pager.querySelectorAll(".first-page"));

      function setActive(index) {
        dots.forEach(function (dot, i) {
          if (i === index) dot.classList.add("active");
          else dot.classList.remove("active");
        });
      }

      function scrollToPage(index) {
        var page = pages[index];
        if (!page) return;
        pager.scrollTo({ left: page.offsetLeft, behavior: "smooth" });
        setActive(index);
      }

      dots.forEach(function (dot) {
        dot.addEventListener("click", function () {
          var page = Number(dot.getAttribute("data-page") || 0);
          scrollToPage(page);
        });
      });

      pager.addEventListener("scroll", function () {
        var pageWidth = pager.clientWidth;
        if (!pageWidth) return;
        var idx = Math.round(pager.scrollLeft / pageWidth);
        if (idx < 0) idx = 0;
        if (idx > dots.length - 1) idx = dots.length - 1;
        setActive(idx);
      });
    })();
  </script>
</body>
</html>