编辑页面

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 {
            --primary: #4CAF50;
            --primary-dark: #388E3C;
            --secondary: #FF9800;
            --danger: #E53935;
            --bg: #F5F7F4;
            --bg-white: #FFFFFF;
            --text: #333333;
            --text-gray: #666666;
            --text-light: #999999;
            --border: #EEEEEE;
            --shadow: 0 2px 8px rgba(0,0,0,0.08);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        body {
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 14px;
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        .page { display: none; min-height: 100vh; padding-bottom: calc(60px + var(--safe-bottom)); }
        .page.active { display: block; animation: fadeIn 0.3s ease; }
        .page.sub-page { padding-bottom: var(--safe-bottom); }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .header {
            position: sticky;
            top: 0;
            background: var(--primary);
            color: white;
            padding: 12px 16px;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .header-back { display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .header-title { font-size: 18px; font-weight: 600; }
        .header-search { flex: 1; margin: 0 16px; position: relative; }
        .header-search input {
            width: 100%; height: 36px; border: none; border-radius: 18px;
            padding: 0 16px 0 36px; font-size: 14px; background: rgba(255,255,255,0.2); color: white;
        }
        .header-search.light input { background: var(--bg); color: var(--text); }
        .header-search input::placeholder { color: rgba(255,255,255,0.7); }
        .header-search.light input::placeholder { color: var(--text-light); }
        .tab-bar {
            position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 100%; max-width: 430px; background: white;
            display: flex; justify-content: space-around; padding: 8px 0;
            padding-bottom: calc(8px + var(--safe-bottom));
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 1000;
        }
        .tab-item {
            display: flex; flex-direction: column; align-items: center;
            color: var(--text-light); text-decoration: none; font-size: 11px; padding: 4px 0;
        }
        .tab-item.active { color: var(--primary); }
        .tab-item svg { width: 24px; height: 24px; margin-bottom: 2px; }
        .tab-item .badge {
            position: absolute; top: -4px; right: -8px; background: var(--danger);
            color: white; font-size: 10px; padding: 2px 5px; border-radius: 10px; min-width: 16px; text-align: center;
        }
        .tab-item-wrapper { position: relative; }
        .banner { position: relative; height: 180px; overflow: hidden; }
        .banner-track { display: flex; transition: transform 0.3s ease; height: 100%; }
        .banner-slide { min-width: 100%; height: 100%; }
        .banner-slide img { width: 100%; height: 100%; object-fit: cover; }
        .banner-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
        .banner-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); }
        .banner-dot.active { background: white; width: 20px; border-radius: 4px; }
        .category-nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 16px; background: white; }
        .category-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text); font-size: 12px; }
        .category-icon { width: 48px; height: 48px; background: var(--bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; font-size: 24px; }
        .seckill-section { margin: 12px 16px; background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%); border-radius: 12px; padding: 16px; color: white; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .section-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        .seckill-time { display: flex; gap: 4px; align-items: center; }
        .seckill-time span { background: rgba(255,255,255,0.2); padding: 2px 6px; border-radius: 4px; font-weight: 600; }
        .seckill-products { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
        .seckill-product { min-width: 100px; background: white; border-radius: 8px; padding: 8px; color: var(--text); cursor: pointer; }
        .seckill-product img { width: 84px; height: 84px; border-radius: 6px; object-fit: cover; }
        .seckill-price { color: var(--danger); font-weight: 600; font-size: 16px; margin-top: 6px; }
        .seckill-price del { color: var(--text-light); font-size: 11px; font-weight: normal; margin-left: 4px; }
        .product-section { padding: 16px; }
        .product-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .product-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); cursor: pointer; }
        .product-card img { width: 100%; height: 140px; object-fit: cover; }
        .product-info { padding: 10px; }
        .product-name { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; }
        .product-price { color: var(--danger); font-weight: 600; font-size: 16px; margin-top: 6px; }
        .product-price del { color: var(--text-light); font-size: 12px; font-weight: normal; margin-left: 4px; }
        .product-sales { color: var(--text-light); font-size: 11px; margin-top: 4px; }
        .group-section { margin: 12px 16px; background: white; border-radius: 12px; padding: 16px; }
        .group-products { display: flex; gap: 12px; overflow-x: auto; }
        .group-product { min-width: 140px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; cursor: pointer; }
        .group-product img { width: 124px; height: 100px; border-radius: 6px; object-fit: cover; }
        .group-tag { background: var(--secondary); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-top: 6px; }
        .category-page { display: flex; height: calc(100vh - 60px - var(--safe-bottom)); }
        .category-left { width: 90px; background: var(--bg); overflow-y: auto; flex-shrink: 0; }
        .category-menu-item { padding: 14px 12px; text-align: center; font-size: 13px; color: var(--text-gray); border-left: 3px solid transparent; cursor: pointer; }
        .category-menu-item.active { background: white; color: var(--primary); border-left-color: var(--primary); }
        .category-right { flex: 1; padding: 12px; overflow-y: auto; background: white; }
        .category-banner img { width: 100%; height: 80px; border-radius: 8px; object-fit: cover; margin-bottom: 16px; }
        .subcategory-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
        .subcategory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .subcategory-item { text-align: center; text-decoration: none; color: var(--text); cursor: pointer; }
        .subcategory-item img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; margin-bottom: 6px; }
        .subcategory-item span { font-size: 12px; }
        .cart-list { padding: 12px 16px; }
        .cart-store { margin-bottom: 16px; }
        .cart-store-name { font-size: 13px; color: var(--text-gray); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .cart-item { display: flex; gap: 12px; background: white; padding: 12px; border-radius: 8px; margin-bottom: 10px; align-items: center; }
        .cart-checkbox { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
        .cart-checkbox.checked { background: var(--primary); border-color: var(--primary); }
        .cart-checkbox.checked::after { content: '✓'; color: white; font-size: 12px; }
        .cart-item img { width: 70px; height: 70px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
        .cart-item-info { flex: 1; min-width: 0; }
        .cart-item-name { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .cart-item-spec { color: var(--text-light); font-size: 12px; margin-top: 4px; }
        .cart-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
        .cart-item-price { color: var(--danger); font-weight: 600; }
        .quantity-control { display: flex; align-items: center; gap: 8px; }
        .quantity-btn { width: 24px; height: 24px; border: 1px solid var(--border); background: white; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; }
        .quantity-num { min-width: 24px; text-align: center; }
        .cart-footer { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: white; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); padding-bottom: calc(12px + var(--safe-bottom)); }
        .cart-footer-left { display: flex; align-items: center; gap: 12px; }
        .cart-total { font-size: 16px; }
        .cart-total span { color: var(--danger); font-weight: 600; }
        .cart-checkout-btn { background: var(--primary); color: white; border: none; padding: 10px 24px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .distrib-header { background: linear-gradient(135deg, var(--primary) 0%, #81C784 100%); color: white; padding: 24px 16px; }
        .distrib-user { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
        .distrib-avatar { width: 56px; height: 56px; border-radius: 50%; background: white; padding: 2px; }
        .distrib-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
        .distrib-user-info h3 { font-size: 16px; margin-bottom: 4px; }
        .distrib-user-info p { font-size: 12px; opacity: 0.8; }
        .distrib-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
        .distrib-stat { text-align: center; background: rgba(255,255,255,0.15); padding: 12px; border-radius: 8px; }
        .distrib-stat-value { font-size: 20px; font-weight: 600; }
        .distrib-stat-label { font-size: 11px; opacity: 0.8; margin-top: 4px; }
        .distrib-actions { display: flex; gap: 12px; }
        .distrib-action-btn { flex: 1; padding: 10px; border-radius: 20px; text-align: center; font-size: 14px; cursor: pointer; }
        .distrib-action-btn.primary { background: white; color: var(--primary); }
        .distrib-action-btn.secondary { background: rgba(255,255,255,0.2); color: white; }
        .distrib-content { padding: 16px; }
        .distrib-section { background: white; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .distrib-section-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
        .distrib-section-title a { font-size: 12px; color: var(--text-light); text-decoration: none; cursor: pointer; }
        .customer-list { display: flex; flex-direction: column; gap: 12px; }
        .customer-item { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
        .customer-item:last-child { border-bottom: none; padding-bottom: 0; }
        .customer-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; }
        .customer-info { flex: 1; }
        .customer-name { font-size: 14px; margin-bottom: 2px; }
        .customer-time { font-size: 11px; color: var(--text-light); }
        .customer-commission { text-align: right; }
        .customer-commission-value { color: var(--danger); font-weight: 600; font-size: 14px; }
        .customer-commission-label { font-size: 11px; color: var(--text-light); }
        .profile-header { background: linear-gradient(135deg, var(--primary) 0%, #81C784 100%); color: white; padding: 24px 16px 40px; }
        .profile-user { display: flex; align-items: center; gap: 16px; }
        .profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: white; padding: 2px; }
        .profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
        .profile-info { flex: 1; }
        .profile-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
        .profile-phone { font-size: 13px; opacity: 0.8; }
        .profile-edit { color: white; opacity: 0.8; font-size: 12px; cursor: pointer; }
        .profile-orders { background: white; margin: -24px 16px 12px; border-radius: 12px; padding: 16px; box-shadow: var(--shadow); }
        .profile-orders-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .profile-orders-title { font-size: 15px; font-weight: 600; }
        .profile-orders-more { font-size: 12px; color: var(--text-light); cursor: pointer; }
        .order-tabs { display: flex; justify-content: space-around; }
        .order-tab { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text); position: relative; cursor: pointer; }
        .order-tab-icon { width: 36px; height: 36px; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; font-size: 18px; }
        .order-tab span { font-size: 11px; color: var(--text-gray); }
        .profile-menu { margin: 0 16px; background: white; border-radius: 12px; overflow: hidden; }
        .menu-item { display: flex; align-items: center; padding: 16px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); cursor: pointer; }
        .menu-item:last-child { border-bottom: none; }
        .menu-icon { width: 32px; height: 32px; background: var(--bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 16px; }
        .menu-item-text { flex: 1; font-size: 14px; }
        .menu-item-arrow { color: var(--text-light); font-size: 12px; }
        .menu-item-badge { background: var(--danger); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; margin-right: 8px; }
        .detail-gallery { position: relative; height: 375px; background: var(--bg); }
        .detail-gallery img { width: 100%; height: 100%; object-fit: cover; }
        .gallery-indicator { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.4); color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px; }
        .detail-content { background: white; padding: 16px; margin-bottom: 12px; }
        .detail-price { color: var(--danger); font-size: 24px; font-weight: 600; }
        .detail-price del { color: var(--text-light); font-size: 14px; font-weight: normal; margin-left: 8px; }
        .detail-title { font-size: 16px; line-height: 1.5; margin: 12px 0; }
        .detail-desc { color: var(--text-gray); font-size: 13px; line-height: 1.6; }
        .detail-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
        .detail-tag { background: #FFF3E0; color: var(--secondary); font-size: 11px; padding: 4px 8px; border-radius: 4px; }
        .detail-section { background: white; padding: 16px; margin-bottom: 12px; }
        .detail-section-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
        .spec-list { display: flex; flex-wrap: wrap; gap: 10px; }
        .spec-item { padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; font-size: 13px; cursor: pointer; }
        .spec-item.active { border-color: var(--primary); background: #E8F5E9; color: var(--primary); }
        .delivery-info { display: flex; flex-direction: column; gap: 10px; }
        .delivery-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-gray); }
        .delivery-item svg { color: var(--primary); }
        .review-item { padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
        .review-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .review-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); }
        .review-user { flex: 1; }
        .review-name { font-size: 13px; margin-bottom: 2px; }
        .review-time { font-size: 11px; color: var(--text-light); }
        .review-content { font-size: 13px; line-height: 1.6; color: var(--text-gray); }
        .review-images { display: flex; gap: 8px; margin-top: 10px; }
        .review-images img { width: 60px; height: 60px; border-radius: 4px; object-fit: cover; }
        .detail-footer { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: white; padding: 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); padding-bottom: calc(10px + var(--safe-bottom)); }
        .detail-action { flex: 1; display: flex; gap: 10px; }
        .detail-btn { flex: 1; padding: 12px; border-radius: 24px; font-size: 15px; font-weight: 500; border: none; cursor: pointer; text-align: center; }
        .detail-btn.add-cart { background: #FFF3E0; color: var(--secondary); }
        .detail-btn.buy-now { background: var(--primary); color: white; }
        .detail-icon-btn { display: flex; flex-direction: column; align-items: center; color: var(--text-gray); font-size: 10px; }
        .order-address { background: white; padding: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
        .address-icon { width: 40px; height: 40px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; }
        .address-info { flex: 1; }
        .address-user { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .address-user span { margin-left: 12px; font-weight: normal; color: var(--text-gray); }
        .address-detail { font-size: 13px; color: var(--text-gray); }
        .order-section { background: white; margin-bottom: 12px; }
        .order-section-header { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; }
        .order-product { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
        .order-product:last-child { border-bottom: none; }
        .order-product img { width: 70px; height: 70px; border-radius: 6px; object-fit: cover; }
        .order-product-info { flex: 1; }
        .order-product-name { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
        .order-product-spec { font-size: 12px; color: var(--text-light); margin-bottom: 4px; }
        .order-product-bottom { display: flex; justify-content: space-between; align-items: center; }
        .order-product-price { color: var(--danger); font-weight: 600; }
        .order-product-qty { color: var(--text-gray); font-size: 13px; }
        .order-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 14px; cursor: pointer; }
        .order-item-label { color: var(--text-gray); }
        .order-item-value { color: var(--text); }
        .order-item-value.red { color: var(--danger); }
        .order-item-value.green { color: var(--primary); }
        .order-remark { padding: 12px 16px; border-top: 1px solid var(--border); }
        .order-remark input { width: 100%; border: none; font-size: 14px; outline: none; }
        .order-footer { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: white; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); padding-bottom: calc(12px + var(--safe-bottom)); }
        .order-total { font-size: 14px; }
        .order-total span { color: var(--danger); font-size: 18px; font-weight: 600; }
        .order-submit-btn { background: var(--primary); color: white; border: none; padding: 12px 32px; border-radius: 24px; font-size: 15px; cursor: pointer; }
        .order-tabs-bar { display: flex; background: white; border-bottom: 1px solid var(--border); position: sticky; top: 60px; z-index: 10; }
        .order-tab-bar { flex: 1; padding: 14px 0; text-align: center; font-size: 14px; color: var(--text-gray); border-bottom: 2px solid transparent; cursor: pointer; }
        .order-tab-bar.active { color: var(--primary); border-bottom-color: var(--primary); }
        .order-list { padding: 12px 16px; }
        .order-card { background: white; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
        .order-card-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
        .order-card-store { font-size: 13px; display: flex; align-items: center; gap: 6px; }
        .order-card-status { font-size: 13px; color: var(--danger); }
        .order-card-product { display: flex; gap: 10px; padding: 8px 0; }
        .order-card-product img { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; }
        .order-card-product-info { flex: 1; }
        .order-card-product-name { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .order-card-product-spec { font-size: 11px; color: var(--text-light); margin-top: 4px; }
        .order-card-product-bottom { display: flex; justify-content: space-between; margin-top: 6px; }
        .order-card-product-price { color: var(--danger); font-weight: 600; }
        .order-card-product-qty { color: var(--text-gray); }
        .order-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 8px; }
        .order-card-total { font-size: 14px; }
        .order-card-total span { color: var(--danger); font-weight: 600; }
        .order-card-actions { display: flex; gap: 8px; }
        .order-action-btn { padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); background: white; }
        .order-action-btn.primary { background: var(--primary); color: white; border-color: var(--primary); }
        .fav-tabs { display: flex; background: white; padding: 12px 16px; gap: 16px; }
        .fav-tab { font-size: 14px; color: var(--text-gray); padding-bottom: 8px; border-bottom: 2px solid transparent; cursor: pointer; }
        .fav-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
        .address-list { padding: 12px 16px; }
        .address-card { background: white; border-radius: 12px; padding: 14px; margin-bottom: 12px; display: flex; gap: 12px; }
        .address-card-info { flex: 1; }
        .address-card-user { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .address-card-user span { margin-left: 12px; font-weight: normal; color: var(--text-gray); }
        .address-card-detail { font-size: 13px; color: var(--text-gray); margin-bottom: 10px; }
        .address-card-default { display: inline-block; background: var(--primary); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; }
        .address-card-actions { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
        .address-edit-btn { padding: 4px 10px; border: 1px solid var(--border); border-radius: 12px; font-size: 12px; background: white; cursor: pointer; }
        .address-add-btn { position: fixed; bottom: calc(60px + var(--safe-bottom) + 16px); left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 398px; background: var(--primary); color: white; border: none; padding: 14px; border-radius: 24px; font-size: 15px; cursor: pointer; }
        .coupon-tabs { display: flex; background: white; padding: 12px 16px; gap: 16px; }
        .coupon-tab { font-size: 14px; color: var(--text-gray); padding-bottom: 8px; border-bottom: 2px solid transparent; cursor: pointer; }
        .coupon-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
        .coupon-list { padding: 12px 16px; }
        .coupon-item { background: white; border-radius: 12px; margin-bottom: 12px; display: flex; overflow: hidden; }
        .coupon-left { background: linear-gradient(135deg, var(--danger) 0%, #FF7043 100%); color: white; padding: 16px; text-align: center; min-width: 100px; }
        .coupon-value { font-size: 28px; font-weight: 600; }
        .coupon-value small { font-size: 14px; }
        .coupon-limit { font-size: 11px; margin-top: 4px; opacity: 0.9; }
        .coupon-right { flex: 1; padding: 14px; }
        .coupon-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .coupon-desc { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
        .coupon-time { font-size: 11px; color: var(--text-light); }
        .points-header { background: linear-gradient(135deg, var(--primary) 0%, #81C784 100%); color: white; padding: 32px 16px; text-align: center; }
        .points-value { font-size: 40px; font-weight: 600; margin-bottom: 4px; }
        .points-label { font-size: 13px; opacity: 0.8; }
        .points-rules { background: white; margin: 12px 16px; border-radius: 12px; padding: 16px; }
        .points-rules-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
        .points-rule-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
        .points-rule-item:last-child { border-bottom: none; }
        .service-header { background: linear-gradient(135deg, var(--primary) 0%, #81C784 100%); color: white; padding: 32px 16px; text-align: center; }
        .service-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
        .service-time { font-size: 13px; opacity: 0.8; }
        .service-hotline { background: white; margin: 16px; padding: 20px; border-radius: 12px; text-align: center; }
        .service-phone { font-size: 24px; font-weight: 600; color: var(--primary); margin-bottom: 12px; }
        .service-call-btn { background: var(--primary); color: white; border: none; padding: 12px 32px; border-radius: 24px; font-size: 15px; cursor: pointer; }
        .help-list { padding: 12px 16px; }
        .help-item { background: white; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
        .help-item-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; cursor: pointer; }
        .help-item-title { font-size: 14px; }
        .help-item-arrow { color: var(--text-light); transition: transform 0.3s; }
        .help-item-content { padding: 0 16px 16px; font-size: 13px; color: var(--text-gray); line-height: 1.6; display: none; }
        .help-item.open .help-item-content { display: block; }
        .help-item.open .help-item-arrow { transform: rotate(180deg); }
        .setting-list { margin-top: 12px; }
        .setting-item { background: white; padding: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); cursor: pointer; }
        .setting-item:last-child { border-bottom: none; }
        .setting-item-left { display: flex; align-items: center; gap: 12px; }
        .setting-item-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
        .setting-item-text { font-size: 14px; }
        .setting-item-arrow { color: var(--text-light); }
        .toggle-switch { width: 44px; height: 26px; background: var(--border); border-radius: 13px; position: relative; cursor: pointer; transition: background 0.3s; }
        .toggle-switch.active { background: var(--primary); }
        .toggle-switch::after { content: ''; position: absolute; width: 22px; height: 22px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.3s; }
        .toggle-switch.active::after { transform: translateX(18px); }
        .withdraw-header { background: linear-gradient(135deg, var(--primary) 0%, #81C784 100%); color: white; padding: 24px 16px; text-align: center; }
        .withdraw-label { font-size: 13px; opacity: 0.8; margin-bottom: 8px; }
        .withdraw-value { font-size: 36px; font-weight: 600; }
        .withdraw-form { background: white; margin: 16px; border-radius: 12px; padding: 16px; }
        .withdraw-form-title { font-size: 14px; margin-bottom: 12px; }
        .withdraw-input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
        .withdraw-input span { font-size: 24px; margin-right: 8px; }
        .withdraw-input input { flex: 1; border: none; font-size: 24px; outline: none; }
        .withdraw-tips { font-size: 12px; color: var(--text-light); margin-top: 12px; }
        .withdraw-submit { width: 100%; background: var(--primary); color: white; border: none; padding: 14px; border-radius: 24px; font-size: 16px; margin-top: 20px; cursor: pointer; }
        .withdraw-methods { margin-top: 16px; }
        .withdraw-method { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; cursor: pointer; }
        .withdraw-method.active { border-color: var(--primary); background: #E8F5E9; }
        .withdraw-method-icon { width: 40px; height: 40px; background: var(--bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
        .withdraw-method-info { flex: 1; }
        .withdraw-method-name { font-size: 14px; margin-bottom: 2px; }
        .withdraw-method-limit { font-size: 11px; color: var(--text-light); }
        .withdraw-method-check { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .withdraw-method.active .withdraw-method-check { background: var(--primary); border-color: var(--primary); color: white; }
        .invite-header { background: linear-gradient(135deg, var(--secondary) 0%, #FFB74D 100%); color: white; padding: 32px 16px; text-align: center; }
        .invite-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
        .invite-desc { font-size: 13px; opacity: 0.9; }
        .invite-code { background: white; color: var(--text); padding: 16px; margin: 16px; border-radius: 12px; text-align: center; }
        .invite-code-value { font-size: 28px; font-weight: 600; letter-spacing: 4px; color: var(--primary); margin-bottom: 12px; }
        .invite-code-btn { background: var(--primary); color: white; border: none; padding: 10px 24px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .invite-rewards { background: white; margin: 16px; border-radius: 12px; padding: 16px; }
        .invite-rewards-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; text-align: center; }
        .invite-reward-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
        .invite-reward-item:last-child { border-bottom: none; }
        .invite-reward-icon { width: 40px; height: 40px; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .invite-reward-info { flex: 1; }
        .invite-reward-name { font-size: 14px; margin-bottom: 2px; }
        .invite-reward-desc { font-size: 12px; color: var(--text-light); }
        .invite-reward-value { color: var(--danger); font-weight: 600; }
        .edit-form { background: white; margin-top: 12px; }
        .edit-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid var(--border); }
        .edit-item:last-child { border-bottom: none; }
        .edit-item-label { width: 80px; font-size: 14px; }
        .edit-item-input { flex: 1; border: none; font-size: 14px; outline: none; }
        .edit-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
        .edit-submit { margin: 24px 16px; background: var(--primary); color: white; border: none; padding: 14px; border-radius: 24px; font-size: 16px; width: calc(100% - 32px); cursor: pointer; }
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 9999; animation: toast 2s ease; }
        @keyframes toast { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } }
        .back-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="page-home" class="page active">
        <div class="header">
            <div class="header-search">
                <input type="text" placeholder="搜索新鲜农产品">
            </div>
        </div>
        <div class="banner">
            <div class="banner-track" id="banner-track">
                <div class="banner-slide"><img src="https://images.unsplash.com/photo-1542838132-92c53300491e?w=800&h=400&fit=crop" alt="新鲜蔬菜"></div>
                <div class="banner-slide"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=800&h=400&fit=crop" alt="有机水果"></div>
                <div class="banner-slide"><img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?w=800&h=400&fit=crop" alt="农场地标"></div>
            </div>
            <div class="banner-dots"><div class="banner-dot active"></div><div class="banner-dot"></div><div class="banner-dot"></div></div>
        </div>
        <div class="category-nav">
            <a href="#" class="category-item" onclick="switchPage('category')"><div class="category-icon">🥬</div><span>新鲜蔬菜</span></a>
            <a href="#" class="category-item" onclick="switchPage('category')"><div class="category-icon">🍎</div><span>时令水果</span></a>
            <a href="#" class="category-item" onclick="switchPage('category')"><div class="category-icon">🌾</div><span>粮油调味</span></a>
            <a href="#" class="category-item" onclick="switchPage('category')"><div class="category-icon">🥩</div><span>肉禽蛋奶</span></a>
            <a href="#" class="category-item" onclick="switchPage('category')"><div class="category-icon">🐟</div><span>水产海鲜</span></a>
            <a href="#" class="category-item" onclick="switchPage('category')"><div class="category-icon">🍄</div><span>菌菇干货</span></a>
        </div>
        <div class="seckill-section">
            <div class="section-header"><div class="section-title"><span>⏰ 限时秒杀</span></div><div class="seckill-time"><span>02</span>:<span>34</span>:<span>56</span></div></div>
            <div class="seckill-products">
                <div class="seckill-product" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=200&h=200&fit=crop" alt="有机苹果"><div class="seckill-price">¥19.9 <del>¥39.9</del></div></div>
                <div class="seckill-product" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=200&h=200&fit=crop" alt="新鲜菠菜"><div class="seckill-price">¥9.9 <del>¥19.9</del></div></div>
                <div class="seckill-product" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1610832958506-aa56368176cf?w=200&h=200&fit=crop" alt="土鸡蛋"><div class="seckill-price">¥29.9 <del>¥49.9</del></div></div>
            </div>
        </div>
        <div class="product-section">
            <div class="section-header"><div class="section-title">🔥 畅销产品</div></div>
            <div class="product-list">
                <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1518843875459-f738682238a6?w=400&h=300&fit=crop" alt="有机大米"><div class="product-info"><div class="product-name">东北有机大米 5kg 真空包装</div><div class="product-price">¥68 <del>¥88</del></div><div class="product-sales">已售 2586 件</div></div></div>
                <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=400&h=300&fit=crop" alt="蜂蜜"><div class="product-info"><div class="product-name">秦岭土蜂蜜 500g 农家自养</div><div class="product-price">¥59 <del>¥79</del></div><div class="product-sales">已售 1856 件</div></div></div>
            </div>
        </div>
        <div class="product-section">
            <div class="section-header"><div class="section-title">✨ 新品推荐</div></div>
            <div class="product-list">
                <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1610832958506-aa56368176cf?w=400&h=300&fit=crop" alt="土鸡蛋"><div class="product-info"><div class="product-name">农家散养土鸡蛋 30枚 礼盒装</div><div class="product-price">¥49 <del>¥69</del></div><div class="product-sales">新品上架</div></div></div>
                <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1625922948458-c3a605c7f3be?w=400&h=300&fit=crop" alt="银耳"><div class="product-info"><div class="product-name">古田银耳 200g 糯耳特级</div><div class="product-price">¥35 <del>¥48</del></div><div class="product-sales">新品上架</div></div></div>
            </div>
        </div>
        <div class="group-section">
            <div class="section-header"><div class="section-title">👥 拼团活动</div></div>
            <div class="group-products">
                <div class="group-product" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1543258103-a62bdc069871?w=300&h=200&fit=crop" alt="红富士苹果"><div class="product-name" style="font-size: 13px; margin-top: 8px;">烟台红富士苹果 5斤装</div><div class="seckill-price" style="margin-top: 4px;">¥24.9 <del>¥39.9</del></div><div class="group-tag">3人团</div></div>
                <div class="group-product" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1551754655-cd27e38d2076?w=300&h=200&fit=crop" alt="赣南脐橙"><div class="product-name" style="font-size: 13px; margin-top: 8px;">赣南脐橙 10斤装 精选大果</div><div class="seckill-price" style="margin-top: 4px;">¥39.9 <del>¥59.9</del></div><div class="group-tag">5人团</div></div>
            </div>
        </div>
        <div style="height: 20px;"></div>
    </div>
    
    <!-- 分类页 -->
    <div id="page-category" class="page">
        <div class="header"><div class="header-title">商品分类</div></div>
        <div class="category-page">
            <div class="category-left">
                <div class="category-menu-item active">新鲜蔬菜</div>
                <div class="category-menu-item">时令水果</div>
                <div class="category-menu-item">粮油调味</div>
                <div class="category-menu-item">肉禽蛋奶</div>
                <div class="category-menu-item">水产海鲜</div>
                <div class="category-menu-item">菌菇干货</div>
                <div class="category-menu-item">坚果炒货</div>
                <div class="category-menu-item">茶饮酒类</div>
            </div>
            <div class="category-right">
                <div class="category-banner"><img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?w=600&h=160&fit=crop" alt="蔬菜专区"></div>
                <div class="subcategory-title">热门分类</div>
                <div class="subcategory-grid">
                    <div class="subcategory-item" onclick="switchPage('product-list')"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=100&h=100&fit=crop" alt="叶菜类"><span>叶菜类</span></div>
                    <div class="subcategory-item" onclick="switchPage('product-list')"><img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=100&h=100&fit=crop" alt="根茎类"><span>根茎类</span></div>
                    <div class="subcategory-item" onclick="switchPage('product-list')"><img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=100&h=100&fit=crop" alt="菌菇类"><span>菌菇类</span></div>
                    <div class="subcategory-item" onclick="switchPage('product-list')"><img src="https://images.unsplash.com/photo-1559847844-5315695dadae?w=100&h=100&fit=crop" alt="豆制品"><span>豆制品</span></div>
                    <div class="subcategory-item" onclick="switchPage('product-list')"><img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?w=100&h=100&fit=crop" alt="葱姜蒜"><span>葱姜蒜</span></div>
                    <div class="subcategory-item" onclick="switchPage('product-list')"><img src="https://images.unsplash.com/photo-1518977676601-b53f82ber8d9?w=100&h=100&fit=crop" alt="瓜果类"><span>瓜果类</span></div>
                </div>
                <div class="subcategory-title mt-12">推荐商品</div>
                <div class="product-list" style="gap: 8px;">
                    <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=200&h=150&fit=crop" alt="新鲜菠菜"><div class="product-info"><div class="product-name">有机新鲜菠菜 500g</div><div class="product-price">¥8.9</div></div></div>
                    <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=200&h=150&fit=crop" alt="香菇"><div class="product-info"><div class="product-name">新鲜香菇 300g</div><div class="product-price">¥12.9</div></div></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 购物车页 -->
    <div id="page-cart" class="page">
        <div class="header"><div class="header-title">购物车</div><a href="#" style="color: white; font-size: 14px;">管理</a></div>
        <div class="cart-list">
            <div class="cart-store">
                <div class="cart-store-name">田园优选旗舰店</div>
                <div class="cart-item">
                    <div class="cart-checkbox checked"></div>
                    <img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=150&h=150&fit=crop" alt="有机苹果">
                    <div class="cart-item-info"><div class="cart-item-name">陕西有机红富士苹果 5斤装 脆甜多汁</div><div class="cart-item-spec">规格：5斤装 大果</div><div class="cart-item-bottom"><div class="cart-item-price">¥39.9</div><div class="quantity-control"><div class="quantity-btn">-</div><div class="quantity-num">2</div><div class="quantity-btn">+</div></div></div></div>
                </div>
                <div class="cart-item">
                    <div class="cart-checkbox checked"></div>
                    <img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=150&h=150&fit=crop" alt="新鲜菠菜">
                    <div class="cart-item-info"><div class="cart-item-name">农家新鲜菠菜 500g 无农药</div><div class="cart-item-spec">规格：500g</div><div class="cart-item-bottom"><div class="cart-item-price">¥8.9</div><div class="quantity-control"><div class="quantity-btn">-</div><div class="quantity-num">1</div><div class="quantity-btn">+</div></div></div></div>
                </div>
            </div>
        </div>
        <div class="cart-footer">
            <div class="cart-footer-left"><div class="cart-checkbox checked"></div><span>全选</span></div>
            <div class="cart-total">合计：<span>¥88.7</span></div>
            <button class="cart-checkout-btn" onclick="switchPage('order')">结算(2)</button>
        </div>
    </div>
    
    <!-- 分销中心 -->
    <div id="page-distribution" class="page">
        <div class="distrib-header">
            <div class="distrib-user"><div class="distrib-avatar"><img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" alt="头像"></div><div class="distrib-user-info"><h3>张三种菜</h3><p>分销商</p></div></div>
            <div class="distrib-stats">
                <div class="distrib-stat"><div class="distrib-stat-value">¥1,258.00</div><div class="distrib-stat-label">累计佣金</div></div>
                <div class="distrib-stat"><div class="distrib-stat-value">¥358.00</div><div class="distrib-stat-label">可提现</div></div>
                <div class="distrib-stat"><div class="distrib-stat-value">28</div><div class="distrib-stat-label">客户数</div></div>
            </div>
            <div class="distrib-actions">
                <div class="distrib-action-btn primary" onclick="switchPage('withdraw')">立即提现</div>
                <div class="distrib-action-btn secondary" onclick="switchPage('invite')">邀请好友</div>
            </div>
        </div>
        <div class="distrib-content">
            <div class="distrib-section">
                <div class="distrib-section-title">我的客户<a onclick="switchPage('customer-list')">查看全部 ></a></div>
                <div class="customer-list">
                    <div class="customer-item"><div class="customer-avatar">👤</div><div class="customer-info"><div class="customer-name">李四***</div><div class="customer-time">2024-01-15 成为客户</div></div><div class="customer-commission"><div class="customer-commission-value">+¥58.00</div><div class="customer-commission-label">贡献佣金</div></div></div>
                    <div class="customer-item"><div class="customer-avatar">👤</div><div class="customer-info"><div class="customer-name">王五***</div><div class="customer-time">2024-01-10 成为客户</div></div><div class="customer-commission"><div class="customer-commission-value">+¥126.00</div><div class="customer-commission-label">贡献佣金</div></div></div>
                </div>
            </div>
            <div class="distrib-section">
                <div class="distrib-section-title">销售数据</div>
                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
                    <div style="background: var(--bg); padding: 12px; border-radius: 8px; text-align: center;"><div style="font-size: 20px; font-weight: 600; color: var(--primary);">¥2,568</div><div style="font-size: 12px; color: var(--text-light); margin-top: 4px;">本月销售额</div></div>
                    <div style="background: var(--bg); padding: 12px; border-radius: 8px; text-align: center;"><div style="font-size: 20px; font-weight: 600; color: var(--secondary);">15</div><div style="font-size: 12px; color: var(--text-light); margin-top: 4px;">本月订单</div></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 个人中心 -->
    <div id="page-profile" class="page">
        <div class="profile-header">
            <div class="profile-user"><div class="profile-avatar"><img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" alt="头像"></div><div class="profile-info"><div class="profile-name">张三种菜</div><div class="profile-phone">138****8888</div></div><div class="profile-edit" onclick="switchPage('profile-edit')">编辑</div></div>
        </div>
        <div class="profile-orders">
            <div class="profile-orders-header"><div class="profile-orders-title">我的订单</div><div class="profile-orders-more" onclick="switchPage('orders')">全部订单 ></div></div>
            <div class="order-tabs">
                <div class="order-tab" onclick="switchPage('orders')"><div class="order-tab-icon">💳</div><span>待付款</span></div>
                <div class="order-tab" onclick="switchPage('orders')"><div class="order-tab-icon">📦</div><span>待发货</span></div>
                <div class="order-tab" onclick="switchPage('orders')"><div class="order-tab-icon">🚚</div><span>待收货</span></div>
                <div class="order-tab" onclick="switchPage('orders')"><div class="order-tab-icon">⭐</div><span>待评价</span></div>
                <div class="order-tab" onclick="switchPage('orders')"><div class="order-tab-icon">🔄</div><span>退款/售后</span></div>
            </div>
        </div>
        <div class="profile-menu">
            <div class="menu-item" onclick="switchPage('favorite')"><div class="menu-icon">⭐</div><div class="menu-item-text">我的收藏</div><div class="menu-item-arrow">></div></div>
            <div class="menu-item" onclick="switchPage('address')"><div class="menu-icon">📍</div><div class="menu-item-text">收货地址</div><div class="menu-item-arrow">></div></div>
            <div class="menu-item" onclick="switchPage('coupon')"><div class="menu-icon">🎫</div><div class="menu-item-text">优惠券</div><div class="menu-item-badge">3</div><div class="menu-item-arrow">></div></div>
            <div class="menu-item" onclick="switchPage('points')"><div class="menu-icon">💰</div><div class="menu-item-text">我的积分</div><div class="menu-item-arrow">></div></div>
            <div class="menu-item" onclick="switchPage('invite')"><div class="menu-icon">🎁</div><div class="menu-item-text">邀请有礼</div><div class="menu-item-arrow">></div></div>
        </div>
        <div class="profile-menu mt-12">
            <div class="menu-item" onclick="switchPage('service')"><div class="menu-icon">📞</div><div class="menu-item-text">联系客服</div><div class="menu-item-arrow">></div></div>
            <div class="menu-item" onclick="switchPage('help')"><div class="menu-icon">📖</div><div class="menu-item-text">帮助中心</div><div class="menu-item-arrow">></div></div>
            <div class="menu-item" onclick="switchPage('setting')"><div class="menu-icon">⚙️</div><div class="menu-item-text">设置</div><div class="menu-item-arrow">></div></div>
        </div>
        <div style="height: 20px;"></div>
    </div>
    
    <!-- 产品详情 -->
    <div id="page-detail" class="page">
        <div style="position: sticky; top: 0; background: white; z-index: 10; display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border);">
            <div class="back-btn" onclick="goBack()"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div>
            <div style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">商品详情</div><div style="width: 24px;"></div>
        </div>
        <div class="detail-gallery"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=800&h=800&fit=crop" alt="有机苹果"><div class="gallery-indicator">1/4</div></div>
        <div class="detail-content">
            <div class="detail-price">¥39.9 <del>¥59.9</del></div>
            <div class="detail-title">陕西有机红富士苹果 5斤装 产地直发 脆甜多汁 营养健康</div>
            <div class="detail-desc">产自陕西洛川优质苹果产区，果园直供，新鲜采摘，冷链配送。</div>
            <div class="detail-tags"><span class="detail-tag">有机认证</span><span class="detail-tag">产地直发</span><span class="detail-tag">坏果包赔</span></div>
        </div>
        <div class="detail-section"><div class="detail-section-title">选择规格</div><div class="spec-list"><div class="spec-item active">5斤装 小果</div><div class="spec-item">5斤装 大果</div><div class="spec-item">10斤装 大果</div></div></div>
        <div class="detail-section"><div class="detail-section-title">配送说明</div><div class="delivery-info"><div class="delivery-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg><span>配送至：上海市浦东新区 · 预计1-2天送达</span></div><div class="delivery-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg><span>快递免邮 · 冷链配送</span></div></div></div>
        <div class="detail-section"><div class="detail-section-title">商品评价 (128)</div><div class="review-item"><div class="review-header"><div class="review-avatar"></div><div class="review-user"><div class="review-name">用户1***3</div><div class="review-time">2024-01-15</div></div></div><div class="review-content">苹果很新鲜，脆甜多汁，家人都说好吃！</div></div><div class="review-item"><div class="review-header"><div class="review-avatar"></div><div class="review-user"><div class="review-name">水果达***</div><div class="review-time">2024-01-12</div></div></div><div class="review-content">包装很好，没有磕碰。口感非常好，价格也比超市便宜！</div><div class="review-images"><img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=100&h=100&fit=crop" alt=""><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=100&h=100&fit=crop" alt=""></div></div></div>
        <div style="height: 80px;"></div>
        <div class="detail-footer">
            <div class="detail-icon-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><span>收藏</span></div>
            <div class="detail-icon-btn" onclick="switchPage('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg><span>首页</span></div>
            <div class="detail-action"><button class="detail-btn add-cart" onclick="addToCart()">加入购物车</button><button class="detail-btn buy-now" onclick="switchPage('order')">立即购买</button></div>
        </div>
    </div>
    
    <!-- 确认订单 -->
    <div id="page-order" class="page">
        <div style="position: sticky; top: 0; background: white; z-index: 10; display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border);">
            <div class="back-btn" onclick="goBack()"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div>
            <div style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">确认订单</div><div style="width: 24px;"></div>
        </div>
        <div class="order-address" onclick="switchPage('address')"><div class="address-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg></div><div class="address-info"><div class="address-user">张三 <span>138****8888</span></div><div class="address-detail">上海市浦东新区张江镇科苑路88号1号楼1501室</div></div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-light)" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg></div>
        <div class="order-section"><div class="order-section-header">配送方式</div><div class="order-item"><span class="order-item-label">快递配送</span><span class="order-item-value red">免邮</span></div></div>
        <div class="order-section">
            <div class="order-section-header">商品清单</div>
            <div class="order-product"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=150&h=150&fit=crop" alt=""><div class="order-product-info"><div class="order-product-name">陕西有机红富士苹果 5斤装</div><div class="order-product-spec">规格：5斤装 大果</div><div class="order-product-bottom"><div class="order-product-price">¥39.9</div><div class="order-product-qty">x2</div></div></div></div>
            <div class="order-product"><img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=150&h=150&fit=crop" alt=""><div class="order-product-info"><div class="order-product-name">农家新鲜菠菜 500g</div><div class="order-product-spec">规格：500g</div><div class="order-product-bottom"><div class="order-product-price">¥8.9</div><div class="order-product-qty">x1</div></div></div></div>
        </div>
        <div class="order-section">
            <div class="order-item"><span class="order-item-label">商品金额</span><span class="order-item-value">¥88.7</span></div>
            <div class="order-item"><span class="order-item-label">运费</span><span class="order-item-value red">免运费</span></div>
            <div class="order-item" onclick="switchPage('coupon')"><span class="order-item-label">优惠券</span><span class="order-item-value green">-¥5.00 ></span></div>
            <div class="order-item" onclick="switchPage('points')"><span class="order-item-label">积分抵扣</span><span class="order-item-value green">-¥2.00 ></span></div>
            <div class="order-remark"><input type="text" placeholder="备注信息（选填）"></div>
        </div>
        <div style="height: 80px;"></div>
        <div class="order-footer"><div class="order-total">合计：<span>¥81.7</span></div><button class="order-submit-btn" onclick="submitOrder()">提交订单</button></div>
    </div>
    
    <!-- ========== 二级页面 ========== -->
    
    <!-- 订单列表 -->
    <div id="page-orders" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">我的订单</div><div style="width: 40px;"></div></div>
        <div class="order-tabs-bar"><div class="order-tab-bar active">全部</div><div class="order-tab-bar">待付款</div><div class="order-tab-bar">待发货</div><div class="order-tab-bar">待收货</div><div class="order-tab-bar">待评价</div></div>
        <div class="order-list">
            <div class="order-card"><div class="order-card-header"><div class="order-card-store">田园优选旗舰店</div><div class="order-card-status">待付款</div></div><div class="order-card-product"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=120&h=120&fit=crop" alt=""><div class="order-card-product-info"><div class="order-card-product-name">陕西有机红富士苹果 5斤装</div><div class="order-card-product-spec">规格：5斤装 大果</div><div class="order-card-product-bottom"><div class="order-card-product-price">¥39.9</div><div class="order-card-product-qty">x2</div></div></div></div><div class="order-card-footer"><div class="order-card-total">共2件商品，实付：<span>¥88.7</span></div><div class="order-card-actions"><button class="order-action-btn">取消订单</button><button class="order-action-btn primary">去付款</button></div></div></div>
            <div class="order-card"><div class="order-card-header"><div class="order-card-store">田园优选旗舰店</div><div class="order-card-status" style="color: var(--primary);">待发货</div></div><div class="order-card-product"><img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=120&h=120&fit=crop" alt=""><div class="order-card-product-info"><div class="order-card-product-name">农家新鲜菠菜 500g</div><div class="order-card-product-spec">规格：500g</div><div class="order-card-product-bottom"><div class="order-card-product-price">¥8.9</div><div class="order-card-product-qty">x1</div></div></div></div><div class="order-card-footer"><div class="order-card-total">共1件商品，实付：<span>¥8.9</span></div><div class="order-card-actions"><button class="order-action-btn primary">提醒发货</button></div></div></div>
            <div class="order-card"><div class="order-card-header"><div class="order-card-store">田园优选旗舰店</div><div class="order-card-status" style="color: var(--secondary);">待收货</div></div><div class="order-card-product"><img src="https://images.unsplash.com/photo-1610832958506-aa56368176cf?w=120&h=120&fit=crop" alt=""><div class="order-card-product-info"><div class="order-card-product-name">农家散养土鸡蛋 30枚 礼盒装</div><div class="order-card-product-spec">规格：30枚装</div><div class="order-card-product-bottom"><div class="order-card-product-price">¥49</div><div class="order-card-product-qty">x1</div></div></div></div><div class="order-card-footer"><div class="order-card-total">共1件商品，实付：<span>¥49.0</span></div><div class="order-card-actions"><button class="order-action-btn">查看物流</button><button class="order-action-btn primary">确认收货</button></div></div></div>
        </div>
    </div>
    
    <!-- 商品列表 -->
    <div id="page-product-list" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">叶菜类</div><div style="width: 40px;"></div></div>
        <div class="product-section">
            <div class="product-list">
                <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=200&h=150&fit=crop" alt="菠菜"><div class="product-info"><div class="product-name">有机新鲜菠菜 500g 绿色无污染</div><div class="product-price">¥8.9 <del>¥12.9</del></div><div class="product-sales">已售 1256 件</div></div></div>
                <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1582275867293-1b7b8e5e3a21?w=200&h=150&fit=crop" alt="青菜"><div class="product-info"><div class="product-name">小青菜 500g 新鲜嫩叶</div><div class="product-price">¥5.9 <del>¥8.9</del></div><div class="product-sales">已售 856 件</div></div></div>
                <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=200&h=150&fit=crop" alt="生菜"><div class="product-info"><div class="product-name">罗马生菜 300g 沙拉专用</div><div class="product-price">¥12.9 <del>¥16.9</del></div><div class="product-sales">已售 456 件</div></div></div>
                <div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?w=200&h=150&fit=crop" alt="油麦菜"><div class="product-info"><div class="product-name">油麦菜 400g 清脆爽口</div><div class="product-price">¥6.9 <del>¥9.9</del></div><div class="product-sales">已售 678 件</div></div></div>
            </div>
        </div>
    </div>
    
    <!-- 我的收藏 -->
    <div id="page-favorite" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">我的收藏</div><div style="width: 40px;"></div></div>
        <div class="fav-tabs"><div class="fav-tab active">商品收藏</div><div class="fav-tab">店铺收藏</div></div>
        <div class="product-section"><div class="product-list"><div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=200&h=150&fit=crop" alt=""><div class="product-info"><div class="product-name">陕西有机红富士苹果 5斤装</div><div class="product-price">¥39.9 <del>¥59.9</del></div></div></div><div class="product-card" onclick="switchPage('detail')"><img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=200&h=150&fit=crop" alt=""><div class="product-info"><div class="product-name">秦岭土蜂蜜 500g</div><div class="product-price">¥59 <del>¥79</del></div></div></div></div></div>
    </div>
    
    <!-- 收货地址 -->
    <div id="page-address" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">收货地址</div><div style="width: 40px;"></div></div>
        <div class="address-list">
            <div class="address-card"><div style="display: flex; align-items: center;"><div class="cart-checkbox checked"></div></div><div class="address-card-info"><div class="address-card-user">张三 <span>138****8888</span></div><div class="address-card-detail">上海市浦东新区张江镇科苑路88号1号楼1501室</div><span class="address-card-default">默认</span></div><div class="address-card-actions"><button class="address-edit-btn">编辑</button></div></div>
            <div class="address-card"><div style="display: flex; align-items: center;"><div class="cart-checkbox"></div></div><div class="address-card-info"><div class="address-card-user">李四 <span>139****6666</span></div><div class="address-card-detail">北京市朝阳区望京街道soho塔1 801室</div></div><div class="address-card-actions"><button class="address-edit-btn">编辑</button></div></div>
            <div class="address-card"><div style="display: flex; align-items: center;"><div class="cart-checkbox"></div></div><div class="address-card-info"><div class="address-card-user">王五 <span>137****5555</span></div><div class="address-card-detail">广州市天河区珠江新城花城大道88号</div></div><div class="address-card-actions"><button class="address-edit-btn">编辑</button></div></div>
        </div>
        <button class="address-add-btn">+ 新增收货地址</button>
        <div style="height: 80px;"></div>
    </div>
    
    <!-- 优惠券 -->
    <div id="page-coupon" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">优惠券</div><div style="width: 40px;"></div></div>
        <div class="coupon-tabs"><div class="coupon-tab active">可用优惠券</div><div class="coupon-tab">已使用</div><div class="coupon-tab">已过期</div></div>
        <div class="coupon-list">
            <div class="coupon-item"><div class="coupon-left"><div class="coupon-value"><small>¥</small>10</div><div class="coupon-limit">满59可用</div></div><div class="coupon-right"><div class="coupon-name">新人专享券</div><div class="coupon-desc">限新用户使用</div><div class="coupon-time">有效期至 2026-04-30</div></div></div>
            <div class="coupon-item"><div class="coupon-left"><div class="coupon-value"><small>¥</small>20</div><div class="coupon-limit">满99可用</div></div><div class="coupon-right"><div class="coupon-name">满减优惠券</div><div class="coupon-desc">全场通用</div><div class="coupon-time">有效期至 2026-05-15</div></div></div>
        </div>
    </div>
    
    <!-- 我的积分 -->
    <div id="page-points" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">我的积分</div><div style="width: 40px;"></div></div>
        <div class="points-header"><div class="points-value">2,580</div><div class="points-label">当前积分</div></div>
        <div class="points-rules"><div class="points-rules-title">积分规则</div><div class="points-rule-item"><span>每日签到</span><span style="color: var(--primary);">+10积分</span></div><div class="points-rule-item"><span>下单购物</span><span>每消费1元+1积分</span></div><div class="points-rule-item"><span>评价商品</span><span style="color: var(--primary);">+5积分</span></div><div class="points-rule-item"><span>100积分抵</span><span style="color: var(--danger);">¥1.00</span></div></div>
        <div style="margin: 16px; background: white; border-radius: 12px; padding: 16px;"><div style="font-size: 15px; font-weight: 600; margin-bottom: 12px;">积分明细</div><div class="points-rule-item"><span>2024-01-18 购买商品</span><span style="color: var(--primary);">+88积分</span></div><div class="points-rule-item"><span>2024-01-17 签到</span><span style="color: var(--primary);">+10积分</span></div><div class="points-rule-item"><span>2024-01-15 评价商品</span><span style="color: var(--primary);">+5积分</span></div></div>
    </div>
    
    <!-- 邀请有礼 -->
    <div id="page-invite" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">邀请有礼</div><div style="width: 40px;"></div></div>
        <div class="invite-header"><div class="invite-title">邀请好友 赚取佣金</div><div class="invite-desc">每成功邀请1位好友下单，最高可获得15%佣金奖励</div></div>
        <div class="invite-code"><div style="font-size: 13px; color: var(--text-light); margin-bottom: 8px;">我的邀请码</div><div class="invite-code-value">TY2024</div><button class="invite-code-btn">复制邀请码</button></div>
        <div class="invite-rewards"><div class="invite-rewards-title">邀请奖励</div><div class="invite-reward-item"><div class="invite-reward-icon">👤</div><div class="invite-reward-info"><div class="invite-reward-name">好友注册</div><div class="invite-reward-desc">好友成功注册</div></div><div class="invite-reward-value">+5积分</div></div><div class="invite-reward-item"><div class="invite-reward-icon">🛒</div><div class="invite-reward-info"><div class="invite-reward-name">好友首单</div><div class="invite-reward-desc">好友完成首次购买</div></div><div class="invite-reward-value">+15%佣金</div></div><div class="invite-reward-item"><div class="invite-reward-icon">🎁</div><div class="invite-reward-info"><div class="invite-reward-name">邀请排行</div><div class="invite-reward-desc">月度邀请前三名额外奖励</div></div><div class="invite-reward-value">¥200</div></div></div>
    </div>
    
    <!-- 联系客服 -->
    <div id="page-service" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">联系客服</div><div style="width: 40px;"></div></div>
        <div class="service-header"><div class="service-title">7x24 小时在线客服</div><div class="service-time">随时随地 为您服务</div></div>
        <div class="service-hotline"><div style="font-size: 13px; color: var(--text-light); margin-bottom: 8px;">客服热线</div><div class="service-phone">400-888-8888</div><button class="service-call-btn">拨打电话</button></div>
        <div style="margin: 16px; background: white; border-radius: 12px; padding: 16px;"><div style="font-size: 15px; font-weight: 600; margin-bottom: 16px;">其他联系方式</div><div style="display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border);"><div style="width: 40px; height: 40px; background: #07C160; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">💬</div><div style="flex: 1;"><div style="font-size: 14px; margin-bottom: 2px;">微信客服</div><div style="font-size: 12px; color: var(--text-light);">tyunxuan888</div></div><button style="padding: 6px 12px; background: #07C160; color: white; border: none; border-radius: 16px; font-size: 12px;">复制</button></div><div style="display: flex; align-items: center; gap: 12px; padding: 12px 0;"><div style="width: 40px; height: 40px; background: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px;">💬</div><div style="flex: 1;"><div style="font-size: 14px; margin-bottom: 2px;">在线客服</div><div style="font-size: 12px; color: var(--text-light);">点击立即咨询</div></div><button style="padding: 6px 12px; background: var(--primary); color: white; border: none; border-radius: 16px; font-size: 12px;">咨询</button></div></div>
    </div>
    
    <!-- 帮助中心 -->
    <div id="page-help" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">帮助中心</div><div style="width: 40px;"></div></div>
        <div class="help-list">
            <div class="help-item"><div class="help-item-header" onclick="this.parentElement.classList.toggle('open')"><div class="help-item-title">如何查看订单物流？</div><div class="help-item-arrow">▼</div></div><div class="help-item-content">您可以在"我的订单"中找到需要查看的订单，点击"查看物流"即可查看快递实时位置。</div></div>
            <div class="help-item"><div class="help-item-header" onclick="this.parentElement.classList.toggle('open')"><div class="help-item-title">如何申请退款/退货？</div><div class="help-item-arrow">▼</div></div><div class="help-item-content">进入"我的订单"，找到需要退款的订单，点击"退款/售后"申请。填写退款原因后提交，客服会在24小时内处理。</div></div>
            <div class="help-item"><div class="help-item-header" onclick="this.parentElement.classList.toggle('open')"><div class="help-item-title">积分有什么用？</div><div class="help-item-arrow">▼</div></div><div class="help-item-content">积分可以在下单时抵扣现金，100积分可抵1元。积分还可用于兑换优惠券、礼品等。</div></div>
            <div class="help-item"><div class="help-item-header" onclick="this.parentElement.classList.toggle('open')"><div class="help-item-title">农产品如何保鲜配送？</div><div class="help-item-arrow">▼</div></div><div class="help-item-content">我们采用冷链配送，确保新鲜度。蔬菜水果在产地采摘后立即预冷处理，使用保鲜箱+冰袋包装，全程冷链运输。</div></div>
        </div>
    </div>
    
    <!-- 设置 -->
    <div id="page-setting" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">设置</div><div style="width: 40px;"></div></div>
        <div class="setting-list"><div class="setting-item"><div class="setting-item-left"><div class="setting-item-icon">🔔</div><div class="setting-item-text">消息推送</div></div><div class="toggle-switch active"></div></div><div class="setting-item"><div class="setting-item-left"><div class="setting-item-icon">🎵</div><div class="setting-item-text">声音</div></div><div class="toggle-switch active"></div></div><div class="setting-item"><div class="setting-item-left"><div class="setting-item-icon">📳</div><div class="setting-item-text">震动</div></div><div class="toggle-switch active"></div></div></div>
        <div class="setting-list" style="margin-top: 12px;"><div class="setting-item"><div class="setting-item-left"><div class="setting-item-icon">ℹ️</div><div class="setting-item-text">关于我们</div></div><div class="setting-item-arrow">></div></div><div class="setting-item"><div class="setting-item-left"><div class="setting-item-icon">📄</div><div class="setting-item-text">用户协议</div></div><div class="setting-item-arrow">></div></div><div class="setting-item"><div class="setting-item-left"><div class="setting-item-icon">🔒</div><div class="setting-item-text">隐私政策</div></div><div class="setting-item-arrow">></div></div><div class="setting-item"><div class="setting-item-left"><div class="setting-item-icon">🗑️</div><div class="setting-item-text">清除缓存</div></div><div class="setting-item-arrow">></div></div></div>
        <button style="display: block; width: calc(100% - 32px); margin: 24px 16px; padding: 14px; background: white; border: 1px solid var(--danger); color: var(--danger); border-radius: 24px; font-size: 15px; cursor: pointer;">退出登录</button>
    </div>
    
    <!-- 用户编辑 -->
    <div id="page-profile-edit" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">编辑资料</div><div style="width: 40px;"></div></div>
        <div style="background: white; padding: 20px; text-align: center;"><img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" alt="" class="edit-avatar" style="display: inline-block;"><div style="margin-top: 10px; color: var(--primary); font-size: 13px;">点击更换头像</div></div>
        <div class="edit-form"><div class="edit-item"><div class="edit-item-label">昵称</div><input type="text" class="edit-item-input" value="张三种菜"></div><div class="edit-item"><div class="edit-item-label">手机号</div><input type="text" class="edit-item-input" value="138****8888" readonly style="color: var(--text-light);"></div><div class="edit-item"><div class="edit-item-label">性别</div><div style="flex: 1; display: flex; gap: 16px;"><label style="display: flex; align-items: center; gap: 4px;"><input type="radio" name="gender" checked> 男</label><label style="display: flex; align-items: center; gap: 4px;"><input type="radio" name="gender"> 女</label></div></div></div>
        <button class="edit-submit">保存</button>
    </div>
    
    <!-- 提现 -->
    <div id="page-withdraw" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">提现</div><div style="width: 40px;"></div></div>
        <div class="withdraw-header"><div class="withdraw-label">可提现金额（元）</div><div class="withdraw-value">¥358.00</div></div>
        <div class="withdraw-form"><div class="withdraw-form-title">提现金额</div><div class="withdraw-input"><span>¥</span><input type="number" value="358"></div><div class="withdraw-tips">单次提现最低10元，最高5000元</div><div class="withdraw-methods"><div class="withdraw-form-title">提现方式</div><div class="withdraw-method active"><div class="withdraw-method-icon">💳</div><div class="withdraw-method-info"><div class="withdraw-method-name">微信零钱</div><div class="withdraw-method-limit">到账时间：1-3个工作日</div></div><div class="withdraw-method-check">✓</div></div><div class="withdraw-method"><div class="withdraw-method-icon">🏦</div><div class="withdraw-method-info"><div class="withdraw-method-name">银行卡</div><div class="withdraw-method-limit">到账时间：1-3个工作日</div></div><div class="withdraw-method-check"></div></div></div><button class="withdraw-submit">确认提现</button></div>
    </div>
    
    <!-- 客户列表 -->
    <div id="page-customer-list" class="page sub-page">
        <div class="header"><div class="header-back" onclick="goBack()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></div><div class="header-title">我的客户</div><div style="width: 40px;"></div></div>
        <div style="padding: 12px 16px; background: white;"><div style="display: flex; gap: 12px;"><div style="flex: 1; background: var(--bg); padding: 12px; border-radius: 8px; text-align: center;"><div style="font-size: 20px; font-weight: 600; color: var(--primary);">28</div><div style="font-size: 12px; color: var(--text-light);">客户总数</div></div><div style="flex: 1; background: var(--bg); padding: 12px; border-radius: 8px; text-align: center;"><div style="font-size: 20px; font-weight: 600; color: var(--secondary);">15</div><div style="font-size: 12px; color: var(--text-light);">本月新增</div></div></div></div>
        <div class="distrib-content"><div class="customer-list"><div class="customer-item"><div class="customer-avatar">👤</div><div class="customer-info"><div class="customer-name">李四***</div><div class="customer-time">2024-01-15 成为客户 · 消费3次</div></div><div class="customer-commission"><div class="customer-commission-value">+¥58.00</div><div class="customer-commission-label">贡献佣金</div></div></div><div class="customer-item"><div class="customer-avatar">👤</div><div class="customer-info"><div class="customer-name">王五***</div><div class="customer-time">2024-01-10 成为客户 · 消费5次</div></div><div class="customer-commission"><div class="customer-commission-value">+¥126.00</div><div class="customer-commission-label">贡献佣金</div></div></div><div class="customer-item"><div class="customer-avatar">👤</div><div class="customer-info"><div class="customer-name">赵六***</div><div class="customer-time">2024-01-08 成为客户 · 消费2次</div></div><div class="customer-commission"><div class="customer-commission-value">+¥45.00</div><div class="customer-commission-label">贡献佣金</div></div></div></div></div>
    </div>
    
    <!-- 底部导航 -->
    <nav class="tab-bar">
        <a href="#" class="tab-item active" onclick="switchPage('home')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg><span>首页</span></a>
        <a href="#" class="tab-item" onclick="switchPage('category')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg><span>分类</span></a>
        <a href="#" class="tab-item" onclick="switchPage('cart')"><div class="tab-item-wrapper"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg><span class="badge">2</span></div><span>购物车</span></a>
        <a href="#" class="tab-item" onclick="switchPage('distribution')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg><span>分销</span></a>
        <a href="#" class="tab-item" onclick="switchPage('profile')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg><span>我的</span></a>
    </nav>
    
    <script>
        var pageHistory = ['home'];
        
        function switchPage(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            var target = document.getElementById('page-' + pageId);
            if (target) target.classList.add('active');
            
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            var tabIndex = ['home','category','cart','distribution','profile'].indexOf(pageId);
            if (tabIndex >= 0) document.querySelectorAll('.tab-item')[tabIndex].classList.add('active');
            
            pageHistory.push(pageId);
            window.scrollTo(0, 0);
            return false;
        }
        
        function goBack() {
            if (pageHistory.length > 1) {
                pageHistory.pop();
                var prevPage = pageHistory[pageHistory.length - 1];
                document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
                document.getElementById('page-' + prevPage).classList.add('active');
            }
        }
        
        var currentSlide = 0;
        var bannerTrack = document.getElementById('banner-track');
        setInterval(function() {
            currentSlide = (currentSlide + 1) % 3;
            if (bannerTrack) bannerTrack.style.transform = 'translateX(-' + currentSlide * 100 + '%)';
            document.querySelectorAll('.banner-dot').forEach(function(dot, i) {
                dot.classList.toggle('active', i === currentSlide);
            });
        }, 3000);
        
        document.querySelectorAll('.spec-item').forEach(function(item) {
            item.addEventListener('click', function() {
                document.querySelectorAll('.spec-item').forEach(function(i) { i.classList.remove('active'); });
                this.classList.add('active');
            });
        });
        
        document.querySelectorAll('.cart-checkbox').forEach(function(cb) {
            cb.addEventListener('click', function() { this.classList.toggle('checked'); });
        });
        
        document.querySelectorAll('.quantity-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var numEl = this.parentElement.querySelector('.quantity-num');
                var num = parseInt(numEl.textContent);
                if (this.textContent === '+') num++; else if (num > 1) num--;
                numEl.textContent = num;
            });
        });
        
        function addToCart() {
            var toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = '商品已加入购物车';
            document.body.appendChild(toast);
            setTimeout(function() { toast.remove(); }, 2000);
        }
        
        function submitOrder() {
            var toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = '订单提交成功！';
            document.body.appendChild(toast);
            setTimeout(function() { toast.remove(); switchPage('home'); }, 2000);
        }
        
        document.querySelectorAll('.toggle-switch').forEach(function(sw) {
            sw.addEventListener('click', function() { this.classList.toggle('active'); });
        });
        
        document.querySelectorAll('.withdraw-method').forEach(function(m) {
            m.addEventListener('click', function() {
                document.querySelectorAll('.withdraw-method').forEach(function(x) { x.classList.remove('active'); });
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>