mtsd/mobile-ui/sanqiang-client-product-detail-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: #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 { 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: 100px; }
    .top {
      position: sticky;
      top: 0;
      z-index: 20;
      background: linear-gradient(145deg, #0a9f6d, #11b37a);
      color: #fff;
      padding: 12px 16px 14px;
      border-bottom-left-radius: 18px;
      border-bottom-right-radius: 18px;
      box-shadow: var(--shadow);
    }
    .top-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
    .back { color: #fff; text-decoration: none; font-weight: 600; }
    .banner {
      margin: 12px 16px 0;
      border-radius: 14px;
      overflow: hidden;
      height: 220px;
      background: linear-gradient(145deg, #f4fbf8, #dff2e9);
      border: 1px solid var(--border);
      position: relative;
    }
    .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; gap: 6px; }
    .dot { width: 16px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.45); }
    .dot.active { width: 24px; background: #fff; }
    .section { margin: 12px 16px; }
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
    }
    .price-line { display: flex; align-items: baseline; gap: 4px; }
    .price { font-size: 28px; color: var(--danger); font-weight: 700; }
    .unit { font-size: 12px; color: var(--muted); }
    .name { margin-top: 8px; font-size: 16px; line-height: 1.4; font-weight: 600; }
    .sku { margin-top: 6px; font-size: 12px; color: var(--muted); }
    .tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
    .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;
    }
    .title { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; }
    .title span { color: var(--muted); font-size: 12px; font-weight: 400; }
    .param-list { display: grid; gap: 8px; }
    .param { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 13px; padding: 8px 0; border-top: 1px solid #edf5f1; }
    .param:first-child { border-top: 0; padding-top: 0; }
    .pname { color: var(--muted); }
    .pvalue { color: var(--text); }
    .desc {
      font-size: 13px;
      line-height: 1.6;
      color: #33423c;
      background: #f8fcfa;
      border: 1px solid #e8f3ee;
      border-radius: 10px;
      padding: 10px;
    }
    .media {
      margin-top: 10px;
      height: 140px;
      border-radius: 10px;
      border: 1px dashed #cfe6da;
      background: linear-gradient(145deg, #f7fcfa, #ebf6f1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #7d9188;
      font-size: 12px;
    }
    .review-card { border-top: 1px solid #edf5f1; padding-top: 10px; margin-top: 10px; }
    .review-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
    .score { color: #d6a343; font-weight: 700; }
    .review-text { margin-top: 8px; font-size: 13px; color: #3b4a43; line-height: 1.5; }
    .thumbs { margin-top: 8px; display: flex; gap: 8px; }
    .thumb {
      width: 64px;
      height: 64px;
      border-radius: 8px;
      background: linear-gradient(145deg, #eef8f3, #dbefe5);
      border: 1px solid #dcebe4;
    }
    .bar {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: min(420px, 100%);
      background: #fff;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px 14px;
      gap: 10px;
    }
    .icons { display: flex; gap: 14px; color: var(--muted); font-size: 12px; }
    .icon { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 40px; }
    .actions { flex: 1; display: flex; gap: 8px; }
    .btn {
      flex: 1;
      min-height: 42px;
      border-radius: 21px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
    }
    .btn-cart { background: #f3a43b; }
    .btn-buy { background: var(--green); }
  </style>
</head>
<body>
  <main class="phone">
    <header class="top">
      <div class="top-row">
        <a class="back" href="./sanqiang-client-cart-ui-demo.html">← 返回购物车</a>
        <span>商品详情</span>
        <span>···</span>
      </div>
    </header>

    <section class="banner">
      <div class="dots"><span class="dot active"></span><span class="dot"></span><span class="dot"></span></div>
    </section>

    <section class="section">
      <article class="card">
        <div class="price-line"><span class="price">¥8.80</span><span class="unit">/500g</span></div>
        <div class="name">云南有机小青菜 500g（新鲜叶菜）</div>
        <div class="sku">SKU：SQ-VEG-00128</div>
        <div class="tags">
          <span class="tag">24小时内采收</span>
          <span class="tag">可追溯基地</span>
          <span class="tag">支持当日达</span>
        </div>
      </article>
    </section>

    <section class="section">
      <article class="card">
        <div class="title">商品参数 <span>与小程序详情页字段对齐</span></div>
        <div class="param-list">
          <div class="param"><span class="pname">规格</span><span class="pvalue">500g/份</span></div>
          <div class="param"><span class="pname">产地</span><span class="pvalue">云南昆明</span></div>
          <div class="param"><span class="pname">储存方式</span><span class="pvalue">0-4℃冷藏</span></div>
          <div class="param"><span class="pname">保质期</span><span class="pvalue">3天</span></div>
        </div>
      </article>
    </section>

    <section class="section">
      <article class="card">
        <div class="title">商品详情 <span>富文本 + 图文/视频</span></div>
        <div class="desc">基地每日清晨采摘，叶片完整，口感脆嫩。适合快炒、清汤、蒜蓉蒸制等家庭场景。支持团餐和门店批量采购。</div>
        <div class="media">详情图片/视频展示区（运营端可配置）</div>
      </article>
    </section>

    <section class="section">
      <article class="card">
        <div class="title">商品评价 <span>查看全部 &gt;</span></div>
        <div class="review-head"><span>综合评分 <strong class="score">4.8</strong></span><span>共 126 条</span></div>
        <div class="review-card">
          <div class="review-head"><span>匿名用户 · ★★★★★</span><span>2026-04-16</span></div>
          <div class="review-text">叶子很新鲜，分量足，配送很快，晚上下单次日上午就送达了。</div>
          <div class="thumbs"><span class="thumb"></span><span class="thumb"></span><span class="thumb"></span></div>
        </div>
      </article>
    </section>
  </main>

  <footer class="bar">
    <div class="icons">
      <span class="icon"><span>🏠</span><span>首页</span></span>
      <span class="icon"><span>🛒</span><span>购物车</span></span>
    </div>
    <div class="actions">
      <span class="btn btn-cart">加入购物车</span>
      <span class="btn btn-buy">立即购买</span>
    </div>
  </footer>
</body>
</html>