编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保健品商城分销系统 - 用户端原型</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
        
        /* 手机模拟器框架 */
        .phone-frame {
            width: 375px;
            min-height: 667px;
            margin: 20px auto;
            background: #fff;
            border-radius: 40px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            overflow: hidden;
            position: relative;
        }
        
        /* 顶部状态栏 */
        .status-bar {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
            color: #fff;
            padding: 12px 20px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            height: 44px;
            align-items: center;
        }
        
        /* 页面容器 */
        .page { display: none; min-height: calc(100% - 44px - 60px); }
        .page.active { display: block; }
        
        /* 首页内容 */
        .home-header {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
            color: #fff;
            padding: 15px;
        }
        .home-header h1 { font-size: 18px; margin-bottom: 5px; }
        .home-search {
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            padding: 8px 15px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            color: rgba(255,255,255,0.8);
        }
        .home-search input { background: transparent; border: none; color: #fff; margin-left: 8px; width: 100%; outline: none; }
        .home-search input::placeholder { color: rgba(255,255,255,0.6); }
        
        .banner { 
            background: linear-gradient(135deg, #66BB6A, #43A047);
            margin: 15px;
            border-radius: 12px;
            padding: 20px;
            color: #fff;
        }
        .banner h2 { font-size: 16px; margin-bottom: 5px; }
        .banner p { font-size: 12px; opacity: 0.9; }
        
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 15px;
        }
        .nav-item {
            background: #f8f8f8;
            border-radius: 10px;
            padding: 15px 5px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .nav-item:hover { background: #e8f5e9; transform: translateY(-2px); }
        .nav-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            border-radius: 10px;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }
        .nav-item span { font-size: 12px; color: #333; }
        
        .section-title {
            padding: 15px;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .section-title a { font-size: 12px; color: #999; text-decoration: none; }
        
        .product-list { display: flex; overflow-x: auto; padding: 0 15px; gap: 12px; }
        .product-card {
            width: 140px;
            flex-shrink: 0;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            cursor: pointer;
        }
        .product-card img { width: 100%; height: 120px; background: #e8f5e9; display: flex; align-items: center; justify-content: center; color: #4CAF50; font-size: 40px; }
        .product-info { padding: 10px; }
        .product-name { font-size: 13px; color: #333; margin-bottom: 5px; line-height: 1.3; }
        .product-price { color: #f56c6c; font-size: 14px; font-weight: 600; }
        .product-price span { font-size: 10px; }
        
        /* 底部导航 */
        .bottom-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            border-top: 1px solid #eee;
            height: 60px;
        }
        .nav-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            color: #999;
            transition: all 0.3s;
            padding: 5px 10px;
        }
        .nav-btn:hover, .nav-btn.active { color: #4CAF50; }
        .nav-btn svg { width: 22px; height: 22px; margin-bottom: 4px; }
        .nav-btn span { font-size: 10px; }
        
        /* 页面标题栏 */
        .page-header {
            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
            color: #fff;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            height: 50px;
        }
        .page-header .back-btn {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 10px;
        }
        .page-header h2 { font-size: 16px; flex: 1; }
        .page-header .menu-btn { cursor: pointer; }
        
        /* 列表通用样式 */
        .list-container { padding: 15px; }
        .list-item {
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: all 0.3s;
        }
        .list-item:hover { transform: translateX(5px); }
        .list-item:active { background: #f5f5f5; }
        .list-item h3 { font-size: 14px; color: #333; margin-bottom: 8px; }
        .list-item p { font-size: 12px; color: #999; line-height: 1.5; }
        
        /* 订单卡片样式 */
        .order-card { 
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            color: #fff;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
        }
        .order-status { font-size: 14px; margin-bottom: 5px; }
        .order-info { font-size: 12px; opacity: 0.9; }
        
        /* 佣金卡片样式 */
        .commission-card {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            border-radius: 15px;
            padding: 25px;
            color: #fff;
            text-align: center;
            margin: 15px;
        }
        .commission-card .label { font-size: 12px; opacity: 0.9; margin-bottom: 5px; }
        .commission-card .amount { font-size: 32px; font-weight: 700; margin-bottom: 5px; }
        .commission-card .amount span { font-size: 16px; }
        .commission-card .withdraw { 
            background: rgba(255,255,255,0.2);
            border: none;
            color: #fff;
            padding: 8px 25px;
            border-radius: 20px;
            margin-top: 10px;
            cursor: pointer;
        }
        
        /* 团队成员卡片 */
        .team-card {
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .team-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #e8f5e9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4CAF50;
            font-size: 20px;
            margin-right: 12px;
        }
        .team-info { flex: 1; }
        .team-name { font-size: 14px; color: #333; margin-bottom: 5px; }
        .team-level { font-size: 12px; color: #4CAF50; background: #e8f5e9; padding: 2px 8px; border-radius: 10px; }
        .team-time { font-size: 11px; color: #999; }
        
        /* 商品详情页 */
        .goods-detail-header {
            height: 250px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4CAF50;
            font-size: 60px;
        }
        .goods-info { padding: 15px; background: #fff; }
        .goods-price { color: #f56c6c; font-size: 24px; font-weight: 700; margin-bottom: 10px; }
        .goods-price span { font-size: 12px; }
        .goods-name { font-size: 16px; color: #333; margin-bottom: 10px; }
        .goods-desc { font-size: 12px; color: #999; line-height: 1.6; }
        .goods-spec {
            background: #f8f8f8;
            padding: 15px;
            margin: 10px 15px;
            border-radius: 10px;
        }
        .goods-spec h4 { font-size: 13px; color: #333; margin-bottom: 10px; }
        .spec-tags { display: flex; gap: 8px; flex-wrap: wrap; }
        .spec-tag {
            padding: 5px 12px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 15px;
            font-size: 12px;
            cursor: pointer;
        }
        .spec-tag.active { background: #4CAF50; color: #fff; border-color: #4CAF50; }
        .goods-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            padding: 10px 15px;
            display: flex;
            gap: 10px;
            border-top: 1px solid #eee;
        }
        .goods-bottom button {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            cursor: pointer;
        }
        .btn-add-cart { background: #ff9800; color: #fff; }
        .btn-buy-now { background: linear-gradient(135deg, #4CAF50, #8BC34A); color: #fff; }
        
        /* 个人中心页 */
        .user-center-header {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            padding: 25px 15px;
            color: #fff;
        }
        .user-info { display: flex; align-items: center; margin-bottom: 15px; }
        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 15px;
        }
        .user-name { font-size: 18px; margin-bottom: 5px; }
        .user-id { font-size: 12px; opacity: 0.8; }
        
        .user-stats {
            display: flex;
            justify-content: space-around;
            background: rgba(255,255,255,0.15);
            border-radius: 10px;
            padding: 15px;
        }
        .stat-item { text-align: center; cursor: pointer; }
        .stat-num { font-size: 18px; font-weight: 700; }
        .stat-label { font-size: 11px; opacity: 0.9; margin-top: 3px; }
        
        .menu-list {
            padding: 15px;
        }
        .menu-group {
            background: #fff;
            border-radius: 10px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .menu-item {
            padding: 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
            border-bottom: 1px solid #f5f5f5;
        }
        .menu-item:last-child { border-bottom: none; }
        .menu-item:active { background: #f8f8f8; }
        .menu-icon {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-right: 12px;
            font-size: 16px;
        }
        .menu-text { flex: 1; font-size: 14px; color: #333; }
        .menu-arrow { color: #ccc; font-size: 12px; }
        
        /* 推三返一页面 */
        .promo-banner {
            background: linear-gradient(135deg, #ff9800, #ffb74d);
            color: #fff;
            padding: 20px;
            border-radius: 15px;
            margin: 15px;
            text-align: center;
        }
        .promo-banner h3 { font-size: 18px; margin-bottom: 5px; }
        .promo-banner p { font-size: 12px; opacity: 0.9; }
        .promo-progress {
            background: #fff;
            margin: 15px;
            padding: 20px;
            border-radius: 10px;
        }
        .progress-info { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: #666; }
        .progress-bar {
            height: 20px;
            background: #e8f5e9;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            border-radius: 10px;
            transition: width 0.3s;
        }
        .progress-text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 11px;
            color: #4CAF50;
            font-weight: 600;
        }
        .promo-rules {
            background: #fff;
            margin: 15px;
            padding: 15px;
            border-radius: 10px;
        }
        .promo-rules h4 { font-size: 14px; color: #333; margin-bottom: 10px; }
        .rule-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .rule-item:last-child { border-bottom: none; }
        .rule-num {
            width: 24px;
            height: 24px;
            background: #4CAF50;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            margin-right: 10px;
        }
        .rule-text { font-size: 13px; color: #666; }
        
        /* 成为分销员页 */
        .distributor-apply {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            color: #fff;
            padding: 30px 20px;
            text-align: center;
        }
        .distributor-apply .icon {
            font-size: 60px;
            margin-bottom: 15px;
        }
        .distributor-apply h2 { font-size: 20px; margin-bottom: 10px; }
        .distributor-apply p { font-size: 13px; opacity: 0.9; }
        
        .benefits-section {
            padding: 15px;
        }
        .benefits-section h3 { font-size: 15px; color: #333; margin-bottom: 12px; }
        .benefit-card {
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .benefit-icon {
            width: 45px;
            height: 45px;
            background: #e8f5e9;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4CAF50;
            font-size: 20px;
            margin-right: 12px;
        }
        .benefit-info h4 { font-size: 14px; color: #333; margin-bottom: 3px; }
        .benefit-info p { font-size: 12px; color: #999; }
        
        .apply-form {
            padding: 15px;
        }
        .form-item {
            background: #fff;
            border-radius: 10px;
            padding: 12px 15px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .form-item label { width: 80px; font-size: 14px; color: #666; }
        .form-item input { flex: 1; border: none; font-size: 14px; outline: none; }
        
        .apply-btn {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            color: #fff;
            border: none;
            width: 100%;
            padding: 14px;
            border-radius: 25px;
            font-size: 16px;
            margin-top: 20px;
            cursor: pointer;
        }
        
        /* 提现页面 */
        .withdraw-card {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            color: #fff;
            padding: 25px;
            text-align: center;
            margin: 15px;
            border-radius: 15px;
        }
        .withdraw-card .label { font-size: 14px; opacity: 0.9; }
        .withdraw-card .amount { font-size: 36px; font-weight: 700; margin: 10px 0; }
        
        .withdraw-form {
            padding: 15px;
        }
        .withdraw-form label { font-size: 14px; color: #666; display: block; margin-bottom: 8px; }
        .withdraw-input {
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
        }
        .withdraw-input span { font-size: 24px; color: #333; margin-right: 10px; }
        .withdraw-input input { flex: 1; border: none; font-size: 24px; outline: none; }
        
        .withdraw-tips {
            background: #fff3e0;
            padding: 12px 15px;
            margin: 15px;
            border-radius: 10px;
            font-size: 12px;
            color: #e65100;
        }
        
        /* 订单详情页 */
        .order-detail-header {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            color: #fff;
            padding: 20px;
        }
        .order-status-text { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
        .order-status-desc { font-size: 12px; opacity: 0.9; }
        
        .address-section {
            background: #fff;
            padding: 15px;
            display: flex;
            align-items: center;
            margin: -20px 15px 0;
            border-radius: 10px;
            position: relative;
        }
        .address-icon {
            width: 40px;
            height: 40px;
            background: #e8f5e9;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4CAF50;
            margin-right: 12px;
        }
        .address-info { flex: 1; }
        .address-name { font-size: 14px; color: #333; margin-bottom: 3px; }
        .address-text { font-size: 12px; color: #666; }
        
        .order-goods {
            background: #fff;
            margin: 15px;
            border-radius: 10px;
            padding: 15px;
        }
        .goods-item {
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .goods-item:last-child { border-bottom: none; }
        .goods-img {
            width: 60px;
            height: 60px;
            background: #e8f5e9;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4CAF50;
            margin-right: 12px;
        }
        .goods-detail { flex: 1; }
        .goods-title { font-size: 13px; color: #333; margin-bottom: 5px; }
        .goods-spec-text { font-size: 11px; color: #999; }
        .goods-price-num { font-size: 14px; color: #f56c6c; font-weight: 600; text-align: right; }
        
        .order-summary {
            background: #fff;
            margin: 15px;
            border-radius: 10px;
            padding: 15px;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 13px;
        }
        .summary-row .label { color: #666; }
        .summary-row .value { color: #333; }
        .summary-row.total { border-top: 1px solid #f5f5f5; margin-top: 8px; padding-top: 12px; }
        .summary-row.total .label { font-weight: 600; color: #333; }
        .summary-row.total .value { font-weight: 700; color: #f56c6c; font-size: 16px; }
        
        /* 收货地址页面 */
        .address-list { padding: 15px; }
        .address-item {
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 12px;
        }
        .address-item-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .address-name-text { font-size: 15px; color: #333; font-weight: 600; }
        .address-phone { font-size: 14px; color: #666; margin-left: 15px; }
        .address-tag { 
            background: #e8f5e9; 
            color: #4CAF50; 
            font-size: 11px; 
            padding: 2px 8px; 
            border-radius: 10px; 
            margin-left: 10px;
        }
        .address-content { font-size: 13px; color: #666; margin-bottom: 12px; line-height: 1.5; }
        .address-actions { display: flex; justify-content: space-between; }
        .action-btn { color: #999; font-size: 12px; cursor: pointer; }
        .action-btn span { margin-left: 3px; }
        
        /* 退款申请页 */
        .refund-reason {
            background: #fff;
            margin: 15px;
            border-radius: 10px;
            padding: 15px;
        }
        .refund-reason label { font-size: 14px; color: #333; display: block; margin-bottom: 10px; }
        .reason-textarea {
            width: 100%;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 12px;
            font-size: 14px;
            resize: none;
            height: 100px;
            outline: none;
        }
        
        .refund-amount {
            background: #fff;
            margin: 15px;
            border-radius: 10px;
            padding: 15px;
        }
        .refund-amount label { font-size: 14px; color: #666; }
        .refund-amount .money { font-size: 20px; color: #f56c6c; font-weight: 600; margin-left: 10px; }
        
        /* Toast提示 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.75);
            color: #fff;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 1000;
            display: none;
        }
        .toast.show { display: block; animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
        
        /* 页面切换动画 */
        .page { animation: slideIn 0.3s; }
        @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
        
        /* 滚动条样式 */
        .page { overflow-y: auto; max-height: calc(100vh - 104px); }
        .page::-webkit-scrollbar { width: 0; }
    </style>
</head>
<body>
    <!-- 手机模拟器 -->
    <div class="phone-frame">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span>9:41</span>
            <span>信号 Wi-Fi 电池</span>
        </div>
        
        <!-- 首页 -->
        <div id="page-home" class="page active">
            <div class="home-header">
                <h1>保健品商城</h1>
                <p style="font-size:12px;opacity:0.9;">健康生活，从这里开始</p>
                <div class="home-search">
                    <span>🔍</span>
                    <input type="text" placeholder="搜索保健品">
                </div>
            </div>
            
            <div class="banner">
                <h2>🌿 新会员专享福利</h2>
                <p>首单满99元立减20元，更有分销佣金等你拿</p>
            </div>
            
            <div class="nav-grid">
                <div class="nav-item" onclick="showPage('page-dist-center')">
                    <div class="nav-icon">🏆</div>
                    <span>分销中心</span>
                </div>
                <div class="nav-item" onclick="showPage('page-orders')">
                    <div class="nav-icon">📦</div>
                    <span>我的订单</span>
                </div>
                <div class="nav-item" onclick="showPage('page-commission')">
                    <div class="nav-icon">💰</div>
                    <span>佣金管理</span>
                </div>
                <div class="nav-item" onclick="showPage('page-team')">
                    <div class="nav-icon">👥</div>
                    <span>我的团队</span>
                </div>
            </div>
            
            <div class="section-title">
                热门商品
                <a href="#">查看更多 ></a>
            </div>
            
            <div class="product-list">
                <div class="product-card" onclick="showPage('page-goods-detail')">
                    <div class="product-img">💊</div>
                    <div class="product-info">
                        <div class="product-name">灵芝孢子粉胶囊 增强免疫力</div>
                        <div class="product-price">¥<span>298</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('page-goods-detail')">
                    <div class="product-img">🌿</div>
                    <div class="product-info">
                        <div class="product-name">西洋参含片 提神抗疲劳</div>
                        <div class="product-price">¥<span>168</span></div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('page-goods-detail')">
                    <div class="product-img">🍯</div>
                    <div class="product-info">
                        <div class="product-name">蜂王浆口服液 美容养颜</div>
                        <div class="product-price">¥<span>238</span></div>
                    </div>
                </div>
            </div>
            
            <div class="section-title">
                推三返一活动
                <a href="#" onclick="showPage('page-promo')">查看详情 ></a>
            </div>
            
            <div style="padding: 0 15px 15px;">
                <div class="promo-banner" style="margin:0;" onclick="showPage('page-promo')">
                    <h3>🎁 推三返一</h3>
                    <p>推荐3位好友下单，自动返利 ¥100</p>
                </div>
            </div>
        </div>
        
        <!-- 商品详情页 -->
        <div id="page-goods-detail" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="showPage('page-home')">←</div>
                <h2>商品详情</h2>
                <div class="menu-btn">⋮</div>
            </div>
            
            <div class="goods-detail-header">💊</div>
            
            <div class="goods-info">
                <div class="goods-price">¥298 <span style="font-size:12px;color:#999;text-decoration:line-through;margin-left:10px;">¥398</span></div>
                <div class="goods-name">灵芝孢子粉胶囊 增强免疫力</div>
                <div class="goods-desc">精选天然灵芝，低温破壁技术，保留更多有效成分。每天2粒，增强体质，提高免疫力。</div>
            </div>
            
            <div class="goods-spec">
                <h4>选择规格</h4>
                <div class="spec-tags">
                    <div class="spec-tag active" onclick="selectSpec(this)">30粒装</div>
                    <div class="spec-tag" onclick="selectSpec(this)">60粒装</div>
                    <div class="spec-tag" onclick="selectSpec(this)">90粒装</div>
                </div>
            </div>
            
            <div style="padding:0 15px 80px;">
                <div class="order-card">
                    <div class="order-info">📍 配送至：武汉市武昌区</div>
                </div>
                
                <div class="list-item" onclick="showToast('查看店铺信息')">
                    <h3>🏪 商家信息</h3>
                    <p>官方自营店 · 品质保障 · 急速发货</p>
                </div>
            </div>
            
            <div class="goods-bottom">
                <button class="btn-add-cart" onclick="showToast('已加入购物车')">加入购物车</button>
                <button class="btn-buy-now" onclick="showToast('跳转支付...')">立即购买</button>
            </div>
        </div>
        
        <!-- 分销中心页 -->
        <div id="page-dist-center" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="showPage('page-home')">←</div>
                <h2>分销中心</h2>
                <div class="menu-btn">⋮</div>
            </div>
            
            <div class="distributor-apply">
                <div class="icon">🏆</div>
                <h2>成为分销员</h2>
                <p>分享商品链接，好友下单即可获得佣金</p>
            </div>
            
            <div class="benefits-section">
                <h3>分销员权益</h3>
                <div class="benefit-card">
                    <div class="benefit-icon">💰</div>
                    <div class="benefit-info">
                        <h4>高额佣金</h4>
                        <p>一级佣金15%，二级佣金8%</p>
                    </div>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">📊</div>
                    <div class="benefit-info">
                        <h4>团队收益</h4>
                        <p>下线购买持续带来被动收入</p>
                    </div>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">🎁</div>
                    <div class="benefit-info">
                        <h4>推三返一</h4>
                        <p>推荐3人自动返利100元</p>
                    </div>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">📱</div>
                    <div class="benefit-info">
                        <h4>专属海报</h4>
                        <p>生成个性化推广海报</p>
                    </div>
                </div>
            </div>
            
            <div style="padding:15px;">
                <div class="apply-form">
                    <div class="form-item">
                        <label>姓名</label>
                        <input type="text" placeholder="请输入真实姓名">
                    </div>
                    <div class="form-item">
                        <label>手机号</label>
                        <input type="tel" placeholder="请输入手机号码">
                    </div>
                </div>
                <button class="apply-btn" onclick="showToast('申请提交成功，请等待审核')">立即申请成为分销员</button>
            </div>
        </div>
        
        <!-- 我的团队页 -->
        <div id="page-team" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="showPage('page-home')">←</div>
                <h2>我的团队</h2>
                <div class="menu-btn">📤</div>
            </div>
            
            <div style="background:linear-gradient(135deg,#4CAF50,#8BC34A);color:#fff;padding:20px;">
                <div style="display:flex;justify-content:space-around;">
                    <div class="stat-item">
                        <div class="stat-num">28</div>
                        <div class="stat-label">一级成员</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">56</div>
                        <div class="stat-label">二级成员</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">¥8,580</div>
                        <div class="stat-label">累计佣金</div>
                    </div>
                </div>
            </div>
            
            <div class="list-container">
                <div style="font-size:14px;color:#666;margin-bottom:10px;">一级成员 (28人)</div>
                
                <div class="team-card" onclick="showToast('查看成员详情')">
                    <div class="team-avatar">😊</div>
                    <div class="team-info">
                        <div class="team-name">李明 <span class="team-level">一级</span></div>
                        <div class="team-time">注册时间: 2026-05-15</div>
                    </div>
                </div>
                
                <div class="team-card" onclick="showToast('查看成员详情')">
                    <div class="team-avatar">🤗</div>
                    <div class="team-info">
                        <div class="team-name">王芳 <span class="team-level">一级</span></div>
                        <div class="team-time">注册时间: 2026-05-18</div>
                    </div>
                </div>
                
                <div class="team-card" onclick="showToast('查看成员详情')">
                    <div class="team-avatar">😃</div>
                    <div class="team-info">
                        <div class="team-name">张伟 <span class="team-level">一级</span></div>
                        <div class="team-time">注册时间: 2026-05-20</div>
                    </div>
                </div>
                
                <div style="font-size:14px;color:#666;margin:15px 0 10px;">二级成员 (56人)</div>
                
                <div class="team-card" onclick="showToast('查看成员详情')">
                    <div class="team-avatar">🙂</div>
                    <div class="team-info">
                        <div class="team-name">赵敏 <span class="team-level" style="background:#e3f2fd;color:#2196f3;">二级</span></div>
                        <div class="team-time">注册时间: 2026-05-10</div>
                    </div>
                </div>
                
                <div class="team-card" onclick="showToast('查看成员详情')">
                    <div class="team-avatar">🤔</div>
                    <div class="team-info">
                        <div class="team-name">刘洋 <span class="team-level" style="background:#e3f2fd;color:#2196f3;">二级</span></div>
                        <div class="team-time">注册时间: 2026-05-12</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 佣金管理页 -->
        <div id="page-commission" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="showPage('page-home')">←</div>
                <h2>佣金管理</h2>
                <div class="menu-btn">📤</div>
            </div>
            
            <div class="commission-card">
                <div class="label">可提现佣金</div>
                <div class="amount">¥<span>1,280.50</span></div>
                <div style="font-size:12px;opacity:0.8;">累计佣金 ¥8,580.00 | 已提现 ¥7,299.50</div>
                <button class="withdraw" onclick="showPage('page-withdraw')">立即提现</button>
            </div>
            
            <div class="list-container">
                <div class="list-item" onclick="showPage('page-commission-detail')">
                    <h3>💵 佣金明细</h3>
                    <p>查看每笔佣金收入来源及详情</p>
                </div>
                
                <div style="font-size:14px;color:#333;margin:15px 0 10px;font-weight:600;">近期收入</div>
                
                <div class="order-card" style="background:linear-gradient(135deg,#43a047,#66bb6a);">
                    <div class="order-status">+ ¥48.00</div>
                    <div class="order-info">一级成员 李明 购买灵芝孢子粉</div>
                    <div class="order-info">2026-05-20 15:32</div>
                </div>
                
                <div class="order-card" style="background:linear-gradient(135deg,#43a047,#66bb6a);">
                    <div class="order-status">+ ¥12.80</div>
                    <div class="order-info">二级成员 赵敏 购买西洋参含片</div>
                    <div class="order-info">2026-05-19 10:15</div>
                </div>
                
                <div class="order-card" style="background:linear-gradient(135deg,#43a047,#66bb6a);">
                    <div class="order-status">+ ¥35.70</div>
                    <div class="order-info">一级成员 王芳 购买蜂王浆口服液</div>
                    <div class="order-info">2026-05-18 14:28</div>
                </div>
            </div>
        </div>
        
        <!-- 提现页面 -->
        <div id="page-withdraw" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="showPage('page-commission')">←</div>
                <h2>提现申请</h2>
                <div class="menu-btn"></div>
            </div>
            
            <div class="withdraw-card">
                <div class="label">可提现金额</div>
                <div class="amount">¥1,280.50</div>
            </div>
            
            <div class="withdraw-form">
                <label>提现金额</label>
                <div class="withdraw-input">
                    <span>¥</span>
                    <input type="number" value="1280" placeholder="请输入提现金额">
                </div>
            </div>
            
            <div class="withdraw-tips">
                ⚠️ 提现说明：<br>
                · 最低提现金额为100元<br>
                · 提现将在1-3个工作日内到账<br>
                · 银行卡信息需与实名认证一致
            </div>
            
            <div style="padding:15px;">
                <div class="form-item">
                    <label>开户行</label>
                    <input type="text" placeholder="请选择银行">
                </div>
                <div class="form-item">
                    <label>卡号</label>
                    <input type="text" placeholder="请输入银行卡号">
                </div>
                
                <button class="apply-btn" onclick="showToast('提现申请已提交')">确认提现</button>
            </div>
        </div>
        
        <!-- 佣金明细页 -->
        <div id="page-commission-detail" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="showPage('page-commission')">←</div>
                <h2>佣金明细</h2>
                <div class="menu-btn"></div>
            </div>
            
            <div class="list-container">
                <div class="order-card">
                    <div class="order-status">+ ¥48.00 <span style="font-size:11px;opacity:0.8;margin-left:10px;">一级佣金 15%</span></div>
                    <div class="order-info">订单号: DH20260520001</div>
                    <div class="order-info">商品: 灵芝孢子粉胶囊</div>
                    <div class="order-info">购买人: 李明</div>
                    <div class="order-info">时间: 2026-05-20 15:32:15</div>
                    <div style="font-size:11px;margin-top:5px;color:#c8e6c9;">已完成结算</div>
                </div>
                
                <div class="order-card">
                    <div class="order-status">+ ¥12.80 <span style="font-size:11px;opacity:0.8;margin-left:10px;">二级佣金 8%</span></div>
                    <div class="order-info">订单号: DH20260519002</div>
                    <div class="order-info">商品: 西洋参含片</div>
                    <div class="order-info">购买人: 赵敏</div>
                    <div class="order-info">时间: 2026-05-19 10:15:33</div>
                    <div style="font-size:11px;margin-top:5px;color:#c8e6c9;">已完成结算</div>
                </div>
                
                <div class="order-card">
                    <div class="order-status">+ ¥35.70 <span style="font-size:11px;opacity:0.8;margin-left:10px;">一级佣金 15%</span></div>
                    <div class="order-info">订单号: DH20260518003</div>
                    <div class="order-info">商品: 蜂王浆口服液</div>
                    <div class="order-info">购买人: 王芳</div>
                    <div class="order-info">时间: 2026-05-18 14:28:09</div>
                    <div style="font-size:11px;margin-top:5px;color:#ffb74d;">待结算</div>
                </div>
            </div>
        </div>
        
        <!-- 推三返一页 -->
        <div id="page-promo" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="showPage('page-home')">←</div>
                <h2>推三返一</h2>
                <div class="menu-btn"></div>
            </div>
            
            <div class="promo-banner">
                <h3>🎁 推三返一活动</h3>
                <p>推荐3位好友成功下单，即可获得 ¥100 返利</p>
            </div>
            
            <div class="promo-progress">
                <div class="progress-info">
                    <span>已推荐 2/3 人</span>
                    <span style="color:#4CAF50;">距返利只差1人!</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width:66%;"></div>
                    <div class="progress-text">2/3</div>
                </div>
            </div>
            
            <div class="promo-rules">
                <h4>📋 活动规则</h4>
                <div class="rule-item">
                    <div class="rule-num">1</div>
                    <div class="rule-text">分享您的专属推广链接或海报给好友</div>
                </div>
                <div class="rule-item">
                    <div class="rule-num">2</div>
                    <div class="rule-text">好友通过您的链接注册并完成首单购买</div>
                </div>
                <div class="rule-item">
                    <div class="rule-num">3</div>
                    <div class="rule-text">累计满3位好友完成购买，自动触发返利</div>
                </div>
                <div class="rule-item">
                    <div class="rule-num">4</div>
                    <div class="rule-text">返利金额将直接打入您的佣金账户</div>
                </div>
            </div>
            
            <div style="padding:15px;">
                <button class="apply-btn" onclick="showToast('生成分享海报成功')">📱 生成分享海报</button>
            </div>
        </div>
        
        <!-- 我的订单页 -->
        <div id="page-orders" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="showPage('page-home')">←</div>
                <h2>我的订单</h2>
                <div class="menu-btn"></div>
            </div>
            
            <div style="display:flex;background:#fff;padding:12px 0;border-bottom:1px solid #eee;">
                <div style="flex:1;text-align:center;color:#4CAF50;font-size:13px;cursor:pointer;">全部</div>
                <div style="flex:1;text-align:center;color:#666;font-size:13px;cursor:pointer;">待付款</div>
                <div style="flex:1;text-align:center;color:#666;font-size:13px;cursor:pointer;">待发货</div>
                <div style="flex:1;text-align:center;color:#666;font-size:13px;cursor:pointer;">待收货</div>
                <div style="flex:1;text-align:center;color:#666;font-size:13px;cursor:pointer;">已完成</div>
            </div>
            
            <div class="list-container">
                <div class="order-card" onclick="showPage('page-order-detail')">
                    <div class="order-status">待收货</div>
                    <div class="order-info">订单号: DH20260515001</div>
                    <div class="order-info">灵芝孢子粉胶囊 30粒装 x1</div>
                    <div class="order-info">实付: ¥298.00</div>
                </div>
                
                <div class="order-card" style="background:linear-gradient(135deg,#ff9800,#ffb74d);">
                    <div class="order-status">待发货</div>
                    <div class="order-info">订单号: DH20260518002</div>
                    <div class="order-info">西洋参含片 x2</div>
                    <div class="order-info">实付: ¥336.00</div>
                </div>
                
                <div class="order-card" style="background:linear-gradient(135deg,#66bb6a,#81c784);">
                    <div class="order-status">已完成</div>
                    <div class="order-info">订单号: DH20260510003</div>
                    <div class="order-info">蜂王浆口服液 x1</div>
                    <div class="order-info">实付: ¥238.00 | 获得佣金: ¥35.70</div>
                </div>
            </div>
        </div>
        
        <!-- 订单详情页 -->
        <div id="page-order-detail" class="page">
            <div class="page-header" style="background:#fff;color:#333;">
                <div class="back-btn" onclick="showPage('page-orders')">←</div>
                <h2>订单详情</h2>
                <div class="menu-btn"></div>
            </div>
            
            <div class="order-detail-header" style="background:linear-gradient(135deg,#4CAF50,#8BC34A);">
                <div class="order-status-text">🏃 配送中</div>
                <div class="order-status-desc">预计明天 14:00 前送达</div>
            </div>
            
            <div class="address-section">
                <div class="address-icon">📍</div>
                <div class="address-info">
                    <div class="address-name">张三 138****8888</div>
                    <div class="address-text">湖北省武汉市武昌区中南路街道中建广场A座1201室</div>
                </div>
            </div>
            
            <div class="order-goods">
                <div class="goods-item">
                    <div class="goods-img">💊</div>
                    <div class="goods-detail">
                        <div class="goods-title">灵芝孢子粉胶囊 30粒装</div>
                        <div class="goods-spec-text">数量: 1</div>
                    </div>
                    <div class="goods-price-num">¥298.00</div>
                </div>
            </div>
            
            <div class="order-summary">
                <div class="summary-row">
                    <span class="label">订单编号</span>
                    <span class="value">DH20260515001</span>
                </div>
                <div class="summary-row">
                    <span class="label">下单时间</span>
                    <span class="value">2026-05-15 10:32:15</span>
                </div>
                <div class="summary-row">
                    <span class="label">商品金额</span>
                    <span class="value">¥298.00</span>
                </div>
                <div class="summary-row">
<span class="label">运费</span>
                    <span class="value">免运费</span>
                </div>
                <div class="summary-row total">
                    <span class="label">实付金额</span>
                    <span class="value">¥298.00</span>
                </div>
            </div>
            
            <div style="padding:0 15px 80px;">
                <div class="list-item" onclick="showToast('查看物流信息')">
                    <h3>🚚 物流信息</h3>
                    <p>顺丰速运 SF1234567890 | 正在配送中</p>
                </div>
                
                <div style="display:flex;gap:10px;margin-top:15px;">
                    <button class="apply-btn" style="flex:1;background:#fff;color:#666;border:1px solid #ddd;" onclick="showPage('page-refund')">申请退款</button>
                    <button class="apply-btn" style="flex:1;" onclick="showToast('确认收货成功')">确认收货</button>
                </div>
            </div>
        </div>
        
        <!-- 退款申请页 -->
        <div id="page-refund" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="showPage('page-order-detail')">←</div>
                <h2>退款申请</h2>
                <div class="menu-btn"></div>
            </div>
            
            <div class="refund-reason">
                <label>退款原因</label>
                <textarea class="reason-textarea" placeholder="请输入退款原因...">