编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>生鲜商城 - 综合演示</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary: #E62E2E;
            --primary-light: #FF6B35;
            --bg: #F5F5F5;
            --text: #333;
            --text-light: #999;
            --border: #EEE;
            --white: #FFF;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--text);
            max-width: 375px;
            margin: 0 auto;
            min-height: 100vh;
        }
        
        /* ==================== 页面容器 ==================== */
        .page { display: none; }
        .page.active { display: block; }
        
        /* ==================== 底部导航 ==================== */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 375px;
            background: var(--white);
            display: flex;
            border-top: 1px solid var(--border);
            padding: 8px 0;
            padding-bottom: max(8px, env(safe-area-inset-bottom));
            z-index: 100;
        }
        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            color: var(--text-light);
            font-size: 11px;
            text-decoration: none;
            transition: color 0.2s;
        }
        .nav-item.active { color: var(--primary); }
        .nav-icon { font-size: 22px; margin-bottom: 4px; }
        
        /* ==================== 首页 ==================== */
        .header {
            background: var(--primary);
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .location { color: var(--white); font-size: 13px; display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
        .search-box {
            flex: 1;
            background: var(--white);
            border-radius: 18px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        .search-icon { color: var(--text-light); }
        .search-input { flex: 1; border: none; outline: none; font-size: 13px; background: transparent; }
        
        .banner {
            position: relative;
            height: 140px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            overflow: hidden;
        }
        .banner-content {
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: var(--white);
            text-align: center;
        }
        .banner-emoji { font-size: 50px; margin-bottom: 10px; }
        .banner-text { font-size: 16px; font-weight: 600; }
        .banner-dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
        }
        .banner-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
        }
        .banner-dot.active {
            background: var(--white);
            width: 18px;
            border-radius: 3px;
        }
        
        .nav-grid {
            background: var(--white);
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            padding: 15px 10px;
            gap: 10px;
        }
        .nav-item-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            color: var(--text);
        }
        .nav-icon-grid {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 6px;
        }
        .nav-label-grid { font-size: 11px; }
        
        .section { margin: 10px; }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .section-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        .section-more { font-size: 12px; color: var(--text-light); cursor: pointer; }
        
        .flash-sale {
            background: var(--white);
            border-radius: 12px;
            padding: 12px;
        }
        .flash-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .flash-title { display: flex; align-items: center; gap: 8px; }
        .flash-title-text { font-size: 15px; font-weight: 600; color: var(--primary); }
        .flash-countdown { display: flex; gap: 4px; }
        .countdown-num { background: var(--primary); color: var(--white); padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 600; }
        
        .flash-products { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
        .flash-product {
            min-width: 100px;
            cursor: pointer;
            text-decoration: none;
            color: var(--text);
        }
        .flash-product-image {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #FFE4DC 0%, #FFCEC4 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            margin-bottom: 8px;
        }
        .flash-price { color: var(--primary); font-size: 14px; font-weight: 600; }
        .flash-original { color: var(--text-light); font-size: 11px; text-decoration: line-through; }
        
        .activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .activity-card {
            background: var(--white);
            border-radius: 12px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            color: var(--text);
        }
        .activity-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
        }
        .activity-info { flex: 1; }
        .activity-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .activity-desc { font-size: 11px; color: var(--text-light); }
        
        .product-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 70px; }
        .product-card {
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
color: var(--text);
        }
        .product-image {
            width: 100%;
            height: 150px;
            background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 60px;
        }
        .product-info { padding: 10px; }
        .product-name {
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .product-bottom { display: flex; justify-content: space-between; align-items: center; }
        .product-price { color: var(--primary); font-size: 16px; font-weight: 600; }
        .product-price small { font-size: 11px; }
        .product-add {
            width: 26px;
            height: 26px;
            background: var(--primary);
            border-radius: 50%;
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* ==================== 分类页 ==================== */
        .page-header {
            background: var(--primary);
            color: var(--white);
            padding: 12px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .page-title { font-size: 17px; font-weight: 600; }
        .back-btn { font-size: 20px; cursor: pointer; }
        .page-header-center { font-size: 17px; font-weight: 600; flex: 1; text-align: center; }
        
        .category-container { display: flex; height: calc(100vh - 50px); }
        .category-left { width: 85px; background: var(--white); overflow-y: auto; flex-shrink: 0; }
        .category-item { padding: 15px 10px; text-align: center; font-size: 13px; color: var(--text); border-left: 3px solid transparent; border-bottom: 1px solid var(--border); cursor: pointer; }
        .category-item.active { background: var(--bg); color: var(--primary); border-left-color: var(--primary); }
        .category-right { flex: 1; padding: 15px; overflow-y: auto; padding-bottom: 70px; }
        .sub-category { margin-bottom: 20px; }
        .sub-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
        .sub-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
        .sub-item { text-align: center; cursor: pointer; color: var(--text); }
        .sub-item-icon { width: 55px; height: 55px; background: var(--white); border-radius: 8px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .sub-item-name { font-size: 12px; }
        
        /* ==================== 购物车 ==================== */
        .cart-item {
            background: var(--white);
            margin: 10px;
            border-radius: 8px;
            padding: 15px;
            display: flex;
            align-items: center;
        }
        .item-checkbox {
            width: 22px;
            height: 22px;
            border: 2px solid #DDD;
            border-radius: 50%;
            margin-right: 12px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .item-checkbox.checked { background: var(--primary); border-color: var(--primary); }
        .item-checkbox.checked::after { content: '✓'; color: white; font-size: 14px; }
        .item-image { width: 70px; height: 70px; background: #f0f0f0; border-radius: 6px; margin-right: 12px; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
        .item-info { flex: 1; min-width: 0; }
        .item-name { font-size: 14px; color: var(--text); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .item-spec { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
        .item-bottom { display: flex; align-items: center; justify-content: space-between; }
        .item-price { color: var(--primary); font-size: 16px; font-weight: 600; }
        .item-price small { font-size: 12px; }
        .item-count { display: flex; align-items: center; }
        .count-btn { width: 26px; height: 26px; background: #f5f5f5; border: none; border-radius: 4px; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .count-num { width: 32px; text-align: center; font-size: 14px; }
        
        .cart-footer {
            position: fixed;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 375px;
            background: var(--white);
            border-top: 1px solid var(--border);
            padding: 12px 15px;
            padding-bottom: max(12px, env(safe-area-inset-bottom));
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 90;
        }
        .footer-total { font-size: 12px; color: var(--text-light); }
        .total-price { font-size: 18px; color: var(--primary); font-weight: 600; }
        .checkout-btn { padding: 10px 25px; background: var(--primary); color: var(--white); border: none; border-radius: 20px; font-size: 14px; cursor: pointer; }
        
        /* ==================== 商品详情 ==================== */
        .product-detail-image { width: 100%; height: 300px; background: linear-gradient(135deg, #FFE4DC 0%, #FFCEC4 100%); display: flex; align-items: center; justify-content: center; font-size: 100px; }
        .product-detail-info { background: var(--white); padding: 15px; margin-bottom: 10px; }
        .detail-price { display: flex; align-items: baseline; margin-bottom: 10px; }
        .price-current { color: var(--primary); font-size: 24px; font-weight: 600; }
        .price-original { color: var(--text-light); font-size: 13px; text-decoration: line-through; margin-left: 10px; }
        .detail-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; line-height: 1.4; }
        .detail-desc { font-size: 13px; color: var(--text-light); line-height: 1.5; }
        .promo-bar { background: #FFF5F5; padding: 10px 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
        .promo-tag { background: var(--primary); color: var(--white); padding: 2px 6px; border-radius: 4px; font-size: 11px; }
        .promo-text { font-size: 12px; color: var(--primary); }
        .section-detail { background: var(--white); margin-bottom: 10px; }
        .section-header-detail { padding: 12px 15px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; }
        .section-content-detail { padding: 15px; }
        .spec-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; }
        .spec-label { color: var(--text-light); }
        .service-tags { display: flex; flex-wrap: wrap; gap: 10px; }
        .service-tag { display: flex; align-items: center; font-size: 12px; color: var(--text-light); }
        .service-tag::before { content: '✓'; color: var(--primary); margin-right: 4px; }
        .qty-selector { display: flex; align-items: center; gap: 15px; }
        .qty-btn { width: 28px; height: 28px; background: #f5f5f5; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
        .qty-value { font-size: 16px; min-width: 30px; text-align: center; }
        
        .detail-footer {
            position: fixed;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 375px;
            background: var(--white);
            border-top: 1px solid var(--border);
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: max(10px, env(safe-area-inset-bottom));
            z-index: 90;
        }
        .cart-icon-detail { position: relative; font-size: 24px; cursor: pointer; }
        .cart-badge-detail { position: absolute; top: -5px; right: -8px; background: var(--primary); color: var(--white); font-size: 10px; padding: 2px 5px; border-radius: 10px; }
        .add-btn-detail { flex: 1; padding: 12px; background: var(--primary); color: var(--white); border: none; border-radius: 20px; font-size: 15px; font-weight: 600; cursor: pointer; }
        .buy-btn-detail { flex: 1; padding: 12px; background: #FF6B35; color: var(--white); border: none; border-radius: 20px; font-size: 15px; font-weight: 600; cursor: pointer; }
        
        /* ==================== 个人中心 ==================== */
        .profile-header-bg {
            background: linear-gradient(135deg, var(--primary) 0%, #FF6B35 100%);
            padding: 30px 20px 40px;
            color: var(--white);
        }
        .user-info-profile { display: flex; align-items: center; gap: 15px; }
        .avatar-profile { width: 65px; height: 65px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .username-profile { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
        .user-level-profile { display: inline-block; background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: 10px; font-size: 11px; }
        .header-icons-profile { display: flex; gap: 15px; margin-top: 20px; }
        .header-icon-profile { flex: 1; text-align: center; cursor: pointer; }
        .header-icon-num { font-size: 18px; font-weight: 600; margin-bottom: 3px; }
        .header-icon-label-profile { font-size: 12px; opacity: 0.9; }
        .profile-content-main { margin-top: -20px; padding-bottom: 70px; }
        .order-section-profile { background: var(--white); border-radius: 12px; margin: 0 15px 10px; padding: 15px; }
        .order-header-profile { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .order-title-profile { font-size: 15px; font-weight: 600; }
        .order-more-profile { font-size: 13px; color: var(--text-light); cursor: pointer; }
        .order-tabs-profile { display: flex; justify-content: space-around; }
        .order-tab-profile { text-align: center; cursor: pointer; }
        .order-tab-icon-profile { font-size: 26px; margin-bottom: 6px; position: relative; }
        .tab-badge-profile { position: absolute; top: -3px; right: -8px; background: var(--primary); color: var(--white); font-size: 10px; padding: 1px 5px; border-radius: 10px; min-width: 16px; }
        .order-tab-label-profile { font-size: 12px; color: var(--text); }
        .menu-section-profile { background: var(--white); border-radius: 12px; margin: 0 15px 10px; }
        .menu-item-profile { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid var(--border); cursor: pointer; }
        .menu-item-profile:last-child { border-bottom: none; }
        .menu-icon-profile { width: 36px; height: 36px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; }
        .menu-text-profile { flex: 1; font-size: 14px; color: var(--text); }
        .menu-arrow-profile { color: var(--text-light); font-size: 14px; }
        
        /* ==================== 订单列表 ==================== */
        .tabs-order { display: flex; background: var(--white); border-bottom: 1px solid var(--border); }
        .tab-order { flex: 1; padding: 12px 0; text-align: center; font-size: 14px; color: var(--text-light); position: relative; cursor: pointer; }
        .tab-order.active { color: var(--primary); font-weight: 600; }
        .tab-order.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: var(--primary); border-radius: 2px; }
        
        .order-card { background: var(--white); margin: 10px; border-radius: 8px; overflow: hidden; }
        .order-header-row { display: flex; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid var(--border); font-size: 13px; }
        .order-id-row { color: var(--text-light); }
        .order-status-row { color: var(--primary); }
        .order-items-row { padding: 12px 15px; }
        .order-item-row { display: flex; margin-bottom: 12px; cursor: pointer; }
        .order-item-row:last-child { margin-bottom: 0; }
        .order-item-image { width: 70px; height: 70px; background: #f5f5f5; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 30px; margin-right: 12px; flex-shrink: 0; }
        .order-item-info { flex: 1; }
        .order-item-name { font-size: 14px; margin-bottom: 5px; line-height: 1.3; }
        .order-item-spec { font-size: 12px; color: var(--text-light); margin-bottom: 5px; }
        .order-item-bottom { display: flex; justify-content: space-between; align-items: center; }
        .order-item-price { color: var(--primary); font-weight: 600; }
        .order-item-qty { font-size: 12px; color: var(--text-light); }
        .order-footer-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
        .order-total-row { font-size: 14px; }
        .order-total-price-row { color: var(--primary); font-weight: 600; }
        .order-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
        .action-btn { padding: 6px 14px; border-radius: 15px; font-size: 13px; cursor: pointer; border: 1px solid var(--border); background: var(--white); }
        .action-btn.primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
        .action-btn.rider { background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%); color: white; border: none; display: flex; align-items: center; gap: 4px; }
        
        /* ==================== 订单追踪 ==================== */
        .status-card-track { background: linear-gradient(135deg, var(--primary) 0%, #FF6B35 100%); color: var(--white); padding: 25px 20px; text-align: center; }
        .status-icon-track { font-size: 50px; margin-bottom: 10px; }
        .status-text-track { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
        .status-desc-track { font-size: 13px; opacity: 0.9; }
        
        .rider-section-track { background: var(--white); padding: 15px; margin-bottom: 10px; }
        .rider-header-track { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .rider-title-track { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
        .rider-status-badge { background: #FFF0F0; color: var(--primary); padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: normal; }
        .rider-main-track { display: flex; align-items: center; }
        .rider-avatar-track { width: 55px; height: 55px; background: linear-gradient(135deg, #FFE4DC 0%, #FFCEC4 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-right: 12px; }
        .rider-info-track { flex: 1; }
        .rider-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
        .rider-name-track { font-size: 15px; font-weight: 600; }
        .rider-stars { display: flex; gap: 2px; }
        .star { color: #FFB800; font-size: 12px; }
        .rider-delivery-info { font-size: 12px; color: var(--text-light); }
        .rider-distance { color: var(--primary); font-weight: 600; }
        .rider-actions-track { display: flex; gap: 12px; }
        .rider-btn-track { width: 48px; height: 48px; border-radius: 50%; border: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .rider-btn-call { background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%); color: white; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); }
        .rider-btn-msg { background: linear-gradient(135deg, #2196F3 0%, #1E88E5 100%); color: white; box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3); }
        
        .delivery-info-track { background: var(--white); padding: 15px; margin-bottom: 10px; }
        .info-row-track { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; }
        .info-label-track { color: var(--text-light); }
        
        .map-preview-track { width: 100%; height: 120px; background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); display: flex; align-items: center; justify-content: center; font-size: 40px; margin-bottom: 10px; }
        
        .timeline-section-track { background: var(--white); padding: 15px; margin-bottom: 10px; }
        .timeline-title-track { font-size: 14px; font-weight: 600; margin-bottom: 15px; }
        .timeline { position: relative; padding-left: 25px; }
        .timeline::before { content: ''; position: absolute; left: 6px; top: 5px; bottom: 5px; width: 2px; background: #E0E0E0; }
        .timeline-item { position: relative; padding-bottom: 20px; }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-dot { position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #E0E0E0; border: 2px solid var(--white); }
        .timeline-item.active .timeline-dot { background: var(--primary); }
        .timeline-content { font-size: 13px; line-height: 1.5; }
        .timeline-item.active .timeline-content { color: var(--primary); }
        .timeline-time { font-size: 11px; color: var(--text-light); margin-top: 3px; }
        
        .footer-btn-track { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); width: 375px; background: var(--white); border-top: 1px solid var(--border); padding: 12px 15px; display: flex; gap: 10px; padding-bottom: max(12px, env(safe-area-inset-bottom)); z-index: 90; }
        .btn { flex: 1; padding: 12px; border-radius: 20px; font-size: 14px; cursor: pointer; border: 1px solid var(--border); background: var(--white); }
        .btn.primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
        
        /* 联系骑手悬浮按钮 */
        .contact-rider-float { position: fixed; right: 15px; bottom: 100px; z-index: 99; }
        .contact-rider-btn { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, #FF6B35 100%); border: none; box-shadow: 0 4px 16px rgba(230, 46, 46, 0.4); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; }
        .contact-rider-btn .icon { font-size: 22px; }
        .contact-rider-btn .label { font-size: 8px; margin-top: 2px; }
        
        /* 联系骑手弹窗 */
        .contact-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; justify-content: flex-end; align-items: flex-end; }
        .contact-modal.show { display: flex; }
        .contact-sheet { background: var(--white); width: 375px; border-radius: 16px 16px 0 0; padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); animation: slideUp 0.3s ease; }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .contact-sheet-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
        .contact-sheet-avatar { width: 50px; height: 50px; background: linear-gradient(135deg, #FFE4DC 0%, #FFCEC4 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; }
        .contact-sheet-info { flex: 1; }
        .contact-sheet-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
        .contact-sheet-sub { font-size: 12px; color: var(--text-light); }
        .contact-sheet-title { font-size: 15px; font-weight: 600; margin-bottom: 15px; }
        .contact-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
        .contact-option { display: flex; align-items: center; padding: 15px; background: #F8F8F8; border-radius: 12px; cursor: pointer; }
        .contact-option-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; }
        .contact-option-icon.call { background: #E8F5E9; }
        .contact-option-icon.msg { background: #E3F2FD; }
        .contact-option-icon.safe { background: #FFF8E1; }
        .contact-option-text { flex: 1; }
        .contact-option-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
        .contact-option-desc { font-size: 11px; color: var(--text-light); }
        .contact-close { width: 100%; padding: 14px; background: #F5F5F5; border: none; border-radius: 25px; font-size: 15px; cursor: pointer; }
        
        /* ==================== 确认订单 ==================== */
        .address-section-confirm { background: var(--white); padding: 15px; display: flex; align-items: center; margin-bottom: 10px; cursor: pointer; }
        .address-icon-confirm { font-size: 28px; margin-right: 12px; }
        .address-info-confirm { flex: 1; }
        .address-name-confirm { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
        .address-name-confirm .phone-confirm { margin-left: 15px; font-weight: normal; }
        .address-detail-confirm { font-size: 13px; color: var(--text-light); }
        .address-arrow-confirm { font-size: 18px; color: var(--text-light); }
        
        .delivery-time-confirm { background: var(--white); padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .delivery-label-confirm { font-size: 14px; }
        .delivery-value-confirm { font-size: 13px; color: var(--primary); }
        
        .store-section-confirm { background: var(--white); margin-bottom: 10px; }
        .store-info-confirm { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--border); }
        .store-icon-confirm { font-size: 20px; margin-right: 10px; }
        .store-name-confirm { font-size: 14px; }
        .remark-input-confirm { width: 100%; border: none; padding: 12px 15px; font-size: 13px; color: var(--text-light); background: transparent; }
        .remark-input-confirm::placeholder { color: #CCC; }
        
        .coupon-section-confirm { background: var(--white); padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; cursor: pointer; }
        .coupon-label-confirm { font-size: 14px; }
        .coupon-value-confirm { font-size: 13px; color: var(--primary); }
        
        .summary-section-confirm { background: var(--white); padding: 12px 15px; margin-bottom: 10px; }
        .summary-row-confirm { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
        .summary-row-confirm:last-child { margin-bottom: 0; }
        .summary-label-confirm { color: var(--text-light); }
        .summary-row-total { font-size: 15px; font-weight: 600; padding-top: 8px; border-top: 1px solid var(--border); }
        .summary-row-total .summary-value-confirm { color: var(--primary); font-size: 18px; }
        
        .pay-section-confirm { background: var(--white); padding: 12px 15px; margin-bottom: 10px; }
        .pay-header-confirm { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
        .pay-method-confirm { display: flex; align-items: center; padding: 10px 0; cursor: pointer; }
        .pay-icon-confirm { font-size: 22px; margin-right: 12px; }
        .pay-name-confirm { flex: 1; font-size: 14px; }
        .pay-check-confirm { width: 20px; height: 20px; border: 2px solid #DDD; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .pay-check-confirm.selected { border-color: var(--primary); background: var(--primary); }
        .pay-check-confirm.selected::after { content: '✓'; color: white; font-size: 12px; }
        
        .submit-footer-confirm { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); width: 375px; background: var(--white); border-top: 1px solid var(--border); padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; padding-bottom: max(12px, env(safe-area-inset-bottom)); z-index: 90; }
        .total-price-confirm { font-size: 18px; color: var(--primary); font-weight: 600; }
        .submit-btn-confirm { padding: 12px 35px; background: var(--primary); color: var(--white); border: none; border-radius: 20px; font-size: 15px; font-weight: 600; cursor: pointer; }
        
        /* ==================== 地址管理 ==================== */
        .address-list-container { padding: 10px; padding-bottom: 70px; }
        .address-card-manage { background: var(--white); border-radius: 8px; padding: 15px; margin-bottom: 10px; }
        .address-main-manage { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
        .address-info-manage { flex: 1; }
        .address-name-manage { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
        .address-tag { display: inline-block; background: var(--primary); color: var(--white); padding: 1px 6px; border-radius: 4px; font-size: 10px; margin-right: 8px; }
        .address-tag.default { background: #FF9500; }
        .address-detail-manage { font-size: 13px; color: var(--text-light); line-height: 1.5; }
        .address-actions-manage { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); }
        .select-btn { display: flex; align-items: center; font-size: 13px; color: var(--text-light); cursor: pointer; }
        .radio { width: 18px; height: 18px; border: 2px solid #DDD; border-radius: 50%; margin-right: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .radio.selected { border-color: var(--primary); background: var(--primary); }
        .radio.selected::after { content: '✓'; color: white; font-size: 11px; }
        .action-btns-manage { display: flex; gap: 15px; }
        .edit-btn, .delete-btn { font-size: 13px; color: var(--text-light); cursor: pointer; display: flex; align-items: center; gap: 4px; }
        .add-footer-manage { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); width: 375px; background: var(--white); border-top: 1px solid var(--border); padding: 12px 15px; padding-bottom: max(12px, env(safe-area-inset-bottom)); z-index: 90; }
        .add-btn-manage { width: 100%; padding: 14px; background: var(--primary); color: var(--white); border: none; border-radius: 25px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
        
        /* ==================== 支付成功 ==================== */
        .success-header-pay { background: linear-gradient(135deg, var(--primary) 0%, #FF6B35 100%); color: var(--white); padding: 40px 20px; text-align: center; }
        .success-icon-pay { font-size: 60px; margin-bottom: 15px; }
        .success-title-pay { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
        .success-amount-pay { font-size: 32px; font-weight: 700; }
        .success-amount-pay small { font-size: 16px; }
        
        .order-info-pay { background: var(--white); margin: 15px; border-radius: 12px; padding: 15px; }
        .info-row-pay { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
        .info-label-pay { color: var(--text-light); }
        
        .delivery-notice-pay { background: var(--white); margin: 0 15px 15px; border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 12px; }
        .notice-icon-pay { width: 45px; height: 45px; background: #E8F5E9; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
        .notice-content-pay { flex: 1; }
        .notice-title-pay { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .notice-desc-pay { font-size: 12px; color: var(--text-light); }
        
        .action-buttons-pay { padding: 20px 15px; display: flex; flex-direction: column; gap: 12px; }
        .btn-primary-pay { width: 100%; padding: 14px; background: var(--primary); color: var(--white); border: none; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; }
        .btn-secondary-pay { display: flex; gap: 12px; }
        .btn-secondary-pay button { flex: 1; padding: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 25px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
        .btn-secondary-pay .contact-btn-pay { color: #4CAF50; border-color: #4CAF50; }
        
        /* ==================== 演示菜单 ==================== */
        .demo-menu {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1000;
            display: none;
        }
        .demo-btn {
            padding: 8px 12px;
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            margin: 4px;
        }
        .demo-btn:hover { background: var(--primary); }
    </style>
</head>
<body>
    <!-- 演示菜单 -->
    <div class="demo-menu">
        <button class="demo-btn" onclick="showPage('home')">首页</button>
        <button class="demo-btn" onclick="showPage('category')">分类</button>
        <button class="demo-btn" onclick="showPage('cart')">购物车</button>
        <button class="demo-btn" onclick="showPage('profile')">我的</button>
        <button class="demo-btn" onclick="showPage('product')">商品详情</button>
        <button class="demo-btn" onclick="showPage('orders')">订单列表</button>
        <button class="demo-btn" onclick="showPage('tracking')">订单追踪</button>
        <button class="demo-btn" onclick="showPage('confirm')">确认订单</button>
        <button class="demo-btn" onclick="showPage('address')">地址管理</button>
        <button class="demo-btn" onclick="showPage('paySuccess')">支付成功</button>
    </div>

    <!-- ==================== 首页 ==================== -->
    <div id="page-home" class="page active">
        <div class="header">
            <div class="location">
                <span>📍</span>
                <span>南山区</span>
            </div>
            <div class="search-box" onclick="showPage('product')">
                <span class="search-icon">🔍</span>
                <input type="text" class="search-input" placeholder="搜索新鲜好物" readonly>
            </div>
        </div>
        
        <div class="banner">
            <div class="banner-content">
                <div class="banner-emoji">🥬</div>
                <div class="banner-text">新鲜有机蔬菜 限时特惠</div>
            </div>
            <div class="banner-dots">
                <div class="banner-dot active"></div>
                <div class="banner-dot"></div>
                <div class="banner-dot"></div>
            </div>
        </div>
        
        <div class="nav-grid">
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #FFF3E6;">🥬</div>
                <span class="nav-label-grid">蔬菜</span>
            </div>
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #FFEBE6;">🍎</div>
                <span class="nav-label-grid">水果</span>
            </div>
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #FFE6E6;">🥩</div>
                <span class="nav-label-grid">肉类</span>
            </div>
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #E6F2FF;">🦐</div>
                <span class="nav-label-grid">海鲜</span>
            </div>
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #FFF9E6;">🥚</div>
                <span class="nav-label-grid">禽蛋</span>
            </div>
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #F5E6FF;">🥛</div>
                <span class="nav-label-grid">乳品</span>
            </div>
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #E6FFE6;">🌾</div>
                <span class="nav-label-grid">粮油</span>
            </div>
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #FFE6F2;">🧂</div>
                <span class="nav-label-grid">调味</span>
            </div>
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #E6FFFF;">🧃</div>
                <span class="nav-label-grid">饮品</span>
            </div>
            <div class="nav-item-grid" onclick="showPage('category')">
                <div class="nav-icon-grid" style="background: #F2F2F2;">🍪</div>
                <span class="nav-label-grid">零食</span>
            </div>
        </div>
        
        <div class="section">
            <div class="flash-sale">
                <div class="flash-header">
                    <div class="flash-title">
                        <span>⏰</span>
                        <span class="flash-title-text">限时抢购</span>
                    </div>
                    <div class="flash-countdown">
                        <span class="countdown-num">02</span>
                        <span style="color: var(--primary);">:</span>
                        <span class="countdown-num">35</span>
                        <span style="color: var(--primary);">:</span>
                        <span class="countdown-num">48</span>
                    </div>
                </div>
                <div class="flash-products">
                    <div class="flash-product" onclick="showPage('product')">
                        <div class="flash-product-image">🥬</div>
                        <div class="flash-price">¥2.99</div>
                        <div class="flash-original">¥4.99</div>
                    </div>
                    <div class="flash-product" onclick="showPage('product')">
                        <div class="flash-product-image">🍅</div>
                        <div class="flash-price">¥3.99</div>
                        <div class="flash-original">¥5.99</div>
                    </div>
                    <div class="flash-product" onclick="showPage('product')">
                        <div class="flash-product-image">🥕</div>
                        <div class="flash-price">¥1.99</div>
                        <div class="flash-original">¥3.49</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="activity-grid">
                <div class="activity-card">
                    <div class="activity-icon" style="background: linear-gradient(135deg, #FF6B6B, #EE5A5A);">🎉</div>
                    <div class="activity-info">
                        <div class="activity-name">新人专享</div>
                        <div class="activity-desc">首单满20减5</div>
                    </div>
                </div>
                <div class="activity-card">
                    <div class="activity-icon" style="background: linear-gradient(135deg, #4ECDC4, #44A39D);">🏆</div>
                    <div class="activity-info">
                        <div class="activity-name">品质精选</div>
                        <div class="activity-desc">优选好物</div>
                    </div>
                </div>
                <div class="activity-card">
                    <div class="activity-icon" style="background: linear-gradient(135deg, #FFB347, #FFA726);">🎊</div>
                    <div class="activity-info">
                        <div class="activity-name">节日特惠</div>
                        <div class="activity-desc">节日狂欢</div>
                    </div>
                </div>
                <div class="activity-card">
                    <div class="activity-icon" style="background: linear-gradient(135deg, #A8E6CF, #88D4AB);">🌿</div>
                    <div class="activity-info">
                        <div class="activity-name">有机健康</div>
                        <div class="activity-desc">有机蔬菜</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <div class="section-header">
                <div class="section-title">
                    <span>🔥</span>
                    <span>为你推荐</span>
                </div>
                <div class="section-more">查看更多 ></div>
            </div>
            <div class="product-list">
                <div class="product-card" onclick="showPage('product')">
                    <div class="product-image">🥬</div>
                    <div class="product-info">
                        <div class="product-name">新鲜有机大白菜 约500g 产地直发</div>
                        <div class="product-bottom">
                            <div class="product-price"><small>¥</small>2.99</div>
                            <div class="product-add">+</div>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('product')">
                    <div class="product-image">🍅</div>
                    <div class="product-info">
                        <div class="product-name">新鲜番茄 约400g 沙瓤多汁</div>
                        <div class="product-bottom">
                            <div class="product-price"><small>¥</small>3.99</div>
                            <div class="product-add">+</div>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('product')">
                    <div class="product-image">🥕</div>
                    <div class="product-info">
                        <div class="product-name">新鲜胡萝卜 约300g</div>
                        <div class="product-bottom">
                            <div class="product-price"><small>¥</small>1.99</div>
                            <div class="product-add">+</div>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="showPage('product')">
                    <div class="product-image">🍎</div>
                    <div class="product-info">
                        <div class="product-name">红富士苹果 约500g 脆甜多汁</div>
                        <div class="product-bottom">
                            <div class="product-price"><small>¥</small>5.99</div>
                            <div class="product-add">+</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <nav class="bottom-nav">
            <div class="nav-item active" onclick="showPage('home')">
                <div class="nav-icon">🏠</div>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('category')">
                <div class="nav-icon">📦</div>
                <span>分类</span>
            </div>
            <div class="nav-item" onclick="showPage('cart')">
                <div class="nav-icon">🛒</div>
                <span>购物车</span>
            </div>
            <div class="nav-item" onclick="showPage('profile')">
                <div class="nav-icon">👤</div>
                <span>我的</span>
            </div>
        </nav>
    </div>

    <!-- ==================== 分类页 ==================== -->
    <div id="page-category" class="page">
        <div class="page-header">
            <div class="page-title">分类</div>
        </div>
        
        <div class="category-container">
            <div class="category-left">
                <div class="category-item active">蔬菜</div>
                <div class="category-item">水果</div>
                <div class="category-item">肉类</div>
                <div class="category-item">海鲜</div>
                <div class="category-item">禽蛋</div>
                <div class="category-item">乳品</div>
                <div class="category-item">粮油</div>
                <div class="category-item">调味</div>
            </div>
            
            <div class="category-right">
                <div class="sub-category">
                    <div class="sub-title">时令蔬菜</div>
                    <div class="sub-list">
                        <div class="sub-item" onclick="showPage('product')">
                            <div class="sub-item-icon">🥬</div>
                            <div class="sub-item-name">叶菜类</div>
                        </div>
                        <div class="sub-item" onclick="showPage('product')">
                            <div class="sub-item-icon">🥕</div>
                            <div class="sub-item-name">根茎类</div>
                        </div>
                        <div class="sub-item" onclick="showPage('product')">
                            <div class="sub-item-icon">🍅</div>
                            <div class="sub-item-name">茄果类</div>
                        </div>
                        <div class="sub-item" onclick="showPage('product')">
                            <div class="sub-item-icon">🥦</div>
                            <div class="sub-item-name">甘蓝类</div>
                        </div>
                        <div class="sub-item" onclick="showPage('product')">
                            <div class="sub-item-icon">🌽</div>
                            <div class="sub-item-name">玉米</div>
                        </div>
                        <div class="sub-item" onclick="showPage('product')">
                            <div class="sub-item-icon">🍄</div>
                            <div class="sub-item-name">菌菇类</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <nav class="bottom-nav">
            <div class="nav-item" onclick="showPage('home')">
                <div class="nav-icon">🏠</div>
                <span>首页</span>
            </div>
            <div class="nav-item active" onclick="showPage('category')">
                <div class="nav-icon">📦</div>
                <span>分类</span>
            </div>
            <div class="nav-item" onclick="showPage('cart')">
                <div class="nav-icon">🛒</div>
                <span>购物车</span>
            </div>
            <div class="nav-item" onclick="showPage('profile')">
                <div class="nav-icon">👤</div>
                <span>我的</span>
            </div>
        </nav>
    </div>

    <!-- ==================== 购物车 ==================== -->
    <div id="page-cart" class="page">
        <div class="page-header">
            <div class="page-title">购物车</div>
            <div style="font-size: 14px; cursor: pointer;">编辑</div>
        </div>
        
        <div class="cart-item">
            <div class="item-checkbox checked" onclick="toggleCheck(this)"></div>
            <div class="item-image">🥬</div>
            <div class="item-info">
                <div class="item-name">新鲜有机大白菜 约500g</div>
                <div class="item-spec">重量: 500g</div>
                <div class="item-bottom">
                    <div class="item-price"><small>¥</small>2.99</div>
                    <div class="item-count">
                        <div class="count-btn">-</div>
                        <div class="count-num">2</div>
                        <div class="count-btn">+</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="cart-item">
            <div class="item-checkbox checked" onclick="toggleCheck(this)"></div>
            <div class="item-image">🍅</div>
            <div class="item-info">
                <div class="item-name">新鲜番茄 约400g</div>
                <div class="item-spec">重量: 400g</div>
                <div class="item-bottom">
                    <div class="item-price"><small>¥</small>3.99</div>
                    <div class="item-count">
                        <div class="count-btn">-</div>
                        <div class="count-num">1</div>
                        <div class="count-btn">+</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="cart-footer">
            <div style="display: flex; align-items: center;">
                <div class="item-checkbox checked" onclick="toggleCheck(this)"></div>
                <span style="margin-left: 8px; font-size: 14px;">全选</span>
            </div>
            <div>
                <div class="footer-total">合计</div>
                <div class="total-price"><small>¥</small>9.97</div>
            </div>
            <button class="checkout-btn" onclick="showPage('confirm')">去结算</button>
        </div>
        
        <nav class="bottom-nav">
            <div class="nav-item" onclick="showPage('home')">
                <div class="nav-icon">🏠</div>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('category')">
                <div class="nav-icon">📦</div>
                <span>分类</span>
            </div>
            <div class="nav-item active" onclick="showPage('cart')">
                <div class="nav-icon">🛒</div>
                <span>购物车</span>
            </div>
            <div class="nav-item" onclick="showPage('profile')">
                <div class="nav-icon">👤</div>
                <span>我的</span>
            </div>
        </nav>
    </div>

    <!-- ==================== 个人中心 ==================== -->
    <div id="page-profile" class="page">
        <div class="profile-header-bg">
            <div class="user-info-profile">
                <div class="avatar-profile">👤</div>
                <div class="user-detail">
                    <div class="username-profile">张三</div>
                    <div class="user-level-profile">VIP会员</div>
                </div>
            </div>
            <div class="header-icons-profile">
                <div class="header-icon-profile" onclick="showPage('orders')">
                    <div class="header-icon-num">5</div>
                    <div class="header-icon-label-profile">优惠券</div>
                </div>
                <div class="header-icon-profile" onclick="showPage('orders')">
                    <div class="header-icon-num">0</div>
                    <div class="header-icon-label-profile">积分</div>
                </div>
            </div>
        </div>
        
        <div class="profile-content-main">
            <div class="order-section-profile">
                <div class="order-header-profile">
                    <div class="order-title-profile">我的订单</div>
                    <div class="order-more-profile" onclick="showPage('orders')">全部订单 ></div>
                </div>
                <div class="order-tabs-profile">
                    <div class="order-tab-profile" onclick="showPage('orders')">
                        <div class="order-tab-icon-profile">
                            ⏰
                            <div class="tab-badge-profile">2</div>
                        </div>
                        <div class="order-tab-label-profile">待付款</div>
                    </div>
                    <div class="order-tab-profile" onclick="showPage('orders')">
                        <div class="order-tab-icon-profile">🚚</div>
                        <div class="order-tab-label-profile">待收货</div>
                    </div>
                    <div class="order-tab-profile" onclick="showPage('orders')">
                        <div class="order-tab-icon-profile">⭐</div>
                        <div class="order-tab-label-profile">待评价</div>
                    </div>
                    <div class="order-tab-profile" onclick="showPage('orders')">
                        <div class="order-tab-icon-profile">🔄</div>
                        <div class="order-tab-label-profile">退款/售后</div>
                    </div>
                </div>
            </div>
            
            <div class="menu-section-profile">
                <div class="menu-item-profile" onclick="showPage('address')">
                    <div class="menu-icon-profile">📍</div>
                    <div class="menu-text-profile">收货地址</div>
                    <div class="menu-arrow-profile">></div>
                </div>
                <div class="menu-item-profile">
                    <div class="menu-icon-profile">🎫</div>
                    <div class="menu-text-profile">优惠券</div>
                    <div class="menu-arrow-profile">></div>
                </div>
                <div class="menu-item-profile">
                    <div class="menu-icon-profile">💰</div>
                    <div class="menu-text-profile">我的钱包</div>
                    <div class="menu-arrow-profile">></div>
                </div>
                <div class="menu-item-profile">
                    <div class="menu-icon-profile">📞</div>
                    <div class="menu-text-profile">客服中心</div>
                    <div class="menu-arrow-profile">></div>
                </div>
                <div class="menu-item-profile">
                    <div class="menu-icon-profile">⚙️</div>
                    <div class="menu-text-profile">设置</div>
                    <div class="menu-arrow-profile">></div>
                </div>
            </div>
        </div>
        
        <nav class="bottom-nav">
            <div class="nav-item" onclick="showPage('home')">
                <div class="nav-icon">🏠</div>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('category')">
                <div class="nav-icon">📦</div>
                <span>分类</span>
            </div>
            <div class="nav-item" onclick="showPage('cart')">
                <div class="nav-icon">🛒</div>
                <span>购物车</span>
            </div>
            <div class="nav-item active" onclick="showPage('profile')">
                <div class="nav-icon">👤</div>
                <span>我的</span>
            </div>
        </nav>
    </div>

    <!-- ==================== 商品详情 ==================== -->
    <div id="page-product" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div style="flex: 1; display: flex; justify-content: center; gap: 25px;">
                <span style="font-size: 15px; color: var(--primary); font-weight: 600;">商品</span>
                <span style="font-size: 15px; color: var(--text-light);">评价</span>
                <span style="font-size: 15px; color: var(--text-light);">详情</span>
            </div>
            <span style="font-size: 20px;">↗</span>
        </div>
        
        <div class="product-detail-image">🥬</div>
        
        <div class="product-detail-info">
            <div class="detail-price">
                <div class="price-current"><small>¥</small>2.99</div>
                <div class="price-original">¥4.99</div>
            </div>
            <div class="detail-name">新鲜有机大白菜 约500g 产地直发 新鲜蔬菜</div>
            <div class="detail-desc">精选优质有机大白菜，新鲜采摘，冷链配送，保证品质</div>
        </div>
        
        <div class="promo-bar">
            <span class="promo-tag">特惠</span>
            <span class="promo-text">满29减5 | 限时抢购中</span>
        </div>
        
        <div class="section-detail">
            <div class="section-header-detail">规格选择</div>
            <div class="section-content-detail">
                <div class="spec-row">
                    <span class="spec-label">重量</span>
                    <span>500g</span>
                </div>
                <div class="spec-row">
                    <span class="spec-label">数量</span>
                    <div class="qty-selector">
                        <div class="qty-btn">-</div>
                        <span class="qty-value">1</span>
                        <div class="qty-btn">+</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section-detail">
            <div class="section-header-detail">服务说明</div>
            <div class="section-content-detail">
                <div class="service-tags">
                    <span class="service-tag">48小时退换</span>
                    <span class="service-tag">坏果包赔</span>
                    <span class="service-tag">冷链配送</span>
                    <span class="service-tag">次日达</span>
                </div>
            </div>
        </div>
        
        <div class="detail-footer">
            <div class="cart-icon-detail" onclick="showPage('cart')">
                🛒
                <div class="cart-badge-detail">3</div>
            </div>
            <button class="add-btn-detail" onclick="alert('已加入购物车')">加入购物车</button>
            <button class="buy-btn-detail" onclick="showPage('confirm')">立即购买</button>
        </div>
    </div>

    <!-- ==================== 订单列表 ==================== -->
    <div id="page-orders" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('profile')">←</div>
            <div class="page-header-center">我的订单</div>
            <div style="width: 20px;"></div>
        </div>
        
        <div class="tabs-order">
            <div class="tab-order active">全部</div>
            <div class="tab-order">待付款</div>
            <div class="tab-order">待发货</div>
            <div class="tab-order">待收货</div>
            <div class="tab-order">已完成</div>
        </div>
        
        <div style="padding-bottom: 70px;">
            <div class="order-card">
                <div class="order-header-row">
                    <span class="order-id-row">订单号: 202401150001</span>
                    <span class="order-status-row">配送中</span>
                </div>
                <div class="order-items-row">
                    <div class="order-item-row" onclick="showPage('tracking')">
                        <div class="order-item-image">🥬</div>
                        <div class="order-item-info">
                            <div class="order-item-name">新鲜有机大白菜 约500g</div>
                            <div class="order-item-spec">重量: 500g</div>
                            <div class="order-item-bottom">
                                <div class="order-item-price">¥2.99</div>
                                <div class="order-item-qty">x2</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-footer-row">
                    <div class="order-total-row">
                        共3件商品 实付: <span class="order-total-price-row">¥9.97</span>
                    </div>
                    <div class="order-actions-row">
                        <button class="action-btn rider" onclick="showContactSheet()">
                            <span>📞</span>
                            <span>联系骑手</span>
                        </button>
                        <button class="action-btn" onclick="showPage('tracking')">查看物流</button>
                        <button class="action-btn primary" onclick="alert('已确认收货')">确认收货</button>
                    </div>
                </div>
            </div>
            
            <div class="order-card">
                <div class="order-header-row">
                    <span class="order-id-row">订单号: 202401140002</span>
                    <span class="order-status-row">待付款</span>
                </div>
                <div class="order-items-row">
                    <div class="order-item-row">
                        <div class="order-item-image">🥕</div>
                        <div class="order-item-info">
                            <div class="order-item-name">新鲜胡萝卜 约300g</div>
                            <div class="order-item-spec">重量: 300g</div>
                            <div class="order-item-bottom">
                                <div class="order-item-price">¥1.99</div>
                                <div class="order-item-qty">x1</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-footer-row">
                    <div class="order-total-row">
                        共1件商品 实付: <span class="order-total-price-row">¥1.99</span>
                    </div>
                    <div class="order-actions-row">
                        <button class="action-btn">取消订单</button>
                        <button class="action-btn primary" onclick="showPage('paySuccess')">去付款</button>
                    </div>
                </div>
            </div>
        </div>
        
        <nav class="bottom-nav">
            <div class="nav-item" onclick="showPage('home')">
                <div class="nav-icon">🏠</div>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="showPage('category')">
                <div class="nav-icon">📦</div>
                <span>分类</span>
            </div>
            <div class="nav-item" onclick="showPage('cart')">
                <div class="nav-icon">🛒</div>
                <span>购物车</span>
            </div>
            <div class="nav-item" onclick="showPage('profile')">
                <div class="nav-icon">👤</div>
                <span>我的</span>
            </div>
        </nav>
    </div>

    <!-- ==================== 订单追踪 ==================== -->
    <div id="page-tracking" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('orders')">←</div>
            <div class="page-header-center">订单追踪</div>
            <div style="width: 20px;"></div>
        </div>
        
        <div class="status-card-track">
            <div class="status-icon-track">🛵</div>
            <div class="status-text-track">骑手正在配送中</div>
            <div class="status-desc-track">距离您还有约1.2公里，预计12分钟送达</div>
        </div>
        
        <div class="rider-section-track">
            <div class="rider-header-track">
                <div class="rider-title-track">
                    <span>🏍️</span>
                    配送骑手
                    <span class="rider-status-badge">配送中</span>
                </div>
            </div>
            <div class="rider-main-track">
                <div class="rider-avatar-track">🏍️</div>
                <div class="rider-info-track">
                    <div class="rider-name-row">
                        <div class="rider-name-track">王师傅</div>
                        <div class="rider-stars">
                            <span class="star">★</span>
                            <span class="star">★</span>
                            <span class="star">★</span>
                            <span class="star">★</span>
                            <span class="star">★</span>
                        </div>
                    </div>
                    <div class="rider-delivery-info">
                        已完成 <span class="rider-distance">326</span> 单配送 · 好评率 98%
                    </div>
                </div>
                <div class="rider-actions-track">
                    <button class="rider-btn-track rider-btn-msg" onclick="showContactSheet()">💬</button>
                    <button class="rider-btn-track rider-btn-call" onclick="callRider()">📞</button>
                </div>
            </div>
        </div>
        
        <div class="delivery-info-track">
            <div class="info-row-track">
                <span class="info-label-track">订单编号</span>
                <span>202401150001</span>
            </div>
            <div class="info-row-track">
                <span class="info-label-track">下单时间</span>
                <span>2024-01-15 13:25</span>
            </div>
            <div class="info-row-track">
                <span class="info-label-track">支付方式</span>
                <span>微信支付</span>
            </div>
            <div class="info-row-track">
                <span class="info-label-track">订单金额</span>
                <span style="color: var(--primary); font-weight: 600;">¥9.97</span>
            </div>
        </div>
        
        <div class="map-preview-track">🗺️</div>
        
        <div class="timeline-section-track">
            <div class="timeline-title-track">配送进度</div>
            <div class="timeline">
                <div class="timeline-item active">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">骑手正在配送中</div>
                    <div class="timeline-time">14:32</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">骑手已取货，正在赶往您的位置</div>
                    <div class="timeline-time">14:28</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">骑手已到店，正在取货</div>
                    <div class="timeline-time">14:20</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">骑手已接单，正在前往商家</div>
                    <div class="timeline-time">14:15</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">订单已支付</div>
                    <div class="timeline-time">14:10</div>
                </div>
            </div>
        </div>
        
        <!-- 联系骑手悬浮按钮 -->
        <div class="contact-rider-float">
            <button class="contact-rider-btn" onclick="showContactSheet()">
                <span class="icon">📞</span>
                <span class="label">联系骑手</span>
            </button>
        </div>
        
        <div class="footer-btn-track">
            <button class="btn" onclick="showPage('orders')">订单详情</button>
            <button class="btn primary" onclick="alert('已确认收货'); showPage('orders')">确认收货</button>
        </div>
    </div>

    <!-- ==================== 确认订单 ==================== -->
    <div id="page-confirm" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('cart')">←</div>
            <div class="page-header-center">确认订单</div>
            <div style="width: 20px;"></div>
        </div>
        
        <div class="address-section-confirm" onclick="showPage('address')">
            <div class="address-icon-confirm">📍</div>
            <div class="address-info-confirm">
                <div class="address-name-confirm">张三 <span class="phone-confirm">138****8888</span></div>
                <div class="address-detail-confirm">广东省 深圳市 南山区 科技园南路88号</div>
            </div>
            <div class="address-arrow-confirm">></div>
        </div>
        
        <div class="delivery-time-confirm">
            <div class="delivery-label-confirm">预计送达</div>
            <div class="delivery-value-confirm">今日 14:00-15:00</div>
        </div>
        
        <div class="section-detail">
            <div class="section-header-detail">生鲜优选</div>
            <div class="order-items-row" style="padding: 12px 15px;">
                <div class="order-item-row">
                    <div class="order-item-image">🥬</div>
                    <div class="order-item-info">
                        <div class="order-item-name">新鲜有机大白菜 约500g</div>
                        <div class="order-item-spec">重量: 500g</div>
                        <div class="order-item-bottom">
                            <div class="order-item-price">¥2.99</div>
                            <div class="order-item-qty">x2</div>
                        </div>
                    </div>
                </div>
                <div class="order-item-row">
                    <div class="order-item-image">🍅</div>
                    <div class="order-item-info">
                        <div class="order-item-name">新鲜番茄 约400g</div>
                        <div class="order-item-spec">重量: 400g</div>
                        <div class="order-item-bottom">
                            <div class="order-item-price">¥3.99</div>
                            <div class="order-item-qty">x1</div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="text" class="remark-input-confirm" placeholder="备注: 如有特殊需求请备注">
        </div>
        
        <div class="coupon-section-confirm">
            <div class="coupon-label-confirm">优惠券</div>
            <div class="coupon-value-confirm">-¥2.00 ></div>
        </div>
        
        <div class="section-detail">
            <div class="section-header-detail">费用明细</div>
            <div class="summary-section-confirm">
                <div class="summary-row-confirm">
                    <span class="summary-label-confirm">商品金额</span>
                    <span>¥9.97</span>
                </div>
                <div class="summary-row-confirm">
                    <span class="summary-label-confirm">配送费</span>
                    <span>¥0.00</span>
                </div>
                <div class="summary-row-confirm" style="color: var(--primary);">
                    <span class="summary-label-confirm">优惠券</span>
                    <span>-¥2.00</span>
                </div>
                <div class="summary-row-confirm summary-row-total">
                    <span class="summary-label-confirm">合计</span>
                    <span class="summary-value-confirm"><small>¥</small>7.97</span>
                </div>
            </div>
        </div>
        
        <div class="pay-section-confirm">
            <div class="pay-header-confirm">支付方式</div>
            <div class="pay-method-confirm">
                <div class="pay-icon-confirm">💰</div>
                <div class="pay-name-confirm">余额支付</div>
                <div class="pay-check-confirm selected"></div>
            </div>
            <div class="pay-method-confirm">
                <div class="pay-icon-confirm">💳</div>
                <div class="pay-name-confirm">微信支付</div>
                <div class="pay-check-confirm"></div>
            </div>
        </div>
        
        <div class="submit-footer-confirm">
            <div>
                <span style="font-size: 12px; color: var(--text-light);">实付金额 </span>
                <span class="total-price-confirm"><small>¥</small>7.97</span>
            </div>
            <button class="submit-btn-confirm" onclick="showPage('paySuccess')">提交订单</button>
        </div>
    </div>

    <!-- ==================== 地址管理 ==================== -->
    <div id="page-address" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('profile')">←</div>
            <div class="page-header-center">收货地址</div>
            <div style="font-size: 14px; color: var(--primary); cursor: pointer;">添加</div>
        </div>
        
        <div class="address-list-container">
            <div class="address-card-manage">
                <div class="address-main-manage">
                    <div class="address-info-manage">
                        <div class="address-name-manage">
                            张三 <span style="margin-left: 15px;">138****8888</span>
                            <span class="address-tag default">默认</span>
                        </div>
                        <div class="address-detail-manage">广东省 深圳市 南山区 科技园南路88号 腾讯大厦501室</div>
                    </div>
                </div>
                <div class="address-actions-manage">
                    <div class="select-btn">
                        <div class="radio selected"></div>
                        <span>设为默认地址</span>
                    </div>
                    <div class="action-btns-manage">
                        <div class="edit-btn">✏️ 编辑</div>
                        <div class="delete-btn">🗑 删除</div>
                    </div>
                </div>
            </div>
            
            <div class="address-card-manage">
                <div class="address-main-manage">
                    <div class="address-info-manage">
                        <div class="address-name-manage">
                            张三 <span style="margin-left: 15px;">138****8888</span>
                            <span class="address-tag">公司</span>
                        </div>
                        <div class="address-detail-manage">广东省 深圳市 南山区 高新科技园南区高新南七道R2-B栋 5楼</div>
                    </div>
                </div>
                <div class="address-actions-manage">
                    <div class="select-btn">
                        <div class="radio"></div>
                        <span>设为默认地址</span>
                    </div>
                    <div class="action-btns-manage">
                        <div class="edit-btn">✏️ 编辑</div>
                        <div class="delete-btn">🗑 删除</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="add-footer-manage">
            <button class="add-btn-manage">
                <span>+</span> 添加新地址
            </button>
        </div>
    </div>

    <!-- ==================== 支付成功 ==================== -->
    <div id="page-paySuccess" class="page">
        <div class="success-header-pay">
            <div class="success-icon-pay">✓</div>
            <div class="success-title-pay">支付成功</div>
            <div class="success-amount-pay"><small>¥</small>7.97</div>
        </div>
        
        <div class="order-info-pay">
            <div class="info-row-pay">
                <span class="info-label-pay">订单编号</span>
                <span>202401150001</span>
            </div>
            <div class="info-row-pay">
                <span class="info-label-pay">支付方式</span>
                <span>余额支付</span>
            </div>
            <div class="info-row-pay">
                <span class="info-label-pay">下单时间</span>
                <span>2024-01-15 14:05</span>
            </div>
        </div>
        
        <div class="delivery-notice-pay">
            <div class="notice-icon-pay">🏃</div>
            <div class="notice-content-pay">
                <div class="notice-title-pay">骑手正在抢单中</div>
                <div class="notice-desc-pay">预计30分钟内送达，请保持手机畅通</div>
            </div>
        </div>
        
        <div class="action-buttons-pay">
            <button class="btn-primary-pay" onclick="showPage('tracking')">查看订单详情</button>
            <div class="btn-secondary-pay">
                <button class="contact-btn-pay" onclick="showContactSheet()">
                    <span>📞</span>
                    <span>联系骑手</span>
                </button>
                <button onclick="showPage('home')">
                    <span>🏠</span>
                    <span>返回首页</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 联系骑手弹窗 -->
    <div class="contact-modal" id="contactModal">
        <div class="contact-sheet">
            <div class="contact-sheet-header">
                <div class="contact-sheet-avatar">🏍️</div>
                <div class="contact-sheet-info">
                    <div class="contact-sheet-name">王师傅</div>
                    <div class="contact-sheet-sub">正在为您配送中</div>
                </div>
            </div>
            <div class="contact-sheet-title">选择联系方式</div>
            <div class="contact-options">
                <div class="contact-option" onclick="callRider()">
                    <div class="contact-option-icon call">📞</div>
                    <div class="contact-option-text">
                        <div class="contact-option-title">拨打电话</div>
                        <div class="contact-option-desc">直接拨打骑手电话</div>
                    </div>
                    <span style="color: var(--text-light);">></span>
                </div>
                <div class="contact-option" onclick="sendMessage()">
                    <div class="contact-option-icon msg">💬</div>
                    <div class="contact-option-text">
                        <div class="contact-option-title">发送消息</div>
                        <div class="contact-option-desc">给骑手发送消息</div>
                    </div>
                    <span style="color: var(--text-light);">></span>
                </div>
                <div class="contact-option" onclick="reportIssue()">
                    <div class="contact-option-icon safe">⚠️</div>
                    <div class="contact-option-text">
                        <div class="contact-option-title">遇到问题</div>
                        <div class="contact-option-desc">商品损坏/配送问题</div>
                    </div>
                    <span style="color: var(--text-light);">></span>
                </div>
            </div>
            <button class="contact-close" onclick="closeContactSheet()">取消</button>
        </div>
    </div>
    
    <script>
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            // 显示目标页面
            document.getElementById('page-' + pageId).classList.add('active');
            // 滚动到顶部
            window.scrollTo(0, 0);
        }
        
        function toggleCheck(el) {
            el.classList.toggle('checked');
        }
        
        function showContactSheet() {
            document.getElementById('contactModal').classList.add('show');
        }
        
        function closeContactSheet() {
            document.getElementById('contactModal').classList.remove('show');
        }
        
        function callRider() {
            closeContactSheet();
            alert('正在拨打骑手电话: 138****5678');
        }
        
        function sendMessage() {
            closeContactSheet();
            alert('打开消息对话框');
        }
        
        function reportIssue() {
            closeContactSheet();
            alert('打开问题反馈页面');
        }
        
        // 点击背景关闭弹窗
        document.getElementById('contactModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeContactSheet();
            }
        });
    </script>
</body>
</html>