编辑页面

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>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        :root {
            --primary: #FF6B35;
            --secondary: #FF8C42;
            --accent: #FFD23F;
            --dark: #333333;
            --gray: #666666;
            --light-gray: #999999;
            --border: #E5E5E5;
            --bg: #F5F5F5;
            --white: #FFFFFF;
            --red: #FF3B30;
            --green: #34C759;
            --vip: linear-gradient(135deg, #FFD700, #FFA500);
        }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--dark); max-width: 430px; margin: 0 auto; min-height: 100vh; position: relative; overflow-x: hidden; }
        .page { display: none; min-height: 100vh; background: var(--bg); padding-bottom: 60px; }
        .page.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
        
        /* Header */
        .header { background: var(--white); padding: 12px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .header-search { flex: 1; background: var(--bg); border-radius: 20px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .header-search input { border: none; background: transparent; flex: 1; font-size: 14px; outline: none; }
        .header-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .header-title { font-size: 18px; font-weight: 600; color: var(--dark); }
        
        /* Banner */
        .banner { padding: 12px 16px; }
        .banner-slider { border-radius: 12px; overflow: hidden; position: relative; }
        .banner-slider img { width: 100%; height: 150px; object-fit: cover; display: block; }
        .banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
        .banner-dot { width: 6px; height: 6px; background: rgba(255,255,255,0.5); border-radius: 50%; }
        .banner-dot.active { background: var(--white); width: 18px; border-radius: 3px; }
        
        /* Quick Links */
        .quick-links { background: var(--white); margin: 12px 16px; border-radius: 12px; padding: 16px; }
        .quick-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
        .quick-link { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
        .quick-link-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .quick-link-icon img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
        .quick-link-text { font-size: 12px; color: var(--gray); }
        
        /* VIP Card */
        .vip-card { background: var(--vip); margin: 12px 16px; border-radius: 12px; padding: 16px; color: white; position: relative; overflow: hidden; }
        .vip-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%); }
        .vip-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .vip-badge { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; }
        .vip-card-body { display: flex; gap: 12px; }
        .vip-feature { font-size: 11px; opacity: 0.9; display: flex; align-items: center; gap: 4px; }
        .vip-buy-btn { background: rgba(255,255,255,0.2); border: none; border-radius: 20px; padding: 8px 20px; color: white; font-weight: 600; cursor: pointer; margin-top: 12px; }
        
        /* Section */
        .section { background: var(--white); margin: 12px 16px; border-radius: 12px; padding: 16px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .section-title { font-size: 16px; font-weight: 600; }
        .section-more { font-size: 12px; color: var(--light-gray); display: flex; align-items: center; gap: 4px; cursor: pointer; }
        
        /* Product Grid */
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .product-card { background: var(--bg); border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
        .product-card:hover { transform: scale(1.02); }
        .product-card img { width: 100%; height: 140px; object-fit: cover; }
        .product-info { padding: 10px; }
        .product-name { font-size: 13px; color: var(--dark); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
        .product-price { display: flex; align-items: baseline; gap: 4px; }
        .price-now { color: var(--red); font-size: 16px; font-weight: 600; }
        .price-origin { color: var(--light-gray); font-size: 11px; text-decoration: line-through; }
        .product-tags { display: flex; gap: 4px; margin-top: 6px; }
        .tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
        .tag-vip { background: #FFF3E0; color: #FF9800; }
        .tag-dist { background: #E8F5E9; color: #4CAF50; }
        
        /* Tab Bar */
        .tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); display: flex; justify-content: space-around; padding: 8px 0 20px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100; }
        .tab-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 6px 12px; }
        .tab-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
        .tab-icon svg { width: 100%; height: 100%; fill: var(--light-gray); }
        .tab-item.active .tab-icon svg { fill: var(--primary); }
        .tab-text { font-size: 10px; color: var(--light-gray); }
        .tab-item.active .tab-text { color: var(--primary); }
        
        /* Category Page */
        .category-layout { display: flex; min-height: calc(100vh - 60px); }
        .category-left { width: 85px; background: var(--bg); }
        .category-item { padding: 14px 10px; text-align: center; font-size: 13px; color: var(--gray); cursor: pointer; transition: all 0.2s; }
        .category-item.active { background: var(--white); color: var(--primary); font-weight: 600; border-left: 3px solid var(--primary); }
        .category-right { flex: 1; padding: 16px; background: var(--white); }
        .category-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--dark); }
        .brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .brand-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
        .brand-item img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; background: var(--bg); }
        .brand-item span { font-size: 11px; color: var(--gray); }
        
        /* Product List */
        .list-header{ background: var(--white); padding: 12px 16px; display: flex; justify-content: space-around; border-bottom: 1px solid var(--border); }
        .list-sort { font-size: 13px; color: var(--gray); padding: 8px 12px; cursor: pointer; }
        .list-sort.active { color: var(--primary); font-weight: 600; }
        
        /* Product Detail */
        .detail-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); }
        .detail-images { position: relative; }
        .detail-images img { width: 100%; height: 350px; object-fit: cover; }
        .detail-back { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; background: rgba(0,0,0,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; }
        .detail-share { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: rgba(0,0,0,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; }
        .detail-content { background: var(--white); padding: 16px; margin: 0; }
        .detail-price-box { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
        .detail-price { color: var(--red); font-size: 24px; font-weight: 700; }
        .detail-price-original { color: var(--light-gray); font-size: 14px; text-decoration: line-through; }
        .detail-title { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 12px; }
        .detail-desc { font-size: 13px; color: var(--gray); line-height: 1.6; }
        .detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
        .detail-specs { background: var(--white); margin: 12px 0; padding: 16px; }
        .spec-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
        .spec-item:last-child { border-bottom: none; }
        .spec-label { color: var(--gray); font-size: 13px; }
        .spec-value { color: var(--dark); font-size: 13px; }
        .detail-bottom { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); display: flex; padding: 10px 16px 30px; gap: 12px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 100; }
        .detail-action { flex: 1; display: flex; gap: 8px; }
        .detail-btn { flex: 1; padding: 14px 0; border-radius: 24px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; }
        .detail-btn-cart { background: linear-gradient(135deg, #FFD23F, #FFA500); color: var(--dark); }
        .detail-btn-buy { background: linear-gradient(135deg, #FF6B35, #FF8C42); color: white; }
        
        /* Cart Page */
        .cart-header { background: var(--white); padding: 16px; display: flex; justify-content: space-between; align-items: center; }
        .cart-edit { font-size: 14px; color: var(--gray); }
        .cart-item { background: var(--white); margin: 12px 16px; border-radius: 12px; padding: 16px; display: flex; gap: 12px; }
        .cart-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
        .cart-check.checked { background: var(--primary); border-color: var(--primary); }
        .cart-check.checked::after { content: '✓'; color: white; font-size: 12px; }
        .cart-product { flex: 1; display: flex; gap: 12px; }
        .cart-product img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; }
        .cart-product-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .cart-product-name { font-size: 14px; line-height: 1.4; }
        .cart-product-spec { font-size: 12px; color: var(--light-gray); }
        .cart-product-bottom { display: flex; justify-content: space-between; align-items: center; }
        .cart-price { color: var(--red); font-weight: 600; }
        .cart-qty { display: flex; align-items: center; gap: 12px; }
        .qty-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
        .qty-num { font-size: 15px; min-width: 24px; text-align: center; }
        .cart-bottom-bar { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
        .cart-total { display: flex; flex-direction: column; }
        .cart-total-price { color: var(--red); font-size: 18px; font-weight: 600; }
        .cart-settle { background: linear-gradient(135deg, #FF6B35, #FF8C42); color: white; border: none; border-radius: 20px; padding: 12px 28px; font-size: 15px; font-weight: 600; cursor: pointer; }
        
        /* Order Page */
        .order-address { background: var(--white); padding: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
        .address-icon { width: 40px; height: 40px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; }
        .address-info { flex: 1; }
        .address-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .address-detail { font-size: 13px; color: var(--gray); }
        .order-product { background: var(--white); padding: 16px; margin-bottom: 12px; }
        .order-shop { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; }
        .order-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
        .order-item img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
        .order-item-info { flex: 1; }
        .order-item-name { font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
        .order-item-bottom { display: flex; justify-content: space-between; }
        .order-item-price { color: var(--red); font-weight: 600; }
        .order-item-qty { color: var(--gray); font-size: 13px; }
        .order-bottom-bar { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--white); padding: 12px 16px; display: flex; justify-content: flex-end; align-items: center; gap: 16px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
        .order-total { font-size: 13px; color: var(--gray); }
        .order-total span { color: var(--red); font-size: 18px; font-weight: 600; }
        .order-submit { background: linear-gradient(135deg, #FF6B35, #FF8C42); color: white; border: none; border-radius: 20px; padding: 12px 28px; font-size: 15px; font-weight: 600; cursor: pointer; }
        
        /* User Center */
        .user-header { background: linear-gradient(135deg, #FF6B35, #FF8C42); padding: 30px 20px 50px; color: white; }
        .user-profile { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
        .user-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .user-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
        .user-level { font-size: 12px; opacity: 0.9; }
        .user-stats { display: flex; justify-content: space-around; text-align: center; }
        .user-stat-num { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
        .user-stat-label { font-size: 12px; opacity: 0.9; }
        .user-card { background: var(--white); margin: -30px 16px 12px; border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .user-order-tabs { display: flex; justify-content: space-around; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
        .order-tab { text-align: center; cursor: pointer; position: relative; }
        .order-tab-icon { width: 28px; height: 28px; margin: 0 auto 6px; }
        .order-tab-text { font-size: 12px; color: var(--gray); }
        .order-tab-badge { position: absolute; top: -4px; right: 8px; background: var(--red); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; }
        .user-assets { display: flex; justify-content: space-around; padding: 12px 0; }
        .asset-item { text-align: center; cursor: pointer; }
        .asset-num { font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 4px; }
        .asset-label { font-size: 12px; color: var(--gray); }
        .user-menu { background: var(--white); margin: 12px 16px; border-radius: 12px; }
        .menu-item { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
        .menu-item:last-child { border-bottom: none; }
        .menu-icon { width: 24px; height: 24px; margin-right: 12px; display: flex; align-items: center; justify-content: center; }
        .menu-text { flex: 1; font-size: 15px; }
        .menu-arrow { color: var(--light-gray); }
        
        /* Distribution Center */
        .dist-header { background: linear-gradient(135deg, #4CAF50, #8BC34A); padding: 20px; color: white; text-align: center; }
        .dist-balance { font-size: 14px; margin-bottom: 8px; }
        .dist-amount { font-size: 36px; font-weight: 700; margin-bottom: 16px; }
        .dist-withdraw { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); border-radius: 20px; padding: 10px 24px; color: white; cursor: pointer; }
        .dist-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px; }
        .dist-card { background: var(--white); border-radius: 12px; padding: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; }
        .dist-card-icon { width: 36px; height: 36px; margin: 0 auto 8px; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .dist-card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .dist-card-value { font-size: 18px; font-weight: 700; color: var(--primary); }
        
        /* VIP Page */
        .vip-page-header { background: var(--vip); padding: 30px 20px; text-align: center; color: white; }
        .vip-price { font-size: 48px; font-weight: 700; }
        .vip-price span { font-size: 20px; }
        .vip-desc { font-size: 14px; opacity: 0.9; }
        .vip-benefits { background: var(--white); margin: 16px; border-radius: 12px; padding: 16px; }
        .benefit-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
        .benefit-item:last-child { border-bottom: none; }
        .benefit-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .benefit-text { flex: 1; }
        .benefit-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .benefit-desc { font-size: 12px; color: var(--gray); }
        .vip-buy-btn-full { display: block; width: calc(100% - 32px); margin: 20px 16px; padding: 14px; background: linear-gradient(135deg, #FFD700, #FFA500); border: none; border-radius: 24px; color: var(--dark); font-size: 16px; font-weight: 700; cursor: pointer; }
        
        /* Message Center */
        .msg-list { background: var(--white); }
        .msg-item { display: flex; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
        .msg-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
        .msg-content { flex: 1; }
        .msg-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
        .msg-text { font-size: 13px; color: var(--gray); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .msg-time { font-size: 11px; color: var(--light-gray); margin-top: 6px; }
        
        /* Settings */
        .settings-group { background: var(--white); margin: 12px 16px; border-radius: 12px; }
        .settings-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
        .settings-item:last-child { border-bottom: none; }
        .settings-icon-wrap { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
        .settings-text { flex: 1; font-size: 15px; }
        .settings-arrow { color: var(--light-gray); }
        .toggle-switch { width: 48px; height: 28px; background: var(--border); border-radius: 14px; position: relative; cursor: pointer; transition: background 0.3s; }
        .toggle-switch.active { background: var(--green); }
        .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: white; border-radius: 50%; transition: left 0.3s; }
        .toggle-switch.active::after { left: 22px; }
        
        /* Toast */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: white; padding: 14px 28px; border-radius: 8px; font-size: 14px; z-index: 1000; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
        .toast.show { opacity: 1; }
        
        /* Back Button */
        .back-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .back-arrow { width: 10px; height: 10px; border-left: 2px solid var(--dark); border-bottom: 2px solid var(--dark); transform: rotate(45deg); }
        
        /* Scrollbar */
        ::-webkit-scrollbar { width: 0; height: 0; }
        
        /* Empty state */
        .empty-state { text-align: center; padding: 60px 20px; }
        .empty-icon { width: 80px; height: 80px; margin: 0 auto 20px; opacity: 0.5; }
        .empty-text { color: var(--gray); font-size: 14px; }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="home" class="page active">
        <div class="header">
            <div class="header-search" onclick="showPage('search')">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                <input type="text" placeholder="搜索商品" readonly>
            </div>
            <div class="header-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            </div>
        </div>
        
        <div class="banner">
            <div class="banner-slider">
                <img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/grocery-sale-retail-or-e-commerce-banner-ad-design-template-67720435bb809be27f46dfb1dd44c6fa_screen.jpg?ts=1606113265" alt="Banner" id="banner-img">
                <div class="banner-dots">
                    <div class="banner-dot active"></div>
                    <div class="banner-dot"></div>
                    <div class="banner-dot"></div>
                </div>
            </div>
        </div>
        
        <div class="quick-links">
            <div class="quick-links-grid">
                <div class="quick-link" onclick="showPage('category')">
                    <div class="quick-link-icon">
                        <img src="https://cdn-icons-png.flaticon.com/512/2642/2642501.png" alt="">
                    </div>
                    <span class="quick-link-text">机顶盒遥控</span>
                </div>
                <div class="quick-link" onclick="showPage('category')">
                    <div class="quick-link-icon">
                        <img src="https://cdn-icons-png.flaticon.com/512/3064/3064155.png" alt="">
                    </div>
                    <span class="quick-link-text">空调遥控</span>
                </div>
                <div class="quick-link" onclick="showPage('category')">
                    <div class="quick-link-icon">
                        <img src="https://images.thdstatic.com/productImages/f2d0b9cb-49c3-4958-a78f-2fbf5fb863a1/svn/mount-it-tv-mounts-mi-305b-64_600.jpg" alt="">
                    </div>
                    <span class="quick-link-text">电视挂架</span>
                </div>
                <div class="quick-link" onclick="showPage('category')">
                    <div class="quick-link-icon">
                        <img src="https://m.media-amazon.com/images/I/71SCNAipTtL.jpg" alt="">
                    </div>
                    <span class="quick-link-text">保护屏</span>
                </div>
                <div class="quick-link" onclick="showPage('category')">
                    <div class="quick-link-icon">
                        <img src="https://m.media-amazon.com/images/I/71DplVF8lAL.jpg" alt="">
                    </div>
                    <span class="quick-link-text">清洗剂</span>
                </div>
                <div class="quick-link">
                    <div class="quick-link-icon" style="background: linear-gradient(135deg, #FF6B35, #FF8C42);">
                        <span style="color: white; font-size: 20px;">速</span>
                    </div>
                    <span class="quick-link-text">顺丰专区</span>
                </div>
                <div class="quick-link" onclick="showPage('category')">
                    <div class="quick-link-icon">
                        <img src="https://m.media-amazon.com/images/I/71yvhIMMbrL._AC_UF1000,1000_QL80_.jpg" alt="">
                    </div>
                    <span class="quick-link-text">源头工厂</span>
                </div>
                <div class="quick-link" onclick="showPage('category')">
                    <div class="quick-link-icon">
                        <img src="https://m.media-amazon.com/images/I/61sDKBkgUBL.jpg" alt="">
                    </div>
                    <span class="quick-link-text">更多分类</span>
                </div>
            </div>
        </div>
        
        <div class="vip-card">
            <div class="vip-card-header">
                <div class="vip-badge">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                    VIP会员
                </div>
                <span style="font-size: 12px; opacity: 0.9;">立即开通</span>
            </div>
            <div class="vip-card-body">
                <div class="vip-feature">全平台通用</div>
                <div class="vip-feature">源头厂家</div>
                <div class="vip-feature">更低价格</div>
            </div>
            <button class="vip-buy-btn" onclick="showPage('vip')">¥9.9 立即开通</button>
        </div>
        
        <div class="section">
            <div class="section-header">
                <span class="section-title">热门推荐</span>
                <span class="section-more">更多 > </span>
            </div>
            <div class="product-grid">
                <div class="product-card" onclick="showPage('detail')">
                    <img src="https://m.media-amazon.com/images/I/61sDKBkgUBL.jpg" alt="">
                    <div class="product-info">
                        <div class="product-name">万能遥控器 兼容小米/海信/创维/长虹/康佳电视</div>
                        <div class="product-price">
                            <span class="price-now">¥29.9</span>
                            <span class="price-origin">¥49.9</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag tag-vip">VIP价¥24.9</span>
                            <span class="tag tag-dist">分销赚¥5</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('detail')">
                    <img src="https://images.thdstatic.com/productImages/f2d0b9cb-49c3-4958-a78f-2fbf5fb863a1/svn/mount-it-tv-mounts-mi-305b-64_600.jpg" alt="">
                    <div class="product-info">
                        <div class="product-name">电视挂架 32-60寸 超薄固定式</div>
                        <div class="product-price">
                            <span class="price-now">¥89</span>
                            <span class="price-origin">¥159</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag tag-vip">VIP价¥79</span>
                            <span class="tag tag-dist">分销赚¥10</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('detail')">
                    <img src="https://m.media-amazon.com/images/I/71SCNAipTtL.jpg" alt="">
                    <div class="product-info">
                        <div class="product-name">屏幕清洁剂套装 电视/手机/平板</div>
                        <div class="product-price">
                            <span class="price-now">¥19.9</span>
                            <span class="price-origin">¥39.9</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag tag-vip">VIP价¥15.9</span>
                            <span class="tag tag-dist">分销赚¥3</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('detail')">
                    <img src="https://m.media-amazon.com/images/I/71yvhIMMbrL._AC_UF1000,1000_QL80_.jpg" alt="">
                    <div class="product-info">
                        <div class="product-name">通用电视壁挂架 旋转伸缩款</div>
                        <div class="product-price">
                            <span class="price-now">¥129</span>
                            <span class="price-origin">¥199</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag tag-vip">VIP价¥109</span>
                            <span class="tag tag-dist">分销赚¥15</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 分类页 -->
    <div id="category" class="page">
        <div class="header">
            <div class="back-btn" onclick="showPage('home')">
                <div class="back-arrow"></div>
            </div>
            <div class="header-title">分类</div>
        </div>
        <div class="category-layout">
            <div class="category-left">
                <div class="category-item active" onclick="selectCategory(this, '机顶盒遥控器')">机顶盒遥控</div>
                <div class="category-item" onclick="selectCategory(this, '空调遥控器')">空调遥控</div>
                <div class="category-item" onclick="selectCategory(this, '电视挂架')">电视挂架</div>
                <div class="category-item" onclick="selectCategory(this, '保护屏')">保护屏</div>
                <div class="category-item" onclick="selectCategory(this, '清洗剂')">清洗剂</div>
                <div class="category-item" onclick="selectCategory(this, '遥控配件')">遥控配件</div>
            </div>
            <div class="category-right">
                <div class="category-title">机顶盒遥控器 - 品牌</div>
                <div class="brand-grid">
                    <div class="brand-item" onclick="showPage('productList')">
                        <img src="https://cdn-icons-png.flaticon.com/512/5968/5968764.png" alt="">
                        <span>万能遥控</span>
                    </div>
                    <div class="brand-item" onclick="showPage('productList')">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Hisense_logo.svg/200px-Hisense_logo.svg.png" alt="">
                        <span>海信</span>
                    </div>
                    <div class="brand-item" onclick="showPage('productList')">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Skyworth.svg/200px-Skyworth.svg.png" alt="">
                        <span>创维</span>
                    </div>
                    <div class="brand-item" onclick="showPage('productList')">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Changhong_logo.svg/200px-Changhong_logo.svg.png" alt="">
                        <span>长虹</span>
                    </div>
                    <div class="brand-item" onclick="showPage('productList')">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Konka_logo.svg/200px-Konka_logo.svg.png" alt="">
                        <span>康佳</span>
                    </div>
                    <div class="brand-item" onclick="showPage('productList')">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Xiaomi_logo_%28square%29.svg/200px-Xiaomi_logo_%28square%29.svg.png" alt="">
                        <span>小米</span>
                    </div>
                    <div class="brand-item" onclick="showPage('productList')">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Haier_logo.svg/200px-Haier_logo.svg.png" alt="">
                        <span>海尔</span>
                    </div>
                    <div class="brand-item" onclick="showPage('productList')">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Philips_NEW_logo.svg/200px-Philips_NEW_logo.svg.png" alt="">
                        <span>飞利浦</span>
                    </div>
                    <div class="brand-item" onclick="showPage('productList')">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Sharp_logo.svg/200px-Sharp_logo.svg.png" alt="">
                        <span>夏普</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 商品列表 -->
    <div id="productList" class="page">
        <div class="header">
            <div class="back-btn" onclick="showPage('category')">
                <div class="back-arrow"></div>
            </div>
            <div class="header-title">万能遥控</div>
        </div>
        <div class="list-header">
            <div class="list-sort active" onclick="sortList(this)">综合</div>
            <div class="list-sort" onclick="sortList(this)">销量</div>
            <div class="list-sort" onclick="sortList(this)">价格</div>
            <div class="list-sort" onclick="sortList(this)">新品</div>
        </div>
        <div class="section" style="margin-top: 12px;">
            <div class="product-grid">
                <div class="product-card" onclick="showPage('detail')">
                    <img src="https://m.media-amazon.com/images/I/61sDKBkgUBL.jpg" alt="">
                    <div class="product-info">
                        <div class="product-name">万能遥控器 兼容小米/海信/创维/长虹/康佳电视</div>
                        <div class="product-price">
                            <span class="price-now">¥29.9</span>
                            <span class="price-origin">¥49.9</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag tag-vip">VIP价¥24.9</span>
                            <span class="tag tag-dist">分销赚¥5</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('detail')">
                    <img src="https://m.media-amazon.com/images/I/611BUia7+gL._AC_UF894,1000_QL80_.jpg" alt="">
                    <div class="product-info">
                        <div class="product-name">EONCHARM三星专用遥控器 LED/LCD电视</div>
                        <div class="product-price">
                            <span class="price-now">¥39.9</span>
                            <span class="price-origin">¥59.9</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag tag-vip">VIP价¥34.9</span>
                            <span class="tag tag-dist">分销赚¥6</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('detail')">
                    <img src="https://m.media-amazon.com/images/I/51S89CrngpL.jpg" alt="">
                    <div class="product-info">
                        <div class="product-name">SwitchBot智能遥控 支持25种设备</div>
                        <div class="product-price">
                            <span class="price-now">¥149</span>
                            <span class="price-origin">¥199</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag tag-vip">VIP价¥139</span>
                            <span class="tag tag-dist">分销赚¥20</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('detail')">
                    <img src="https://m.media-amazon.com/images/I/41NDmrtfsdL.jpg" alt="">
                    <div class="product-info">
                        <div class="product-name">重型万能遥控器套装</div>
                        <div class="product-price">
                            <span class="price-now">¥19.9</span>
                            <span class="price-origin">¥35</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag tag-vip">VIP价¥16.9</span>
                            <span class="tag tag-dist">分销赚¥3</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 商品详情 -->
    <div id="detail" class="page">
        <div class="detail-header">
            <div class="header">
                <div class="back-btn" onclick="showPage('productList')">
                    <div class="back-arrow"></div>
                </div>
                <div class="header-title">商品详情</div>
                <div class="header-icon"></div>
            </div>
        </div>
        <div class="detail-images">
            <img src="https://m.media-amazon.com/images/I/61sDKBkgUBL.jpg" alt="">
            <div class="detail-back" onclick="showPage('productList')">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="white"><path d="M15 18l-6-6 6-6"/></svg>
            </div>
            <div class="detail-share">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/></svg>
            </div>
        </div>
        <div class="detail-content">
            <div class="detail-price-box">
                <span class="detail-price">¥29.9</span>
                <span class="detail-price-original">¥49.9</span>
            </div>
            <div class="detail-title">万能遥控器 兼容小米/海信/创维/长虹/康佳/飞利浦/夏普/三星等品牌电视</div>
            <div class="detail-desc">支持一键配对，操作简单，反应灵敏。适用于多种品牌电视，机顶盒，空调等红外设备。</div>
            <div class="detail-tags">
                <span class="tag tag-vip">VIP会员价 ¥24.9</span>
                <span class="tag tag-dist">分享赚 ¥5.00</span>
            </div>
        </div>
        <div class="detail-specs">
            <div class="spec-item">
                <span class="spec-label">商品编号</span>
                <span class="spec-value">JD2024001</span>
            </div>
            <div class="spec-item">
                <span class="spec-label">品牌</span>
                <span class="spec-value">万能遥控</span>
            </div>
            <div class="spec-item">
                <span class="spec-label">规格</span>
                <span class="spec-value">标准版 / 增强版</span>
            </div>
            <div class="spec-item">
                <span class="spec-label">库存</span>
                <span class="spec-value">986件</span>
            </div>
            <div class="spec-item">
                <span class="spec-label">销量</span>
                <span class="spec-value">2586件</span>
            </div>
        </div>
        <div style="height: 80px;"></div>
        <div class="detail-bottom">
            <div class="detail-action">
                <button class="detail-btn detail-btn-cart" onclick="addToCart()">加入购物车</button>
                <button class="detail-btn detail-btn-buy" onclick="buyNow()">立即购买</button>
            </div>
        </div>
    </div>
    
    <!-- 购物车 -->
    <div id="cart" class="page">
        <div class="header">
            <div class="header-title">购物车</div>
            <span class="cart-edit" onclick="toggleEdit()">编辑</span>
        </div>
        <div class="cart-item">
            <div class="cart-check checked" onclick="toggleCheck(this)"></div>
            <div class="cart-product">
                <img src="https://m.media-amazon.com/images/I/61sDKBkgUBL.jpg" alt="">
                <div class="cart-product-info">
                    <div class="cart-product-name">万能遥控器 兼容多品牌电视</div>
                    <div class="cart-product-spec">标准版</div>
                    <div class="cart-product-bottom">
                        <span class="cart-price">¥29.9</span>
                        <div class="cart-qty">
                            <span class="qty-btn" onclick="changeQty(-1)">-</span>
                            <span class="qty-num">1</span>
                            <span class="qty-btn" onclick="changeQty(1)">+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-item">
            <div class="cart-check" onclick="toggleCheck(this)"></div>
            <div class="cart-product">
                <img src="https://images.thdstatic.com/productImages/f2d0b9cb-49c3-4958-a78f-2fbf5fb863a1/svn/mount-it-tv-mounts-mi-305b-64_600.jpg" alt="">
                <div class="cart-product-info">
                    <div class="cart-product-name">电视挂架 超薄固定式 32-60寸</div>
                    <div class="cart-product-spec">标准版</div>
                    <div class="cart-product-bottom">
                        <span class="cart-price">¥89</span>
                        <div class="cart-qty">
                            <span class="qty-btn" onclick="changeQty(-1)">-</span>
                            <span class="qty-num">1</span>
                            <span class="qty-btn" onclick="changeQty(1)">+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 120px;"></div>
        <div class="cart-bottom-bar">
            <div class="cart-check checked" onclick="toggleCheck(this)" style="margin-right: 8px;"></div>
            <div class="cart-total">
                <span>合计:</span>
                <span class="cart-total-price">¥118.9</span>
            </div>
            <button class="cart-settle" onclick="showPage('order')">结算 (1)</button>
        </div>
    </div>
    
    <!-- 订单确认 -->
    <div id="order" class="page">
        <div class="header">
            <div class="back-btn" onclick="showPage('cart')">
                <div class="back-arrow"></div>
            </div>
            <div class="header-title">确认订单</div>
        </div>
        <div class="order-address" onclick="showToast('地址管理')">
            <div class="address-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
            </div>
            <div class="address-info">
                <div class="address-name">张三  138****8888</div>
                <div class="address-detail">广东省深圳市南山区科技园xxx路xxx号</div>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="#999"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
        </div>
        <div class="order-product">
            <div class="order-shop">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#666"><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2H4v2h2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8h2V6h-4z"/></svg>
                源头工厂直营店
            </div>
            <div class="order-item">
                <img src="https://m.media-amazon.com/images/I/61sDKBkgUBL.jpg" alt="">
                <div class="order-item-info">
                    <div class="order-item-name">万能遥控器 兼容多品牌电视</div>
                    <div class="order-item-bottom">
                        <span class="order-item-price">¥29.9</span>
                        <span class="order-item-qty">x1</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-product">
            <div class="order-shop">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="#666"><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2H4v2h2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8h2V6h-4z"/></svg>
                源头工厂直营店
            </div>
            <div class="order-item">
                <img src="https://images.thdstatic.com/productImages/f2d0b9cb-49c3-4958-a78f-2fbf5fb863a1/svn/mount-it-tv-mounts-mi-305b-64_600.jpg" alt="">
                <div class="order-item-info">
                    <div class="order-item-name">电视挂架 超薄固定式</div>
                    <div class="order-item-bottom">
                        <span class="order-item-price">¥89</span>
                        <span class="order-item-qty">x1</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 120px;"></div>
        <div class="order-bottom-bar">
            <span class="order-total">合计: <span>¥118.9</span></span>
            <button class="order-submit" onclick="submitOrder()">提交订单</button>
        </div>
    </div>
    
    <!-- 用户中心 -->
    <div id="user" class="page">
        <div class="user-header">
            <div class="user-profile" onclick="showPage('settings')">
                <div class="user-avatar">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                </div>
                <div>
                    <div class="user-name">家电达人</div>
                    <div class="user-level">VIP会员</div>
                </div>
            </div>
            <div class="user-stats">
                <div class="user-stat">
                    <div class="user-stat-num">128</div>
                    <div class="user-stat-label">全部订单</div>
                </div>
                <div class="user-stat">
                    <div class="user-stat-num">86</div>
                    <div class="user-stat-label">我的收藏</div>
                </div>
                <div class="user-stat">
                    <div class="user-stat-num">256</div>
                    <div class="user-stat-label">我的足迹</div>
                </div>
            </div>
        </div>
        <div class="user-card">
            <div class="user-order-tabs">
                <div class="order-tab" onclick="showPage('order')">
                    <svg class="order-tab-icon" viewBox="0 0 24 24" fill="#FF9800"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
                    <div class="order-tab-text">待付款</div>
                    <div class="order-tab-badge">2</div>
                </div>
                <div class="order-tab">
                    <svg class="order-tab-icon" viewBox="0 0 24 24" fill="#4CAF50"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></svg>
                    <div class="order-tab-text">待发货</div>
                </div>
                <div class="order-tab">
                    <svg class="order-tab-icon" viewBox="0 0 24 24" fill="#2196F3"><path d="M18 18.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5zm1.5-9H17V12h3c0-1.65-1.35-3-3-3h-3V6.5h-1.5V9H11c-2.76 0-5 2.24-5 5s2.24 5 5 5h3c1.65 0 3-1.35 3-3h1.5c0 2.76-2.24 5-5 5h-3c-3.87 0-7-3.13-7-7s3.13-7 7-7h3c2.76 0 5 2.24 5 5v2.5z"/></svg>
                    <div class="order-tab-text">待收货</div>
                    <div class="order-tab-badge">1</div>
                </div>
                <div class="order-tab">
                    <svg class="order-tab-icon" viewBox="0 0 24 24" fill="#9C27B0"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"/></svg>
                    <div class="order-tab-text">已完成</div>
                </div>
                <div class="order-tab">
                    <svg class="order-tab-icon" viewBox="0 0 24 24" fill="#F44336"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
                    <div class="order-tab-text">退款/售后</div>
                </div>
            </div>
            <div class="user-assets">
                <div class="asset-item">
                    <div class="asset-num">¥1,286.00</div>
                    <div class="asset-label">账户余额</div>
                </div>
                <div class="asset-item">
                    <div class="asset-num">28</div>
                    <div class="asset-label">优惠券</div>
                </div>
                <div class="asset-item">
                    <div class="asset-num">1,560</div>
                    <div class="asset-label">积分</div>
                </div>
            </div>
        </div>
        <div class="user-menu">
            <div class="menu-item" onclick="showPage('dist')">
                <div class="menu-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#4CAF50"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
                </div>
                <span class="menu-text">分销中心</span>
                <span class="menu-arrow">></span>
            </div>
            <div class="menu-item" onclick="showPage('vip')">
                <div class="menu-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#FF9800"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                </div>
                <span class="menu-text">会员中心</span>
                <span class="menu-arrow">></span>
            </div>
            <div class="menu-item" onclick="showPage('message')">
                <div class="menu-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#2196F3"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
                </div>
                <span class="menu-text">消息中心</span>
                <span class="menu-arrow">></span>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#9C27B0"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>
                </div>
                <span class="menu-text">发票管理</span>
                <span class="menu-arrow">></span>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#607D8B"><path d="M20 7h-4V5c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM10 5h4v2h-4V5z"/></svg>
                </div>
                <span class="menu-text">收货地址</span>
                <span class="menu-arrow">></span>
            </div>
            <div class="menu-item" onclick="showPage('settings')">
                <div class="menu-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#795548"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.6-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.6 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
                </div>
                <span class="menu-text">设置</span>
                <span class="menu-arrow">></span>
            </div>
        </div>
    </div>
    
    <!-- 分销中心 -->
    <div id="dist" class="page">
        <div class="header">
            <div class="back-btn" onclick="showPage('user')">
                <div class="back-arrow"></div>
            </div>
            <div class="header-title">分销中心</div>
        </div>
        <div class="dist-header">
            <div class="dist-balance">可提现佣金</div>
            <div class="dist-amount">¥3,286.50</div>
            <button class="dist-withdraw" onclick="showToast('提现申请已提交')">立即提现</button>
        </div>
        <div class="dist-cards">
            <div class="dist-card">
                <div class="dist-card-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#4CAF50"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                </div>
                <div class="dist-card-title">分销订单</div>
                <div class="dist-card-value">58</div>
            </div>
            <div class="dist-card">
                <div class="dist-card-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#FF9800"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                </div>
                <div class="dist-card-title">我的团队</div>
                <div class="dist-card-value">128人</div>
            </div>
            <div class="dist-card">
                <div class="dist-card-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#2196F3"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.671.5-1.5 1.5z"/></svg>
                </div>
                <div class="dist-card-title">累计佣金</div>
                <div class="dist-card-value">¥8,562.00</div>
            </div>
            <div class="dist-card">
                <div class="dist-card-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#9C27B0"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>
                </div>
                <div class="dist-card-title">待结算</div>
                <div class="dist-card-value">¥1,286.00</div>
            </div>
        </div>
        <div class="section" style="margin: 16px; border-radius: 12px;">
            <div class="section-header">
                <span class="section-title">分销海报</span>
            </div>
            <div style="padding: 16px 0; text-align: center;">
                <div style="width: 180px; height: 260px; background: linear-gradient(135deg, #FF6B35, #FF8C42); margin: 0 auto; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white;">
                    <div style="width: 80px; height: 80px; background: rgba(255,255,255,0.3); border-radius: 50%; margin-bottom: 20px; display: flex; align-items: center; justify-content: center;">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                    </div>
                    <div style="font-size: 16px; margin-bottom: 8px;">扫码加入</div>
                    <div style="font-size: 12px; opacity: 0.8;">家电人云·分销合伙人</div>
                </div>
                <button style="margin-top: 16px; padding: 10px 24px; background: var(--primary); color: white; border: none; border-radius: 20px; cursor: pointer;" onclick="showToast('海报已保存')">保存海报</button>
            </div>
        </div>
    </div>
    
    <!-- VIP会员 -->
    <div id="vip" class="page">
        <div class="header">
            <div class="back-btn" onclick="showPage('user')">
                <div class="back-arrow"></div>
            </div>
            <div class="header-title">VIP会员</div>
        </div>
        <div class="vip-page-header">
            <div class="vip-price"><span>¥</span>9.9</div>
            <div class="vip-desc">开通即享全平台VIP权益</div>
        </div>
        <div class="vip-benefits">
            <div class="section-title" style="margin-bottom: 12px;">会员专属权益</div>
            <div class="benefit-item">
                <div class="benefit-icon" style="background: #FFF3E0;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#FF9800"><path d="M7.5 4C5.57 4 4 5.57 4 7.5S5.57 11 7.5 11 11 9.43 11 7.5 9.43 4 7.5 4zm0 5C6.67 9 6 8.33 6 7.5S6.67 6 7.5 6 9 6.67 9 7.5 8.33 9 7.5 9zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7.5 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7.5 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
                </div>
                <div class="benefit-text">
                    <div class="benefit-title">更低会员价</div>
                    <div class="benefit-desc">全场商品享受更低会员价格</div>
                </div>
            </div>
            <div class="benefit-item">
                <div class="benefit-icon" style="background: #E3F2FD;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#2196F3"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
                </div>
                <div class="benefit-text">
                    <div class="benefit-title">专属客服</div>
                    <div class="benefit-desc">VIP用户专属客服通道</div>
                </div>
            </div>
            <div class="benefit-item">
                <div class="benefit-icon" style="background: #E8F5E9;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#4CAF50"><path d="M13.5 0L12 1.5 15.38 5 12 8.5 13.5 10 18.5 5zM0 13.5L10 23.5 11.5 22 1.5 12z"/></svg>
                </div>
                <div class="benefit-text">
                    <div class="benefit-title">优先发货</div>
                    <div class="benefit-desc">VIP订单优先处理发货</div>
                </div>
            </div>
            <div class="benefit-item">
                <div class="benefit-icon" style="background: #F3E5F5;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#9C27B0"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z"/></svg>
                </div>
                <div class="benefit-text">
                    <div class="benefit-title">专属优惠券</div>
                    <div class="benefit-desc">每月领取专属VIP优惠券</div>
                </div>
            </div>
            <div class="benefit-item">
                <div class="benefit-icon" style="background: #FFEBEE;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#F44336"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                </div>
                <div class="benefit-text">
                    <div class="benefit-title">全平台通用</div>
                    <div class="benefit-desc">分销会员卡全平台源头厂家通用</div>
                </div>
            </div>
        </div>
        <button class="vip-buy-btn-full" onclick="showToast('VIP购买成功')">立即开通VIP会员</button>
    </div>
    
    <!-- 消息中心 -->
    <div id="message" class="page">
        <div class="header">
            <div class="back-btn" onclick="showPage('user')">
                <div class="back-arrow"></div>
            </div>
            <div class="header-title">消息中心</div>
        </div>
        <div class="msg-list">
            <div class="msg-item">
                <div class="msg-icon" style="background: #E3F2FD;">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="#2196F3"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
                </div>
                <div class="msg-content">
                    <div class="msg-title">订单已发货</div>
                    <div class="msg-text">您的订单 #JD20240518001 已发货，物流公司：顺丰速运，运单号：SF1234567890</div>
                    <div class="msg-time">10分钟前</div>
                </div>
            </div>
            <div class="msg-item">
                <div class="msg-icon" style="background: #FFF3E0;">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="#FF9800"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z"/></svg>
                </div>
                <div class="msg-content">
                    <div class="msg-title">优惠券到账</div>
                    <div class="msg-text">您获得了一张10元新人优惠券，有效期至2024年6月30日</div>
                    <div class="msg-time">1小时前</div>
                </div>
            </div>
            <div class="msg-item">
                <div class="msg-icon" style="background: #F3E5F5;">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="#9C27B0"><path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z"/></svg>
                </div>
                <div class="msg-content">
                    <div class="msg-title">会员特惠</div>
                    <div class="msg-text">VIP会员专属活动开启，全场商品再享9折优惠，限时3天！</div>
                    <div class="msg-time">昨天</div>
                </div>
            </div>
            <div class="msg-item">
                <div class="msg-icon" style="background: #E8F5E9;">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="#4CAF50"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
                </div>
                <div class="msg-content">
                    <div class="msg-title">佣金到账通知</div>
                    <div class="msg-text">您的分销订单 #FX20240517005 佣金已到账，金额：¥28.50</div>
                    <div class="msg-time">昨天</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 设置 -->
    <div id="settings" class="page">
        <div class="header">
            <div class="back-btn" onclick="showPage('user')">
                <div class="back-arrow"></div>
            </div>
            <div class="header-title">设置</div>
        </div>
        <div class="settings-group">
            <div class="settings-item">
                <div class="settings-icon-wrap" style="background: #E3F2FD;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#2196F3"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"/></svg>
                </div>
                <span class="settings-text">个人资料</span>
                <span class="settings-arrow">></span>
            </div>
            <div class="settings-item">
                <div class="settings-icon-wrap" style="background: #E8F5E9;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#4CAF50"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
                </div>
                <span class="settings-text">修改密码</span>
                <span class="settings-arrow">></span>
            </div>
            <div class="settings-item">
                <div class="settings-icon-wrap" style="background: #FFF3E0;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#FF9800"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.27.36-.66.25-1.02C7.11 5.55 6.9 4.36 6.9 3c0-2.8 2.2-5 5-5s5 2.2 5 5H18c0 2.21-.39 4.3-1.1 6.25l.55.55c.32.32.46.75.4 1.2z"/></svg>
                </div>
                <span class="settings-text">手机绑定</span>
                <span class="settings-arrow">138****8888 ></span>
            </div>
        </div>
        <div class="settings-group">
            <div class="settings-item">
                <div class="settings-icon-wrap" style="background: #E3F2FD;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#2196F3"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.93 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
                </div>
                <span class="settings-text">消息通知</span>
                <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
            </div>
            <div class="settings-item">
                <div class="settings-icon-wrap" style="background: #F3E5F5;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#9C27B0"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
                </div>
                <span class="settings-text">隐私设置</span>
                <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
            </div>
            <div class="settings-item">
                <div class="settings-icon-wrap" style="background: #FFEBEE;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#F44336"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
                </div>
                <span class="settings-text">清除缓存</span>
                <span class="settings-arrow" style="color: #999;">12.5MB ></span>
            </div>
        </div>
        <div class="settings-group">
            <div class="settings-item">
                <div class="settings-icon-wrap" style="background: #E0E0E0;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#666"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
                </div>
                <span class="settings-text">关于家电人云</span>
                <span class="settings-arrow">V1.0.0 ></span>
            </div>
        </div>
        <div style="padding: 30px 16px; text-align: center;">
            <button style="width: 100%; padding: 14px; background: none; border: 1px solid #E5E5E5; border-radius: 8px; color: #666; font-size: 15px; cursor: pointer;" onclick="showToast('已退出登录')">退出登录</button>
        </div>
    </div>
    
    <!-- 搜索页 -->
    <div id="search" class="page">
        <div class="header">
            <div class="back-btn" onclick="showPage('home')">
                <div class="back-arrow"></div>
            </div>
            <div class="header-search" style="background: #f0f0f0;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
                <input type="text" placeholder="搜索商品" autofocus style="outline: none;">
            </div>
        </div>
        <div class="section">
            <div class="section-header">
                <span class="section-title">搜索历史</span>
                <span class="section-more" style="cursor: pointer;">清除</span>
            </div>
            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                <span style="padding: 8px 16px; background: #f0f0f0; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer;">万能遥控</span>
                <span style="padding: 8px 16px; background: #f0f0f0; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer;">电视挂架</span>
                <span style="padding: 8px 16px; background: #f0f0f0; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer;">海信遥控器</span>
                <span style="padding: 8px 16px; background: #f0f0f0; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer;">清洗剂</span>
            </div>
        </div>
        <div class="section">
            <div class="section-header">
                <span class="section-title">热门搜索</span>
            </div>
            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                <span style="padding: 8px 16px; background: #FFF3E0; border-radius: 20px; font-size: 13px; color: #FF9800; cursor: pointer;">🔥 万能遥控</span>
                <span style="padding: 8px 16px; background: #FFF3E0; border-radius: 20px; font-size: 13px; color: #FF9800; cursor: pointer;">🔥 电视挂架</span>
                <span style="padding: 8px 16px; background: #f0f0f0; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer;">空调遥控</span>
                <span style="padding: 8px 16px; background: #f0f0f0; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer;">机顶盒遥控</span>
                <span style="padding: 8px 16px; background: #f0f0f0; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer;">屏幕保护</span>
                <span style="padding: 8px 16px; background: #f0f0f0; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer;">清洗剂</span>
            </div>
        </div>
    </div>
    
    <!-- Tab Bar -->
    <div class="tab-bar">
        <div class="tab-item active" onclick="switchTab('home', this)">
            <div class="tab-icon">
                <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
            </div>
            <span class="tab-text">首页</span>
        </div>
        <div class="tab-item" onclick="switchTab('category', this)">
            <div class="tab-icon">
                <svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
            </div>
            <span class="tab-text">分类</span>
        </div>
        <div class="tab-item" onclick="switchTab('cart', this)">
            <div class="tab-icon">
                <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
            </div>
            <span class="tab-text">购物车</span>
        </div>
        <div class="tab-item" onclick="switchTab('user', this)">
            <div class="tab-icon">
                <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
            </div>
            <span class="tab-text">我的</span>
        </div>
    </div>
    
    <!-- Toast -->
    <div class="toast" id="toast"></div>
    
    <script>
        let currentPage = 'home';
        
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
            currentPage = pageId;
            
            // Update tab bar
            const tabMap = { 'home': 0, 'category': 1, 'cart': 2, 'user': 3 };
            document.querySelectorAll('.tab-item').forEach((t, i) => {
                t.classList.toggle('active', tabMap[pageId] === i);
            });
        }
        
        function switchTab(pageId, tab) {
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            showPage(pageId);
        }
        
        function selectCategory(el, name) {
            document.querySelectorAll('.category-item').forEach(c => c.classList.remove('active'));
            el.classList.add('active');
            document.querySelector('.category-title').textContent = name + ' - 品牌';
        }
        
        function sortList(el) {
            document.querySelectorAll('.list-sort').forEach(s => s.classList.remove('active'));
            el.classList.add('active');
        }
        
        function toggleCheck(el) {
            el.classList.toggle('checked');
        }
        
        function toggleEdit() {
            showToast('已切换编辑模式');
        }
        
        function changeQty(delta) {
            const qtyEl = event.target.parentElement.querySelector('.qty-num');
            let qty = parseInt(qtyEl.textContent) + delta;
            if (qty < 1) qty = 1;
            qtyEl.textContent = qty;
        }
        
        function addToCart() {
            showToast('已加入购物车');
        }
        
        function buyNow() {
            showToast('正在跳转订单页...');
            setTimeout(() => showPage('order'), 800);
        }
        
        function submitOrder() {
            showToast('订单提交成功');
            setTimeout(() => showPage('home'), 1500);
        }
        
        function toggleSwitch(el) {
            el.classList.toggle('active');
        }
        
        function showToast(msg) {
            const toast = document.getElementById('toast');
            toast.textContent = msg;
            toast.classList.add('show');
            setTimeout(() => toast.classList.remove('show'), 2000);
        }
        
        // Banner auto-slide
        const banners = [
            'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/grocery-sale-retail-or-e-commerce-banner-ad-design-template-67720435bb809be27f46dfb1dd44c6fa_screen.jpg?ts=1606113265',
            'https://img.freepik.com/free-psd/horizontal-banner-online-fashion-sale_23-2148585404.jpg?semt=ais_hybrid&w=740&q=80',
            'https://img.freepik.com/free-vector/flat-horizontal-banner-template-black-friday-sale_23-2150852978'
        ];
        let bannerIndex = 0;
        function slideBanner() {
            bannerIndex = (bannerIndex + 1) % banners.length;
            document.getElementById('banner-img').src = banners[bannerIndex];
            document.querySelectorAll('.banner-dot').forEach((d, i) => {
                d.classList.toggle('active', i === bannerIndex);
            });
        }
        setInterval(slideBanner, 3000);
    </script>
</body>
</html>