mtsd/mobile-ui/sanqiang-client-profile-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; --yellow: #d6a343; --bg: #f5f8f7; --card: #fff;
      --text: #1f2a26; --muted: #6b7b74; --border: #dcebe4;
    }
    * { 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: 20px; }
    .header {
      background: linear-gradient(145deg, #0a9f6d, #11b37a);
      color: #fff; padding: 16px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
    }
    .user { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
    .avatar { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.22); }
    .name { font-size: 18px; font-weight: 700; }
    .lv { margin-top: 2px; font-size: 12px; opacity: 0.9; }
    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .s { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 10px 8px; text-align: center; }
    .s strong { display: block; font-size: 18px; }
    .s span { font-size: 11px; opacity: 0.95; }
    .section { margin: 12px 16px; }
    .card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px; }
    .row { min-height: 46px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf5f1; }
    .row:last-child { border-bottom: none; }
    .left { display: flex; align-items: center; gap: 10px; font-size: 14px; }
    .ico { width: 26px; height: 26px; border-radius: 8px; background: #e4f6ef; }
    .arrow { color: #9ba8a2; font-size: 14px; }
    .coupon { margin-top: 12px; border-radius: 14px; border: 1px solid #f2dfb8; background: #fff7e8; padding: 12px; color: #8c6b2d; display: flex; align-items: center; justify-content: space-between; }
    .coupon strong { font-size: 16px; }
    .logout { margin-top: 12px; min-height: 44px; border-radius: 22px; background: var(--yellow); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
  </style>
</head>
<body>
  <main class="phone">
    <header class="header">
      <div class="user">
        <div class="avatar"></div>
        <div>
          <div class="name">王女士</div>
          <div class="lv">叁强会员 · 已服务 128 天</div>
        </div>
      </div>
      <div class="stats">
        <div class="s"><strong>26</strong><span>全部订单</span></div>
        <div class="s"><strong>3</strong><span>待收货</span></div>
        <div class="s"><strong>8</strong><span>优惠券</span></div>
      </div>
    </header>

    <section class="section">
      <article class="card">
        <div class="row"><div class="left"><span class="ico"></span><span>收货地址管理</span></div><span class="arrow">&gt;</span></div>
        <div class="row"><div class="left"><span class="ico"></span><span>发票管理</span></div><span class="arrow">&gt;</span></div>
        <div class="row"><div class="left"><span class="ico"></span><span>结算记录</span></div><span class="arrow">&gt;</span></div>
        <div class="row"><div class="left"><span class="ico"></span><span>退款记录</span></div><span class="arrow">&gt;</span></div>
        <div class="row"><div class="left"><span class="ico"></span><span>联系客服</span></div><span class="arrow">&gt;</span></div>
      </article>
      <div class="coupon"><span>可用优惠券</span><strong>8 张</strong></div>
      <div class="logout">退出登录</div>
    </section>
  </main>
</body>
</html>