编辑页面

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>茶友 - 精品茶叶</title>
<style>
/* ===== 精品单品店小程序原型 ===== */
:root {
  --bg: #FBF8F3;
  --card-bg: #FFFEF9;
  --primary: #3D2314;
  --primary-light: #5C3D2E;
  --accent: #8B4513;
  --gold: #B8860B;
  --text: #3D2314;
  --text-light: #8B7355;
  --border: #E8DFD3;
  --cream: #F5EFE6;
  --distrib-bg: linear-gradient(135deg, #8B4513, #B8860B);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", serif;
  background: var(--bg);
  color: var(--text);
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
}

.page { display: none; padding-bottom: 80px; }
.page.active { display: block; }

/* ===== 顶部导航 ===== */
.top-nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: linear-gradient(to right, #3D2314, #5C3D2E);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
}
.top-nav .logo { font-size: 20px; font-weight: bold; letter-spacing: 4px; font-family: "KaiTi", serif; }
.top-nav .nav-icon { font-size: 20px; cursor: pointer; }
.top-nav.gold { background: var(--distrib-bg); }

/* ===== 首页 - 单品沉浸展示 ===== */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75%;
  background: linear-gradient(to top, 
    var(--bg) 0%,
    rgba(251,248,243,0.85) 25%,
    rgba(251,248,243,0.4) 50%,
    transparent 75%
  );
}

.hero-header {
  display: none !important;
}
.hero-back, .hero-cart {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 视频入口 */
.video-trigger {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}
.video-circle {
  width: 85px;
  height: 85px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(139,69,19,0.3);
  border: 3px solid var(--gold);
}
.video-circle::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 24px solid var(--accent);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 8px;
}
.video-text {
  margin-top: 12px;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 2px;
  background: rgba(255,255,255,0.95);
  padding: 6px 18px;
  border-radius: 20px;
}

/* 底部信息 */
.hero-card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px 90px;
  z-index: 10;
}

/* 磨砂玻璃产品卡片 */
.hero-card .product-card,
.product-card.frosted {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 8px 32px rgba(139,69,19,0.12);
}

.product-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 -4px 24px rgba(61,35,20,0.1);
  border: 1px solid var(--border);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}
.price-symbol { font-size: 16px; color: var(--accent); font-weight: bold; }
.price-main { font-size: 36px; color: var(--accent); font-weight: bold; }
.price-original { font-size: 14px; color: var(--text-light); text-decoration: line-through; margin-left: 4px; }
.price-tag { display: inline-block; background: var(--distrib-bg); color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 4px; letter-spacing: 1px; margin-left: 10px; }

.product-name { font-size: 20px; margin-bottom: 6px; letter-spacing: 3px; font-weight: 500; }
.product-desc { font-size: 12px; color: var(--text-light); letter-spacing: 2px; margin-bottom: 14px; }

.card-actions { display: flex; gap: 12px; margin-top: 16px; }

/* ===== 企业介绍大图区域 ===== */
.about-section {
  padding: 0 16px 16px;
}

.about-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

.about-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.about-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(61,35,20,0.9) 0%, rgba(61,35,20,0.5) 50%, transparent 100%);
  color: #fff;
}

.about-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  margin-bottom: 6px;
  font-family: "KaiTi", serif;
}

.about-sub {
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.9;
}

.about-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--distrib-bg);
  color: #fff;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 1px;
}

/* 企业详情弹窗 */
.about-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(251,248,243,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 250;
  display: none;
  overflow-y: auto;
}
.about-modal.active { display: block; }

.about-modal-header {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.about-modal-header .close-btn { font-size: 22px; cursor: pointer; }
.about-modal-header h2 { flex: 1; text-align: center; font-size: 16px; letter-spacing: 2px; margin-right: 40px; }

.about-hero-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.about-content { 
  padding: 24px 20px; 
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 0 12px 24px;
  border-radius: 16px;
}
.about-content h3 { font-size: 18px; margin-bottom: 16px; letter-spacing: 3px; font-family: "KaiTi", serif; color: var(--primary); }
.about-content p { font-size: 14px; color: var(--text-light); line-height: 2; letter-spacing: 1px; margin-bottom: 20px; }

.about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
.about-feature { 
  background: rgba(255,255,255,0.8); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px; 
  padding: 18px; 
  text-align: center; 
  border: 1px solid rgba(255,255,255,0.6);
}
.about-feature .icon { font-size: 32px; margin-bottom: 10px; }
.about-feature h4 { font-size: 14px; margin-bottom: 6px; letter-spacing: 2px; }
.about-feature p { font-size: 12px; color: var(--text-light); letter-spacing: 1px; }

.about-timeline { margin: 20px 0; }
.about-timeline-item { display: flex; gap: 16px; margin-bottom: 20px; }
.about-timeline-item .year { width: 60px; font-size: 14px; font-weight: bold; color: var(--accent); letter-spacing: 1px; flex-shrink: 0; }
.about-timeline-item .content { flex: 1; }
.about-timeline-item .content h4 { font-size: 14px; margin-bottom: 4px; letter-spacing: 1px; }
.about-timeline-item .content p { font-size: 12px; color: var(--text-light); line-height: 1.6; }

.about-img-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; }
.about-img-gallery img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }
.btn-card-cart {
  flex: 1;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 2px;
}
.btn-card-buy {
  flex: 1;
  background: var(--distrib-bg);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 2px;
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  font-size: 11px;
  color: var(--text-light);
  cursor: pointer;
  letter-spacing: 1px;
}
.nav-item span:first-child { font-size: 24px; margin-bottom: 4px; }
.nav-item.active { color: var(--accent); }
.nav-item .badge {
  position: absolute;
  top: -2px;
  right: 50%;
  transform: translateX(18px);
  background: #E74C3C;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}
.nav-item-container { position: relative; }
.nav-item.distrib { color: var(--gold); }
.nav-item.distrib span:first-child { color: var(--gold); }

/* ===== 商品详情页 ===== */
.detail-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--card-bg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}
.detail-header .back { font-size: 22px; cursor: pointer; }
.detail-header h2 { font-size: 16px; letter-spacing: 2px; }
.detail-header .share { font-size: 18px; cursor: pointer; }

