编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>行者千寻 - 户外活动平台</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            /* 侠客网风格 - 自然户外色调 */
            --primary: #2D5016;       /* 森林深绿 */
            --accent: #8B4513;        /* 大地棕色 */
            --bg-gray: #F8F6F3;       /* 米白背景 */
            --bg-white: #FFFFFF;
            --text-dark: #1C1C1C;
            --text-gray: #5A5A5A;
            --text-light: #8A8A8A;
            --border: #E5E0D8;
            --green: #228B22;         /* 森林绿 */
            --gold: #B8860B;          /* 暗金色 */
            --terrain: #D4A574;       /* 山地棕 */
        }
        
        /* 背景纹理增强 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
            background: var(--bg-gray);
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E5E0D8' fill-opacity='0.3'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            color: var(--text-dark);
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
        }
        a { text-decoration: none; color: inherit; }
        img { width: 100%; height: 100%; object-fit: cover; display: block; }
        
        .top-nav {
            background: var(--bg-white);
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 2px solid var(--primary);
        }
        .logo { font-size: 20px; font-weight: 700; color: var(--primary); letter-spacing: 2px; }
        .top-actions { display: flex; gap: 18px; }
        .top-action { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
        .top-action svg { width: 22px; height: 22px; stroke: var(--text-dark); fill: none; stroke-width: 1.5; }
        .top-action .badge { position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
        
        .search-bar { background: var(--bg-white); padding: 0 16px 14px; }
        .search-input {
            width: 100%; height: 40px; background: var(--bg-gray); border: 1px solid var(--border);
            border-radius: 4px; padding: 0 16px; font-size: 14px; outline: none;
            transition: border-color 0.2s;
        }
        .search-input:focus { border-color: var(--primary); }
        
        .main-banner { margin: 12px 16px; border-radius: 12px; overflow: hidden; height: 165px; position: relative; }
        .banner-slide { position: relative; height: 100%; }
        .banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
        .banner-dot { width: 6px; height: 6px; background: rgba(255,255,255,0.5); border-radius: 50%; }
        .banner-dot.active { background: white; }
        .banner-content {
            position: absolute; bottom: 0; left: 0; right: 0;
            padding: 20px 16px 16px;
            background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
        }
        .banner-tag { display: inline-block; background: var(--primary); color: white; padding: 3px 10px; border-radius: 4px; font-size: 11px; margin-bottom: 6px; }
        .banner-title { color: white; font-size: 18px; font-weight: 600; margin-bottom: 4px; }
        .banner-subtitle { color: rgba(255,255,255,0.85); font-size: 12px; }
        
        .quick-categories { display: flex; padding: 14px 16px; gap: 12px; overflow-x: auto; background: var(--bg-white); margin-bottom: 8px; border-bottom: 1px solid var(--border); }
        .quick-category { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 58px; cursor: pointer; }
        .quick-category-icon { width: 48px; height: 48px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-gray); }
        .quick-category-name { font-size: 12px; color: var(--text-dark); }
        
        .live-feed { background: var(--bg-white); padding: 12px 16px; margin-bottom: 8px; }
        .live-feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .live-feed-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        .live-dot { width: 7px; height: 7px; background: var(--primary); border-radius: 50%; animation: pulse 1.5s infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
        .live-feed-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
        .live-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-gray); border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
        .live-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: white; font-size: 9px; font-weight: 500; }
        .live-text { font-size: 12px; color: var(--text-dark); }
        .live-text strong { color: var(--primary); }
        
        .section { background: var(--bg-white); margin-bottom: 8px; padding: 16px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
        .section-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        .section-title::before { content: ''; width: 3px; height: 15px; background: var(--primary); border-radius: 2px; }
        .section-more { font-size: 13px; color: var(--text-gray); display: flex; align-items: center; gap: 2px; cursor: pointer; }
        .section-more svg { width: 14px; height: 14px; stroke: var(--text-gray); fill: none; }
        
        .activity-card { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
        .activity-card:last-child { border-bottom: none; padding-bottom: 0; }
        .activity-img { width: 100px; height: 100px; border-radius: 4px; overflow: hidden; flex-shrink: 0; position: relative; }
        .activity-tag { position: absolute; top: 6px; left: 6px; background: var(--accent); color: white; font-size: 10px; padding: 2px 6px; border-radius: 2px; font-weight: 500; }
        .activity-tag.pintuan { background: var(--gold); }
        .activity-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 100px; }
        .activity-title { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .activity-info { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
        .activity-info-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-gray); }
        .activity-info-item svg { width: 12px; height: 12px; stroke: var(--text-light); fill: none; stroke-width: 2; }
        .activity-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
        .activity-price { color: var(--primary); font-size: 16px; font-weight: 600; }
        .activity-price small { font-size: 11px; font-weight: normal; color: var(--text-gray); }
        .activity-price .original { text-decoration: line-through; color: var(--text-light); font-size: 12px; margin-left: 4px; }
        .activity-status { font-size: 12px; padding: 4px 10px; border-radius: 2px; background: var(--primary); color: white; }
        .activity-status.hot { background: #FFF5F0; color: var(--accent); }
        
        .page { display: none; min-height: 100vh; padding-bottom: 65px; }
        .page.active { display: block; }
        
        .page-header { background: var(--bg-white); padding: 12px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); }
        .back-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .back-btn svg { width: 20px; height: 20px; stroke: var(--text-dark); fill: none; stroke-width: 2; }
        .page-title { flex: 1; font-size: 17px; font-weight: 600; text-align: center; }
        .page-action { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .page-action svg { width: 20px; height: 20px; stroke: var(--text-dark); fill: none; }
        
        .filter-bar { display: flex; gap: 10px; padding: 12px 16px; overflow-x: auto; background: var(--bg-white); border-bottom: 1px solid var(--border); }
        .filter-item { padding: 8px 16px; background: var(--bg-gray); border: 1px solid var(--border); border-radius: 4px; font-size: 13px; color: var(--text-dark); white-space: nowrap; cursor: pointer; }
        .filter-item.active { background: var(--primary); color: white; border-color: var(--primary); }
        
        .sub-tab-bar { display: flex; background: var(--bg-white); border-bottom: 1px solid var(--border); }
        .sub-tab-item { flex: 1; text-align: center; padding: 12px; font-size: 14px; color: var(--text-gray); cursor: pointer; position: relative; }
        .sub-tab-item.active { color: var(--primary); font-weight: 600; }
        .sub-tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: var(--primary); border-radius: 2px; }
        
        .leader-list { display: flex; gap: 12px; overflow-x: auto; padding: 12px 16px; background: var(--bg-white); }
        .leader-card-item { min-width: 80px; text-align: center; cursor: pointer; }
        .leader-card-avatar { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 6px; background: var(--bg-gray); overflow: hidden; }
        .leader-card-name { font-size: 12px; color: var(--text-dark); }
        .leader-card-stats { font-size: 10px; color: var(--text-light); }
        
        .detail-cover { height: 240px; position: relative; overflow: hidden; }
        .detail-cover-nav { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 5; }
        .detail-nav-btn { width: 36px; height: 36px; background: rgba(0,0,0,0.45); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .detail-nav-btn svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 2; }
        .detail-content { background: var(--bg-white); margin: -20px 16px 0; border-radius: 12px 12px 0 0; padding: 20px; position: relative; z-index: 10; }
        .detail-title { font-size: 18px; font-weight: 600; line-height: 1.5; margin-bottom: 12px; }
        .detail-price-row { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
        .detail-price { color: var(--primary); font-size: 24px; font-weight: 700; }
        .detail-price small { font-size: 13px; font-weight: normal; color: var(--text-gray); }
        .detail-sales { font-size: 13px; color: var(--text-light); }
        .detail-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
        .detail-section:last-child { border-bottom: none; }
        .detail-section-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
        .detail-section-title svg { width: 16px; height: 16px; stroke: var(--primary); stroke-width: 2; fill: none; }
        .detail-info-grid { display: grid; gap: 12px; }
        .detail-info-item { display: flex; align-items: flex-start; gap: 10px; }
        .detail-info-icon { width: 28px; height: 28px; background: #FFF5F5; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .detail-info-icon svg { width: 14px; height: 14px; stroke: var(--primary); stroke-width: 2; fill: none; }
        .detail-info-content { flex: 1; }
        .detail-info-label { font-size: 12px; color: var(--text-light); margin-bottom: 2px; }
        .detail-info-value { font-size: 14px; color: var(--text-dark); }
        .leader-card { display: flex; gap: 12px; padding: 12px; background: var(--bg-gray); border-radius: 8px; }
        .leader-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-gray); }
        .leader-info { flex: 1; }
        .leader-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .leader-tags { display: flex; gap: 6px; margin-bottom: 4px; }
        .leader-tag { font-size: 11px; padding: 2px 8px; background: var(--primary); color: white; border-radius: 10px; }
        .leader-desc { font-size: 12px; color: var(--text-gray); }
        
        /* 拼团信息 */
        .pintuan-bar { display: flex; align-items: center; padding: 12px; background: linear-gradient(135deg, #FFF8E6, #FFF3D6); border-radius: 8px; margin-bottom: 12px; cursor: pointer; }
        .pintuan-info { flex: 1; }
        .pintuan-tag { display: inline-flex; align-items: center; background: var(--gold); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-right: 8px; }
        .pintuan-text { font-size: 13px; color: var(--text-dark); }
        .pintuan-join { font-size: 12px; color: var(--gold); display: flex; align-items: center; gap: 4px; }
        .pintuan-join svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; }
        .pintuan-users { display: flex; margin-right: 8px; }
        .pintuan-avatar { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--gold); margin-left: -8px; }
        .pintuan-avatar:first-child { margin-left: 0; }
        
        /* 保险信息 */
        .insurance-bar { display: flex; align-items: center; padding: 12px; background: linear-gradient(135deg, #E8F5E9, #C8E6C9); border-radius: 8px; margin-bottom: 12px; cursor: pointer; }
        .insurance-icon { width: 32px; height: 32px; background: var(--green); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
        .insurance-icon svg { width: 18px; height: 18px; stroke: white; fill: none; }
        .insurance-info { flex: 1; }
        .insurance-title { font-size: 13px; color: var(--text-dark); font-weight: 500; }
        .insurance-desc { font-size: 11px; color: var(--text-gray); }
        .insurance-upgrade { font-size: 12px; color: var(--green); display: flex; align-items: center; gap: 2px; }
        .insurance-upgrade svg { width: 14px; height: 14px; stroke: var(--green); fill: none; }
        
        /* 往期回顾 */
        .review-photos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
        .review-photo { width: 80px; height: 80px; border-radius: 8px; flex-shrink: 0; }
        .review-reviews { margin-top: 12px; }
        .review-item { padding: 10px; background: var(--bg-gray); border-radius: 8px; margin-bottom: 8px; }
        .review-user { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
        .review-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: white; font-size: 10px; display: flex; align-items: center; justify-content: center; }
        .review-name { font-size: 13px; color: var(--text-dark); }
        .review-text { font-size: 13px; color: var(--text-gray); line-height: 1.5; }
        
        /* 帖子卡片 */
        .post-card { padding: 12px 16px; border-bottom: 1px solid var(--border); }
        .post-card:last-child { border-bottom: none; }
        .post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .post-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--bg-gray); }
        .post-user-info { flex: 1; }
        .post-user-name { font-size: 14px; font-weight: 500; color: var(--text-dark); }
        .post-user-desc { font-size: 12px; color: var(--text-light); }
        .post-time { font-size: 12px; color: var(--text-light); }
        .post-content { font-size: 14px; line-height: 1.6; color: var(--text-dark); margin-bottom: 10px; }
        .post-tag { display: inline-block; background: #FFF0F0; color: var(--primary); font-size: 11px; padding: 2px 8px; border-radius: 4px; margin-right: 6px; }
        .post-tag.yueban { background: linear-gradient(135deg, var(--gold), #FFD700); color: white; }
        .post-images { display: grid; gap: 4px; margin-bottom: 10px; }
        .post-images.single { grid-template-columns: 1fr; }
        .post-images.multiple { grid-template-columns: repeat(3, 1fr); }
        .post-image { height: 100px; border-radius: 6px; overflow: hidden; background: #e8e8e8; }
        .post-actions { display: flex; gap: 24px; }
        .post-action { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-gray); cursor: pointer; }
        .post-action svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
        
        .detail-footer { position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin: 0 auto; background: white; padding: 10px 16px; display: flex; gap: 12px; box-shadow: 0 -2px 10px rgba(0,0,0,0.06); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
        .footer-action { width: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
        .footer-action svg { width: 22px; height: 22px; stroke: var(--text-gray); fill: none; }
        .footer-action span { font-size: 10px; color: var(--text-gray); }
        .btn-primary { flex: 1; height: 44px; background: var(--primary); color: white; border: none; border-radius: 4px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: 1px; }
        .btn-primary:active { opacity: 0.85; }
        
        /* 底部导航 */
        .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin: 0 auto; background: var(--bg-white); display: flex; padding: 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 8px rgba(0,0,0,0.08); z-index: 100; border-top: 1px solid var(--border); }
        .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
        .tab-item svg { width: 22px; height: 22px; stroke: var(--text-gray); stroke-width: 1.5; fill: none; }
        .tab-item span { font-size: 11px; color: var(--text-gray); }
        .tab-item.active svg { stroke: var(--primary); }
        .tab-item.active span { color: var(--primary); font-weight: 500; }
        
        .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: flex-end; }
        .modal.active { display: flex; }
        .modal-content { background: white; width: 100%; max-width: 430px; margin: 0 auto; border-radius: 16px 16px 0 0; padding: 20px; animation: slideUp 0.3s ease; }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .modal-handle { width: 40px; height: 4px; background: #DDD; border-radius: 2px; margin: 0 auto 16px; }
        .modal-title { font-size: 18px; font-weight: 600; text-align: center; margin-bottom: 20px; }
        .form-group { margin-bottom: 16px; }
        .form-label { font-size: 13px; color: var(--text-gray); margin-bottom: 6px; display: block; }
        .form-input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; background: var(--bg-white); }
        .form-select { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; background: var(--bg-white); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 300; opacity: 0; transition: opacity 0.3s; }
        .toast.show { opacity: 1; }
        
        .profile-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); padding: 24px 16px; color: white; }
        .profile-user { display: flex; align-items: center; gap: 14px; }
        .profile-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.3); background: var(--bg-gray); }
        .profile-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
        .profile-level { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.15); padding: 3px 10px; border-radius: 12px; font-size: 12px; }
        .profile-stats { display: flex; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); }
        .profile-stat { flex: 1; text-align: center; cursor: pointer; }
        .profile-stat-value { font-size: 18px; font-weight: 600; }
        .profile-stat-label { font-size: 11px; opacity: 0.75; margin-top: 2px; }
        
        .menu-list { background: var(--bg-white); }
        .menu-item { display: flex; align-items: center; padding: 14px 16px; gap: 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
        .menu-item:last-child { border-bottom: none; }
        .menu-icon { width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
        .menu-icon svg { width: 20px; height: 20px; stroke: white; stroke-width: 1.5; fill: none; }
        .menu-text { flex: 1; font-size: 15px; }
        .menu-badge { font-size: 11px; padding: 2px 8px; background: var(--primary); color: white; border-radius: 2px; margin-left: 8px; }
        .menu-arrow { width: 16px; height: 16px; stroke: var(--text-light); stroke-width: 2; fill: none; }
        
        /* 商城模块 */
        .mall-header { background: var(--bg-white); padding: 12px 16px; display: flex; gap: 12px; align-items: center; }
        .mall-search { flex: 1; height: 36px; background: var(--bg-gray); border-radius: 18px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-light); cursor: pointer; }
        .mall-search svg { width: 14px; height: 14px; stroke: var(--text-light); fill: none; }
        
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        .product-card { background: var(--bg-white); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; }
        .product-img { height: 120px; background: #e8e8e8; position: relative; overflow: hidden; }
        .product-tag { position: absolute; top: 8px; left: 8px; background: var(--primary); color: white; font-size: 10px; padding: 2px 8px; border-radius: 2px; font-weight: 500; }
        .product-tag.rent { background: var(--green); }
        .product-info { padding: 12px; }
        .product-title { font-size: 13px; line-height: 1.4; color: var(--text-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
        .product-bottom { display: flex; justify-content: space-between; align-items: center; }
        .product-price { color: var(--primary); font-size: 15px; font-weight: 600; }
        .product-sales { font-size: 11px; color: var(--text-light); }
        .product-rent { font-size: 11px; color: var(--green); }
        
        /* 保险卡片 */
        .insurance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .insurance-card { background: linear-gradient(135deg, #E8F5E9, #C8E6C9); border-radius: 12px; padding: 16px; cursor: pointer; }
        .insurance-card-name { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
        .insurance-card-desc { font-size: 11px; color: var(--text-gray); margin-bottom: 8px; }
        .insurance-card-price { font-size: 18px; color: var(--green); font-weight: 600; }
        .insurance-card-price small { font-size: 11px; }
        
        /* 租赁Banner */
        .rent-banner { margin: 12px 16px; padding: 16px; background: linear-gradient(135deg, var(--green), #1ABC9C); border-radius: 4px; color: white; cursor: pointer; border: 1px solid #A5D6A7; }
        .rent-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
        .rent-desc { font-size: 12px; opacity: 0.9; }
        .rent-tags { display: flex; gap: 8px; margin-top: 10px; }
        .rent-tag { font-size: 11px; padding: 4px 10px; background: rgba(255,255,255,0.2); border-radius: 2px; }
        
        /* 分销卡片 */
        .share-banner { margin: 12px 16px; padding: 20px; background: linear-gradient(135deg, var(--primary), #3D6B1E); border-radius: 4px; color: white; cursor: pointer; border: 1px solid var(--primary); }
        .share-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; letter-spacing: 1px; }
        .share-desc { font-size: 13px; opacity: 0.9; }
        .share-btn { display: inline-block; padding: 8px 20px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 2px; font-size: 13px; margin-top: 12px; }
        
        /* 优惠券 */
        .coupon-card { display: flex; align-items: center; padding: 12px; background: var(--bg-white); border-radius: 4px; margin-bottom: 8px; border: 1px solid var(--border); cursor: pointer; }
        .coupon-card:active { background: var(--bg-gray); }
        .coupon-left { width: 80px; text-align: center; border-right: 1px dashed var(--border); padding-right: 12px; margin-right: 12px; }
        .coupon-value { font-size: 24px; color: var(--primary); font-weight: 700; }
        .coupon-limit { font-size: 10px; color: var(--text-light); }
        .coupon-right { flex: 1; }
        .coupon-name { font-size: 14px; color: var(--text-dark); font-weight: 500; margin-bottom: 4px; }
        .coupon-time { font-size: 11px; color: var(--text-light); }
        .coupon-status { font-size: 12px; padding: 6px 12px; background: var(--primary); color: white; border-radius: 2px; }
        .coupon-value { font-size: 22px; font-weight: 700; color: var(--primary); }
        .coupon-value small { font-size: 12px; }
        .coupon-limit { font-size: 10px; color: var(--text-light); }
        .coupon-right { flex: 1; }
        .coupon-name { font-size: 14px; color: var(--text-dark); margin-bottom: 4px; }
        .coupon-time { font-size: 11px; color: var(--text-light); }
        .coupon-status { font-size: 12px; padding: 4px 12px; background: var(--primary); color: white; border-radius: 12px; }
    </style>
</head>
<body>
    <!-- ==================== 首页 ==================== -->
    <div class="page active" id="page-home">
        <div class="top-nav">
            <div class="logo">行者千寻</div>
            <div class="top-actions">
                <div class="top-action" onclick="showToast('搜索')"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></div>
                <div class="top-action" onclick="goToPage('page-messages')"><svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="badge"></span></div>
            </div>
        </div>
        <div class="search-bar"><input type="text" class="search-input" placeholder="搜索活动、商品、游记..." onclick="showToast('搜索功能')"></div>
        
        <!-- Banner轮播 -->
        <div class="main-banner" onclick="goToPage('page-activity-detail')">
            <div class="banner-slide"><img src="imgs/nature1.jpg" alt="Banner"></div>
            <div class="banner-dots"><div class="banner-dot active"></div><div class="banner-dot"></div><div class="banner-dot"></div></div>
            <div class="banner-content">
                <span class="banner-tag">热门推荐</span>
                <div class="banner-title">张家界天门山 · 云海日出</div>
                <div class="banner-subtitle">徒步穿越奇峰怪石，感受大自然的鬼斧神工</div>
            </div>
        </div>
        
        <!-- 快捷分类 -->
        <div class="quick-categories">
            <div class="quick-category" onclick="goToPage('page-activities')"><div class="quick-category-icon"><img src="imgs/mountain.jpg" alt="徒步"></div><span class="quick-category-name">徒步</span></div>
            <div class="quick-category" onclick="goToPage('page-activities')"><div class="quick-category-icon"><img src="imgs/tent2.jpg" alt="露营"></div><span class="quick-category-name">露营</span></div>
            <div class="quick-category" onclick="goToPage('page-activities')"><div class="quick-category-icon"><img src="imgs/nature2.jpg" alt="登山"></div><span class="quick-category-name">登山</span></div>
            <div class="quick-category" onclick="goToPage('page-activities')"><div class="quick-category-icon"><img src="imgs/nature3.jpg" alt="溯溪"></div><span class="quick-category-name">溯溪</span></div>
            <div class="quick-category" onclick="goToPage('page-activities')"><div class="quick-category-icon"><img src="imgs/sunset.jpg" alt="滑雪"></div><span class="quick-category-name">滑雪</span></div>
            <div class="quick-category" onclick="goToPage('page-activities')"><div class="quick-category-icon"><img src="imgs/trail.jpg" alt="骑行"></div><span class="quick-category-name">骑行</span></div>
        </div>
        
        <!-- 实时报名 -->
        <div class="live-feed">
            <div class="live-feed-header"><div class="live-feed-title"><div class="live-dot"></div><span>实时报名</span></div></div>
            <div class="live-feed-list">
                <div class="live-item"><div class="live-avatar">李</div><div class="live-text"><strong>李子柒</strong> 刚刚报名了深圳东西涌穿越</div></div>
                <div class="live-item"><div class="live-avatar" style="background: linear-gradient(135deg, #43e97b, #38f9d7);">张</div><div class="live-text"><strong>张家界</strong> 报名了周末登山队</div></div>
                <div class="live-item"><div class="live-avatar" style="background: linear-gradient(135deg, #667eea, #764ba2);">王</div><div class="live-text"><strong>王小虎</strong> 刚刚加入了溯溪团</div></div>
            </div>
        </div>
        
        <!-- 热门活动 -->
        <div class="section">
            <div class="section-header"><div class="section-title">热门活动</div><div class="section-more" onclick="goToPage('page-activities')">查看更多<svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg></div></div>
            <div class="activity-card" onclick="goToPage('page-activity-detail')">
                <div class="activity-img"><img src="imgs/forest.jpg" alt="活动"><span class="activity-tag pintuan">拼团</span></div>
                <div class="activity-content">
                    <div class="activity-title">【周末轻徒】从化石门台穿越 | 新手友好路线</div>
                    <div class="activity-info">
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg><span>05月25日</span></div>
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg><span>广州从化</span></div>
                    </div>
                    <div class="activity-bottom">
                        <div class="activity-price">¥148<small>起</small><span class="original">¥168</span></div>
                        <div class="activity-status">32人</div>
                    </div>
                </div>
            </div>
            <div class="activity-card" onclick="goToPage('page-activity-detail')">
                <div class="activity-img"><img src="imgs/camping2.jpg" alt="活动"><span class="activity-tag">亲子同游</span></div>
                <div class="activity-content">
                    <div class="activity-title">【溯溪探险】清远玄真漂流 | 夏日清凉</div>
                    <div class="activity-info">
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg><span>06月01日</span></div>
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg><span>广东清远</span></div>
                    </div>
                    <div class="activity-bottom">
                        <div class="activity-price">¥268<small>起</small></div>
                        <div class="activity-status hot">即将满员</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分销入口 -->
        <div class="share-banner" onclick="goToPage('page-share')">
            <div class="share-title">邀请好友 赚取佣金</div>
            <div class="share-desc">每成功邀请1人报名活动，最高可获10%佣金返利</div>
        </div>
        
        <!-- 精选装备 -->
        <div class="section">
            <div class="section-header"><div class="section-title">精选装备</div><div class="section-more" onclick="switchTab('mall')">查看更多<svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg></div></div>
            <div class="product-grid">
                <div class="product-card" onclick="showToast('查看商品')">
                    <div class="product-img"><img src="imgs/gear.jpg" alt="背包"><span class="product-tag">热卖</span></div>
                    <div class="product-info"><div class="product-title">探路者户外登山背包 40L 防泼水</div><div class="product-bottom"><div class="product-price">¥399</div><div class="product-sales">2.3k人买过</div></div></div>
                </div>
                <div class="product-card" onclick="showToast('查看商品')">
                    <div class="product-img"><img src="imgs/shoes.jpg" alt="徒步鞋"></div>
                    <div class="product-info"><div class="product-title">骆驼户外徒步鞋 防滑耐磨透气</div><div class="product-bottom"><div class="product-price">¥299</div><div class="product-sales">可租¥20/天</div></div></div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 活动 ==================== -->
    <div class="page" id="page-activities">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-home')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">活动</div>
            <div class="page-action"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></div>
        </div>
        
        <!-- 热门领队 -->
        <div class="leader-list">
            <div class="leader-card-item">
                <div class="leader-card-avatar"><img src="imgs/hiker.jpg" alt="领队"></div>
                <div class="leader-card-name">李教练</div>
                <div class="leader-card-stats">500+次带队</div>
            </div>
            <div class="leader-card-item">
                <div class="leader-card-avatar"><img src="imgs/hiker.jpg" alt="领队"></div>
                <div class="leader-card-name">山野</div>
                <div class="leader-card-stats">328次带队</div>
            </div>
            <div class="leader-card-item">
                <div class="leader-card-avatar"><img src="imgs/hiker.jpg" alt="领队"></div>
                <div class="leader-card-name">小七</div>
                <div class="leader-card-stats">256次带队</div>
            </div>
        </div>
        
        <div class="filter-bar">
            <div class="filter-item active">全部</div>
            <div class="filter-item">周边游</div>
            <div class="filter-item">国内游</div>
            <div class="filter-item">摄影游</div>
            <div class="filter-item">户外游</div>
            <div class="filter-item">拼团</div>
        </div>
        
        <div style="background: var(--bg-white); padding: 0 16px;">
            <div class="activity-card" onclick="goToPage('page-activity-detail')">
                <div class="activity-img"><img src="imgs/forest.jpg" alt="活动"><span class="activity-tag pintuan">拼团</span></div>
                <div class="activity-content">
                    <div class="activity-title">【周末轻徒】从化石门台穿越 | 新手友好路线</div>
                    <div class="activity-info">
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg><span>05月25日</span></div>
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg><span>广州从化</span></div>
                    </div>
                    <div class="activity-bottom">
                        <div class="activity-price">¥148<small>起</small><span class="original">¥168</span></div>
                        <div class="activity-status">3人成团</div>
                    </div>
                </div>
            </div>
            <div class="activity-card" onclick="goToPage('page-activity-detail')">
                <div class="activity-img"><img src="imgs/nature3.jpg" alt="活动"><span class="activity-tag">亲子同游</span></div>
                <div class="activity-content">
                    <div class="activity-title">【溯溪探险】清远玄真漂流 | 夏日清凉</div>
                    <div class="activity-info">
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg><span>06月01日</span></div>
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg><span>广东清远</span></div>
                    </div>
                    <div class="activity-bottom">
                        <div class="activity-price">¥268<small>起</small></div>
                        <div class="activity-status hot">即将满员</div>
                    </div>
                </div>
            </div>
            <div class="activity-card" onclick="goToPage('page-activity-detail')">
                <div class="activity-img"><img src="imgs/tent2.jpg" alt="活动"><span class="activity-tag">星空露营</span></div>
                <div class="activity-content">
                    <div class="activity-title">【星空露营】大鹏半岛两日自驾 | 烧烤观星</div>
                    <div class="activity-info">
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg><span>06月08日</span></div>
                        <div class="activity-info-item"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg><span>深圳大鹏</span></div>
                    </div>
                    <div class="activity-bottom">
                        <div class="activity-price">¥388<small>起</small></div>
                        <div class="activity-status">45人</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 活动详情 ==================== -->
    <div class="page" id="page-activity-detail">
        <div class="detail-cover"><img src="imgs/mountain.jpg" alt="活动封面">
            <div class="detail-cover-nav">
                <div class="detail-nav-btn" onclick="goToPage('page-activities')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
                <div class="detail-nav-btn"><svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg></div>
            </div>
        </div>
        <div class="detail-content">
            <div class="detail-title">【周末轻徒】从化石门台穿越 | 新手友好路线</div>
            <div class="detail-price-row">
                <div class="detail-price">¥168<small>起/人</small></div>
                <div class="detail-sales">32人已报名</div>
            </div>
            
            <!-- 拼团信息 -->
            <div class="pintuan-bar" onclick="showToast('发起拼团')">
                <div class="pintuan-users">
                    <div class="pintuan-avatar" style="background: var(--primary);"></div>
                    <div class="pintuan-avatar" style="background: var(--accent);"></div>
                </div>
                <div class="pintuan-info">
                    <span class="pintuan-tag">3人成团</span>
                    <span class="pintuan-text">已2人，还差1人成团享优惠价¥148</span>
                </div>
                <div class="pintuan-join">去参团<svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg></div>
            </div>
            
            <!-- 保险信息 -->
            <div class="insurance-bar" onclick="goToPage('page-insurance')">
                <div class="insurance-icon"><svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
                <div class="insurance-info">
                    <div class="insurance-title">基础保险已含 · 可升级高额保障</div>
                    <div class="insurance-desc">意外伤害10万 + 医疗1万</div>
                </div>
                <div class="insurance-upgrade">升级<svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg></div>
            </div>
            
            <div class="detail-section">
                <div class="detail-section-title"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg>活动信息</div>
                <div class="detail-info-grid">
                    <div class="detail-info-item">
                        <div class="detail-info-icon"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg></div>
                        <div class="detail-info-content"><div class="detail-info-label">活动时间</div><div class="detail-info-value">2025年5月25日（周日）07:30-18:00</div></div>
                    </div>
                    <div class="detail-info-item">
                        <div class="detail-info-icon"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
                        <div class="detail-info-content"><div class="detail-info-label">集合地点</div><div class="detail-info-value">广州市天河区体育西路A出口</div></div>
                    </div>
                    <div class="detail-info-item">
                        <div class="detail-info-icon"><svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
                        <div class="detail-info-content"><div class="detail-info-label">难度等级</div><div class="detail-info-value">★★☆☆☆ 入门级，适合新手</div></div>
                    </div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-section-title"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>活动领队</div>
                <div class="leader-card">
                    <div class="leader-avatar"><img src="imgs/hiker.jpg" alt="领队"></div>
                    <div class="leader-info">
                        <div class="leader-name">李教练</div>
                        <div class="leader-tags"><span class="leader-tag">持证领队</span></div>
                        <div class="leader-desc">从业8年，带队500+次 · 评分4.9</div>
                    </div>
                </div>
            </div>
            
            <!-- 往期回顾 -->
            <div class="detail-section">
                <div class="detail-section-title"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>往期回顾 <span style="font-size:12px;color:var(--text-light);font-weight:normal;">共28期</span></div>
                <div class="review-photos">
                    <div class="review-photo"><img src="imgs/clouds.jpg" alt="往期"></div>
                    <div class="review-photo"><img src="imgs/forest.jpg" alt="往期"></div>
                    <div class="review-photo"><img src="imgs/mountain.jpg" alt="往期"></div>
                    <div class="review-photo"><img src="imgs/nature1.jpg" alt="往期"></div>
                </div>
                <div class="review-reviews">
                    <div class="review-item">
                        <div class="review-user"><div class="review-avatar">山</div><span class="review-name">山峰</span></div>
                        <div class="review-text">风景超美！领队很专业，下次还来！</div>
                    </div>
                    <div class="review-item">
                        <div class="review-user"><div class="review-avatar" style="background: var(--accent);">云</div><span class="review-name">云淡</span></div>
                        <div class="review-text">线路设计合理，适合新手，推荐！</div>
                    </div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-section-title"><svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>费用说明</div>
                <div class="detail-info-grid">
                    <div class="detail-info-item">
                        <div class="detail-info-icon" style="background: #E8F5E9;"><svg viewBox="0 0 24 24" style="stroke: var(--green);"><polyline points="20 6 9 17 4 12"/></svg></div>
                        <div class="detail-info-content"><div class="detail-info-value">往返交通费用</div></div>
                    </div>
                    <div class="detail-info-item">
                        <div class="detail-info-icon" style="background: #E8F5E9;"><svg viewBox="0 0 24 24" style="stroke: var(--green);"><polyline points="20 6 9 17 4 12"/></svg></div>
                        <div class="detail-info-content"><div class="detail-info-value">专业领队带队服务</div></div>
                    </div>
                    <div class="detail-info-item">
                        <div class="detail-info-icon" style="background: #E8F5E9;"><svg viewBox="0 0 24 24" style="stroke: var(--green);"><polyline points="20 6 9 17 4 12"/></svg></div>
                        <div class="detail-info-content"><div class="detail-info-value">基础意外保险（已含）</div></div>
                    </div>
                </div>
            </div>
            <div style="height: 80px;"></div>
        </div>
        <div class="detail-footer">
            <div class="footer-action" onclick="showToast('已收藏')"><svg viewBox="0 0 24 24"><path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg><span>收藏</span></div>
            <div class="footer-action" onclick="showToast('分享功能')"><svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg><span>分享</span></div>
            <button class="btn-primary" onclick="openSignupModal()">立即报名 ¥168</button>
        </div>
    </div>

    <!-- ==================== 社区/行者圈 ==================== -->
    <div class="page" id="page-community">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-home')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">行者圈</div>
            <div class="page-action" onclick="showToast('发布内容')"><svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
        </div>
        <div class="sub-tab-bar">
            <div class="sub-tab-item active" onclick="switchSubTab(this)">推荐</div>
            <div class="sub-tab-item" onclick="switchSubTab(this)">关注</div>
            <div class="sub-tab-item" onclick="switchSubTab(this)">约伴</div>
            <div class="sub-tab-item" onclick="switchSubTab(this)">笔记</div>
        </div>
        
        <div style="background: var(--bg-white);">
            <!-- 约伴帖 -->
            <div class="post-card" style="border: 1px solid var(--border); border-radius: 12px; margin: 12px 16px; padding: 12px; background: #FFFBF0;">
                <div class="post-header">
                    <div class="post-avatar"><img src="imgs/hiker.jpg" alt="头像"></div>
                    <div class="post-user-info"><div class="post-user-name">户外爱好者小王</div><div class="post-user-desc">招募中 · 还需2人</div></div>
                    <span class="post-tag yueban">约伴</span>
                </div>
                <div class="post-content">周末从化石门台穿越，新手友好路线，有没有一起的？</div>
                <div style="display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;">
                    <span style="font-size: 12px; padding: 4px 10px; background: var(--bg-gray); border-radius: 12px;">📍 广州从化</span>
                    <span style="font-size: 12px; padding: 4px 10px; background: var(--bg-gray); border-radius: 12px;">📅 05月25日</span>
                    <span style="font-size: 12px; padding: 4px 10px; background: var(--bg-gray); border-radius: 12px;">🔥 初级</span>
                </div>
                <!-- 审核状态提示 -->
                <div style="display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #FFF3E0; border-radius: 6px; margin-bottom: 10px; font-size: 12px; color: var(--gold);">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    审核中 · 发布约伴帖需经审核后才能展示
                </div>
                <div class="post-actions">
                    <div class="post-action"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span>5人响应</span></div>
                    <div class="post-action"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><span>12</span></div>
                    <div class="post-action" style="color: var(--primary);" onclick="showToast('报名成功')">立即报名</div>
                </div>
            </div>
            
            <div class="post-card">
                <div class="post-header">
                    <div class="post-avatar"><img src="imgs/hiker.jpg" alt="头像"></div>
                    <div class="post-user-info"><div class="post-user-name">星空露营家</div><div class="post-user-desc">露营爱好者 · Lv.6</div></div>
                    <div class="post-time">5小时前</div>
                </div>
                <div class="post-content">分享一个超级赞的露营地点！从化石谷附近，有一个隐秘的营地，夜晚能看到满天繁星</div>
                <div class="post-images multiple">
                    <div class="post-image"><img src="imgs/camping2.jpg" alt="露营"></div>
                    <div class="post-image"><img src="imgs/nature1.jpg" alt="风景"></div>
                    <div class="post-image"><img src="imgs/forest.jpg" alt="森林"></div>
                </div>
                <div class="post-actions">
                    <div class="post-action"><svg viewBox="0 0 24 24"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg><span>256</span></div>
                    <div class="post-action"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><span>45</span></div>
                    <div class="post-action"><svg viewBox="0 0 24 24"><path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg><span>收藏</span></div>
                </div>
            </div>
            
            <div class="post-card">
                <div class="post-header">
                    <div class="post-avatar"><img src="imgs/hiker.jpg" alt="头像"></div>
                    <div class="post-user-info"><div class="post-user-name">户外爱好者小王</div><div class="post-user-desc">徒步达人 · Lv.8</div></div>
                    <div class="post-time">2小时前</div>
                </div>
                <div class="post-content">上周登顶梧桐山，云海太美了！强烈推荐这条路线，适合有一定体能基础的驴友。</div>
                <div class="post-images single"><div class="post-image"><img src="imgs/clouds.jpg" alt="风景"></div></div>
                <div class="post-actions">
                    <div class="post-action"><svg viewBox="0 0 24 24"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg><span>128</span></div>
                    <div class="post-action"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><span>32</span></div>
                    <div class="post-action"><svg viewBox="0 0 24 24"><path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg><span>收藏</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 商城 ==================== -->
    <div class="page" id="page-mall">
        <div class="mall-header">
            <div class="back-btn" onclick="goToPage('page-home')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="mall-search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg><span>搜索装备/保险</span></div>
        </div>
        <div class="sub-tab-bar">
            <div class="sub-tab-item active" onclick="switchMallTab(this, 'gear')">装备</div>
            <div class="sub-tab-item" onclick="switchMallTab(this, 'insurance')">保险</div>
            <div class="sub-tab-item" onclick="switchMallTab(this, 'points')">积分商城</div>
        </div>
        
        <!-- 装备Tab -->
        <div id="mall-gear-content">
            <!-- 租赁Banner -->
            <div class="rent-banner">
                <div class="rent-title">装备租赁</div>
                <div class="rent-desc">帐篷、背包、睡袋...按天计费，轻松出行</div>
                <div class="rent-tags"><span class="rent-tag">帐篷 ¥30/天</span><span class="rent-tag">背包 ¥20/天</span></div>
            </div>
            
            <div class="filter-bar">
                <div class="filter-item active">推荐</div>
                <div class="filter-item">背包</div>
                <div class="filter-item">鞋服</div>
                <div class="filter-item">帐篷</div>
                <div class="filter-item">照明</div>
            </div>
            
            <div style="padding: 12px 16px; background: var(--bg-gray);">
                <div class="product-grid" style="gap: 10px;">
                    <div class="product-card" onclick="showToast('查看商品')">
                        <div class="product-img"><img src="imgs/gear.jpg" alt="背包"><span class="product-tag">热卖</span></div>
                        <div class="product-info">
                            <div class="product-title">探路者防水登山背包 40L 多色可选</div>
                            <div class="product-bottom"><div class="product-price">¥399</div><div class="product-sales">可租¥20/天</div></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showToast('查看商品')">
                        <div class="product-img"><img src="imgs/shoes.jpg" alt="徒步鞋"></div>
                        <div class="product-info">
                            <div class="product-title">骆驼户外徒步鞋 防滑耐磨透气</div>
                            <div class="product-bottom"><div class="product-price">¥299</div><div class="product-sales">1.8k人买过</div></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showToast('查看商品')">
                        <div class="product-img"><img src="imgs/tent2.jpg" alt="帐篷"><span class="product-tag rent">可租</span></div>
                        <div class="product-info">
                            <div class="product-title">挪客轻量化帐篷 2-3人 防雨透气</div>
                            <div class="product-bottom"><div class="product-price">¥599</div><div class="product-sales">可租¥30/天</div></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showToast('查看商品')">
                        <div class="product-img"><img src="imgs/backpack.jpg" alt="装备"></div>
                        <div class="product-info">
                            <div class="product-title">专业登山绳 50米静力绳</div>
                            <div class="product-bottom"><div class="product-price">¥199</div><div class="product-sales">456人买过</div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 保险Tab -->
        <div id="mall-insurance-content" style="display: none;">
            <div style="padding: 12px 16px;">
                <div style="background: linear-gradient(135deg, #E8F5E9, #C8E6C9); padding: 16px; border-radius: 12px; margin-bottom: 12px;">
                    <div style="font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; display: flex; align-items: center; gap: 8px;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                        活动基础险（已含）
                    </div>
                    <div style="font-size: 13px; color: var(--text-gray);">报名活动即包含基础意外险保障</div>
                </div>
                
                <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px; padding-left: 4px;">升级保障</div>
                <div class="insurance-grid">
                    <div class="insurance-card" onclick="showToast('查看保险详情')">
                        <div class="insurance-card-name">百万医疗险</div>
                        <div class="insurance-card-desc">意外医疗100万保额</div>
                        <div class="insurance-card-price">¥3<small>/天</small></div>
                    </div>
                    <div class="insurance-card" onclick="showToast('查看保险详情')">
                        <div class="insurance-card-name">综合意外险</div>
                        <div class="insurance-card-desc">意外+医疗+津贴综合保障</div>
                        <div class="insurance-card-price">¥5<small>/天</small></div>
                    </div>
                    <div class="insurance-card" onclick="showToast('查看保险详情')">
                        <div class="insurance-card-name">高额户外险</div>
                        <div class="insurance-card-desc">专项高风险运动保障</div>
                        <div class="insurance-card-price">¥8<small>/天</small></div>
                    </div>
                    <div class="insurance-card" onclick="showToast('查看保险详情')">
                        <div class="insurance-card-name">全年户外险</div>
                        <div class="insurance-card-desc">全年不限次户外活动保障</div>
                        <div class="insurance-card-price">¥299<small>/年</small></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 积分商城Tab -->
        <div id="mall-points-content" style="display: none;">
            <div style="padding: 12px 16px;">
                <div style="background: linear-gradient(135deg, var(--gold), #FFD700); padding: 16px; border-radius: 12px; margin-bottom: 12px; color: white;">
                    <div style="font-size: 16px; font-weight: 600; margin-bottom: 4px;">我的积分</div>
                    <div style="font-size: 28px; font-weight: 700;">1,560 <span style="font-size: 14px;">积分</span></div>
                </div>
                
                <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px; padding-left: 4px;">积分兑换</div>
                <div class="product-grid">
                    <div class="product-card" onclick="showToast('积分兑换')">
                        <div class="product-img"><img src="imgs/gear.jpg" alt="装备"><span class="product-tag" style="background: var(--gold);">兑换</span></div>
                        <div class="product-info">
                            <div class="product-title">户外多功能头巾</div>
                            <div class="product-bottom"><div class="product-price" style="color: var(--gold);">500积分</div><div class="product-sales">剩余89件</div></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showToast('积分兑换')">
                        <div class="product-img"><img src="imgs/backpack.jpg" alt="装备"><span class="product-tag" style="background: var(--gold);">兑换</span></div>
                        <div class="product-info">
                            <div class="product-title">户外折叠水杯</div>
                            <div class="product-bottom"><div class="product-price" style="color: var(--gold);">300积分</div><div class="product-sales">剩余156件</div></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showToast('积分兑换')">
                        <div class="product-img"><img src="imgs/shoes.jpg" alt="装备"><span class="product-tag" style="background: var(--gold);">兑换</span></div>
                        <div class="product-info">
                            <div class="product-title">专业登山手套</div>
                            <div class="product-bottom"><div class="product-price" style="color: var(--gold);">800积分</div><div class="product-sales">剩余45件</div></div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showToast('积分兑换')">
                        <div class="product-img"><img src="imgs/gear.jpg" alt="装备"><span class="product-tag" style="background: var(--gold);">兑换</span></div>
                        <div class="product-info">
                            <div class="product-title">便携式指南针</div>
                            <div class="product-bottom"><div class="product-price" style="color: var(--gold);">200积分</div><div class="product-sales">剩余230件</div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 保险商城 ==================== -->
    <div class="page" id="page-insurance">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-mall')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">保险商城</div>
        </div>
        <div style="background: var(--bg-white); padding: 16px; margin-bottom: 8px;">
            <div style="font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                活动基础险（已含）
            </div>
            <div style="font-size: 13px; color: var(--text-gray); line-height: 1.6;">
                报名活动即包含基础意外险保障，包含意外伤害10万、意外医疗1万、紧急救援服务。
            </div>
        </div>
        <div class="section">
            <div class="section-header"><div class="section-title">升级保障</div></div>
            <div class="insurance-grid">
                <div class="insurance-card" onclick="showToast('查看保险详情')">
                    <div class="insurance-card-name">百万医疗险</div>
                    <div class="insurance-card-desc">意外医疗100万保额</div>
                    <div class="insurance-card-price">¥3<small>/天</small></div>
                </div>
                <div class="insurance-card" onclick="showToast('查看保险详情')">
                    <div class="insurance-card-name">综合意外险</div>
                    <div class="insurance-card-desc">意外+医疗+津贴综合保障</div>
                    <div class="insurance-card-price">¥5<small>/天</small></div>
                </div>
                <div class="insurance-card" onclick="showToast('查看保险详情')">
                    <div class="insurance-card-name">高额户外险</div>
                    <div class="insurance-card-desc">专项高风险运动保障</div>
                    <div class="insurance-card-price">¥8<small>/天</small></div>
                </div>
                <div class="insurance-card" onclick="showToast('查看保险详情')">
                    <div class="insurance-card-name">全年户外险</div>
                    <div class="insurance-card-desc">全年不限次户外活动保障</div>
                    <div class="insurance-card-price">¥299<small>/年</small></div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 分销中心 ==================== -->
    <div class="page" id="page-share">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-home')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">分销中心</div>
        </div>
        <div class="share-banner" onclick="showToast('生成分享海报')">
            <div class="share-title">邀请好友 赚取佣金</div>
            <div class="share-desc">每成功邀请1人报名活动，最高可获10%佣金返利</div>
            <div class="share-btn">立即推广</div>
        </div>
        <div class="section">
            <div class="section-header"><div class="section-title">我的收益</div></div>
            <div style="display: flex; text-align: center; margin-bottom: 16px;">
                <div style="flex: 1;">
                    <div style="font-size: 24px; font-weight: 700; color: var(--primary);">¥1,280</div>
                    <div style="font-size: 12px; color: var(--text-gray);">累计佣金</div>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 24px; font-weight: 700; color: var(--text-dark);">¥580</div>
                    <div style="font-size: 12px; color: var(--text-gray);">可提现</div>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 24px; font-weight: 700; color: var(--text-dark);">28</div>
                    <div style="font-size: 12px; color: var(--text-gray);">邀请人数</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 消息中心 ==================== -->
    <div class="page" id="page-messages">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-home')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">消息通知</div>
        </div>
        <div class="sub-tab-bar">
            <div class="sub-tab-item active">通知</div>
            <div class="sub-tab-item">活动</div>
            <div class="sub-tab-item">互动</div>
            <div class="sub-tab-item">客服</div>
        </div>
        <div style="background: var(--bg-white); padding: 0 16px;">
            <div class="menu-item" style="padding: 14px 0;">
                <div style="width: 40px; height: 40px; border-radius: 8px; background: var(--primary); display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; font-weight: 500; margin-bottom: 2px;">活动成行通知</div>
                    <div style="font-size: 12px; color: var(--text-gray);">【周末轻徒】从化石门台穿越已成行，请准时集合！</div>
                </div>
                <div style="font-size: 11px; color: var(--text-light);">刚刚</div>
            </div>
            <div class="menu-item" style="padding: 14px 0;">
                <div style="width: 40px; height: 40px; border-radius: 8px; background: var(--green); display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; font-weight: 500; margin-bottom: 2px;">保险购买成功</div>
                    <div style="font-size: 12px; color: var(--text-gray);">您已成功购买百万医疗险，保障已生效</div>
                </div>
                <div style="font-size: 11px; color: var(--text-light);">10分钟前</div>
            </div>
            <div class="menu-item" style="padding: 14px 0; border-bottom: none;">
                <div style="width: 40px; height: 40px; border-radius: 8px; background: var(--gold); display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; font-weight: 500; margin-bottom: 2px;">拼团成功</div>
                    <div style="font-size: 12px; color: var(--text-gray);">恭喜！您发起的拼团已成功，优惠价¥148已生效</div>
                </div>
                <div style="font-size: 11px; color: var(--text-light);">1小时前</div>
            </div>
        </div>
    </div>

    <!-- ==================== 我的 ==================== -->
    <div class="page" id="page-profile">
        <div class="profile-header">
            <div class="profile-user">
                <div class="profile-avatar"><img src="imgs/hiker.jpg" alt="头像"></div>
                <div>
                    <div class="profile-name">户外达人</div>
                    <div class="profile-level"><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Lv.5 活跃用户</div>
                </div>
            </div>
            <div class="profile-stats">
                <div class="profile-stat" onclick="showToast('查看活动')"><div class="profile-stat-value">28</div><div class="profile-stat-label">参加活动</div></div>
                <div class="profile-stat" onclick="goToPage('page-points')"><div class="profile-stat-value">1,560</div><div class="profile-stat-label">积分</div></div>
                <div class="profile-stat" onclick="showToast('查看钱包')"><div class="profile-stat-value">¥580</div><div class="profile-stat-label">钱包</div></div>
            </div>
        </div>
        
        <!-- 优惠券入口 -->
        <div class="section" style="padding: 12px 16px;">
            <div class="coupon-card" onclick="showToast('查看优惠券')">
                <div class="coupon-left">
                    <div class="coupon-value">¥50</div>
                    <div class="coupon-limit">满200可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-name">新人专享券</div>
                    <div class="coupon-time">有效期至 2025-06-30</div>
                </div>
                <div class="coupon-status">领取</div>
            </div>
        </div>
        
        <div class="menu-list" style="margin-bottom: 8px;">
            <div class="menu-item" onclick="showToast('活动订单')">
                <div class="menu-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div>
                <span class="menu-text">活动订单</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item" onclick="showToast('商城订单')">
                <div class="menu-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);"><svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/></svg></div>
                <span class="menu-text">商城订单</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item" onclick="showToast('我的收藏')">
                <div class="menu-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);"><svg viewBox="0 0 24 24"><path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg></div>
                <span class="menu-text">我的收藏</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
            </div>
        </div>
        
<div class="menu-list" style="margin-bottom: 8px;">
            <div class="menu-item" onclick="goToPage('page-share')">
                <div class="menu-icon" style="background: linear-gradient(135deg, #11998E, #38EF7D);"><svg viewBox="0 0 24 24"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></div>
                <span class="menu-text">分销中心</span>
                <span class="menu-badge">赚佣金</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item" onclick="showToast('活动足迹')">
                <div class="menu-icon" style="background: linear-gradient(135deg, #f5af19, #f12711);"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
                <span class="menu-text">活动足迹</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
            </div>
        </div>
        
        <div class="menu-list">
            <div class="menu-item" onclick="goToPage('page-coupon')">
                <div class="menu-icon" style="background: linear-gradient(135deg, #fa709a, #fee140);"><svg viewBox="0 0 24 24"><path d="M2 9V7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2"/><path d="M2 15v-2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2"/><line x1="2" y1="11" x2="22" y2="11"/></svg></div>
                <span class="menu-text">优惠券</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item" onclick="goToPage('page-vip')">
                <div class="menu-icon" style="background: linear-gradient(135deg, #ffd89b, #f8b500);"><svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
                <span class="menu-text">会员中心</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
            </div>
            <div class="menu-item" onclick="showToast('设置')">
                <div class="menu-icon" style="background: linear-gradient(135deg, #a8edea, #fed6e3);"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg></div>
                <span class="menu-text">设置</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>
            </div>
        </div>
    </div>

    <!-- ==================== 登录页 ==================== -->
    <div class="page" id="page-login">
        <div style="min-height: 100vh; background: var(--bg-white); display: flex; flex-direction: column;">
            <div style="padding: 60px 30px 40px; text-align: center;">
                <div style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 18px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="white"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                </div>
                <div style="font-size: 24px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px;">行者千寻</div>
                <div style="font-size: 14px; color: var(--text-gray);">探索户外 共享自然</div>
            </div>
            
            <div style="padding: 0 24px; flex: 1;">
                <div class="form-group">
                    <div style="display: flex; gap: 10px; margin-bottom: 16px;">
                        <select style="width: 100px; padding: 14px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--bg-white);">
                            <option>+86</option>
                            <option>+1</option>
                            <option>+44</option>
                        </select>
                        <input type="tel" class="form-input" placeholder="请输入手机号" style="flex: 1;">
                    </div>
                </div>
                <div class="form-group">
                    <div style="display: flex; gap: 10px;">
                        <input type="text" class="form-input" placeholder="请输入验证码" style="flex: 1;">
                        <button style="width: 110px; height: 48px; background: var(--bg-gray); border: none; border-radius: 8px; font-size: 13px; color: var(--primary); cursor: pointer;">获取验证码</button>
                    </div>
                </div>
                <button class="btn-primary" style="width: 100%; height: 48px; margin-top: 20px;" onclick="goToPage('page-home'); switchTab('home');">登录</button>
                
                <div style="display: flex; align-items: center; gap: 16px; margin: 24px 0;">
                    <div style="flex: 1; height: 1px; background: var(--border);"></div>
                    <span style="font-size: 12px; color: var(--text-light);">其他登录方式</span>
                    <div style="flex: 1; height: 1px; background: var(--border);"></div>
                </div>
                
                <div style="display: flex; justify-content: center; gap: 40px;">
                    <div style="cursor: pointer;" onclick="showToast('微信登录')">
                        <div style="width: 48px; height: 48px; background: #07C160; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M8.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM15.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM12 20c-4.418 0-8-2.582-8-7s3.582-7 8-7 8 2.582 8 7-3.582 7-8 7zm0-12c-3.314 0-6 2.09-6 4.5s2.686 4.5 6 4.5 6-2.09 6-4.5-2.686-4.5-6-4.5z"/></svg>
                        </div>
                        <div style="font-size: 12px; color: var(--text-gray); text-align: center;">微信</div>
                    </div>
                    <div style="cursor: pointer;" onclick="showToast('苹果登录')">
                        <div style="width: 48px; height: 48px; background: var(--text-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
                        </div>
                        <div style="font-size: 12px; color: var(--text-gray); text-align: center;">Apple</div>
                    </div>
                </div>
                
                <div style="text-align: center; margin-top: 40px;">
                    <span style="font-size: 12px; color: var(--text-light);">登录即表示同意</span>
                    <a href="#" style="font-size: 12px; color: var(--primary);">《用户协议》</a>
                    <span style="font-size: 12px; color: var(--text-light);">和</span>
                    <a href="#" style="font-size: 12px; color: var(--primary);">《隐私政策》</a>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 积分任务中心 ==================== -->
    <div class="page" id="page-points">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-profile')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">积分中心</div>
        </div>
        
        <!-- 积分概览 -->
        <div style="background: linear-gradient(135deg, var(--gold), #FFD700); padding: 24px 20px; color: white;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <div style="font-size: 13px; opacity: 0.9;">我的积分</div>
                    <div style="font-size: 32px; font-weight: 700; margin: 6px 0;">1,560</div>
                    <div style="font-size: 12px; opacity: 0.8;">Lv.5 活跃用户 · 距离升级还需440积分</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 13px; opacity: 0.9;">今日签到</div>
                    <div id="sign-status" style="margin-top: 6px; padding: 6px 14px; background: rgba(255,255,255,0.2); border-radius: 16px; font-size: 13px; cursor: pointer;" onclick="doSign()">签到</div>
                </div>
            </div>
        </div>
        
        <!-- 签到日历 -->
        <div class="section" style="margin: 12px 0;">
            <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">连续签到</div>
            <div style="display: flex; justify-content: space-between; padding: 12px; background: var(--bg-gray); border-radius: 8px;">
                <div style="text-align: center;">
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 6px;">周一</div>
                    <div style="width: 36px; height: 36px; border-radius: 50%; background: #DDD; color: white; display: flex; align-items: center; justify-content: center; font-size: 13px;">+5</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 6px;">周二</div>
                    <div style="width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px;">+5</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 12px; color:var(--text-light); margin-bottom: 6px;">周三</div>
                    <div style="width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px;">+5</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 6px;">周四</div>
                    <div style="width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px;">+5</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 6px;">周五</div>
                    <div style="width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px;">+5</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 6px;">周六</div>
                    <div style="width: 36px; height: 36px; border-radius: 50%; background: #DDD; color: white; display: flex; align-items: center; justify-content: center; font-size: 13px;">+10</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 6px;">周日</div>
                    <div style="width: 36px; height: 36px; border-radius: 50%; background: #DDD; color: white; display: flex; align-items: center; justify-content: center; font-size: 13px;">+10</div>
                </div>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: var(--text-gray);">连续签到7天，周末双倍积分</div>
        </div>
        
        <!-- 积分任务 -->
        <div class="section">
            <div class="section-header"><div class="section-title">积分任务</div></div>
            <div class="task-item" style="display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
                <div style="width: 40px; height: 40px; background: #FFF0F0; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark);">每日签到</div>
                    <div style="font-size: 12px; color: var(--text-light);">+5积分</div>
                </div>
                <div style="padding: 4px 12px; background: var(--bg-gray); border-radius: 12px; font-size: 12px; color: var(--text-gray);">已完成</div>
            </div>
            <div class="task-item" style="display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
                <div style="width: 40px; height: 40px; background: #F0FFF0; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><path d="M8 3L4 14h16L16 3H8z"/><path d="M6 17l6 4 6-4"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark);">报名活动</div>
                    <div style="font-size: 12px; color: var(--text-light);">+20积分/次</div>
                </div>
                <div style="padding: 6px 14px; background: var(--primary); color: white; border-radius: 12px; font-size: 12px; cursor: pointer;">去参加</div>
            </div>
            <div class="task-item" style="display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
                <div style="width: 40px; height: 40px; background: #F5F0FF; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#764ba2" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark);">发布帖子</div>
                    <div style="font-size: 12px; color: var(--text-light);">+10积分/篇</div>
                </div>
                <div style="padding: 6px 14px; background: var(--primary); color: white; border-radius: 12px; font-size: 12px; cursor: pointer;" onclick="goToPage('page-community')">去发布</div>
            </div>
            <div class="task-item" style="display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border);">
                <div style="width: 40px; height: 40px; background: #FFFFF0; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark);">点赞帖子</div>
                    <div style="font-size: 12px; color: var(--text-light);">+2积分/次</div>
                </div>
                <div style="padding: 6px 14px; background: var(--primary); color: white; border-radius: 12px; font-size: 12px; cursor: pointer;">去点赞</div>
            </div>
            <div class="task-item" style="display: flex; align-items: center; padding: 14px 0;">
                <div style="width: 40px; height: 40px; background: #FFF5F5; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f5576c" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark);">商城购物</div>
                    <div style="font-size: 12px; color: var(--text-light);">每消费1元+1积分</div>
                </div>
                <div style="padding: 6px 14px; background: var(--primary); color: white; border-radius: 12px; font-size: 12px; cursor: pointer;" onclick="switchTab('mall')">去购物</div>
            </div>
        </div>
        
        <!-- 积分明细 -->
        <div class="section">
            <div class="section-header"><div class="section-title">积分明细</div><div class="section-more">全部<svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg></div></div>
            <div style="padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <div style="font-size: 14px; color: var(--text-dark);">活动报名奖励</div>
                    <div style="font-size: 12px; color: var(--text-light);">2025-05-18</div>
                </div>
                <div style="font-size: 16px; color: var(--green); font-weight: 600;">+20</div>
            </div>
            <div style="padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <div style="font-size: 14px; color: var(--text-dark);">签到奖励</div>
                    <div style="font-size: 12px; color: var(--text-light);">2025-05-18</div>
                </div>
                <div style="font-size: 16px; color: var(--green); font-weight: 600;">+5</div>
            </div>
            <div style="padding: 12px 0; display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <div style="font-size: 14px; color: var(--text-dark);">商品兑换</div>
                    <div style="font-size: 12px; color: var(--text-light);">2025-05-15</div>
                </div>
                <div style="font-size: 16px; color: var(--primary); font-weight: 600;">-500</div>
            </div>
        </div>
    </div>

    <!-- ==================== 优惠券领取中心 ==================== -->
    <div class="page" id="page-coupon">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-profile')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">领券中心</div>
        </div>
        <div class="sub-tab-bar">
            <div class="sub-tab-item active" onclick="switchSubTab(this)">可领取</div>
            <div class="sub-tab-item" onclick="switchSubTab(this)">已领取</div>
            <div class="sub-tab-item" onclick="switchSubTab(this)">已使用</div>
            <div class="sub-tab-item" onclick="switchSubTab(this)">已过期</div>
        </div>
        
        <div style="padding: 12px 16px;">
            <div style="display: flex; background: white; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border);">
                <div style="width: 100px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 16px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    <div style="font-size: 28px; font-weight: 700;">¥50</div>
                    <div style="font-size: 11px; opacity: 0.9;">满200可用</div>
                </div>
                <div style="flex: 1; padding: 14px;">
                    <div style="font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px;">新人专享券</div>
                    <div style="font-size: 12px; color: var(--text-gray); margin-bottom: 8px;">限新用户首次领取使用</div>
                    <div style="font-size: 11px; color: var(--text-light);">有效期至 2025-06-30</div>
                </div>
                <div style="display: flex; align-items: center; padding-right: 14px;">
                    <div style="padding: 8px 16px; background: var(--primary); color: white; border-radius: 16px; font-size: 13px; cursor: pointer;" onclick="this.textContent='已领取';this.style.background='#CCC';showToast('领取成功')">立即领取</div>
                </div>
            </div>
            
            <div style="display: flex; background: white; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border);">
                <div style="width: 100px; background: linear-gradient(135deg, var(--gold), #FFD700); color: white; padding: 16px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    <div style="font-size: 28px; font-weight: 700;">¥20</div>
                    <div style="font-size: 11px; opacity: 0.9;">满100可用</div>
                </div>
                <div style="flex: 1; padding: 14px;">
                    <div style="font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px;">活动满减券</div>
                    <div style="font-size: 12px; color: var(--text-gray); margin-bottom: 8px;">适用于所有户外活动报名</div>
                    <div style="font-size: 11px; color: var(--text-light);">有效期至 2025-07-15</div>
                </div>
                <div style="display: flex; align-items: center; padding-right: 14px;">
                    <div style="padding: 8px 16px; background: var(--gold); color: white; border-radius: 16px; font-size: 13px; cursor: pointer;" onclick="this.textContent='已领取';this.style.background='#CCC';showToast('领取成功')">立即领取</div>
                </div>
            </div>
            
            <div style="display: flex; background: white; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border);">
                <div style="width: 100px; background: linear-gradient(135deg, var(--green), #1ABC9C); color: white; padding: 16px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    <div style="font-size: 28px; font-weight: 700;">¥30</div>
                    <div style="font-size: 11px; opacity: 0.9;">无门槛</div>
                </div>
                <div style="flex: 1; padding: 14px;">
                    <div style="font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px;">装备专享券</div>
                    <div style="font-size: 12px; color: var(--text-gray); margin-bottom: 8px;">商城装备类商品专用</div>
                    <div style="font-size: 11px; color: var(--text-light);">有效期至 2025-08-01</div>
                </div>
                <div style="display: flex; align-items: center; padding-right: 14px;">
                    <div style="padding: 8px 16px; background: var(--green); color: white; border-radius: 16px; font-size: 13px; cursor: pointer;" onclick="this.textContent='已领取';this.style.background='#CCC';showToast('领取成功')">立即领取</div>
                </div>
            </div>
            
            <div style="display: flex; background: white; border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border);">
                <div style="width: 100px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 16px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
                    <div style="font-size: 20px; font-weight: 700;">8折</div>
                    <div style="font-size: 11px; opacity: 0.9;">最高减50</div>
                </div>
                <div style="flex: 1; padding: 14px;">
                    <div style="font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px;">限时折扣券</div>
                    <div style="font-size: 12px; color: var(--text-gray); margin-bottom: 8px;">商城全场商品可用</div>
                    <div style="font-size: 11px; color: var(--text-light);">有效期至 2025-06-20</div>
                </div>
                <div style="display: flex; align-items: center; padding-right: 14px;">
                    <div style="padding: 8px 16px; background: #764ba2; color: white; border-radius: 16px; font-size: 13px; cursor: pointer;" onclick="this.textContent='已领取';this.style.background='#CCC';showToast('领取成功')">立即领取</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 购物车 ==================== -->
    <div class="page" id="page-cart">
        <div class="page-header">
            <div class="back-btn" onclick="switchTab('mall')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">购物车</div>
            <div class="page-action" style="font-size: 14px; color: var(--primary);" onclick="showToast('管理购物车')">管理</div>
        </div>
        
        <div style="padding: 12px 16px;">
            <div style="background: white; border-radius: 12px; padding: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px;">
                <input type="checkbox" checked style="width: 20px; height: 20px; accent-color: var(--primary);">
                <div style="width: 70px; height: 70px; border-radius: 8px; overflow: hidden; flex-shrink: 0;">
                    <img src="imgs/gear.jpg" alt="背包">
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark); margin-bottom: 6px;">探路者防水登山背包 40L</div>
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 8px;">颜色：黑色 | 尺码：40L</div>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="font-size: 16px; color: var(--primary); font-weight: 600;">¥399</div>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <div style="width: 24px; height: 24px; background: var(--bg-gray); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px;">-</div>
                            <div style="font-size: 14px; min-width: 20px; text-align: center;">1</div>
                            <div style="width: 24px; height: 24px; background: var(--primary); color: white; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px;">+</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div style="background: white; border-radius: 12px; padding: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px;">
                <input type="checkbox" checked style="width: 20px; height: 20px; accent-color: var(--primary);">
                <div style="width: 70px; height: 70px; border-radius: 8px; overflow: hidden; flex-shrink: 0;">
                    <img src="imgs/shoes.jpg" alt="徒步鞋">
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark); margin-bottom: 6px;">骆驼户外徒步鞋</div>
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 8px;">颜色：深灰色 | 尺码：42</div>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="font-size: 16px; color: var(--primary); font-weight: 600;">¥299</div>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <div style="width: 24px; height: 24px; background: var(--bg-gray); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px;">-</div>
                            <div style="font-size: 14px; min-width: 20px; text-align: center;">1</div>
                            <div style="width: 24px; height: 24px; background: var(--primary); color: white; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px;">+</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div style="position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin: 0 auto; background: white; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 -2px 10px rgba(0,0,0,0.06); padding-bottom: calc(12px + env(safe-area-inset-bottom));">
            <div style="display: flex; align-items: center; gap: 8px;">
                <input type="checkbox" checked style="width: 20px; height: 20px; accent-color: var(--primary);">
                <span style="font-size: 13px; color: var(--text-gray);">全选</span>
            </div>
            <div style="flex: 1; text-align: right;">
                <span style="font-size: 13px; color: var(--text-gray);">合计：</span>
                <span style="font-size: 18px; color: var(--primary); font-weight: 600;">¥698</span>
            </div>
            <button class="btn-primary" style="height: 44px; width: 100px;" onclick="goToPage('page-order-confirm')">结算</button>
        </div>
    </div>

    <!-- ==================== 订单确认页 ==================== -->
    <div class="page" id="page-order-confirm">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-cart')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">确认订单</div>
        </div>
        
        <!-- 收货地址 -->
        <div style="background: var(--bg-white); padding: 16px; margin-bottom: 8px; cursor: pointer;" onclick="showToast('选择收货地址')">
            <div style="display: flex; align-items: center; gap: 12px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                <div style="flex: 1;">
                    <div style="display: flex; gap: 8px; margin-bottom: 4px;">
                        <span style="font-size: 15px; font-weight: 600;">张三</span>
                        <span style="font-size: 15px; color: var(--text-dark);">138****8888</span>
                    </div>
                    <div style="font-size: 13px; color: var(--text-gray);">广东省广州市天河区体育西路123号</div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-light)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            </div>
        </div>
        
        <!-- 商品信息 -->
        <div class="section">
            <div style="display: flex; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border);">
                <div style="width: 70px; height: 70px; border-radius: 8px; overflow: hidden; flex-shrink: 0;">
                    <img src="imgs/gear.jpg" alt="背包">
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark); margin-bottom: 4px;">探路者防水登山背包 40L</div>
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 6px;">颜色：黑色 | 尺码：40L</div>
                    <div style="font-size: 15px; color: var(--primary); font-weight: 600;">¥399</div>
                </div>
                <div style="font-size: 14px; color: var(--text-gray);">x1</div>
            </div>
            <div style="display: flex; gap: 12px; padding-top: 12px;">
                <div style="width: 70px; height: 70px; border-radius: 8px; overflow: hidden; flex-shrink: 0;">
                    <img src="imgs/shoes.jpg" alt="徒步鞋">
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark); margin-bottom: 4px;">骆驼户外徒步鞋</div>
                    <div style="font-size: 12px; color: var(--text-light); margin-bottom: 6px;">颜色：深灰色 | 尺码：42</div>
                    <div style="font-size: 15px; color: var(--primary); font-weight: 600;">¥299</div>
                </div>
                <div style="font-size: 14px; color: var(--text-gray);">x1</div>
            </div>
        </div>
        
        <!-- 配送方式 -->
        <div class="section">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border);">
                <span style="font-size: 14px;">配送方式</span>
                <span style="font-size: 13px; color: var(--text-gray);">快递包邮</span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;">
                <span style="font-size: 14px;">预计送达</span>
                <span style="font-size: 13px; color: var(--text-gray);">5月22日-5月24日</span>
            </div>
        </div>
        
        <!-- 收货方式选择 -->
        <div class="section">
            <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">收货方式</div>
            <div style="display: flex; gap: 10px; margin-bottom: 12px;">
                <div id="delivery-express" style="flex: 1; padding: 14px; border: 2px solid var(--primary); border-radius: 10px; text-align: center; cursor: pointer;" onclick="selectDelivery('express')">
                    <div style="width: 32px; height: 32px; background: var(--primary); border-radius: 8px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
                    </div>
                    <div style="font-size: 13px; color: var(--primary); font-weight: 600;">快递配送</div>
                    <div style="font-size: 11px; color: var(--text-light);">送货上门</div>
                </div>
                <div id="delivery-pickup" style="flex: 1; padding: 14px; border: 2px solid var(--border); border-radius: 10px; text-align: center; cursor: pointer; background: var(--bg-gray);" onclick="selectDelivery('pickup')">
                    <div style="width: 32px; height: 32px; background: var(--text-light); border-radius: 8px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    </div>
                    <div style="font-size: 13px; color: var(--text-dark); font-weight: 600;">线下自提</div>
                    <div style="font-size: 11px; color: var(--text-light);">扫码核销</div>
                </div>
            </div>
            <!-- 线下自提信息 -->
            <div id="pickup-info" style="display: none; padding: 14px; background: #F0FFF0; border-radius: 10px; margin-top: 10px;">
                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    <span style="font-size: 14px; font-weight: 600; color: var(--green);">自提点信息</span>
                </div>
                <div style="font-size: 13px; color: var(--text-dark); margin-bottom: 4px;">广州天河体育西路店</div>
                <div style="font-size: 12px; color: var(--text-gray); margin-bottom: 10px;">广州市天河区体育西路123号102铺</div>
                <div style="display: flex; gap: 10px;">
                    <span style="font-size: 12px; padding: 4px 10px; background: var(--green); color: white; border-radius: 4px;">营业中 09:00-21:00</span>
                    <span style="font-size: 12px; padding: 4px 10px; background: var(--bg-white); color: var(--text-dark); border-radius: 4px;">距您1.2km</span>
                </div>
            </div>
        </div>
        
        <!-- 优惠券 -->
        <div style="background: var(--bg-white); padding: 14px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;" onclick="goToPage('page-coupon')">
            <span style="font-size: 14px;">优惠券</span>
            <div style="display: flex; align-items: center; gap: 6px;">
                <span style="font-size: 13px; color: var(--primary);">-¥50</span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-light)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
            </div>
        </div>
        
        <!-- 积分抵扣 -->
        <div style="background: var(--bg-white); padding: 14px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
            <span style="font-size: 14px;">积分抵扣</span>
            <div style="display: flex; align-items: center; gap: 8px;">
                <span style="font-size: 12px; color: var(--text-light);">可用560积分抵¥5.6</span>
                <input type="checkbox" checked style="width: 18px; height: 18px; accent-color: var(--primary);">
            </div>
        </div>
        
        <!-- 备注 -->
        <div style="background: var(--bg-white); padding: 14px 16px; margin-bottom: 8px;">
            <div style="font-size: 14px; margin-bottom: 8px;">订单备注</div>
            <input type="text" placeholder="选填，可备注特殊需求" style="width: 100%; padding: 10px 0; border: none; font-size: 13px; outline: none; background: transparent;">
        </div>
        
        <!-- 支付方式 -->
        <div class="section">
            <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">支付方式</div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border);">
                <div style="display: flex; align-items: center; gap: 10px;">
                    <div style="width: 24px; height: 24px; background: #07C160; border-radius: 6px; display: flex; align-items: center; justify-content: center;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M8.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM15.5 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>
                    </div>
                    <span style="font-size: 14px;">微信支付</span>
                </div>
                <div style="width: 20px; height: 20px; border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                    <div style="width: 10px; height: 10px; background: var(--primary); border-radius: 50%;"></div>
                </div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;">
                <div style="display: flex; align-items: center; gap: 10px;">
                    <div style="width: 24px; height: 24px; background: #1677FF; border-radius: 6px; display: flex; align-items: center; justify-content: center;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                    </div>
                    <span style="font-size: 14px;">支付宝</span>
                </div>
                <div style="width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%;"></div>
            </div>
        </div>
        
        <div style="height: 100px;"></div>
        <div style="position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin: 0 auto; background: white; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 -2px 10px rgba(0,0,0,0.06); padding-bottom: calc(12px + env(safe-area-inset-bottom));">
            <div style="flex: 1;">
                <span style="font-size: 13px; color: var(--text-gray);">合计：</span>
                <span style="font-size: 20px; color: var(--primary); font-weight: 700;">¥642.40</span>
            </div>
            <button class="btn-primary" style="height: 44px; width: 120px;" onclick="submitOrder()">提交订单</button>
        </div>
    </div>
    
    <script>
    function submitOrder() {
        // 检查是否选择了线下自提（通过pickup-info的display状态判断）
        const pickupInfo = document.getElementById('pickup-info');
        const isPickupSelected = pickupInfo && pickupInfo.style.display === 'block';
        
        if (isPickupSelected) {
            showToast('支付成功，请到店出示核销码');
            setTimeout(() => {
                goToPage('page-qrcode');
            }, 1500);
        } else {
            showToast('支付成功');
            setTimeout(() => {
                goToPage('page-home');
                switchTab('profile');
            }, 1500);
        }
    }
    </script>
            showToast('支付成功');
            setTimeout(() => {
                goToPage('page-qrcode');
            }, 1500);
        } else {
            showToast('支付成功');
            setTimeout(() => {
                goToPage('page-home');
                switchTab('profile');
            }, 1500);
        }
    }
    </script>

    <!-- ==================== 收货地址管理 ==================== -->
    <div class="page" id="page-address">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-order-confirm')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">收货地址</div>
            <div class="page-action" style="font-size: 14px; color: var(--primary);" onclick="showToast('添加新地址')">添加</div>
        </div>
        
        <div style="padding: 12px 16px;">
            <div style="background: white; border-radius: 12px; padding: 16px; margin-bottom: 12px;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;">
                    <div>
                        <span style="font-size: 16px; font-weight: 600; margin-right: 10px;">张三</span>
                        <span style="font-size: 15px; color: var(--text-dark);">138****8888</span>
                    </div>
                    <span style="padding: 2px 8px; background: var(--primary); color: white; font-size: 10px; border-radius: 4px;">默认</span>
                </div>
                <div style="font-size: 13px; color: var(--text-gray); margin-bottom: 12px;">广东省广州市天河区体育西路123号</div>
                <div style="display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border);">
                    <div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-gray); cursor: pointer;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        编辑
                    </div>
                    <div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-gray); cursor: pointer;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                        删除
                    </div>
                </div>
            </div>
            
            <div style="background: white; border-radius: 12px; padding: 16px;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;">
                    <div>
                        <span style="font-size: 16px; font-weight: 600; margin-right: 10px;">李四</span>
                        <span style="font-size: 15px; color: var(--text-dark);">139****6666</span>
                    </div>
                </div>
                <div style="font-size: 13px; color: var(--text-gray); margin-bottom: 12px;">广东省深圳市南山区科技园南区A1栋</div>
                <div style="display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border);">
                    <div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--primary); cursor: pointer;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                        设为默认
                    </div>
                    <div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-gray); cursor: pointer;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        编辑
                    </div>
                    <div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-gray); cursor: pointer;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                        删除
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 会员中心 ==================== -->
    <div class="page" id="page-vip">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-profile')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">会员中心</div>
        </div>
        
        <!-- 会员等级 -->
        <div style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); padding: 24px 20px; color: white;">
            <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px;">
                <div style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #FFD700); display: flex; align-items: center; justify-content: center;">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 18px; font-weight: 600; margin-bottom: 4px;">Lv.5 活跃用户</div>
                    <div style="font-size: 12px; opacity: 0.8;">已累计参与28次活动</div>
                </div>
            </div>
            <div style="background: rgba(255,255,255,0.1); border-radius: 8px; padding: 14px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                    <span style="font-size: 13px;">距离升级还需</span>
                    <span style="font-size: 13px; color: var(--gold);">440积分</span>
                </div>
                <div style="height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden;">
                    <div style="height: 100%; width: 72%; background: linear-gradient(90deg, var(--gold), #FFD700); border-radius: 3px;"></div>
                </div>
            </div>
        </div>
        
        <!-- 会员权益 -->
        <div class="section">
            <div class="section-header"><div class="section-title">会员权益</div></div>
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center;">
                <div>
                    <div style="width: 40px; height: 40px; background: #FFF0F0; border-radius: 10px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M2 9V7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2"/><path d="M2 15v-2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2"/></svg>
                    </div>
                    <div style="font-size: 12px; color: var(--text-dark);">专属优惠券</div>
                    <div style="font-size: 10px; color: var(--text-light);">每月领券</div>
                </div>
                <div>
                    <div style="width: 40px; height: 40px; background: #F0FFF0; border-radius: 10px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    </div>
                    <div style="font-size: 12px; color: var(--text-dark);">升级赠保险</div>
                    <div style="font-size: 10px; color: var(--text-light);">高额保障</div>
                </div>
                <div>
                    <div style="width: 40px; height: 40px; background: #F5F0FF; border-radius: 10px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#764ba2" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/></svg>
                    </div>
                    <div style="font-size: 12px; color: var(--text-dark);">优先参团</div>
                    <div style="font-size: 10px; color: var(--text-light);">拼团优先</div>
                </div>
                <div>
                    <div style="width: 40px; height: 40px; background: #FFFFF0; border-radius: 10px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                    </div>
                    <div style="font-size: 12px; color: var(--text-dark);">积分加速</div>
                    <div style="font-size: 10px; color: var(--text-light);">1.5倍积分</div>
                </div>
                <div>
                    <div style="width: 40px; height: 40px; background: #FFF5F5; border-radius: 10px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f5576c" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div style="font-size: 12px; color: var(--text-dark);">专属客服</div>
                    <div style="font-size: 10px; color: var(--text-light);">VIP通道</div>
                </div>
                <div>
                    <div style="width: 40px; height: 40px; background: #F0F8FF; border-radius: 10px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4facfe" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                    </div>
                    <div style="font-size: 12px; color: var(--text-dark);">活动折扣</div>
                    <div style="font-size: 10px; color: var(--text-light);">专属价</div>
                </div>
            </div>
        </div>
        
        <!-- 成长任务 -->
        <div class="section">
            <div class="section-header"><div class="section-title">成长任务</div></div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border);">
                <div style="display: flex; align-items: center; gap: 10px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M8 3L4 14h16L16 3H8z"/></svg>
                    <span style="font-size: 14px;">参加活动</span>
                </div>
                <div style="text-align: right;">
                    <div style="font-size: 13px; color: var(--text-dark);">28/50</div>
                    <div style="font-size: 11px; color: var(--primary);">+200成长值</div>
                </div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border);">
                <div style="display: flex; align-items: center; gap: 10px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                    <span style="font-size: 14px;">累计消费</span>
                </div>
                <div style="text-align: right;">
                    <div style="font-size: 13px; color: var(--text-dark);">¥2,580/¥5000</div>
                    <div style="font-size: 11px; color: var(--primary);">+300成长值</div>
                </div>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;">
                <div style="display: flex; align-items: center; gap: 10px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/></svg>
                    <span style="font-size: 14px;">分享活动</span>
                </div>
                <div style="text-align: right;">
                    <div style="font-size: 13px; color: var(--text-dark);">12/30</div>
                    <div style="font-size: 11px; color: var(--primary);">+100成长值</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 物流跟踪页面 ==================== -->
    <div class="page" id="page-logistics">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-profile')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">物流跟踪</div>
        </div>
        
        <!-- 物流状态 -->
        <div style="background: var(--bg-white); padding: 16px; margin-bottom: 8px;">
            <div style="display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border);">
                <div style="width: 60px; height: 60px; border-radius: 8px; overflow: hidden;">
                    <img src="imgs/gear.jpg" alt="商品图片">
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 14px; color: var(--text-dark); margin-bottom: 4px;">探路者防水登山背包 40L</div>
                    <div style="font-size: 12px; color: var(--text-light);">运单号：SF1234567890</div>
                </div>
            </div>
            <div style="display: flex; align-items: center; gap: 12px; padding-top: 16px;">
                <div style="width: 40px; height: 40px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 15px; font-weight: 600; color: var(--green); margin-bottom: 2px;">派送中</div>
                    <div style="font-size: 12px; color: var(--text-gray);">预计今日 14:00 前送达</div>
                </div>
            </div>
        </div>
        
        <!-- 快递员信息 -->
        <div style="background: var(--bg-white); padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px;">
            <div style="width: 40px; height: 40px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: 600;">张</div>
            <div style="flex: 1;">
                <div style="font-size: 14px; color: var(--text-dark); margin-bottom: 2px;">快递员：张明</div>
                <div style="font-size: 12px; color: var(--text-gray);">电话：138****6789</div>
            </div>
            <div style="padding: 8px 16px; background: var(--primary); color: white; border-radius: 20px; font-size: 13px; cursor: pointer;" onclick="showToast('拨打快递员')">联系快递员</div>
        </div>
        
        <!-- 物流轨迹 -->
        <div class="section">
            <div class="section-header"><div class="section-title">物流详情</div></div>
            <div style="padding: 0 4px;">
                <div style="padding-left: 20px; border-left: 2px solid var(--primary); padding-bottom: 20px; position: relative;">
                    <div style="position: absolute; left: -7px; top: 0; width: 12px; height: 12px; background: var(--primary); border-radius: 50%; border: 2px solid white;"></div>
                    <div style="font-size: 14px; color: var(--text-dark); font-weight: 600; margin-bottom: 4px;">【派送中】快递员正在为您派件</div>
                    <div style="font-size: 12px; color: var(--text-light);">2025-05-20 08:30:22</div>
                    <div style="font-size: 12px; color: var(--text-gray); margin-top: 4px;">快递员已联系收件人，请保持电话畅通</div>
                </div>
                <div style="padding-left: 20px; border-left: 2px solid var(--border); padding-bottom: 20px; position: relative; opacity: 0.7;">
                    <div style="position: absolute; left: -6px; top: 0; width: 8px; height: 8px; background: var(--border); border-radius: 50%;"></div>
                    <div style="font-size: 13px; color: var(--text-dark); margin-bottom: 4px;">【运输中】快件已到达 广州转运中心</div>
                    <div style="font-size: 12px; color: var(--text-light);">2025-05-20 06:15:00</div>
                </div>
                <div style="padding-left: 20px; border-left: 2px solid var(--border); padding-bottom: 20px; position: relative; opacity: 0.7;">
                    <div style="position: absolute; left: -6px; top: 0; width: 8px; height: 8px; background: var(--border); border-radius: 50%;"></div>
                    <div style="font-size: 13px; color: var(--text-dark); margin-bottom: 4px;">【运输中】快件已从 深圳集散中心发出</div>
                    <div style="font-size: 12px; color: var(--text-light);">2025-05-19 22:30:00</div>
                </div>
                <div style="padding-left: 20px; border-left: 2px solid var(--border); position: relative; opacity: 0.7;">
                    <div style="position: absolute; left: -6px; top: 0; width: 8px; height: 8px; background: var(--border); border-radius: 50%;"></div>
                    <div style="font-size: 13px; color: var(--text-dark); margin-bottom: 4px;">【已揽收】商家已发货，正在等待揽收</div>
                    <div style="font-size: 12px; color: var(--text-light);">2025-05-19 15:42:00</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 二维码核销页面 ==================== -->
    <div class="page" id="page-qrcode">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-profile')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">自提核销</div>
        </div>
        
        <div style="text-align: center; padding: 30px 20px; background: var(--bg-white);">
            <div style="font-size: 15px; color: var(--text-gray); margin-bottom: 20px;">请到店出示此二维码进行核销</div>
            <div style="width: 200px; height: 200px; margin: 0 auto; padding: 16px; background: white; border: 2px solid var(--border); border-radius: 12px;">
                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-gray); border-radius: 8px;">
                    <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="var(--text-light)" stroke-width="1">
                        <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="3" height="3"/><rect x="18" y="14" width="3" height="3"/><rect x="14" y="18" width="3" height="3"/><rect x="18" y="18" width="3" height="3"/>
                    </svg>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div style="font-size: 14px; color: var(--text-dark); font-weight: 600;">核销码：CX20250520001</div>
                <div style="font-size: 12px; color: var(--text-gray); margin-top: 8px;">有效期至：2025-05-25</div>
            </div>
        </div>
        
        <div class="section" style="margin-top: 12px;">
            <div class="section-header"><div class="section-title">自提点信息</div></div>
            <div style="padding: 14px; background: #F0FFF0; border-radius: 10px;">
                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    <span style="font-size: 14px; font-weight: 600; color: var(--green);">行者千寻 广州天河店</span>
                </div>
                <div style="font-size: 13px; color: var(--text-dark); margin-bottom: 6px;">📍 广州市天河区体育西路123号102铺</div>
                <div style="font-size: 12px; color: var(--text-gray); margin-bottom: 10px;">🕐 营业时间：09:00 - 21:00</div>
                <div style="display: flex; gap: 10px;">
                    <div style="flex: 1; padding: 10px; background: white; border-radius: 8px; text-align: center; cursor: pointer;" onclick="showToast('导航中')">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" style="margin: 0 auto 4px;"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
                        <div style="font-size: 12px; color: var(--text-dark);">导航到店</div>
                    </div>
                    <div style="flex: 1; padding: 10px; background: white; border-radius: 8px; text-align: center; cursor: pointer;" onclick="showToast('拨打电话')">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" style="margin: 0 auto 4px;"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                        <div style="font-size: 12px; color: var(--text-dark);">联系门店</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== 草稿箱页面 ==================== -->
    <div class="page" id="page-drafts">
        <div class="page-header">
            <div class="back-btn" onclick="goToPage('page-community')"><svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg></div>
            <div class="page-title">草稿箱</div>
            <div class="page-action" style="font-size: 14px; color: var(--primary);" onclick="showToast('新建帖子')">新建</div>
        </div>
        
        <div style="padding: 12px 16px;">
            <div style="background: var(--bg-white); border-radius: 12px; padding: 14px; margin-bottom: 10px; cursor: pointer;" onclick="showToast('编辑草稿')">
                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                    <div style="width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--bg-gray);">
                        <img src="imgs/nature1.jpg" alt="草稿图片">
                    </div>
                    <div style="flex: 1;">
                        <div style="font-size: 14px; color: var(--text-dark); margin-bottom: 4px;">【草稿】深圳梧桐山登山记</div>
                        <div style="font-size: 12px; color: var(--text-light);">最后编辑于 2025-05-19 15:30</div>
                    </div>
                </div>
                <div style="font-size: 12px; color: var(--text-gray);">保存了3张图片，2段文字...</div>
            </div>
            
            <div style="background: var(--bg-white); border-radius: 12px; padding: 14px; cursor: pointer;" onclick="showToast('编辑草稿')">
                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                    <div style="width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--bg-gray);">
                        <img src="imgs/forest.jpg" alt="草稿图片">
                    </div>
                    <div style="flex: 1;">
                        <div style="font-size: 14px; color: var(--text-dark); margin-bottom: 4px;">【约伴】周末从化徒步招募队员</div>
                        <div style="font-size: 12px; color: var(--text-light);">最后编辑于 2025-05-18 20:15</div>
                    </div>
                </div>
                <div style="font-size: 12px; color: var(--text-gray);">保存了5张图片...</div>
            </div>
        </div>
    </div>

    <!-- ==================== 底部导航 ==================== -->
    <div class="tab-bar">
        <div class="tab-item active" onclick="switchTab('home')"><svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span>首页</span></div>
        <div class="tab-item" onclick="switchTab('activities')"><svg viewBox="0 0 24 24"><path d="M8 3L4 14h16L16 3H8z"/><path d="M6 17l6 4 6-4"/></svg><span>活动</span></div>
        <div class="tab-item" onclick="switchTab('community')"><svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/></svg><span>社区</span></div>
        <div class="tab-item" onclick="switchTab('mall')"><svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><span>商城</span></div>
        <div class="tab-item" onclick="switchTab('profile')"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
    </div>

    <!-- 报名弹窗 -->
    <div class="modal" id="signup-modal">
        <div class="modal-content">
            <div class="modal-handle"></div>
            <div class="modal-title">确认报名</div>
            <div class="form-group"><label class="form-label">活动名称</label><div style="padding: 12px; background: var(--bg-gray); border-radius: 8px; font-size: 14px;">【周末轻徒】从化石门台穿越</div></div>
            <div class="form-group"><label class="form-label">报名人数</label><select class="form-select"><option>1人</option><option>2人</option><option>3人</option></select></div>
            <div class="form-group"><label class="form-label">联系电话</label><input type="tel" class="form-input" placeholder="请输入手机号码" value="138****8888"></div>
            <div class="form-group">
                <label class="form-label" style="display: flex; justify-content: space-between;">
                    <span>紧急联系人</span>
                    <span style="color: var(--text-light); font-size: 12px;">用于紧急情况联系</span>
                </label>
                <input type="text" class="form-input" placeholder="请输入紧急联系人姓名和电话">
            </div>
            <div class="form-group">
                <label class="form-label" style="display: flex; justify-content: space-between;">
                    <span>保险升级（可选）</span>
                    <span style="color: var(--green);">基础险已含 · 升级¥3/天</span>
                </label>
                <div style="padding: 12px; background: #E8F5E9; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
                    <span style="font-size: 14px;">百万医疗险（保额100万）</span>
                    <input type="checkbox" style="width: 18px; height: 18px; accent-color: var(--green);">
                </div>
            </div>
            <!-- 支付模式选择 -->
            <div class="form-group">
                <label class="form-label">支付方式</label>
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    <div style="display: flex; align-items: center; padding: 12px; border: 2px solid var(--primary); border-radius: 8px; cursor: pointer;" onclick="selectPayMode(this)">
                        <input type="radio" name="payMode" checked style="width: 18px; height: 18px; margin-right: 10px; accent-color: var(--primary);">
                        <div style="flex: 1;">
                            <div style="font-size: 14px; color: var(--text-dark); font-weight: 600;">即时支付</div>
                            <div style="font-size: 12px; color: var(--text-gray);">报名后15-30分钟内完成支付</div>
                        </div>
                        <span style="font-size: 16px; color: var(--primary); font-weight: 600;">¥168</span>
                    </div>
                    <div style="display: flex; align-items: center; padding: 12px; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--bg-gray);" onclick="selectPayMode(this)">
                        <input type="radio" name="payMode" style="width: 18px; height: 18px; margin-right: 10px; accent-color: var(--primary);">
                        <div style="flex: 1;">
                            <div style="font-size: 14px; color: var(--text-dark); font-weight: 600;">定金模式（长线活动）</div>
                            <div style="font-size: 12px; color: var(--text-gray);">先付定金¥50，成团后补尾款¥118</div>
                        </div>
                        <span style="font-size: 16px; color: var(--gold); font-weight: 600;">¥50</span>
                    </div>
                    <div style="display: flex; align-items: center; padding: 12px; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--bg-gray);" onclick="selectPayMode(this)">
                        <input type="radio" name="payMode" style="width: 18px; height: 18px; margin-right: 10px; accent-color: var(--primary);">
                        <div style="flex: 1;">
                            <div style="font-size: 14px; color: var(--text-dark); font-weight: 600;">延期支付（长线活动）</div>
                            <div style="font-size: 12px; color: var(--text-gray);">成团后再支付全款¥168</div>
                        </div>
                        <span style="font-size: 12px; color: var(--text-light);">待成团</span>
                    </div>
                </div>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 16px; padding-top: 12px; border-top: 1px solid var(--border);">
                <span style="color: var(--text-gray);">订单总额</span>
                <span style="font-size: 20px; font-weight: 600; color: var(--primary);">¥168</span>
            </div>
            <button class="btn-primary" style="width: 100%;" onclick="submitSignup()">确认报名</button>
            <div style="text-align: center; margin-top: 12px;"><a href="#" style="color: var(--text-gray); font-size: 13px;" onclick="closeModal()">取消</a></div>
        </div>
    </div>
    <div class="toast" id="toast"></div>

    <script>
        function goToPage(pageId) { document.querySelectorAll('.page').forEach(page => page.classList.remove('active')); document.getElementById(pageId).classList.add('active'); window.scrollTo(0, 0); }
        function switchTab(tab) { 
            document.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active')); 
            event.currentTarget.classList.add('active'); 
            const pageMap = {'home': 'page-home', 'activities': 'page-activities', 'community': 'page-community', 'mall': 'page-mall', 'profile': 'page-profile'}; 
            goToPage(pageMap[tab]); 
        }
        function switchSubTab(el) {
            el.parentElement.querySelectorAll('.sub-tab-item').forEach(item => item.classList.remove('active'));
            el.classList.add('active');
        }
        function switchMallTab(el, type) {
            el.parentElement.querySelectorAll('.sub-tab-item').forEach(item => item.classList.remove('active'));
            el.classList.add('active');
            document.getElementById('mall-gear-content').style.display = type === 'gear' ? 'block' : 'none';
            document.getElementById('mall-insurance-content').style.display = type === 'insurance' ? 'block' : 'none';
            document.getElementById('mall-points-content').style.display = type === 'points' ? 'block' : 'none';
        }
        function openSignupModal() { document.getElementById('signup-modal').classList.add('active'); }
        function closeModal() { document.getElementById('signup-modal').classList.remove('active'); }
        function submitSignup() { closeModal(); showToast('报名成功！'); }
        function doSign() {
            const signBtn = document.getElementById('sign-status');
            if(signBtn.textContent === '签到') {
                signBtn.textContent = '已签到';
                signBtn.style.background = 'var(--gold)';
                showToast('签到成功！+5积分');
            } else {
                showToast('今日已签到');
            }
        }
        function selectDelivery(type) {
            const express = document.getElementById('delivery-express');
            const pickup = document.getElementById('delivery-pickup');
            const pickupInfo = document.getElementById('pickup-info');
            if(type === 'express') {
                express.style.borderColor = 'var(--primary)';
                express.style.background = 'white';
                express.querySelector('div').style.background = 'var(--primary)';
                pickup.style.borderColor = 'var(--border)';
                pickup.style.background = 'var(--bg-gray)';
                pickup.querySelector('div').style.background = 'var(--text-light)';
                pickupInfo.style.display = 'none';
            } else {
                pickup.style.borderColor = 'var(--primary)';
                pickup.style.background = 'white';
                pickup.querySelector('div').style.background = 'var(--primary)';
                express.style.borderColor = 'var(--border)';
                express.style.background = 'var(--bg-gray)';
                express.querySelector('div').style.background = 'var(--text-light)';
                pickupInfo.style.display = 'block';
            }
        }
        function selectPayMode(el) {
            const options = el.parentElement.querySelectorAll('div[onclick="selectPayMode(this)"]');
            options.forEach(opt => {
                opt.style.borderColor = 'var(--border)';
                opt.style.background = 'var(--bg-gray)';
                opt.querySelector('input[type="radio"]').checked = false;
            });
            el.style.borderColor = 'var(--primary)';
            el.style.background = 'white';
            el.querySelector('input[type="radio"]').checked = true;
        }
        function submitOrder() {
            const pickupInfo = document.getElementById('pickup-info');
            const isPickupSelected = pickupInfo && pickupInfo.style.display === 'block';
            if (isPickupSelected) {
                showToast('支付成功，请到店出示核销码');
                setTimeout(() => { goToPage('page-qrcode'); }, 1500);
            } else {
                showToast('支付成功');
                setTimeout(() => { goToPage('page-home'); switchTab('profile'); }, 1500);
            }
        }
        function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); }
        document.getElementById('signup-modal').addEventListener('click', function(e) { if (e.target === this) closeModal(); });
        document.querySelectorAll('.filter-item').forEach(tab => { tab.addEventListener('click', function() { this.parentElement.querySelectorAll('.filter-item').forEach(t => t.classList.remove('active')); this.classList.add('active'); }); });
        document.querySelector('.modal-content').addEventListener('click', e => e.stopPropagation());
        
        // 更新底部导航项点击处理
        document.querySelectorAll('.tab-item').forEach(tab => {
            tab.addEventListener('click', function() {
                const onclickAttr = this.getAttribute('onclick');
                if(!onclickAttr || onclickAttr.includes('switchTab')) return;
            });
        });
    </script>
</body>
</html>