mtsd/mobile-ui/sanqiang-client-cart-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; --danger: #d14343;
    }
    * { 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: 90px; }
    .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: 6px; }
    .sub { font-size: 12px; opacity: 0.9; }
    .section { margin: 12px 16px; }
    .store { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
    .store-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .store-name { font-size: 14px; font-weight: 600; }
    .tag { min-height: 24px; padding: 0 10px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 11px; display: inline-flex; align-items: center; }
    .item { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid #edf5f1; }
    .thumb { display: block; height: 84px; border-radius: 10px; background: linear-gradient(145deg, #f4fbf8, #e4f6ef); text-decoration: none; }
    .name { display: inline-flex; font-size: 13px; line-height: 1.35; min-height: 34px; color: var(--text); text-decoration: none; }
    .spec { margin-top: 4px; color: var(--muted); font-size: 11px; }
    .line { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; }
    .price { font-size: 16px; color: var(--danger); font-weight: 700; }
    .qty { display: inline-flex; align-items: center; gap: 8px; }
    .qbtn { width: 30px; height: 30px; border-radius: 15px; border: 1px solid #b9decf; color: var(--green); display: flex; align-items: center; justify-content: center; }
    .qnum { min-width: 18px; text-align: center; font-size: 13px; }
    .coupon { margin-top: 10px; background: #fff7e8; border: 1px solid #f2dfb8; border-radius: 12px; padding: 10px; display: flex; justify-content: space-between; font-size: 12px; color: #8c6b2d; }
    .hint { margin-top: 8px; color: var(--muted); font-size: 11px; text-align: right; }
    .bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(420px, 100%); background: #fff; border-top: 1px solid var(--border); padding: 10px 14px 14px; display: flex; justify-content: space-between; align-items: center; }
    .total { font-size: 12px; color: var(--muted); }
    .total strong { display: block; color: var(--danger); font-size: 20px; margin-top: 2px; }
    .btn { min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--yellow); color: #fff; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
  </style>
</head>
<body>
  <main class="phone">
    <header class="top">
      <div class="title">购物车</div>
      <div class="sub">按供应站分组，支持一键结算</div>
    </header>
    <section class="section">
      <article class="store">
        <div class="store-head"><span class="store-name">陇耘鲜达 · 南山供应站</span><span class="tag">满 99 包邮</span></div>
        <div class="item">
          <a class="thumb" href="./sanqiang-client-product-detail-ui-demo.html" aria-label="查看商品详情"></a>
          <div>
            <a class="name" href="./sanqiang-client-product-detail-ui-demo.html">云南有机小青菜 500g</a>
            <div class="spec">规格：500g/份</div>
            <div class="line"><span class="price">¥8.80</span><span class="qty"><span class="qbtn">-</span><span class="qnum">2</span><span class="qbtn">+</span></span></div>
          </div>
        </div>
        <div class="item">
          <a class="thumb" href="./sanqiang-client-product-detail-ui-demo.html" aria-label="查看商品详情"></a>
          <div>
            <a class="name" href="./sanqiang-client-product-detail-ui-demo.html">散养土鸡蛋 30 枚装</a>
            <div class="spec">规格：30 枚/盒</div>
            <div class="line"><span class="price">¥29.80</span><span class="qty"><span class="qbtn">-</span><span class="qnum">1</span><span class="qbtn">+</span></span></div>
          </div>
        </div>
        <div class="coupon"><span>可用优惠券：满 120 减 15</span><span>去使用</span></div>
        <div class="hint">点击商品可预览详情页设计</div>
      </article>
    </section>
  </main>
  <footer class="bar">
    <div class="total">已选 3 件商品<strong>¥47.40</strong></div>
    <span class="btn">去结算</span>
  </footer>
</body>
</html>