编辑页面

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; }
        html, body { 
            height: 100%; 
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
            background: #f5f5f5; 
        }
        
        /* 手机模拟器容器 */
        .phone-frame {
            width: 100%;
            max-width: 375px;
            height: 100vh;
            height: 100dvh;
            margin: 0 auto;
            background: #fff;
            overflow: hidden;
            position: relative;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
        }
        
        /* 页面容器 */
        .page { display: none; width: 100%; height: 100%; flex-direction: column; overflow: hidden; }
        .page.active { display: flex; }
        
        /* 状态栏 */
        .status-bar {
            height: 44px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            font-size: 14px;
            font-weight: 500;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            flex-shrink: 0;
        }
        .status-bar .time { font-weight: 600; }
        .status-bar .icons { display: flex; gap: 4px; }
        
        /* 页面头部 */
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            padding: 12px 16px;
            position: relative;
            flex-shrink: 0;
        }
        .header.with-back {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .back-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
        }
        .back-btn svg { width: 18px; height: 18px; fill: #fff; }
        .header-title {
            font-size: 18px;
            font-weight: 600;
            flex: 1;
            text-align: center;
            margin-right: 44px;
        }
        
        /* 搜索栏 */
        .search-bar {
            background: #fff;
            padding: 12px 16px;
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }
        .search-input {
            flex: 1;
            height: 36px;
            background: #f5f5f5;
            border-radius: 18px;
            padding: 0 16px;
            font-size: 14px;
            border: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-input span { color: #999; }
        .msg-icon {
            width: 36px;
            height: 36px;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 内容区域 */
        .content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 60px;
            -webkit-overflow-scrolling: touch;
        }
        
        /* 首页Banner */
        .banner {
            height: 140px;
            margin: 12px 16px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
        }
        
        /* 分类导航 */
        .category-nav {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            padding: 16px;
            gap: 12px;
        }
        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .category-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 20px;
        }
        .category-item span { font-size: 12px; color: #333; }
        
        /* 活动入口 */
        .activity-section {
            padding: 0 16px;
        }
        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin: 16px 0 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .section-title .more { font-size: 12px; color: #999; }
        .activity-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .activity-card {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            border-radius: 12px;
            padding: 14px;
            color: #fff;
        }
        .activity-card:nth-child(2) {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        .activity-card h4 { font-size: 14px; margin-bottom: 4px; }
        .activity-card p { font-size: 11px; opacity: 0.9; }
        
        /* 商品列表 */
        .product-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 0 16px;
        }
        .product-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .product-img {
            height: 160px;
            background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            font-size: 40px;
        }
        .product-info { padding: 10px; }
        .product-name { font-size: 14px; color: #333; margin-bottom: 6px; line-height: 1.4; }
        .product-price { color: #ff6b6b; font-size: 16px; font-weight: 600; }
        .product-price span { font-size: 12px; }
        .product-sales { font-size: 11px; color: #999; margin-top: 4px; }
        
        /* 商品详情页 */
        .detail-img {
            height: 300px;
            background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            font-size: 60px;
        }
        .detail-info {
            padding: 16px;
        }
        .detail-price {
            color: #ff6b6b;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .detail-price span { font-size: 14px; }
        .detail-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 12px; }
        .detail-desc { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 16px; padding: 12px; background: #f9f9f9; border-radius: 8px; }
        .detail-specs {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .spec-tag {
            padding: 6px 12px;
            background: #f0f0f0;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            border: 1px solid #ddd;
        }
        .spec-tag.active {
            background: #667eea;
            color: #fff;
            border-color: #667eea;
        }
        
        /* 底部标签栏 */
        .tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: #fff;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 50;
            flex-shrink: 0;
        }
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            color: #999;
            transition: color 0.3s;
        }
        .tab-item.active { color: #667eea; }
        .tab-item .icon { font-size: 22px; }
        .tab-item span { font-size: 10px; }
        
        /* ========== 分类页左侧树状导航 ========== */
        .category-page {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        .category-left {
            width: 80px;
            background: #f5f5f5;
            overflow-y: auto;
            flex-shrink: 0;
        }
        .category-left::-webkit-scrollbar { display: none; }
        .category-left-item {
            padding: 14px 8px;
            text-align: center;
            font-size: 13px;
            color: #666;
            border-left: 3px solid transparent;
            cursor: pointer;
            transition: all 0.3s;
        }
        .category-left-item.active {
            background: #fff;
            color: #667eea;
            font-weight: 600;
            border-left-color:#667eea;
        }
        .category-right {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
            background: #fff;
        }
        .category-right::-webkit-scrollbar { display: none; }
        .category-banner {
            height: 80px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            border-radius: 8px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
        }
        .sub-category-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
            padding-left: 4px;
        }
        
        /* 购物车页 */
        .cart-item {
            display: flex;
            padding: 12px 16px;
            gap: 12px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
        }
        .cart-check {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            align-self: center;
        }
        .cart-check.checked { background: #667eea; border-color: #667eea; }
        .cart-check.checked::after { content: '✓'; color: #fff; font-size: 12px; }
        .cart-img {
            width: 80px;
            height: 80px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            font-size: 30px;
            flex-shrink: 0;
        }
        .cart-detail { flex: 1; min-width: 0; }
        .cart-name { font-size: 14px; color: #333; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cart-spec { font-size: 12px; color: #999; margin-bottom: 8px; }
        .cart-bottom { display: flex; justify-content: space-between; align-items: center; }
        .cart-price { color: #ff6b6b; font-size: 14px; font-weight: 600; }
        .cart-num { display: flex; align-items: center; gap: 8px; }
        .cart-num button { width: 24px; height: 24px; border: 1px solid #ddd; background: #fff; border-radius: 4px; cursor: pointer; }
        .cart-num span { min-width: 20px; text-align: center; }
        
        /* 结算栏 */
        .cart-footer {
            position: absolute;
            bottom: 60px;
            left: 0;
            right: 0;
            height: 56px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 40;
        }
        .cart-total { display: flex; align-items: center; gap: 4px; }
        .cart-total .label { font-size: 12px; color: #999; }
        .cart-total .price { color: #ff6b6b; font-size: 18px; font-weight: 600; }
        .cart-settle {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            padding: 10px 24px;
            border-radius: 20px;
            cursor: pointer;
        }
        
        /* 订单页 */
        .order-tabs {
            display: flex;
            background: #fff;
            padding: 12px 0;
            flex-shrink: 0;
        }
        .order-tab {
            flex: 1;
            text-align: center;
            font-size: 14px;
            color: #666;
            padding: 8px 0;
            cursor: pointer;
            position: relative;
        }
        .order-tab.active { color: #667eea; font-weight: 600; }
        .order-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background: #667eea;
            border-radius: 2px;
        }
        .order-list { padding: 12px 16px; }
        .order-card {
            background: #fff;
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 12px;
        }
        .order-card-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .order-id { font-size: 12px; color: #999; }
        .order-status { font-size: 13px; color: #667eea; font-weight: 500; }
        .order-goods {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        .order-goods-img {
            width: 60px;
            height: 60px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            font-size: 24px;
            flex-shrink: 0;
        }
        .order-goods-info { flex: 1; min-width: 0; }
        .order-goods-name { font-size: 14px; color: #333; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .order-goods-spec { font-size: 12px; color: #999; }
        .order-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
        }
        .order-total { font-size: 13px; color: #666; }
        .order-total span { color: #ff6b6b; font-weight: 600; }
        .order-actions { display: flex; gap: 8px; }
        .order-btn {
            padding: 6px 14px;
            border-radius: 16px;
            font-size: 12px;
            cursor: pointer;
        }
        .order-btn.primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        .order-btn.secondary {
            border: 1px solid #ddd;
            color: #666;
        }
        
        /* 会员中心 */
        .user-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px 16px;
            color: #fff;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .user-avatar {
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        .user-detail h3 { font-size: 18px; margin-bottom: 4px; }
        .user-detail p { font-size: 12px; opacity: 0.8; }
        .user-stats {
            display: flex;
            justify-content: space-around;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }
        .user-stat { text-align: center; cursor: pointer; }
        .user-stat .num { font-size: 18px; font-weight: 600; }
        .user-stat .label { font-size: 11px; opacity: 0.8; margin-top: 2px; }
        
        .menu-section {
            background: #fff;
            margin-top: 12px;
        }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .menu-item:last-child { border-bottom: none; }
        .menu-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        .menu-item span { flex: 1; font-size: 14px; color: #333; }
        .menu-arrow { color: #ccc; font-size: 14px; }
        
        /* 分销中心 */
        .distrib-header {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            padding: 20px 16px;
            color: #fff;
        }
        .distrib-balance {
            text-align: center;
            margin-bottom: 16px;
        }
        .distrib-balance .label { font-size: 12px; opacity: 0.8; }
        .distrib-balance .amount { font-size: 32px; font-weight: 700; }
        .distrib-balance .amount span { font-size: 16px; }
        .distrib-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        .distrib-action {
            background: rgba(255,255,255,0.2);
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
        }
        .distrib-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background: #fff;
            margin: 12px 16px;
            border-radius: 12px;
            padding: 16px;
        }
        .distrib-stat { text-align: center; }
        .distrib-stat .num { font-size: 18px; font-weight: 600; color: #333; }
        .distrib-stat .label { font-size: 11px; color: #999; margin-top: 4px; }
        
        /* 健康资讯 */
        .news-list { padding: 12px 16px; }
        .news-item {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .news-item:last-child { border-bottom: none; }
        .news-img {
            width: 100px;
            height: 75px;
            background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ccc;
            font-size: 24px;
            flex-shrink: 0;
        }
        .news-info { flex: 1; min-width: 0; }
        .news-title { font-size: 14px; color: #333; margin-bottom: 8px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .news-meta { font-size: 11px; color: #999; }
        
        /* 文章详情 */
        .article-content { padding: 16px; }
        .article-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 12px; line-height: 1.5; }
        .article-meta { font-size: 12px; color: #999; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
        .article-body { font-size: 14px; color: #666; line-height: 1.8; }
        .article-body p { margin-bottom: 12px; }
        
        /* 模态框 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: flex-end;
            z-index: 100;
        }
        .modal.show { display: flex; }
        .modal-content {
            background: #fff;
            width: 100%;
            border-radius: 16px 16px 0 0;
            padding: 20px;
            max-height: 70%;
            overflow-y: auto;
        }
        .modal-title {
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 16px;
        }
        .modal-close {
            position: absolute;
            top: 10px;
            right: 16px;
            font-size: 20px;
            color: #999;
            cursor: pointer;
        }
        
        /* 地址管理 */
        .address-item {
            background: #fff;
            padding: 14px 16px;
            border-radius: 12px;
            margin-bottom: 12px;
        }
        .address-user { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
        .address-user span { margin-left: 12px; color: #667eea; }
        .address-detail { font-size: 13px; color: #666; margin-bottom: 10px; }
        .address-default {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .address-tag {
            background: #667eea;
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }
        .empty-state .icon { font-size: 60px; color: #ddd; margin-bottom: 16px; }
        .empty-state p { font-size: 14px; color: #999; }
        
        /* 搜索历史 */
        .search-history { padding: 0 16px; }
        .search-history-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .search-history-title span:first-child { font-size: 14px; font-weight: 600; }
        .search-history-title span:last-child { font-size: 12px; color: #667eea; }
        .search-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .search-tag {
            padding: 6px 12px;
            background: #f5f5f5;
            border-radius: 16px;
            font-size: 12px;
            color: #666;
            cursor: pointer;
        }
        
        /* 优惠券 */
        .coupon-list { padding: 0 16px; }
        .coupon-item {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            color: #fff;
            display: flex;
        }
        .coupon-left {
            width: 100px;
            border-right: 1px dashed rgba(255,255,255,0.5);
            margin-right: 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }
        .coupon-value { font-size: 28px; font-weight: 700; }
        .coupon-value span { font-size: 14px; }
        .coupon-limit { font-size: 11px; opacity: 0.8; margin-top: 4px; }
        .coupon-right { flex: 1; }
        .coupon-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .coupon-desc { font-size: 11px; opacity: 0.8; margin-bottom: 8px; }
        .coupon-time { font-size: 10px; opacity: 0.7; }
        
        /* 收货地址表单 */
        .form-item {
            background: #fff;
            padding: 14px 16px;
            border-bottom: 1px solid #f5f5f5;
        }
        .form-label {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
        }
        .form-input {
            width: 100%;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 14px;
            box-sizing: border-box;
        }
        
        /* 团队成员 */
        .team-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: #fff;
            border-radius: 12px;
            margin-bottom: 10px;
        }
        .team-avatar {
            width: 44px;
            height: 44px;
            background: #f0f0f0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right:12px;
            color: #999;
            flex-shrink: 0;
        }
        .team-info { flex: 1; }
        .team-name { font-size: 14px; color: #333; margin-bottom: 2px; }
        .team-time { font-size: 11px; color: #999; }
        .team-level { font-size: 12px; color: #667eea; }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- 首页 -->
        <div class="page active" id="page-home">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header">
                <div style="font-size: 20px; font-weight: 700;">保健品商城</div>
            </div>
            <div class="search-bar">
                <div class="search-input" onclick="goPage('search')">
                    <span>🔍</span>
                    <span>搜索商品</span>
                </div>
                <div class="msg-icon">💬</div>
            </div>
            <div class="content">
                <div class="banner" onclick="goPage('detail')">🎁 新人专享优惠</div>
                
                <div class="category-nav">
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">💊</div>
                        <span>营养保健</span>
                    </div>
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">🌿</div>
                        <span>滋补养生</span>
                    </div>
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">🦴</div>
                        <span>骨骼健康</span>
                    </div>
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">💪</div>
                        <span>增强免疫</span>
                    </div>
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">👨</div>
                        <span>男性健康</span>
                    </div>
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">👩</div>
                        <span>女性健康</span>
                    </div>
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">🧓</div>
                        <span>中老年</span>
                    </div>
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">🔥</div>
                        <span>热门推荐</span>
                    </div>
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">⭐</div>
                        <span>新品上市</span>
                    </div>
                    <div class="category-item" onclick="goPage('search')">
                        <div class="category-icon">📦</div>
                        <span>全部分类</span>
                    </div>
                </div>
                
                <div class="activity-section">
                    <div class="section-title">
                        限时活动
                        <span class="more">更多 ></span>
                    </div>
                    <div class="activity-cards">
                        <div class="activity-card" onclick="showModal('coupon')">
                            <h4>🎫 领取优惠券</h4>
                            <p>新人专享立减20元</p>
                        </div>
                        <div class="activity-card" onclick="showModal('seckill')">
                            <h4>⚡ 限时秒杀</h4>
                            <p>每日10点准时开抢</p>
                        </div>
                    </div>
                </div>
                
                <div class="activity-section">
                    <div class="section-title">
                        热门商品
                        <span class="more">更多 ></span>
                    </div>
                    <div class="product-list">
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">💊</div>
                            <div class="product-info">
                                <div class="product-name">澳洲进口深海鱼油软胶囊</div>
                                <div class="product-price">¥<span>198</span></div>
                                <div class="product-sales">已售 2.3万</div>
                            </div>
                        </div>
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">🌿</div>
                            <div class="product-info">
                                <div class="product-name">人参枸杞养生茶包</div>
                                <div class="product-price">¥<span>68</span></div>
                                <div class="product-sales">已售 1.5万</div>
                            </div>
                        </div>
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">🦴</div>
                            <div class="product-info">
                                <div class="product-name">钙片加维生素D3</div>
                                <div class="product-price">¥<span>128</span></div>
                                <div class="product-sales">已售 3.8万</div>
                            </div>
                        </div>
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">💪</div>
                            <div class="product-info">
                                <div class="product-name">乳清蛋白粉增肌型</div>
                                <div class="product-price">¥<span>268</span></div>
                                <div class="product-sales">已售 1.2万</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div style="height: 80px;"></div>
            </div>
            <div class="tab-bar">
                <div class="tab-item active" onclick="goPage('home')">
                    <div class="icon">🏠</div>
                    <span>首页</span>
                </div>
                <div class="tab-item" onclick="goPage('search')">
                    <div class="icon">📋</div>
                    <span>分类</span>
                </div>
                <div class="tab-item" onclick="goPage('cart')">
                    <div class="icon">🛒</div>
                    <span>购物车</span>
                </div>
                <div class="tab-item" onclick="goPage('order')">
                    <div class="icon">📝</div>
                    <span>订单</span>
                </div>
                <div class="tab-item" onclick="goPage('user')">
                    <div class="icon">👤</div>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 商品详情页 -->
        <div class="page" id="page-detail">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('home')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">商品详情</div>
            </div>
            <div class="content">
                <div class="detail-img">💊</div>
                <div class="detail-info">
                    <div class="detail-price">¥<span>198</span><span style="font-size:12px;color:#999;text-decoration:line-through;margin-left:8px;">¥298</span></div>
                    <div class="detail-name">澳洲进口深海鱼油软胶囊 100粒装</div>
                    <div class="detail-desc">富含Omega-3脂肪酸，支持心脑眼健康。高纯度EPA+DHA，每日2粒守护全家健康。</div>
                    <div class="detail-specs">
                        <div class="spec-tag active">100粒装</div>
                        <div class="spec-tag">200粒装</div>
                        <div class="spec-tag">500粒装</div>
                    </div>
                    
                    <div style="padding:12px;background:#f9f9f9;border-radius:8px;margin-bottom:12px;">
                        <div style="font-size:13px;color:#666;margin-bottom:8px;">📦 快递：免运费</div>
                        <div style="font-size:13px;color:#666;">🏪 库存：99件</div>
                    </div>
                    
                    <div class="section-title" style="padding:0;">商品评价 (328)</div>
                    <div style="padding:12px;background:#f9f9f9;border-radius:8px;margin-top:8px;">
                        <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                            <span style="width:30px;height:30px;background:#ddd;border-radius:50%;display:flex;align-items:center;justify-content:center;">👤</span>
                            <span style="font-size:13px;">张***</span>
                        </div>
                        <div style="font-size:13px;color:#666;">效果很好，吃了一周睡眠质量明显改善，会继续回购！</div>
                        <div style="font-size:11px;color:#999;margin-top:8px;">2024-05-10</div>
                    </div>
                </div>
            </div>
            <div style="position:absolute;bottom:0;left:0;right:0;height:56px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:0 -2px 10px rgba(0,0,0,0.05);z-index:50;">
                <div style="display:flex;gap:16px;">
                    <div style="text-align:center;cursor:pointer;" onclick="goPage('home')">
                        <div style="font-size:20px;">🏠</div>
                        <div style="font-size:10px;color:#999;">首页</div>
                    </div>
                    <div style="text-align:center;cursor:pointer;" onclick="showModal('share')">
                        <div style="font-size:20px;">📤</div>
                        <div style="font-size:10px;color:#999;">分享</div>
                    </div>
                    <div style="text-align:center;cursor:pointer;">
                        <div style="font-size:20px;">❤️</div>
                        <div style="font-size:10px;color:#999;">收藏</div>
                    </div>
                </div>
                <div style="display:flex;gap:8px;">
                    <div style="padding:10px 16px;background:#f5f5f5;border-radius:20px;color:#666;cursor:pointer;" onclick="goPage('cart')">加入购物车</div>
                    <div style="padding:10px 20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;color:#fff;cursor:pointer;" onclick="goPage('cart')">立即购买</div>
                </div>
            </div>
        </div>
        
        <!-- 分类搜索页 - 新版左右布局 -->
        <div class="page" id="page-search">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('home')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">商品分类</div>
            </div>
            
            <!-- 搜索框 -->
            <div class="search-bar" style="padding:12px 16px;">
                <div style="flex:1;height:36px;background:#f5f5f5;border-radius:18px;padding:0 16px;display:flex;align-items:center;gap:8px;font-size:14px;color:#999;">
                    <span>🔍</span>
                    <span>搜索分类商品</span>
                </div>
            </div>
            
            <!-- 左右分栏内容 -->
            <div class="category-page">
                <!-- 左侧分类导航 -->
                <div class="category-left">
                    <div class="category-left-item active" onclick="selectCategory(this)">全部</div>
                    <div class="category-left-item" onclick="selectCategory(this)">💊 营养保健</div>
                    <div class="category-left-item" onclick="selectCategory(this)">🌿 滋补养生</div>
                    <div class="category-left-item" onclick="selectCategory(this)">🦴 骨骼健康</div>
                    <div class="category-left-item" onclick="selectCategory(this)">💪 增强免疫</div>
                    <div class="category-left-item" onclick="selectCategory(this)">👨 男性健康</div>
                    <div class="category-left-item" onclick="selectCategory(this)">👩 女性健康</div>
                    <div class="category-left-item" onclick="selectCategory(this)">🧓 中老年</div>
                    <div class="category-left-item" onclick="selectCategory(this)">🧬 维生素</div>
                    <div class="category-left-item" onclick="selectCategory(this)">🍯 蜂蜜燕窝</div>
                    <div class="category-left-item" onclick="selectCategory(this)">🧴 美容养颜</div>
                    <div class="category-left-item" onclick="selectCategory(this)">🏋️ 运动营养</div>
                </div>
                
                <!-- 右侧商品瀑布流 -->
                <div class="category-right">
                    <div class="category-banner">🎁 营养保健专区 满199减30</div>
                    
                    <div class="sub-category-title">热门推荐</div>
                    <div class="product-list" style="padding:0;">
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">💊</div>
                            <div class="product-info">
                                <div class="product-name">澳洲进口深海鱼油软胶囊</div>
                                <div class="product-price">¥<span>198</span></div>
                                <div class="product-sales">已售 2.3万</div>
                            </div>
                        </div>
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">🧬</div>
                            <div class="product-info">
                                <div class="product-name">维生素C咀嚼片 100片</div>
                                <div class="product-price">¥<span>58</span></div>
                                <div class="product-sales">已售 5.2万</div>
                            </div>
                        </div>
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">🦴</div>
                            <div class="product-info">
                                <div class="product-name">钙片加维生素D3 120片</div>
                                <div class="product-price">¥<span>128</span></div>
                                <div class="product-sales">已售 3.8万</div>
                            </div>
                        </div>
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">🥚</div>
                            <div class="product-info">
                                <div class="product-name">胶原蛋白口服液 10支</div>
                                <div class="product-price">¥<span>168</span></div>
                                <div class="product-sales">已售 1.8万</div>
                            </div>
                        </div>
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">🌿</div>
                            <div class="product-info">
                                <div class="product-name">人参枸杞养生茶包</div>
                                <div class="product-price">¥<span>68</span></div>
                                <div class="product-sales">已售 1.5万</div>
                            </div>
                        </div>
                        <div class="product-card" onclick="goPage('detail')">
                            <div class="product-img">💪</div>
                            <div class="product-info">
                                <div class="product-name">乳清蛋白粉增肌型</div>
                                <div class="product-price">¥<span>268</span></div>
                                <div class="product-sales">已售 1.2万</div>
                            </div>
                        </div>
                    </div>
                    
                    <div style="height:80px;"></div>
                </div>
            </div>
            
            <div class="tab-bar">
                <div class="tab-item" onclick="goPage('home')">
                    <div class="icon">🏠</div>
                    <span>首页</span>
                </div>
                <div class="tab-item active" onclick="goPage('search')">
                    <div class="icon">📋</div>
                    <span>分类</span>
                </div>
                <div class="tab-item" onclick="goPage('cart')">
                    <div class="icon">🛒</div>
                    <span>购物车</span>
                </div>
                <div class="tab-item" onclick="goPage('order')">
                    <div class="icon">📝</div>
                    <span>订单</span>
                </div>
                <div class="tab-item" onclick="goPage('user')">
                    <div class="icon">👤</div>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 购物车页 -->
        <div class="page" id="page-cart">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('home')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">购物车</div>
            </div>
            <div class="content" style="padding-bottom:116px;">
                <div class="cart-item">
                    <div class="cart-check checked" onclick="this.classList.toggle('checked')"></div>
                    <div class="cart-img">💊</div>
                    <div class="cart-detail">
                        <div class="cart-name">澳洲进口深海鱼油软胶囊 100粒装</div>
                        <div class="cart-spec">规格：100粒装</div>
                        <div class="cart-bottom">
                            <div class="cart-price">¥198</div>
                            <div class="cart-num">
                                <button>-</button>
                                <span>1</span>
                                <button>+</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-item">
                    <div class="cart-check" onclick="this.classList.toggle('checked')"></div>
                    <div class="cart-img">🦴</div>
                    <div class="cart-detail">
                        <div class="cart-name">钙片加维生素D3 120片装</div>
                        <div class="cart-spec">规格：120片装</div>
                        <div class="cart-bottom">
                            <div class="cart-price">¥128</div>
                            <div class="cart-num">
                                <button>-</button>
                                <span>2</span>
                                <button>+</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="padding:12px 16px;background:#fff7e6;color:#ff6b00;font-size:13px;display:flex;align-items:center;gap:8px;">
                    <span>🎁</span>
                    <span>已满99元，立减10元</span>
                    <span style="margin-left:auto;">去凑单 ></span>
                </div>
            </div>
            <div class="cart-footer">
                <div class="cart-total">
                    <span class="label">合计：</span>
                    <span class="price">¥198</span>
                </div>
                <div class="cart-settle" onclick="showModal('checkout')">去结算</div>
            </div>
            <div class="tab-bar">
                <div class="tab-item" onclick="goPage('home')">
                    <div class="icon">🏠</div>
                    <span>首页</span>
                </div>
                <div class="tab-item" onclick="goPage('search')">
                    <div class="icon">📋</div>
                    <span>分类</span>
                </div>
                <div class="tab-item active" onclick="goPage('cart')">
                    <div class="icon">🛒</div>
                    <span>购物车</span>
                </div>
                <div class="tab-item" onclick="goPage('order')">
                    <div class="icon">📝</div>
                    <span>订单</span>
                </div>
                <div class="tab-item" onclick="goPage('user')">
                    <div class="icon">👤</div>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 订单页 -->
        <div class="page" id="page-order">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('user')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">我的订单</div>
            </div>
            <div class="content" style="padding-bottom:0;">
                <div class="order-tabs">
                    <div class="order-tab active" onclick="filterOrder(this, 'all')">全部</div>
                    <div class="order-tab" onclick="filterOrder(this, 'pending')">待付款</div>
                    <div class="order-tab" onclick="filterOrder(this, 'shipped')">待发货</div>
                    <div class="order-tab" onclick="filterOrder(this, 'received')">待收货</div>
                    <div class="order-tab" onclick="filterOrder(this, 'completed')">已完成</div>
                </div>
                
                <div class="order-list">
                    <div class="order-card" data-status="shipped">
                        <div class="order-card-header">
                            <span class="order-id">订单号：202405190001</span>
                            <span class="order-status">待发货</span>
                        </div>
                        <div class="order-goods">
                            <div class="order-goods-img">💊</div>
                            <div class="order-goods-info">
                                <div class="order-goods-name">澳洲进口深海鱼油软胶囊</div>
                                <div class="order-goods-spec">100粒装 × 1</div>
                            </div>
                        </div>
                        <div class="order-footer">
                            <div class="order-total">实付金额：<span>¥198</span></div>
                            <div class="order-actions">
                                <div class="order-btn secondary" onclick="showModal('refund')">申请退款</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="order-card" data-status="received">
                        <div class="order-card-header">
                            <span class="order-id">订单号：202405180002</span>
                            <span class="order-status">待收货</span>
                        </div>
                        <div class="order-goods">
                            <div class="order-goods-img">🦴</div>
                            <div class="order-goods-info">
                                <div class="order-goods-name">钙片加维生素D3</div>
                                <div class="order-goods-spec">120片装 × 2</div>
                            </div>
                        </div>
                        <div class="order-footer">
                            <div class="order-total">实付金额：<span>¥256</span></div>
                            <div class="order-actions">
                                <div class="order-btn secondary">查看物流</div>
                                <div class="order-btn primary" onclick="showModal('confirm')">确认收货</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="order-card" data-status="completed">
                        <div class="order-card-header">
                            <span class="order-id">订单号：202405150003</span>
                            <span class="order-status">已完成</span>
                        </div>
                        <div class="order-goods">
                            <div class="order-goods-img">🌿</div>
                            <div class="order-goods-info">
                                <div class="order-goods-name">人参枸杞养生茶包</div>
                                <div class="order-goods-spec">30包/盒 × 1</div>
                            </div>
                        </div>
                        <div class="order-footer">
                            <div class="order-total">实付金额：<span>¥68</span></div>
                            <div class="order-actions">
                                <div class="order-btn secondary" onclick="goPage('detail')">再次购买</div>
                                <div class="order-btn secondary">查看物流</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="order-card" data-status="pending">
                        <div class="order-card-header">
                            <span class="order-id">订单号：202405200004</span>
                            <span class="order-status">待付款</span>
                        </div>
                        <div class="order-goods">
                            <div class="order-goods-img">🍊</div>
                            <div class="order-goods-info">
                                <div class="order-goods-name">维生素C咀嚼片</div>
                                <div class="order-goods-spec">100片装 × 1</div>
                            </div>
                        </div>
                        <div class="order-footer">
                            <div class="order-total">实付金额：<span>¥58</span></div>
                            <div class="order-actions">
                                <div class="order-btn secondary" onclick="showModal('cancel')">取消订单</div>
                                <div class="order-btn primary" onclick="showModal('pay')">立即支付</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-bar">
                <div class="tab-item" onclick="goPage('home')">
                    <div class="icon">🏠</div>
                    <span>首页</span>
                </div>
                <div class="tab-item" onclick="goPage('search')">
                    <div class="icon">📋</div>
                    <span>分类</span>
                </div>
                <div class="tab-item" onclick="goPage('cart')">
                    <div class="icon">🛒</div>
                    <span>购物车</span>
                </div>
                <div class="tab-item active" onclick="goPage('order')">
                    <div class="icon">📝</div>
                    <span>订单</span>
                </div>
                <div class="tab-item" onclick="goPage('user')">
                    <div class="icon">👤</div>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 会员中心 -->
        <div class="page" id="page-user">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="user-header">
                <div class="user-info">
                    <div class="user-avatar">👤</div>
                    <div class="user-detail">
                        <h3>张小明</h3>
                        <p>手机：138****8888</p>
                    </div>
                </div>
                <div class="user-stats">
                    <div class="user-stat">
                        <div class="num">1,280</div>
                        <div class="label">积分</div>
                    </div>
                    <div class="user-stat">
                        <div class="num">5</div>
                        <div class="label">优惠券</div>
                    </div>
                    <div class="user-stat">
                        <div class="num">VIP3</div>
                        <div class="label">会员等级</div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div style="padding:16px;">
                    <div class="section-title">我的订单</div>
                    <div style="display:flex;background:#fff;border-radius:12px;padding:16px;margin-top:12px;">
                        <div style="flex:1;text-align:center;cursor:pointer;" onclick="goPage('order')">
                            <div style="font-size:24px;">⏳</div>
                            <div style="font-size:12px;color:#666;margin-top:4px;">待付款</div>
                        </div>
                        <div style="flex:1;text-align:center;cursor:pointer;" onclick="goPage('order')">
                            <div style="font-size:24px;">📦</div>
                            <div style="font-size:12px;color:#666;margin-top:4px;">待发货</div>
                        </div>
                        <div style="flex:1;text-align:center;cursor:pointer;" onclick="goPage('order')">
                            <div style="font-size:24px;">🚚</div>
                            <div style="font-size:12px;color:#666;margin-top:4px;">待收货</div>
                        </div>
                        <div style="flex:1;text-align:center;cursor:pointer;" onclick="goPage('order')">
                            <div style="font-size:24px;">⭐</div>
                            <div style="font-size:12px;color:#666;margin-top:4px;">待评价</div>
                        </div>
                        <div style="flex:1;text-align:center;cursor:pointer;" onclick="showModal('refund')">
                            <div style="font-size:24px;">🔄</div>
                            <div style="font-size:12px;color:#666;margin-top:4px;">退款/售后</div>
                        </div>
                    </div>
                </div>
                
                <div class="menu-section" style="margin-top:0;padding:0 16px;">
                    <div class="menu-item" onclick="goPage('distrib')">
                        <div class="menu-icon">💰</div>
                        <span>分销中心</span>
                        <span class="menu-arrow">></span>
                    </div>
                    <div class="menu-item" onclick="goPage('coupon')">
                        <div class="menu-icon">🎫</div>
                        <span>我的优惠券</span>
                        <span class="menu-arrow">></span>
                    </div>
                    <div class="menu-item" onclick="goPage('collect')">
                        <div class="menu-icon">❤️</div>
                        <span>我的收藏</span>
                        <span class="menu-arrow">></span>
                    </div>
                    <div class="menu-item" onclick="goPage('address')">
                        <div class="menu-icon">📍</div>
                        <span>收货地址</span>
                        <span class="menu-arrow">></span>
                    </div>
                </div>
                
                <div class="menu-section" style="margin-top:12px;padding:0 16px;">
                    <div class="menu-item" onclick="goPage('news')">
                        <div class="menu-icon">📰</div>
                        <span>健康资讯</span>
                        <span class="menu-arrow">></span>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">🧾</div>
                        <span>发票管理</span>
                        <span class="menu-arrow">></span>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">⚙️</div>
                        <span>设置</span>
                        <span class="menu-arrow">></span>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon">📞</div>
                        <span>联系客服</span>
                        <span class="menu-arrow">></span>
                    </div>
                </div>
                <div style="height:20px;"></div>
            </div>
            <div class="tab-bar">
                <div class="tab-item" onclick="goPage('home')">
                    <div class="icon">🏠</div>
                    <span>首页</span>
                </div>
                <div class="tab-item" onclick="goPage('search')">
                    <div class="icon">📋</div>
                    <span>分类</span>
                </div>
                <div class="tab-item" onclick="goPage('cart')">
                    <div class="icon">🛒</div>
                    <span>购物车</span>
                </div>
                <div class="tab-item" onclick="goPage('order')">
                    <div class="icon">📝</div>
                    <span>订单</span>
                </div>
                <div class="tab-item active" onclick="goPage('user')">
                    <div class="icon">👤</div>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 分销中心 -->
        <div class="page" id="page-distrib">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('user')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">分销中心</div>
            </div>
            <div class="content">
                <div class="distrib-header">
                    <div class="distrib-balance">
                        <div class="label">可提现佣金</div>
                        <div class="amount">¥<span>1,680.00</span></div>
                    </div>
                    <div class="distrib-actions">
                        <div class="distrib-action" onclick="showModal('withdraw')">提现</div>
                        <div class="distrib-action" onclick="showModal('commission')">佣金明细</div>
                    </div>
                </div>
                
                <div class="distrib-stats">
                    <div class="distrib-stat">
                        <div class="num">12</div>
                        <div class="label">直接推荐</div>
                    </div>
                    <div class="distrib-stat">
                        <div class="num">38</div>
                        <div class="label">间接推荐</div>
                    </div>
                    <div class="distrib-stat">
                        <div class="num">¥3,250</div>
                        <div class="label">累计佣金</div>
                    </div>
                </div>
                
                <div style="padding:0 16px;">
                    <div class="section-title">团队成员</div>
                    <div class="team-item">
                        <div class="team-avatar">👩</div>
                        <div class="team-info">
                            <div class="team-name">李女士</div>
                            <div class="team-time">注册时间：2024-04-15</div>
                        </div>
                        <div class="team-level">直接</div>
                    </div>
                    <div class="team-item">
                        <div class="team-avatar">👨</div>
                        <div class="team-info">
                            <div class="team-name">王先生</div>
                            <div class="team-time">注册时间：2024-04-20</div>
                        </div>
                        <div class="team-level">直接</div>
                    </div>
                    <div class="team-item">
                        <div class="team-avatar">👴</div>
                        <div class="team-info">
                            <div class="team-name">张先生</div>
                            <div class="team-time">注册时间：2024-05-01</div>
                        </div>
                        <div class="team-level">间接</div>
                    </div>
                </div>
                
                <div style="padding:16px;">
                    <div class="section-title">分销海报</div>
                    <div style="background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;" onclick="showModal('share')">
                        <div style="width:200px;height:260px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-bottom:12px;">
                            <div style="text-align:center;">
                                <div style="font-size:40px;">🎁</div>
                                <div style="margin-top:8px;">邀请海报</div>
                            </div>
                        </div>
                        <div style="font-size:13px;color:#666;">点击生成分享海报</div>
                    </div>
                </div>
                <div style="height:20px;"></div>
            </div>
        </div>
        
        <!-- 健康资讯 -->
        <div class="page" id="page-news">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('user')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">健康资讯</div>
            </div>
            <div class="content">
                <div class="news-list">
                    <div class="news-item" onclick="goPage('article')">
                        <div class="news-img">📚</div>
                        <div class="news-info">
                            <div class="news-title">深海鱼油的功效与作用：正确补充Omega-3指南</div>
                            <div class="news-meta">2024-05-18 · 3.2万阅读</div>
                        </div>
                    </div>
                    <div class="news-item" onclick="goPage('article')">
                        <div class="news-img">🌿</div>
                        <div class="news-info">
                            <div class="news-title">中老年人如何科学补钙：专家建议全解析</div>
                            <div class="news-meta">2024-05-17 · 2.8万阅读</div>
                        </div>
                    </div>
                    <div class="news-item" onclick="goPage('article')">
                        <div class="news-img">💊</div>
                        <div class="news-info">
                            <div class="news-title">维生素C的隐藏功效：不只是增强免疫力</div>
                            <div class="news-meta">2024-05-16 · 4.1万阅读</div>
                        </div>
                    </div>
                    <div class="news-item" onclick="goPage('article')">
                        <div class="news-img">🍯</div>
                        <div class="news-info">
                            <div class="news-title">胶原蛋白真相：护肤还是坑？专家这样说</div>
                            <div class="news-meta">2024-05-15 · 5.6万阅读</div>
                        </div>
                    </div>
                    <div class="news-item" onclick="goPage('article')">
                        <div class="news-img">🧘</div>
                        <div class="news-info">
                            <div class="news-title">熬夜党必备：护肝片真的有用吗？</div>
                            <div class="news-meta">2024-05-14 · 3.9万阅读</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 文章详情 -->
        <div class="page" id="page-article">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('news')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">资讯详情</div>
            </div>
            <div class="content">
                <div class="article-content">
                    <div class="article-title">深海鱼油的功效与作用：正确补充Omega-3指南</div>
                    <div class="article-meta">发布时间：2024-05-18 · 作者：健康顾问</div>
                    <div class="article-body">
                        <p>深海鱼油是从深海鱼类中提取的油脂，富含Omega-3脂肪酸，包括EPA和DHA两种重要成分。那么，深海鱼油到底有哪些功效呢？</p>
                        <p><strong>一、心血管健康</strong></p>
                        <p>Omega-3脂肪酸有助于降低血脂，减少动脉粥样硬化的风险。研究表明，定期补充鱼油可以有效降低甘油三酯水平，维护心血管系统健康。</p>
                        <p><strong>二、大脑功能</strong></p>
                        <p>DHA是大脑细胞膜的重要组成部分，对维持大脑功能至关重要。补充鱼油有助于改善记忆力和注意力，对预防老年痴呆也有积极作用。</p>
                        <p><strong>三、眼部健康</strong></p>
                        <p>视网膜中含有大量的DHA，适当补充鱼油可以缓解眼睛干涩，保护视力健康。</p>
                        <p><strong>四、正确补充建议</strong></p>
                        <p>专家建议，成年人每日补充EPA+DHA总量建议为250-500mg。但要注意，鱼油并非越多越好，过量摄入可能导致出血倾向增加。建议在医生指导下合理使用。</p>
                    </div>
                    <div style="padding:16px;background:#f9f9f9;border-radius:8px;margin-top:16px;">
                        <div style="font-size:13px;color:#666;margin-bottom:12px;">💡 温馨提示：本品为营养补充品，不能替代药物治疗。如有健康问题，请咨询专业医生。</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 优惠券页 -->
        <div class="page" id="page-coupon">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('user')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">我的优惠券</div>
            </div>
            <div class="content">
                <div class="coupon-list">
                    <div class="coupon-item">
                        <div class="coupon-left">
                            <div class="coupon-value">¥<span>20</span></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">有效期至：2024-06-30</div>
                        </div>
                    </div>
                    <div class="coupon-item" style="background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                        <div class="coupon-left">
                            <div class="coupon-value">¥<span>50</span></div>
                            <div class="coupon-limit">满299可用</div>
                        </div>
                        <div class="coupon-right">
                            <div class="coupon-name">满减优惠</div>
                            <div class="coupon-desc">限时活动专属</div>
                            <div class="coupon-time">有效期至：2024-05-31</div>
                        </div>
                    </div>
                    <div class="coupon-item" style="background:linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);opacity:0.6;">
                        <div class="coupon-left">
                            <div class="coupon-value">¥<span>10</span></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">有效期至：2024-05-15</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 收货地址 -->
        <div class="page" id="page-address">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('user')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">收货地址</div>
            </div>
            <div class="content">
                <div style="padding:16px;">
                    <div class="address-item">
                        <div class="address-user">
                            张小明 <span>138****8888</span>
                            <span class="address-tag">默认</span>
                        </div>
                        <div class="address-detail">广东省深圳市南山区科技园南区A1栋1203室</div>
                        <div style="display:flex;justify-content:flex-end;gap:12px;font-size:13px;color:#667eea;">
                            <span style="cursor:pointer;" onclick="showModal('addAddress')">编辑</span>
                            <span style="cursor:pointer;">删除</span>
                        </div>
                    </div>
                    <div class="address-item">
                        <div class="address-user">
                            李四 <span>139****6666</span>
                        </div>
                        <div class="address-detail">北京市朝阳区望京SOHO T3 1801室</div>
                        <div style="display:flex;justify-content:flex-end;gap:12px;font-size:13px;color:#667eea;">
                            <span style="cursor:pointer;">设为默认</span>
                            <span style="cursor:pointer;" onclick="showModal('addAddress')">编辑</span>
                            <span style="cursor:pointer;">删除</span>
                        </div>
                    </div>
                </div>
                <div style="padding:16px;">
                    <div style="background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:#fff;text-align:center;padding:14px;border-radius:24px;font-size:14px;cursor:pointer;" onclick="showModal('addAddress')">
                        + 添加新地址
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 收藏页 -->
        <div class="page" id="page-collect">
            <div class="status-bar">
                <span class="time">9:41</span>
                <span class="icons">●●●○○</span>
            </div>
            <div class="header with-back">
                <div class="back-btn" onclick="goPage('user')">
                    <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                </div>
                <div class="header-title">我的收藏</div>
            </div>
            <div class="content">
                <div class="product-list" style="padding:16px;">
                    <div class="product-card" onclick="goPage('detail')">
                        <div class="product-img">💊</div>
                        <div class="product-info">
                            <div class="product-name">澳洲进口深海鱼油软胶囊</div>
                            <div class="product-price">¥<span>198</span></div>
                            <div style="font-size:12px;color:#667eea;margin-top:6px;cursor:pointer;">加入购物车</div>
                        </div>
                    </div>
                    <div class="product-card" onclick="goPage('detail')">
                        <div class="product-img">🦴</div>
                        <div class="product-info">
                            <div class="product-name">钙片加维生素D3</div>
                            <div class="product-price">¥<span>128</span></div>
                            <div style="font-size:12px;color:#667eea;margin-top:6px;cursor:pointer;">加入购物车</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 模态框区域 -->
        <div class="modal" id="modal-share">
            <div class="modal-content" style="padding:30px;text-align:center;">
                <div style="font-size:16px;font-weight:600;margin-bottom:20px;">分享商品/海报</div>
                <div style="display:flex;justify-content:center;gap:40px;">
                    <div style="cursor:pointer;" onclick="hideModal()">
                        <div style="width:50px;height:50px;background:#07c160;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;">💚</div>
                        <div style="font-size:12px;margin-top:8px;color:#666;">微信</div>
                    </div>
                    <div style="cursor:pointer;" onclick="hideModal()">
                        <div style="width:50px;height:50px;background:#ff6b6b;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;">🔥</div>
                        <div style="font-size:12px;margin-top:8px;color:#666;">朋友圈</div>
                    </div>
                    <div style="cursor:pointer;" onclick="hideModal()">
                        <div style="width:50px;height:50px;background:#667eea;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;">📱</div>
                        <div style="font-size:12px;margin-top:8px;color:#666;">生成海报</div>
                    </div>
                </div>
                <div style="margin-top:30px;color:#999;font-size:13px;cursor:pointer;" onclick="hideModal()">关闭</div>
            </div>
        </div>
        
        <div class="modal" id="modal-checkout">
            <div class="modal-content" style="max-height:85%;">
                <div style="font-size:16px;font-weight:600;text-align:center;margin-bottom:16px;">确认订单</div>
                <div style="padding:12px;background:#f9f9f9;border-radius:8px;margin-bottom:12px;">
                    <div style="font-size:13px;color:#666;margin-bottom:8px;">📍 收货地址</div>
                    <div style="font-size:14px;">张小明 138****8888</div>
                    <div style="font-size:12px;color:#666;margin-top:4px;">广东省深圳市南山区科技园南区A1栋1203室</div>
                </div>
                <div style="padding:12px;background:#f9f9f9;border-radius:8px;margin-bottom:12px;">
                    <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
                        <span style="font-size:13px;color:#666;">商品金额</span>
                        <span style="font-size:13px;">¥198.00</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
                        <span style="font-size:13px;color:#666;">运费</span>
                        <span style="font-size:13px;color:#4caf50;">免运费</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="font-size:13px;color:#666;">优惠券</span>
                        <span style="font-size:13px;color:#667eea;">选择优惠券 ></span>
                    </div>
                </div>
                <div style="display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid #f0f0f0;">
                    <span style="font-size:14px;">实付金额</span>
                    <span style="font-size:18px;color:#ff6b6b;font-weight:600;">¥198.00</span>
                </div>
                <div style="margin-top:16px;">
                    <div style="font-size:14px;color:#666;margin-bottom:12px;">💳 支付方式</div>
                    <div style="display:flex;align-items:center;padding:12px;background:#f9f9f9;border-radius:8px;margin-bottom:8px;">
                        <div style="width:24px;height:24px;background:#07c160;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:12px;color:#fff;font-size:12px;">✓</div>
                        <span style="font-size:14px;">微信支付</span>
                    </div>
                </div>
                <div style="margin-top:20px;padding:14px;background:linear-gradient(135deg, #07c160 0%, #06ad56 100%);color:#fff;text-align:center;border-radius:24px;font-size:15px;cursor:pointer;" onclick="showModal('paySuccess')">
                    确认支付 ¥198.00
                </div>
                <div style="text-align:center;margin-top:12px;color:#999;font-size:12px;cursor:pointer;" onclick="hideModal()">取消</div>
            </div>
        </div>
        
        <div class="modal" id="modal-pay">
            <div class="modal-content" style="text-align:center;padding:40px;">
                <div style="font-size:40px;margin-bottom:20px;">💰</div>
                <div style="font-size:16px;font-weight:600;margin-bottom:8px;">订单待支付</div>
                <div style="font-size:13px;color:#999;margin-bottom:30px;">请在30分钟内完成支付，超时订单自动取消</div>
                <div style="font-size:28px;color:#ff6b6b;font-weight:600;margin-bottom:30px;">¥58.00</div>
                <div style="padding:14px;background:linear-gradient(135deg, #07c160 0%, #06ad56 100%);color:#fff;border-radius:24px;font-size:15px;cursor:pointer;margin-bottom:12px;" onclick="showModal('paySuccess')">
                    微信支付
                </div>
                <div style="color:#999;font-size:13px;cursor:pointer;" onclick="hideModal()">取消订单</div>
            </div>
        </div>
        
        <div class="modal" id="modal-paySuccess">
            <div class="modal-content" style="text-align:center;padding:40px;">
                <div style="font-size:60px;margin-bottom:20px;">✅</div>
                <div style="font-size:18px;font-weight:600;margin-bottom:8px;">支付成功</div>
                <div style="font-size:13px;color:#999;margin-bottom:30px;">感谢您的购买，商品将尽快发货</div>
                <div style="display:flex;gap:12px;justify-content:center;">
                    <div style="padding:12px 20px;border:1px solid #ddd;border-radius:20px;font-size:14px;cursor:pointer;" onclick="hideAllModal();goPage('order')">查看订单</div>
                    <div style="padding:12px 20px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:#fff;border-radius:20px;font-size:14px;cursor:pointer;" onclick="hideAllModal();goPage('home')">返回首页</div>
                </div>
            </div>
        </div>
        
        <div class="modal" id="modal-confirm">
            <div class="modal-content" style="text-align:center;padding:40px;">
                <div style="font-size:50px;margin-bottom:20px;">📦</div>
                <div style="font-size:16px;font-weight:600;margin-bottom:8px;">确认收货</div>
                <div style="font-size:13px;color:#999;margin-bottom:30px;">请确认您已收到商品且无质量问题</div>
                <div style="padding:14px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:#fff;border-radius:24px;font-size:15px;cursor:pointer;" onclick="hideModal()">
                    确认收货
                </div>
                <div style="color:#999;font-size:13px;margin-top:16px;cursor:pointer;" onclick="hideModal()">取消</div>
            </div>
        </div>
        
        <div class="modal" id="modal-cancel">
            <div class="modal-content" style="text-align:center;padding:40px;">
                <div style="font-size:50px;margin-bottom:20px;">❓</div>
                <div style="font-size:16px;font-weight:600;margin-bottom:8px;">取消订单</div>
                <div style="font-size:13px;color:#999;margin-bottom:30px;">确定要取消该订单吗？</div>
                <div style="display:flex;gap:12px;">
                    <div style="flex:1;padding:14px;border:1px solid #ddd;border-radius:24px;font-size:14px;cursor:pointer;" onclick="hideModal()">暂不取消</div>
                    <div style="flex:1;padding:14px;background:#ff6b6b;color:#fff;border-radius:24px;font-size:14px;cursor:pointer;" onclick="hideModal()">确认取消</div>
                </div>
            </div>
        </div>
        
        <div class="modal" id="modal-refund">
            <div class="modal-content">
                <div style="font-size:16px;font-weight:600;text-align:center;margin-bottom:20px;">申请退款</div>
                <div class="form-item">
                    <div class="form-label">退款原因</div>
                    <select class="form-input">
                        <option>商品损坏</option>
                        <option>商品与描述不符</option>
                        <option>多拍/错拍</option>
                        <option>其他</option>
                    </select>
                </div>
                <div class="form-item">
                    <div class="form-label">详细说明</div>
                    <textarea class="form-input" rows="3" placeholder="请输入退款原因...">