编辑页面

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: #E63946;
            --accent: #FF6B35;
            --bg-gray: #F5F5F5;
            --bg-white: #FFFFFF;
            --text-dark: #1A1A1A;
            --text-gray: #666666;
            --text-light: #999999;
            --border: #EEEEEE;
            --green: #2A9D8F;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
            background: var(--bg-gray);
            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: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid var(--border);
        }
        .city-selector { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; }
        .logo { font-size: 20px; font-weight: 700; color: var(--primary); }
        .top-actions { display: flex; gap: 16px; }
        .top-action { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .top-action svg { width: 20px; height: 20px; stroke: var(--text-dark); fill: none; stroke-width: 1.8; }
        
        .search-bar { background: var(--bg-white); padding: 0 16px 12px; }
        .search-input {
            width: 100%; height: 38px; background: var(--bg-gray); border: none; border-radius: 19px;
            padding: 0 16px 0 40px; font-size: 14px; outline: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: 14px center;
        }
        
        .main-banner { margin: 12px 16px; border-radius: 12px; overflow: hidden; height: 165px; position: relative; }
        .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: 16px; gap: 10px; overflow-x: auto; background: var(--bg-white); margin-bottom: 8px; }
        .quick-category { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 56px; cursor: pointer; }
        .quick-category-icon { width: 50px; height: 50px; border-radius: 12px; overflow: hidden; }
        .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: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
        .activity-card:last-child { border-bottom: none; padding-bottom: 0; }
        .activity-img { width: 105px; height: 105px; border-radius: 8px; 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: 3px; }
        .activity-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 105px; }
        .activity-title { font-size: 14px; font-weight: 500; line-height: 1.45; 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: 8px; 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-status { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #FFF0F0; color: var(--primary); }
        .activity-status.hot { background: #FFF5F0; color: var(--accent); }
        
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .product-card { background: var(--bg-white); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; }
        .product-img { height: 130px; background: #f0f0f0; position: relative; overflow: hidden; }
        .product-tag { position: absolute; top: 8px; left: 8px; background: var(--primary); color: white; font-size: 10px; padding: 2px 6px; border-radius: 3px; }
        .product-info { padding: 10px; }
        .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); }
        
        .post-card { padding: 12px 0; 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%; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 500; overflow: hidden; }
        .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-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; }
        
        .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: 8px; padding: 12px 16px; overflow-x: auto; background: var(--bg-white); border-bottom: 1px solid var(--border); }
        .filter-item { padding: 8px 14px; background: var(--bg-gray); border-radius: 16px; font-size: 13px; color: var(--text-dark); white-space: nowrap; cursor: pointer; }
        .filter-item.active { background: var(--primary); color: white; }
        
        .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: linear-gradient(135deg, var(--primary), var(--accent)); }
        .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); }
        
        .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: 22px; font-size: 15px; font-weight: 600; cursor: pointer; }
        
        .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin: 0 auto; background: white; display: flex; padding: 8px 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--border); z-index: 100; }
        .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
        .tab-item svg { width: 22px; height: 22px; stroke: var(--text-light); stroke-width: 1.5; fill: none; }
        .tab-item span { font-size: 10px; color: var(--text-light); }
        .tab-item.active svg { stroke: var(--primary); }
        .tab-item.active span { color: var(--primary); }
        
        .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-input:focus { border-color: var(--primary); }
        .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); }
        .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; }
        .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: 8px; 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-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; }
        .map-placeholder { height: 260px; position: relative; background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 100%); display: flex; align-items: center; justify-content: center; }
        .map-overlay { background: rgba(255,255,255,0.9); padding: 12px 20px; border-radius: 8px; text-align: center; }
        .map-overlay svg { width: 24px; height: 24px; stroke: var(--green); fill: none; margin-bottom: 4px; }
        .map-overlay span { display: block; font-size: 13px; color: var(--green); }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div class="page active" id="page-home">
        <div class="top-nav">
            <div class="city-selector"><span>广州</span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg></div>
            <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="showToast('消息')"><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></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')">
            <img src="imgs/nature1.jpg" alt="Banner">
            <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">新手友好</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">¥168<small>起</small></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="section">
            <div class="section-header"><div class="section-title">精选装备</div><div class="section-more" onclick="goToPage('page-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="徒步鞋"><span class="product-tag">新品</span></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>
        </div>
        
        <!-- 社区动态 -->
        <div class="section">
            <div class="section-header"><div class="section-title">社区动态</div><div class="section-more" onclick="goToPage('page-community')">查看更多<svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg></div></div>
            <div class="post-card">
                <div class="post-header">
                    <div class="post-avatar"><img src="imgs/hiker.jpg" alt="头像" style="border-radius:50%;"></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-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="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">新手友好</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">¥168<small>起</small></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/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 hot">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人已报名 · 50个名额</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+次</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()">立即报名</button>
        </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="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">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">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">新品</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">986</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>

    <!-- 社区页 -->
    <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"><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="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="background: var(--bg-white); padding: 0 16px;">
            <div class="post-card">
                <div class="post-header">
                    <div class="post-avatar"><img src="imgs/hiker.jpg" alt="头像" style="border-radius:50%;"></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 class="post-card">
                <div class="post-header">
                    <div class="post-avatar" style="background:linear-gradient(135deg, #3498db, #2ecc71);"><img src="imgs/hiker.jpg" alt="头像" style="border-radius:50%;"></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>
    </div>

    <!-- 地图页 -->
    <div class="page" id="page-map">
        <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="map-placeholder">
            <img src="imgs/valley.jpg" alt="地图背景" style="width:100%;height:100%;object-fit:cover;opacity:0.5;">
            <div class="map-overlay"><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="section">
            <div class="section-header"><div class="section-title">附近热门活动</div></div>
            <div class="activity-card" onclick="goToPage('page-activity-detail')" style="padding-top: 0;">
                <div class="activity-img" style="width: 85px; height: 85px;"><img src="imgs/forest.jpg" alt="活动"></div>
                <div class="activity-content" style="min-height: 85px;">
                    <div class="activity-title" style="font-size: 14px;">从化石门台穿越</div>
                    <div class="activity-info" style="margin-top: 4px;">
                        <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>距离 2.3km</span></div>
                        <div class="activity-info-item"><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><span>难度 ★★☆☆☆</span></div>
                    </div>
                </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"><div class="profile-stat-value">28</div><div class="profile-stat-label">参加活动</div></div>
                <div class="profile-stat"><div class="profile-stat-value">156</div><div class="profile-stat-label">发布动态</div></div>
                <div class="profile-stat"><div class="profile-stat-value">1.2k</div><div class="profile-stat-label">获赞</div></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="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 class="menu-item" onclick="showToast('活动足迹')">
                <div class="menu-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);"><svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 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">
            <div class="menu-item" onclick="showToast('优惠券')">
                <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="showToast('会员中心')">
                <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="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('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('community')"><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"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></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(--primary);">¥1/天</span></label><div style="padding: 12px; background: #FFF5F5; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;"><span style="font-size: 14px;">户外意外险</span><input type="checkbox" checked style="width: 18px; height: 18px; accent-color: var(--primary);"></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);">¥169</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', 'mall': 'page-mall', 'community': 'page-community', 'profile': 'page-profile'}; goToPage(pageMap[tab]); }
        function openSignupModal() { document.getElementById('signup-modal').classList.add('active'); }
        function closeModal() { document.getElementById('signup-modal').classList.remove('active'); }
        function submitSignup() { closeModal(); showToast('报名成功！'); }
        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());
    </script>
</body>
</html>