.detail-hero {
  height: 420px;
  position: relative;
  background: var(--cream);
}
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero .indicator {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(61,35,20,0.7);
  color: #fff;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.detail-hero .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  border: 2px solid var(--gold);
}
.detail-hero .video-btn::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid var(--accent);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 6px;
}

.detail-info {
  background: var(--card-bg);
  padding: 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.detail-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.detail-price-symbol { font-size: 14px; color: var(--accent); }
.detail-price-main { font-size: 34px; color: var(--accent); font-weight: bold; }
.detail-price-ori { font-size: 14px; color: var(--text-light); text-decoration: line-through; margin-left: 6px; }
.detail-name { font-size: 20px; margin-bottom: 8px; letter-spacing: 2px; font-weight: 500; }
.detail-sub { font-size: 13px; color: var(--text-light); letter-spacing: 1px; }

/* 分享赚佣区域 */
.share-earn {
  background: var(--distrib-bg);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.share-earn-left { color: #fff; }
.share-earn h4 { font-size: 15px; margin-bottom: 4px; letter-spacing: 2px; }
.share-earn p { font-size: 12px; opacity: 0.9; }
.share-earn .earn-amount { color: #fff; font-size: 14px; letter-spacing: 1px; }
.share-earn .earn-amount strong { font-size: 24px; margin-left: 4px; }

/* 规格 */
.sku-section {
  background: var(--card-bg);
  padding: 18px 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sku-label { font-size: 14px; color: var(--text-light); margin-bottom: 10px; letter-spacing: 1px; }
.sku-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.sku-tag {
  padding: 10px 18px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 1px;
}
.sku-tag.selected { border-color: var(--accent); background: #F5EFE6; color: var(--accent); font-weight: 500; }

/* 店铺 */
.store-section {
  background: var(--card-bg);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.store-logo { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.store-logo img { width: 100%; height: 100%; object-fit: cover; }
.store-name { font-size: 15px; font-weight: 500; letter-spacing: 1px; margin-bottom: 4px; }
.store-desc { font-size: 12px; color: var(--text-light); letter-spacing: 1px; }

/* 图文详情 */
.detail-desc { background: var(--card-bg); padding: 22px; margin-bottom: 8px; }
.detail-desc h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; margin-bottom: 18px; letter-spacing: 2px; font-weight: normal; }
.detail-desc h3::before { content: '◆'; color: var(--gold); }
.detail-desc h3::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.detail-desc img { width: 100%; border-radius: 8px; margin-bottom: 14px; }
.desc-box { background: var(--cream); padding: 16px; border-radius: 8px; margin-bottom: 12px; border-left: 3px solid var(--accent); }
.desc-box h4 { font-size: 14px; margin-bottom: 8px; color: var(--primary); letter-spacing: 1px; }
.desc-box p { font-size: 13px; color: var(--text-light); line-height: 1.8; letter-spacing: 1px; }

/* 购买栏 */
.detail-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 8px;
  z-index: 100;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
}
.detail-icon { display: flex; flex-direction: column; align-items: center; font-size: 20px; cursor: pointer; padding: 0 8px; }
.detail-icon span { font-size: 10px; margin-top: 2px; color: var(--text-light); }
.detail-icon.distrib-icon { color: var(--gold); }
.detail-icon.distrib-icon span { color: var(--gold); }
.btn-add { flex: 1; background: var(--primary); color: #fff; border: none; padding: 14px; border-radius: 6px; font-size: 14px; letter-spacing: 2px; cursor: pointer; }
.btn-buy { flex: 1; background: var(--distrib-bg); color: #fff; border: none; padding: 14px; border-radius: 6px; font-size: 14px; letter-spacing: 2px; cursor: pointer; }

/* ===== 购物车页 ===== */
.cart-header { background: var(--card-bg); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.cart-header h2 { font-size: 18px; letter-spacing: 3px; }
.cart-header .clear { font-size: 14px; color: var(--text-light); cursor: pointer; }

.cart-list { padding: 16px; }
.cart-item { background: var(--card-bg); border-radius: 12px; padding: 18px; margin-bottom: 14px; display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--border); }
.cart-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.cart-check.checked { background: var(--accent); border-color: var(--accent); color: #fff; }
.cart-img { width: 88px; height: 88px; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); }
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { flex: 1; }
.cart-name { font-size: 15px; margin-bottom: 6px; font-weight: 500; letter-spacing: 1px; }
.cart-sku { font-size: 12px; color: var(--text-light); margin-bottom: 10px; letter-spacing: 1px; }
.cart-bottom { display: flex; justify-content: space-between; align-items: center; }
.cart-price { color: var(--accent); font-size: 18px; font-weight: bold; }
.cart-num { display: flex; align-items: center; gap: 12px; }
.cart-num button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--cream); font-size: 16px; cursor: pointer; }
.cart-num span { font-size: 16px; min-width: 28px; text-align: center; font-weight: 500; }

.cart-footer { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--card-bg); border-top: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 14px; z-index: 100; }
.cart-all { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; letter-spacing: 1px; }
.cart-total { flex: 1; font-size: 14px; color: var(--text-light); }
.cart-total strong { font-size: 18px; color: var(--accent); margin-left: 4px; }
.btn-settle { background: var(--distrib-bg); color: #fff; border: none; padding: 12px 24px; border-radius: 6px; font-size: 14px; letter-spacing: 2px; cursor: pointer; }

/* ===== 确认订单页 ===== */
.order-addr { background: var(--card-bg); padding: 18px 22px; display: flex; align-items: center; gap: 14px; margin: 16px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; }
.order-addr-icon { font-size: 28px; color: var(--accent); }
.order-addr-info { flex: 1; }
.order-addr-name { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.order-addr-detail { font-size: 13px; color: var(--text-light); letter-spacing: 1px; }
.order-items { background: var(--card-bg); margin: 0 16px 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.order-item { display: flex; gap: 14px; padding: 18px; border-bottom: 1px solid var(--border); }
.order-item:last-child { border-bottom: none; }
.order-img { width: 78px; height: 78px; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); }
.order-img img { width: 100%; height: 100%; object-fit: cover; }
.order-info { flex: 1; }
.order-name { font-size: 14px; margin-bottom: 6px; font-weight: 500; }
.order-sku { font-size: 12px; color: var(--text-light); margin-bottom: 10px; }
.order-bottom { display: flex; justify-content: space-between; }
.order-price { color: var(--accent); }
.order-num { color: var(--text-light); }

.order-section { background: var(--card-bg); margin: 0 16px 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.order-row { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; }
.order-row:last-child { border-bottom: none; }
.order-row .label { color: var(--text-light); letter-spacing: 1px; }
.order-row .value { letter-spacing: 1px; }
.order-row .value.red { color: #C0392B; }
.order-row.highlight { background: #FDF8F3; }
.pay-item { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; }
.pay-item:last-child { border-bottom: none; }
.pay-item .pay-icon { font-size: 24px; margin-right: 14px; }
.pay-item .pay-name { flex: 1; font-size: 14px; letter-spacing: 1px; }
.pay-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; }
.pay-check.checked { background: var(--accent); color: #fff; }

.submit-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--card-bg); border-top: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 14px; z-index: 100; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)); }
.submit-total { flex: 1; font-size: 14px; color: var(--text-light); }
.submit-total strong { font-size: 20px; color: var(--accent); margin-left: 4px; }
.btn-submit { background: var(--distrib-bg); color: #fff; border: none; padding: 14px 30px; border-radius: 6px; font-size: 15px; letter-spacing: 2px; cursor: pointer; }

/* ===== 个人中心 ===== */
.profile-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); padding: 40px 24px 28px; color: #fff; display: flex; align-items: center; gap: 18px; }
.profile-avatar { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 3px solid rgba(255,255,255,0.4); overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 20px; font-weight: bold; margin-bottom: 8px; letter-spacing: 3px; font-family: "KaiTi", serif; }
.profile-level { display: inline-block; background: var(--gold); padding: 4px 12px; border-radius: 2px; font-size: 12px; letter-spacing: 2px; }

/* 分销卡片 */
.distrib-profile-card {
  background: var(--distrib-bg);
  margin: -14px 16px 14px;
  border-radius: 12px;
  padding: 22px;
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.distrib-profile-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; }
.distrib-profile-card h3 { font-size: 16px; margin-bottom: 4px; letter-spacing: 3px; font-family: "KaiTi", serif; position: relative; z-index: 1; }
.distrib-profile-card > p { font-size: 12px; opacity: 0.9; margin-bottom: 18px; letter-spacing: 1px; position: relative; z-index: 1; }
.distrib-profile-stats { display: flex; justify-content: space-around; position: relative; z-index: 1; }
.distrib-profile-stat { text-align: center; }
.distrib-profile-stat .num { font-size: 24px; font-weight: bold; }
.distrib-profile-stat .label { font-size: 12px; opacity: 0.9; margin-top: 4px; letter-spacing: 1px; }

.order-quick { display: flex; background: var(--card-bg); margin: 0 16px 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.order-quick-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 16px 8px; font-size: 12px; cursor: pointer; border-right: 1px solid var(--border); letter-spacing: 1px; }
.order-quick-item:last-child { border-right: none; }
.order-quick-item span:first-child { font-size: 24px; margin-bottom: 8px; }

.menu-section { background: var(--card-bg); margin: 0 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.menu-item { display: flex; align-items: center; padding: 18px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.menu-item:last-child { border-bottom: none; }
.menu-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 14px; }
.menu-text { flex: 1; font-size: 15px; letter-spacing: 1px; }
.menu-arrow { color: var(--text-light); font-size: 16px; }

/* ===== 分销中心 ===== */
.distrib-header { background: var(--distrib-bg); padding: 36px 20px; color: #fff; text-align: center; }
.distrib-header h2 { font-size: 22px; margin-bottom: 8px; letter-spacing: 4px; font-family: "KaiTi", serif; }
.distrib-header p { font-size: 13px; opacity: 0.9; letter-spacing: 2px; }

.distrib-balance {
  background: var(--card-bg);
  margin: -18px 16px 0;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.balance-info h4 { font-size: 14px; color: var(--text-light); margin-bottom: 6px; letter-spacing: 2px; }
.balance-amount { font-size: 38px; color: var(--accent); font-weight: bold; }
.balance-amount span { font-size: 18px; }
.withdraw-btn { background: var(--distrib-bg); color: #fff; border: none; padding: 12px 24px; border-radius: 6px; font-size: 14px; letter-spacing: 2px; cursor: pointer; }

/* 推广入口 */
.promo-section { margin: 18px 16px; }
.promo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.promo-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--border);
  cursor: pointer;
}
.promo-card .icon { font-size: 36px; margin-bottom: 10px; }
.promo-card h4 { font-size: 14px; margin-bottom: 4px; letter-spacing: 2px; }
.promo-card p { font-size: 11px; color: var(--text-light); letter-spacing: 1px; }

/* 海报预览 */
.poster-preview {
  background: var(--card-bg);
  margin: 0 16px 16px;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border);
}
.poster-preview h4 { font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; text-align: center; }
.poster-preview img { width: 100%; border-radius: 8px; margin-bottom: 14px; }
.poster-preview .save-btn { width: 100%; background: var(--distrib-bg); color: #fff; border: none; padding: 12px; border-radius: 6px; font-size: 14px; letter-spacing: 2px; cursor: pointer; }

/* 分享链接 */
.share-link {
  background: var(--card-bg);
  margin: 0 16px 16px;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border);
}
.share-link h4 { font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
.share-link .link-box { background: var(--cream); padding: 12px; border-radius: 6px; font-size: 12px; color: var(--text-light); word-break: break-all; margin-bottom: 12px; letter-spacing: 1px; }
.share-link .share-btns { display: flex; gap: 10px; }
.share-link .share-btn { flex: 1; padding: 10px; border-radius: 6px; font-size: 13px; text-align: center; cursor: pointer; border: none; color: #fff; letter-spacing: 1px; }
.share-link .share-btn.wx { background: #07C160; }
.share-link .share-btn.wb { background: #E6162D; }

/* 佣金明细入口 */
.commission-section { margin: 0 16px 16px; }
.commission-section h4 { font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
.commission-list { background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.commission-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid var(--border); }
.commission-item:last-child { border-bottom: none; }
.commission-item .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; }
.commission-item .info { flex: 1; }
.commission-item .name { font-size: 14px; margin-bottom: 4px; }
.commission-item .time { font-size: 12px; color: var(--text-light); }
.commission-item .amount { font-size: 16px; color: var(--accent); font-weight: bold; }

/* 团队入口 */
.team-section { margin: 0 16px 18px; }
.team-section h4 { font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
.team-card { background: var(--card-bg); border-radius: 12px; padding: 18px; border: 1px solid var(--border); display: flex; align-items: center; cursor: pointer; }
.team-card .team-icon { width: 50px; height: 50px; border-radius: 10px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 14px; }
.team-card .team-info { flex: 1; }
.team-card .team-name { font-size: 15px; margin-bottom: 4px; letter-spacing: 1px; }
.team-card .team-num { font-size: 12px; color: var(--text-light); }
.team-card .team-arrow { color: var(--text-light); font-size: 18px; }

.section-title { display: flex; align-items: center; justify-content: center; padding: 0 16px 14px; gap: 14px; }
.section-title::before, .section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); }
.section-title h2 { font-size: 15px; color: var(--primary); letter-spacing: 3px; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 16px 18px; }
.stats-card { background: var(--card-bg); border-radius: 10px; padding: 18px; text-align: center; border: 1px solid var(--border); }
.stats-card .num { font-size: 22px; font-weight: bold; margin-bottom: 6px; }
.stats-card .num.green { color: var(--accent); }
.stats-card .num.gold { color: var(--gold); }
.stats-card .num.primary { color: var(--primary); }
.stats-card .label { font-size: 12px; color: var(--text-light); letter-spacing: 1px; }

.rank-section { background: var(--card-bg); margin: 0 16px 18px; border-radius: 12px; padding: 18px; border: 1px solid var(--border); }
.rank-title { font-size: 15px; font-weight: 500; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; letter-spacing: 2px; }
.rank-list { display: flex; flex-direction: column; gap: 12px; }
.rank-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: var(--cream); }
.rank-item .rank-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; }
.rank-item .rank-name { flex: 1; font-size: 14px; letter-spacing: 1px; }
.rank-item .rank-money { color: var(--accent); font-size: 14px; font-weight: bold; }

/* ===== 弹窗 ===== */
.video-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.95);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
}
.video-overlay.active { display: flex; }
.video-container { width: 100%; max-width: 430px; position: relative; }
.video-container video { width: 100%; max-height: 80vh; background: #000; }
.video-close { position: absolute; top: -44px; right: 10px; color: #fff; font-size: 32px; cursor: pointer; }

#toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(61,35,20,0.9); color: #fff; padding: 16px 32px; border-radius: 6px; font-size: 15px; z-index: 999; display: none; letter-spacing: 1px; }
</style>
</head>
<body>

<!-- ===== 首页 - 单品沉浸展示 ===== -->
<div id="page-home" class="page active">
  <section class="hero-section">
    <img src="https://images.unsplash.com/photo-1627435601361-ec25f5b1d0e5?w=800&q=80" alt="" class="hero-img">
    <div class="hero-gradient"></div>
    
    <div class="hero-header">
      <div class="hero-back">←</div>
      <div class="hero-cart" onclick="showPage('page-cart')">🛒</div>
    </div>
    
    <div class="video-trigger" onclick="showVideo()">
      <div class="video-circle"></div>
      <div class="video-text">观看视频介绍</div>
    </div>
    
    <div class="hero-card">
      <div class="product-card">
        <div class="price-row">
          <span class="price-symbol">¥</span>
          <span class="price-main">298</span>
          <span class="price-original">¥398</span>
          <span class="price-tag">热 销</span>
        </div>
        <h1 class="product-name">明前龙井 · 特级珍品</h1>
        <p class="product-desc">杭州西湖产区 · 明前采摘 · 手工炒制</p>
        
        <div class="card-actions">
          <button class="btn-card-cart" onclick="addToCart()">加入购物车</button>
          <button class="btn-card-buy" onclick="showPage('page-detail')">立即购买</button>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 企业介绍大图 -->
  <div class="about-section">
    <div class="about-card" onclick="showAbout()">
      <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=800&q=80" alt="茶友" class="about-img">
      <div class="about-tag">了 解 我 们</div>
      <div class="about-overlay">
        <div class="about-title">茶 友 缘 起</div>
        <div class="about-sub">始于1988年 · 三代茶人匠心传承</div>
      </div>
    </div>
  </div>
  
  <!-- 分销入口卡片 -->
  <div class="distrib-promo" onclick="showPage('page-distrib')" style="margin: 0 16px 16px; display: flex; align-items: center; justify-content: space-between; background: var(--distrib-bg); border-radius: 12px; padding: 18px 20px; cursor: pointer; position: relative; overflow: hidden;">
    <div style="position: relative; z-index: 1;">
      <h3 style="font-size: 16px; margin-bottom: 4px; letter-spacing: 2px; color: #fff;">分 享 赚 佣</h3>
      <p style="font-size: 12px; opacity: 0.9; color: #fff; letter-spacing: 1px;">分享链接 每单最高可赚 ¥29.8</p>
    </div>
    <div style="background: rgba(255,255,255,0.2); color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 13px; letter-spacing: 1px; border: 1px solid rgba(255,255,255,0.4); position: relative; z-index: 1;">立即加入</div>
  </div>
  
  <div class="bottom-nav">
    <div class="nav-item active">
      <div class="nav-item-container"><span>🏠</span>首页</div>
    </div>
    <div class="nav-item" onclick="showPage('page-detail')">
      <div class="nav-item-container"><span>📖</span>详情</div>
    </div>
    <div class="nav-item" onclick="showPage('page-distrib')">
      <div class="nav-item-container"><span>💰</span>分销</div>
    </div>
    <div class="nav-item" onclick="showPage('page-profile')">
      <div class="nav-item-container"><span>👤</span>我的</div>
    </div>
  </div>
</div>

<!-- ===== 商品详情页 ===== -->
<div id="page-detail" class="page">
  <div class="detail-header">
    <span class="back" onclick="showPage('page-home')">←</span>
    <h2>商 品 详 情</h2>
    <span class="share" onclick="shareProduct()">↗</span>
  </div>
  
  <div class="detail-hero">
    <img src="https://images.unsplash.com/photo-1627435601361-ec25f5b1d0e5?w=800&q=80" alt="">
    <div class="indicator">1/4</div>
    <div class="video-btn" onclick="showVideo()"></div>
  </div>
  
  <div class="detail-info">
    <div class="detail-price-row">
      <span class="detail-price-symbol">¥</span>
      <span class="detail-price-main">298</span>
      <span class="detail-price-ori">¥398</span>
    </div>
    <h1 class="detail-name">明前龙井 · 特级珍品 50g</h1>
    <p class="detail-sub">杭州西湖产区 · 明前采摘 · 手工炒制</p>
  </div>
  
  <!-- 分享赚佣入口 -->
  <div class="share-earn" onclick="showPage('page-distrib')">
    <div class="share-earn-left">
      <h4>分 享 赚 佣</h4>
      <p>分享给好友购买 获取佣金奖励</p>
    </div>
    <div class="earn-amount">
      赚<strong>¥29.8</strong>/单
    </div>
  </div>
  
  <div class="sku-section">
    <div class="sku-label">已选：特级 · 50g · 经典装</div>
    <div style="margin-bottom: 12px;">
      <div class="sku-label">等级</div>
      <div class="sku-tags">
        <div class="sku-tag selected">特级</div>
        <div class="sku-tag">一级</div>
        <div class="sku-tag">二级</div>
      </div>
    </div>
    <div style="margin-bottom: 12px;">
      <div class="sku-label">净含量</div>
      <div class="sku-tags">
        <div class="sku-tag selected">50g</div>
        <div class="sku-tag">100g</div>
        <div class="sku-tag">250g</div>
      </div>
    </div>
    <div>
      <div class="sku-label">包装</div>
      <div class="sku-tags">
        <div class="sku-tag selected">经典装</div>
        <div class="sku-tag">礼盒装</div>
      </div>
    </div>
  </div>
  
  <div class="store-section">
    <div class="store-logo"><img src="https://images.unsplash.com/photo-1558160074-4d7d8bdf4259?w=200&q=80" alt=""></div>
    <div>
      <div class="store-name">茶友旗舰店</div>
      <div class="store-desc">严选品质 · 匠心制茶</div>
    </div>
    <span style="color: var(--text-light); font-size: 18px;">›</span>
  </div>
  
  <div class="detail-desc">
    <h3>商 品 详 情</h3>
    <img src="https://images.unsplash.com/photo-1576092768241-dec231879fc3?w=600&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1563822249366-3efb23b8e0c9?w=600&q=80" alt="">
    
    <div class="desc-box">
      <h4>◆ 产品特点</h4>
      <p>明前龙井，产自杭州西湖保护区，清明前采摘，一芽一叶，手工辉锅炒制。茶汤嫩绿明亮，豆香浓郁，滋味鲜醇回甘，叶底匀整成朵。</p>
    </div>
    
    <div class="desc-box">
      <h4>◆ 产地环境</h4>
      <p>产自杭州西湖狮峰山脉，海拔300-500米，常年云雾缭绕，土壤肥沃，为龙井茶提供了得天独厚的生长环境。</p>
    </div>
    
    <div class="desc-box">
      <h4>◆ 冲泡方法</h4>
      <p>1. 取茶3-5g<br>2. 用85°C热水冲泡<br>3. 静置1-2分钟即可饮用<br>4. 可续水3-4次</p>
    </div>
  </div>
  
  <div style="height: 90px;"></div>
  
  <div class="detail-bar">
    <div class="detail-icon" onclick="toggleFavorite()"><span id="favIcon">♡</span><span>收藏</span></div>
    <div class="detail-icon" onclick="showPage('page-cart')">🛒<span>购物车</span></div>
    <div class="detail-icon distrib-icon" onclick="showPage('page-distrib')">💰<span>分销</span></div>
    <button class="btn-add" onclick="addToCart()">加入购物车</button>
    <button class="btn-buy" onclick="showPage('page-order')">立即购买</button>
  </div>
</div>

<!-- ===== 购物车 ===== -->
<div id="page-cart" class="page">
  <div class="top-nav">
    <span class="logo">购 物 车</span>
    <span class="nav-icon clear" onclick="alert('清空')">清空</span>
  </div>
  
  <div class="cart-list" id="cartList">
    <div class="cart-item">
      <div class="cart-check checked" onclick="toggleItem(this)">✓</div>
      <div class="cart-img"><img src="https://images.unsplash.com/photo-1627435601361-ec25f5b1d0e5?w=200&q=80" alt=""></div>
      <div class="cart-info">
        <div class="cart-name">明前龙井 特级珍品</div>
        <div class="cart-sku">特级 · 50g · 经典装</div>
        <div class="cart-bottom">
          <div class="cart-price">¥298</div>
          <div class="cart-num">
            <button onclick="changeNum(this, -1)">−</button>
            <span>1</span>
            <button onclick="changeNum(this, 1)">+</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div style="height: 60px;"></div>
  
  <div class="cart-footer">
    <div class="cart-all" onclick="toggleAll()">
      <div class="cart-check checked" id="allCheck">✓</div>
      <span>全选</span>
    </div>
    <div class="cart-total">合计：<strong>¥298</strong></div>
    <button class="btn-settle" onclick="goSettle()">结算</button>
  </div>
  
  <div class="bottom-nav">
    <div class="nav-item" onclick="showPage('page-home')"><span>🏠</span>首页</div>
    <div class="nav-item" onclick="showPage('page-detail')"><span>📖</span>详情</div>
    <div class="nav-item" onclick="showPage('page-distrib')"><span>💰</span>分销</div>
    <div class="nav-item" onclick="showPage('page-profile')"><span>👤</span>我的</div>
  </div>
</div>

<!-- ===== 确认订单 ===== -->
<div id="page-order" class="page">
  <div class="top-nav"><span class="logo">确 认 订 单</span></div>
  
  <div class="order-addr" onclick="alert('选择地址')">
    <div class="order-addr-icon">📍</div>
    <div class="order-addr-info">
      <div class="order-addr-name">李明</div>
      <div class="order-addr-detail">上海市浦东新区陆家嘴环路1000号</div>
    </div>
    <span style="color: var(--text-light);">›</span>
  </div>
  
  <div class="order-items">
    <div class="order-item">
      <div class="order-img"><img src="https://images.unsplash.com/photo-1627435601361-ec25f5b1d0e5?w=200&q=80" alt=""></div>
      <div class="order-info">
        <div class="order-name">明前龙井 特级珍品</div>
        <div class="order-sku">特级 · 50g · 经典装</div>
        <div class="order-bottom">
          <div class="order-price">¥298</div>
          <div class="order-num">x1</div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="order-section">
    <div class="order-row"><span class="label">商品金额</span><span class="value">¥298.00</span></div>
    <div class="order-row"><span class="label">运费</span><span class="value">¥0.00（满99免邮）</span></div>
    <div class="order-row"><span class="label">优惠券</span><span class="value red">-¥0.00 ›</span></div>
    <div class="order-row highlight"><span class="label">备注</span><span class="value">点击添加 ›</span></div>
  </div>
  
  <div class="order-section">
    <div class="pay-item"><span class="pay-icon">💚</span><span class="pay-name">微信支付</span><div class="pay-check checked">✓</div></div>
    <div class="pay-item"><span class="pay-icon">💳</span><span class="pay-name">支付宝</span><div class="pay-check"></div></div>
  </div>
  
  <div style="height: 90px;"></div>
  
  <div class="submit-bar">
    <div class="submit-total">合计：<strong>¥298.00</strong></div>
    <button class="btn-submit" onclick="submitOrder()">提交订单</button>
  </div>
</div>

<!-- ===== 个人中心 ===== -->
<div id="page-profile" class="page">
  <div class="profile-header">
    <div class="profile-avatar"><img src="https://images.unsplash.com/photo-774909/pexels-photo-774909.jpeg?w=200&q=80" alt=""></div>
    <div class="profile-name">茶友李明</div>
    <span class="profile-level">铜牌会员</span>
  </div>
  
  <!-- 分销入口卡片 -->
  <div class="distrib-profile-card" onclick="showPage('page-distrib')">
    <h3>分 享 赚 佣</h3>
    <p>分享好茶 轻松赚取佣金</p>
    <div class="distrib-profile-stats">
      <div class="distrib-profile-stat"><div class="num">¥1,280</div><div class="label">累计收益</div></div>
      <div class="distrib-profile-stat"><div class="num">28</div><div class="label">团队人数</div></div>
      <div class="distrib-profile-stat"><div class="num">156</div><div class="label">推广订单</div></div>
    </div>
  </div>
  
  <div class="order-quick" onclick="alert('我的订单')">
    <div class="order-quick-item"><span>💰</span>待付款</div>
    <div class="order-quick-item"><span>📦</span>待发货</div>
    <div class="order-quick-item"><span>🚚</span>待收货</div>
    <div class="order-quick-item"><span>⭐</span>待评价</div>
  </div>
  
  <div class="menu-section">
    <div class="menu-item" onclick="alert('我的订单')"><div class="menu-icon">📋</div><span class="menu-text">我的订单</span><span class="menu-arrow">›</span></div>
    <div class="menu-item" onclick="alert('收货地址')"><div class="menu-icon">📍</div><span class="menu-text">收货地址</span><span class="menu-arrow">›</span></div>
    <div class="menu-item" onclick="alert('我的收藏')"><div class="menu-icon">❤️</div><span class="menu-text">我的收藏</span><span class="menu-arrow">›</span></div>
    <div class="menu-item" onclick="alert('优惠券')"><div class="menu-icon">🎫</div><span class="menu-text">优惠券</span><span class="menu-arrow">›</span></div>
    <div class="menu-item" onclick="showPage('page-distrib')"><div class="menu-icon" style="background: #FDF8F3;">💰</div><span class="menu-text">分销中心</span><span class="menu-arrow">›</span></div>
    <div class="menu-item" onclick="alert('联系客服')"><div class="menu-icon">📞</div><span class="menu-text">联系客服</span><span class="menu-arrow">›</span></div>
  </div>
  
  <div class="bottom-nav">
    <div class="nav-item" onclick="showPage('page-home')"><span>🏠</span>首页</div>
    <div class="nav-item" onclick="showPage('page-detail')"><span>📖</span>详情</div>
    <div class="nav-item" onclick="showPage('page-distrib')"><span>💰</span>分销</div>
    <div class="nav-item active"><span>👤</span>我的</div>
  </div>
</div>

<!-- ===== 分销中心 ===== -->
<div id="page-distrib" class="page">
  <div class="top-nav gold"><span class="logo">分 销 中 心</span></div>
  
  <div class="distrib-header">
    <h2>茶 友 分 销 商</h2>
    <p>分享好茶 轻松赚佣</p>
  </div>
  
  <div class="distrib-balance">
    <div class="balance-info"><h4>可提现佣金</h4><div class="balance-amount"><span>¥</span>1,280.00</div></div>
    <button class="withdraw-btn" onclick="alert('申请提现到微信零钱')">立即提现</button>
  </div>
  
  <!-- 推广入口 -->
  <div class="promo-section">
    <div class="promo-grid">
      <div class="promo-card" onclick="showPoster()">
        <div class="icon">🎨</div>
        <h4>推广海报</h4>
        <p>生成专属推广海报</p>
      </div>
      <div class="promo-card" onclick="showShareLink()">
        <div class="icon">🔗</div>
        <h4>分享链接</h4>
        <p>复制链接分享给好友</p>
      </div>
    </div>
  </div>
  
  <!-- 海报预览 -->
  <div class="poster-preview" id="posterSection" style="display: none;">
    <h4>海 报 预 览</h4>
    <img src="https://images.unsplash.com/photo-1627435601361-ec25f5b1d0e5?w=400&q=80" alt="推广海报">
    <button class="save-btn" onclick="savePoster()">保存海报到相册</button>
  </div>
  
  <!-- 分享链接 -->
  <div class="share-link" id="shareSection" style="display: none;">
    <h4>分 享 链 接</h4>
    <div class="link-box">https://chayou.com/product/longjing?from=user123&code=ABC123</div>
    <div class="share-btns">
      <button class="share-btn wx" onclick="shareToWX()">分享到微信</button>
      <button class="share-btn wb" onclick="shareToWB()">分享到微博</button>
    </div>
  </div>
  
  <!-- 佣金明细 -->
  <div class="commission-section">
    <h4>最 新 佣 金</h4>
    <div class="commission-list">
      <div class="commission-item">
        <div class="avatar">👤</div>
        <div class="info">
          <div class="name">张小茶</div>
          <div class="time">5分钟前</div>
        </div>
        <div class="amount">+¥29.80</div>
      </div>
      <div class="commission-item">
        <div class="avatar">👤</div>
        <div class="info">
          <div class="name">王普洱</div>
          <div class="time">1小时前</div>
        </div>
        <div class="amount">+¥29.80</div>
      </div>
      <div class="commission-item">
        <div class="avatar">👤</div>
        <div class="info">
          <div class="name">李龙井</div>
          <div class="time">今天 14:30</div>
        </div>
        <div class="amount">+¥59.60</div>
      </div>
    </div>
  </div>
  
  <!-- 团队入口 -->
  <div class="team-section">
    <div class="team-card" onclick="alert('我的团队')">
      <div class="team-icon">👥</div>
      <div class="team-info">
        <div class="team-name">我的团队</div>
        <div class="team-num">共28位成员</div>
      </div>
      <div class="team-arrow">›</div>
    </div>
  </div>
  
  <div class="section-title"><h2>收 益 概 览</h2></div>
  <div class="stats-grid">
    <div class="stats-card"><div class="num green">¥1,280</div><div class="label">今日收益</div></div>
    <div class="stats-card"><div class="num gold">¥8,560</div><div class="label">本月收益</div></div>
    <div class="stats-card"><div class="num primary">¥32,800</div><div class="label">累计收益</div></div>
  </div>
  
  <div class="section-title"><h2>分 销 排 行 榜</h2></div>
  <div class="rank-section">
    <div class="rank-title">🏆</div>
    <div class="rank-list">
      <div class="rank-item"><div class="rank-num">1</div><div class="rankname">张小茶</div><div class="rank-money">¥52,300</div></div>
      <div class="rank-item"><div class="rank-num">2</div><div class="rankname">王普洱</div><div class="rank-money">¥48,600</div></div>
      <div class="rank-item"><div class="rank-num">3</div><div class="rankname">李龙井</div><div class="rank-money">¥42,100</div></div>
    </div>
  </div>
  
  <div style="height: 20px;"></div>
  
  <div class="bottom-nav">
    <div class="nav-item" onclick="showPage('page-home')"><span>🏠</span>首页</div>
    <div class="nav-item" onclick="showPage('page-detail')"><span>📖</span>详情</div>
    <div class="nav-item active"><span>💰</span>分销</div>
    <div class="nav-item" onclick="showPage('page-profile')"><span>👤</span>我的</div>
  </div>
</div>

<!-- ===== 视频弹窗 ===== -->
<div class="video-overlay" id="videoOverlay">
  <div class="video-container">
    <div class="video-close" onclick="closeVideo()">×</div>
    <video id="detailVideo" controls playsinline poster="https://images.unsplash.com/photo-1627435601361-ec25f5b1d0e5?w=800&q=80">
      <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
    </video>
  </div>
</div>

<!-- ===== 企业介绍弹窗 ===== -->
<div class="about-modal" id="aboutModal">
  <div class="about-modal-header">
    <span class="close-btn" onclick="closeAbout()">×</span>
    <h2>企 业 介 绍</h2>
  </div>
  
  <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=800&q=80" alt="" class="about-hero-img">
  
  <div class="about-content">
    <h3>茶 友 缘 起</h3>
    <p>茶友始创于1988年，由第一代茶人李福全先生创立。三十余年来，我们始终坚持"只做一杯好茶"的理念，从杭州西湖的狮峰山到福建武夷山，从云南勐海到福建福鼎，茶友的足迹遍布中国各大茶产区。</p>
    <p>如今，茶友已传承至第三代，年轻一代在继承传统制茶工艺的同时，也将现代科技融入茶叶种植与加工之中，让更多人能够品尝到正宗的中华好茶。</p>
    
    <div class="about-features">
      <div class="about-feature">
        <div class="icon">🏔️</div>
        <h4>原产地直供</h4>
        <p>来自核心产区</p>
      </div>
      <div class="about-feature">
        <div class="icon">👨‍🌾</div>
        <h4>匠人制茶</h4>
        <p>传统手工工艺</p>
      </div>
      <div class="about-feature">
        <div class="icon">✓</div>
        <h4>品质保证</h4>
        <p>严格品控筛选</p>
      </div>
      <div class="about-feature">
        <div class="icon">📦</div>
        <h4>冷链配送</h4>
        <p>新鲜直达</p>
      </div>
    </div>
    
    <h3>发 展 历 程</h3>
    <div class="about-timeline">
      <div class="about-timeline-item">
        <div class="year">1988</div>
        <div class="content">
          <h4>创业起步</h4>
          <p>李福全先生在杭州开设第一家茶铺，开始经营西湖龙井茶</p>
        </div>
      </div>
      <div class="about-timeline-item">
        <div class="year">2005</div>
        <div class="content">
          <h4>规模扩张</h4>
          <p>建立武夷山、福鼎等合作茶园，品类逐步丰富</p>
        </div>
      </div>
      <div class="about-timeline-item">
        <div class="year">2018</div>
        <div class="content">
          <h4>品牌升级</h4>
          <p>茶友品牌焕新，开启线上线下融合新零售模式</p>
        </div>
      </div>
      <div class="about-timeline-item">
        <div class="year">2024</div>
        <div class="content">
          <h4>分销启航</h4>
          <p>开启全员分销计划，让更多人分享茶香</p>
        </div>
      </div>
    </div>
    
    <div class="about-img-gallery">
      <img src="https://images.unsplash.com/photo-1576092768241-dec231879fc3?w=400&q=80" alt="茶园">
      <img src="https://images.unsplash.com/photo-1563822249366-3efb23b8e0c9?w=400&q=80" alt="制茶">
      <img src="https://images.unsplash.com/photo-1558160074-4d7d8bdf4259?w=400&q=80" alt="品茶">
      <img src="https://images.unsplash.com/photo-1627435601361-ec25f5b1d0e5?w=400&q=80" alt="茶叶">
    </div>
    
    <p style="text-align: center; color: var(--text-light); font-size: 13px; letter-spacing: 2px; margin-top: 24px;">感谢您的信任与支持<br>茶友 · 一杯好茶 · 一生朋友</p>
  </div>
</div>

<!-- Toast -->
<div id="toast"></div>

<script>
// 页面切换
function showPage(pageId) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  document.getElementById(pageId).classList.add('active');
  window.scrollTo(0, 0);
}

// 视频
function showVideo() {
  document.getElementById('videoOverlay').classList.add('active');
  document.getElementById('detailVideo').play();
}
function closeVideo() {
  document.getElementById('videoOverlay').classList.remove('active');
  document.getElementById('detailVideo').pause();
}

// 企业介绍
function showAbout() {
  document.getElementById('aboutModal').classList.add('active');
  window.scrollTo(0, 0);
}
function closeAbout() {
  document.getElementById('aboutModal').classList.remove('active');
}

// Toast
function toast(msg, duration = 1500) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.style.display = 'block';
  setTimeout(() => t.style.display = 'none', duration);
}

// 收藏
let isFav = false;
function toggleFavorite() {
  isFav = !isFav;
  document.getElementById('favIcon').textContent = isFav ? '♥' : '♡';
  document.getElementById('favIcon').style.color = isFav ? '#E74C3C' : '';
  toast(isFav ? '已添加收藏' : '已取消收藏');
}

// 分享商品
function shareProduct() {
  showPage('page-distrib');
}

// 购物车
function toggleItem(el) {
  el.classList.toggle('checked');
  el.textContent = el.classList.contains('checked') ? '✓' : '';
}
function toggleAll() {
  const all = document.querySelectorAll('#cartList .cart-check');
  const btn = document.getElementById('allCheck');
  const isAll = btn.classList.contains('checked');
  btn.classList.toggle('checked', !isAll);
  btn.textContent = !isAll ? '✓' : '';
  all.forEach(el => {
    el.classList.toggle('checked', !isAll);
    el.textContent = !isAll ? '✓' : '';
  });
}
function changeNum(btn, delta) {
  const span = btn.parentElement.querySelector('span');
  let num = Math.max(1, Math.min(99, parseInt(span.textContent) + delta));
  span.textContent = num;
}
function addToCart() { toast('✓ 已加入购物车'); }
function goSettle() { showPage('page-order'); }
function submitOrder() {
  toast('✓ 订单提交成功');
  setTimeout(() => showPage('page-profile'), 1500);
}

// 分销功能
function showPoster() {
  document.getElementById('posterSection').style.display = 'block';
  document.getElementById('shareSection').style.display = 'none';
  toast('海报生成成功');
}
function showShareLink() {
  document.getElementById('posterSection').style.display = 'none';
  document.getElementById('shareSection').style.display = 'block';
  toast('链接已复制');
}
function savePoster() { toast('✓ 海报已保存到相册'); }
function shareToWX() { toast('正在调起微信分享...'); }
function shareToWB() { toast('正在调起微博分享...'); }

// SKU
document.querySelectorAll('.sku-tag').forEach(tag => {
  tag.addEventListener('click', function() {
    this.parentElement.querySelectorAll('.sku-tag').forEach(t => t.classList.remove('selected'));
    this.classList.add('selected');
  });
});
</script>
</body>
</html>