编辑页面

页面标题
有效期修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
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; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #1a1a1a;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
        }
        
        .pages-stack {
            position: relative;
            width: 375px;
            height: 812px;
            background: #fff;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
        }
        
        .status-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            padding: 12px 24px;
            background: transparent;
            font-size: 12px;
            font-weight: 600;
            z-index: 9999;
        }
        
        /* 所有页面基础样式 */
        .page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            background: #f5f5f5;
        }
        .page.hidden {
            opacity: 0;
            pointer-events: none;
            transform: translateY(30px) scale(0.95);
            z-index: 1;
        }
        .page.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0) scale(1);
            z-index: 100;
        }
        
        /* 导航栏 */
        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 16px;
            background: #fff;
            border-bottom: 1px solid #eee;
            flex-shrink: 0;
        }
        .nav-bar.dark {
            background: #1a1a2e;
            border-bottom: none;
            color: #fff;
        }
        .nav-bar .back-btn, .nav-bar .action-btn {
            font-size: 20px;
            cursor: pointer;
            padding: 4px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .nav-bar .title { font-size: 16px; font-weight: 600; }
        
        /* 首页样式 */
        .search-bar { padding: 12px 16px; background: #fff; }
        .search-input {
            display: flex;
            align-items: center;
            background: #f5f5f5;
            border-radius: 20px;
            padding: 10px 16px;
            gap: 8px;
            cursor: pointer;
        }
        .search-input input {
            flex: 1;
            border: none;
            background: transparent;
            outline: none;
            font-size: 14px;
        }
        
        .category-tabs {
            display: flex;
            gap: 12px;
            padding: 12px 16px;
            overflow-x: auto;
            background: #fff;
        }
        .category-tabs::-webkit-scrollbar { display: none; }
        .category-tab {
            white-space: nowrap;
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 13px;
            cursor: pointer;
            background: #f5f5f5;
            color: #666;
        }
        .category-tab.active { background: #ff6b35; color: #fff; }
        
        .post-list {
            flex: 1;
            overflow-y: auto;
            padding: 12px 16px;
            padding-bottom: 80px;
        }
        .post-item {
            background: #fff;
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            cursor: pointer;
        }
        .post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .post-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b35, #ff9f5a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
            font-size: 14px;
        }
        .post-info { flex: 1; }
        .post-info .name { font-size: 14px; font-weight: 600; }
        .post-info .meta { font-size: 11px; color: #999; margin-top: 2px; }
        .post-tag { padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 500; }
        .post-tag.sell { background: #fff3e6; color: #ff6b35; }
        .post-tag.buy { background: #e6f7ff; color: #1890ff; }
        .post-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 8px; line-height: 1.4; }
        .post-content {
            font-size: 13px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .post-images { display: flex; gap: 6px; margin-bottom: 10px; }
        .post-images .img-placeholder {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #ccc;
        }
        .post-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            border-top: 1px solid #f5f5f5;
        }
        .post-actions { display: flex; gap: 20px; }
        .post-action { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #999; cursor: pointer; }
        .post-action.liked { color: #ff6b35; }
        .post-price { font-size: 16px; font-weight: 700; color: #ff6b35; }
        
        .fab {
            position: absolute;
            right: 20px;
            bottom: 90px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b35, #ff9f5a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 28px;
            font-weight: 300;
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
            cursor: pointer;
            z-index: 500;
        }
        
        /* 底部导航 */
        .tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: #fff;
            border-top: 1px solid #eee;
            padding: 6px 0;
            padding-bottom: max(6px, env(safe-area-inset-bottom));
            z-index: 500;
        }
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 4px 0;
            cursor: pointer;
            color: #999;
            font-size: 10px;
        }
        .tab-item.active { color: #ff6b35; }
        .tab-item svg { width: 22px; height: 22px; }
        
        /* 登录页 */
        .auth-page {
            background: linear-gradient(180deg, #ff6b35 0%, #ff9f5a 100%);
            min-height: 100vh;
        }
        .auth-logo { text-align: center; padding: 60px 0 40px; }
        .auth-logo h1 { color: #fff; font-size: 36px; font-weight: 700; letter-spacing: 2px; }
        .auth-logo p { color: rgba(255,255,255,0.8); font-size: 14px; margin-top: 8px; }
        .auth-form {
            flex: 1;
            background: #fff;
            border-radius: 24px 24px 0 0;
            padding: 30px 24px;
        }
        .form-title { font-size: 20px; font-weight: 600; text-align: center; margin-bottom: 24px; }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
        .form-group input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            font-size: 14px;
            outline: none;
        }
        .form-btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 16px;
        }
        .form-btn.primary { background: linear-gradient(135deg, #ff6b35, #ff9f5a); color: #fff; }
        .auth-switch { text-align: center; margin-top: 20px; font-size: 13px; color: #999; }
        .auth-switch a { color: #ff6b35; text-decoration: none; font-weight: 600; }
        
        /* VIP页 */
        .vip-page { background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); color: #fff; }
        .vip-header { padding: 30px 20px; text-align: center; }
        .vip-badge {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ffd700, #ffb347);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 36px;
        }
        .vip-header h2 { font-size: 24px; margin-bottom: 8px; }
        .vip-header p { color: rgba(255,255,255,0.7); font-size: 14px; }
        .vip-benefits {
            background: rgba(255,255,255,0.05);
            margin: 0 20px;
            border-radius: 16px;
            padding: 20px;
        }
        .vip-benefits h3 { font-size: 16px; margin-bottom: 16px; }
        .benefit-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .benefit-item:last-child { border-bottom: none; }
        .benefit-item svg { width: 20px; height: 20px; color: #ffd700; }
        .benefit-item span { font-size: 14px; }
        .vip-plans { padding: 20px; flex: 1; overflow-y: auto; }
        .vip-plans h3 { font-size: 16px; margin-bottom: 16px; }
        .plan-card {
            background: rgba(255,255,255,0.1);
            border-radius: 16px;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            border: 2px solid transparent;
            margin-bottom: 10px;
        }
        .plan-card.selected { border-color: #ffd700; background: rgba(255, 215, 0, 0.15); }
        .plan-info h4 { font-size: 15px; margin-bottom: 4px; }
        .plan-info p { font-size: 11px; color: rgba(255,255,255,0.6); }
        .plan-price .amount { font-size: 22px; font-weight: 700; color: #ffd700; }
        .plan-price .original { font-size: 11px; color: rgba(255,255,255,0.4); text-decoration: line-through; }
        .vip-pay-btn {
            margin: 10px 20px 20px;
            padding: 14px;
            background: linear-gradient(135deg, #ffd700, #ffb347);
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            color: #1a1a2e;
            cursor: pointer;
        }
        
        /* 发布页 */
        .post-edit-page { background: #fff; }
        .form-section { padding: 16px; border-bottom: 1px solid #f5f5f5; }
        .form-section-title { font-size: 14px; color: #666; margin-bottom: 10px; }
        .type-selector { display: flex; gap: 10px; }
        .type-btn {
            flex: 1;
            padding: 10px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            text-align: center;
            font-size: 13px;
            cursor: pointer;
        }
        .type-btn.active { border-color: #ff6b35; background: #fff3e6; color: #ff6b35; }
        .category-selector { display: flex; flex-wrap: wrap; gap: 8px; }
        .category-chip {
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 12px;
            background: #f5f5f5;
            color: #666;
            cursor: pointer;
        }
        .category-chip.active { background: #ff6b35; color: #fff; }
        .post-edit-page textarea {
            width: 100%;
            min-height: 100px;
            border: none;
            outline: none;
            font-size: 14px;
            resize: none;
            line-height: 1.6;
        }
        .image-upload { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 10px; }
        .upload-btn {
            width: 70px;
            height: 70px;
            border: 1px dashed #ddd;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            font-size: 10px;
            color: #999;
        }
        .price-input { display: flex; align-items: center; gap: 8px; }
        .price-input span { font-size: 18px; color: #ff6b35; }
        .price-input input {
            flex: 1;
            padding: 10px 0;
            border: none;
            border-bottom: 1px solid #e5e5e5;
            outline: none;
            font-size: 16px;
        }
        .submit-bar {
            display: flex;
            gap: 12px;
            padding: 12px 16px;
            background: #fff;
            border-top: 1px solid #eee;
            margin-top: auto;
        }
        .submit-bar button {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }
        .submit-bar .preview-btn { background: #f5f5f5; color: #666; }
        .submit-bar .publish-btn { background: linear-gradient(135deg, #ff6b35, #ff9f5a); color: #fff; }
        
        /* 帖子详情页 */
        .post-detail-page { background: #fff; }
        .detail-header { padding: 16px; flex: 1; overflow-y: auto; }
        .detail-user { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
        .detail-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b35, #ff9f5a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
        }
        .detail-user-info h4 { font-size: 15px; font-weight: 600; }
        .detail-user-info p { font-size: 12px; color: #999; margin-top: 2px; }
        .detail-title { font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
        .detail-content { font-size: 14px; line-height: 1.7; color: #444; margin-bottom: 14px; }
        .detail-images { display: flex; gap: 8px; margin-bottom: 14px; }
        .detail-images .img-placeholder {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #ccc;
        }
        .detail-price { font-size: 22px; font-weight: 700; color: #ff6b35; margin-bottom: 14px; }
        .detail-actions {
            display: flex;
            justify-content: space-around;
            padding: 14px 16px;
            background: #fafafa;
            border-top: 8px solid #f5f5f5;
        }
        .detail-action {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 20px;
            background: #f5f5f5;
        }
        .detail-action.liked { color: #ff6b35; }
        .comment-section { padding: 16px; }
        .comment-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
        .comment-item { display: flex; gap: 10px; margin-bottom: 16px; }
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #e5e5e5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999;
        }
        .comment-content { flex: 1; }
        .comment-user { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
        .comment-text { font-size: 13px; color: #444; line-height: 1.5; }
        .comment-time { font-size: 11px; color: #999; margin-top: 4px; }
        .comment-input-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            background: #fff;
            border-top: 1px solid #eee;
        }
        .comment-input-bar input {
            flex: 1;
            padding: 10px 14px;
            border: 1px solid #e5e5e5;
            border-radius: 20px;
            font-size: 13px;
            outline: none;
        }
        .comment-input-bar button {
            padding: 8px 16px;
            background: linear-gradient(135deg, #ff6b35, #ff9f5a);
            border: none;
            border-radius: 20px;
            color: #fff;
            font-size: 13px;
            cursor: pointer;
        }
        
        /* 聊天页 */
        .chat-page { background: #fff; display: flex; flex-direction: column; }
        .chat-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            padding-top: 50px;
            background: #fff;
            border-bottom: 1px solid #eee;
        }
        .chat-user { display: flex; align-items: center; gap: 10px; flex: 1; }
        .chat-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b35, #ff9f5a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
        }
        .chat-user h4 { font-size: 15px; }
        .chat-user p { font-size: 11px; color: #4cd964; }
        .chat-messages { flex: 1; overflow-y: auto; padding: 16px; background: #f5f5f5; }
        .chat-date { text-align: center; font-size: 11px; color: #999; margin: 12px 0; }
        .chat-bubble-wrap { display: flex; gap: 8px; margin-bottom: 12px; }
        .chat-bubble-wrap.my { flex-direction: row-reverse; }
        .chat-msg-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #e5e5e5;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
color: #999;
        }
        .chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
        .chat-bubble-wrap:not(.my) .chat-bubble { background: #fff; }
        .chat-bubble-wrap.my .chat-bubble { background: linear-gradient(135deg, #ff6b35, #ff9f5a); color: #fff; }
        .chat-input-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            background: #fff;
            border-top: 1px solid #eee;
            padding-bottom: max(10px, env(safe-area-inset-bottom));
        }
        .chat-input-bar svg { width: 24px; height: 24px; color: #666; cursor: pointer; }
        .chat-input-bar input {
            flex: 1;
            padding: 10px 14px;
            border: 1px solid #e5e5e5;
            border-radius: 20px;
            font-size: 14px;
            outline: none;
        }
        .chat-input-bar button {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b35, #ff9f5a);
            border: none;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 消息列表页 */
        .message-list-page { background: #fff; }
        .message-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .message-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b35, #ff9f5a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
            position: relative;
        }
        .message-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 16px;
            height: 16px;
            background: #ff3b30;
            border-radius: 50%;
            font-size: 10px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .message-content { flex: 1; overflow: hidden; }
        .message-content h4 { font-size: 14px; margin-bottom: 4px; }
        .message-content p { font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .message-time { font-size: 11px; color: #999; }
        
        /* 个人中心页 */
        .profile-page { background: #f5f5f5; }
        .profile-header {
            background: linear-gradient(135deg, #ff6b35, #ff9f5a);
            padding: 30px 16px;
            color: #fff;
            padding-top: 50px;
        }
        .profile-info { display: flex; align-items: center; gap: 14px; }
        .profile-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        .profile-details h3 { font-size: 18px; margin-bottom: 4px; }
        .profile-details p { font-size: 12px; opacity: 0.9; }
        .profile-vip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(255,215,0,0.3);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            margin-top: 6px;
        }
        .profile-stats {
            display: flex;
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 14px;
            margin-top: 16px;
        }
        .stat-item { flex: 1; text-align: center; }
        .stat-item h4 { font-size: 18px; margin-bottom: 2px; }
        .stat-item p { font-size: 11px; opacity: 0.8; }
        .profile-menu { flex: 1; overflow-y: auto; }
        .menu-group { background: #fff; margin-bottom: 12px; }
        .menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .menu-item:last-child { border-bottom: none; }
        .menu-item-left { display: flex; align-items: center; gap: 12px; }
        .menu-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .menu-icon.orange { background: #fff3e6; color: #ff6b35; }
        .menu-icon.blue { background: #e6f7ff; color: #1890ff; }
        .menu-icon.green { background: #f6ffed; color: #52c41a; }
        .menu-icon.purple { background: #f9f0ff; color: #722ed1; }
        .menu-icon.red { background: #fff1f0; color: #ff4d4f; }
        .menu-item span { font-size: 14px; }
        .menu-arrow { color: #ccc; }
        .menu-badge {
            background: #ff4d4f;
            color: #fff;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
        }
        
        /* 我的帖子页 */
        .my-posts-tabs { display: flex; background: #fff; border-bottom: 1px solid #eee; }
        .my-post-tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            position: relative;
        }
        .my-post-tab.active { color: #ff6b35; }
        .my-post-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 3px;
            background: #ff6b35;
            border-radius: 2px;
        }
        .post-status { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 10px; margin-left: 8px; }
        .post-status.pending { background: #fff7e6; color: #fa8c16; }
        .post-status.approved { background: #f6ffed; color: #52c41a; }
        
        /* 收藏页 */
        .favorites-page { background: #fff; }
        
        /* 通知页 */
        .notification-item {
            display: flex;
            gap: 12px;
            padding: 14px 16px;
            background: #fff;
            border-bottom: 1px solid #f5f5f5;
        }
        .notification-item.unread { background: #fff9f7; }
        .notif-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .notif-icon.comment { background: #e6f7ff; color: #1890ff; }
        .notif-icon.like { background: #fff3e6; color: #ff6b35; }
        .notif-icon.system { background: #f6ffed; color: #52c41a; }
        .notif-icon.chat { background: #f9f0ff; color: #722ed1; }
        .notif-content { flex: 1; }
        .notif-content h4 { font-size: 14px; margin-bottom: 4px; }
        .notif-content p { font-size: 12px; color: #999; line-height: 1.4; }
        .notif-time { font-size: 11px; color: #999; margin-top: 4px; }
        
        /* 设置页 */
        .setting-page { background: #fff; }
        .setting-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .setting-item span { font-size: 14px; }
        .setting-item .arrow { color: #ccc; }
        
        /* 搜索页 */
        .search-page { background: #fff; }
        .search-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            background: #fff;
            border-bottom: 1px solid #eee;
            padding-top: 50px;
        }
        .search-header input {
            flex: 1;
            padding: 8px 14px;
            border: 1px solid #e5e5e5;
            border-radius: 20px;
            font-size: 14px;
            outline: none;
        }
        .search-header button {
            padding: 8px 16px;
            background: none;
            border: none;
            color: #ff6b35;
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 审核提示页 */
        .audit-page {
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 40px;
        }
        .audit-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #fff3e6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            margin-bottom: 20px;
        }
        .audit-page h3 { font-size: 18px; margin-bottom: 10px; }
        .audit-page p { font-size: 13px; color: #999; line-height: 1.6; }
        .audit-page .form-btn { margin-top: 30px; width: 200px; }
    </style>
</head>
<body>
    <div class="pages-stack">
        <div class="status-bar">
            <span class="time">17:05</span>
            <div class="icons">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3C7.46 3 3.34 5.05.538.21c-.11.13-.07.32.09.4.17.08.32.07.43-.06C4.35 5.42 8.13 3 12 3c3.87 0 7.65 2.42 10.95 5.55.11.13.26.14.43.06.16-.08.2-.27.09-.4C20.66 5.05 16.54 3 12 3z"/></svg>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M222h20V2L2 22z"/></svg>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17 4h-3V2h-4v2H7c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zM9 4h6v2H9V4zm5 16H8v-2h6v2zm2-4H8v-2h8v2z"/></svg>
            </div>
        </div>

        <!-- 首页 -->
        <div id="page-home" class="page visible">
            <div class="nav-bar" style="padding-top: 40px;">
                <div class="title">同城圈</div>
                <div class="action-btn" onclick="showPage('page-search')">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                </div>
            </div>
            <div class="search-bar">
                <div class="search-input" onclick="showPage('page-search')">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                    <input type="text" placeholder="搜索帖子、用户..." readonly>
                </div>
            </div>
            <div class="category-tabs">
                <div class="category-tab active" onclick="this.parentElement.querySelectorAll('.category-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">全部</div>
                <div class="category-tab" onclick="this.parentElement.querySelectorAll('.category-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">数码</div>
                <div class="category-tab" onclick="this.parentElement.querySelectorAll('.category-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">家电</div>
                <div class="category-tab" onclick="this.parentElement.querySelectorAll('.category-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">家具</div>
                <div class="category-tab" onclick="this.parentElement.querySelectorAll('.category-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">服装</div>
                <div class="category-tab" onclick="this.parentElement.querySelectorAll('.category-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">图书</div>
                <div class="category-tab" onclick="this.parentElement.querySelectorAll('.category-tab').forEach(t=>t.classList.remove('active'));this.classList.add('active')">其他</div>
            </div>
            <div class="post-list">
                <div class="post-item" onclick="showPage('page-post-detail')">
                    <div class="post-header">
                        <div class="post-avatar">李</div>
                        <div class="post-info">
                            <div class="name">李明</div>
                            <div class="meta">数码 · 3小时前 · 海淀区</div>
                        </div>
                        <div class="post-tag sell">出售</div>
                    </div>
                    <div class="post-title">iPhone 15 Pro Max 256G 准新机</div>
                    <div class="post-content">买了不到一个月，因为工作调动需要换手机，这台手机成色非常好，没有任何划痕...</div>
                    <div class="post-images"><div class="img-placeholder">手机图</div><div class="img-placeholder">手机图</div></div>
                    <div class="post-footer">
                        <div class="post-actions">
                            <div class="post-action" onclick="event.stopPropagation(); toggleLike(this)">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                                <span>128</span>
                            </div>
                            <div class="post-action" onclick="event.stopPropagation(); showPage('page-post-detail')">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>23</span>
                            </div>
                        </div>
                        <div class="post-price">¥7,999</div>
                    </div>
                </div>
                <div class="post-item" onclick="showPage('page-post-detail')">
                    <div class="post-header">
                        <div class="post-avatar" style="background: linear-gradient(135deg, #1890ff, #69c0ff)">张</div>
                        <div class="post-info">
                            <div class="name">张伟</div>
                            <div class="meta">家具 · 5小时前 · 朝阳区</div>
                        </div>
                        <div class="post-tag buy">求购</div>
                    </div>
                    <div class="post-title">求购二手沙发 3+1组合</div>
                    <div class="post-content">家里新装修，需要一个3+1组合的沙发，要求八成新以上，颜色最好是灰色或米色...</div>
                    <div class="post-footer">
                        <div class="post-actions">
                            <div class="post-action" onclick="event.stopPropagation(); toggleLike(this)">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                                <span>45</span>
                            </div>
                            <div class="post-action" onclick="event.stopPropagation(); showPage('page-post-detail')">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>8</span>
                            </div>
                        </div>
                        <div class="post-price">¥1,500内</div>
                    </div>
                </div>
                <div class="post-item" onclick="showPage('page-post-detail')">
                    <div class="post-header">
                        <div class="post-avatar" style="background: linear-gradient(135deg, #52c41a, #95de64)">王</div>
                        <div class="post-info">
                            <div class="name">王芳</div>
                            <div class="meta">图书 · 昨天 · 东城区</div>
                        </div>
                        <div class="post-tag sell">出售</div>
                    </div>
                    <div class="post-title">大量二手书籍文学历史科技都有</div>
                    <div class="post-content">搬家清理书籍，大量二手书处理，包括经典文学、历史传记、科普读物等，按斤称重...</div>
                    <div class="post-footer">
                        <div class="post-actions">
                            <div class="post-action liked" onclick="event.stopPropagation(); toggleLike(this)">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                                <span>89</span>
                            </div>
                            <div class="post-action" onclick="event.stopPropagation(); showPage('page-post-detail')">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>15</span>
                            </div>
                        </div>
                        <div class="post-price">¥5/斤</div>
                    </div>
                </div>
            </div>
            <div class="fab" onclick="showPage('page-vip')">+</div>
            <div class="tab-bar">
                <div class="tab-item active" onclick="showPage('page-home')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>
                    <span>首页</span>
                </div>
                <div class="tab-item" onclick="showPage('page-messages')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>消息</span>
                </div>
                <div class="tab-item" onclick="showPage('page-profile')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <!-- 消息列表页 -->
        <div id="page-messages" class="page hidden">
            <div class="nav-bar">
                <div class="back-btn" onclick="goBack()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
                </div>
                <div class="title">消息</div>
                <div class="action-btn"></div>
            </div>
            <div class="message-list-page" style="flex: 1; overflow-y: auto;">
                <div class="message-item" onclick="showPage('page-chat')">
                    <div class="message-avatar">李<div class="message-badge">2</div></div>
                    <div class="message-content"><h4>李明</h4><p>好的，那我们约周六下午2点...</p></div>
                    <div class="message-time">10:30</div>
                </div>
                <div class="message-item" onclick="showPage('page-chat')">
                    <div class="message-avatar" style="background: linear-gradient(135deg, #1890ff, #69c0ff)">张</div>
                    <div class="message-content"><h4>张伟</h4><p>请问您的沙发还在吗？</p></div>
                    <div class="message-time">昨天</div>
                </div>
                <div class="message-item" onclick="showPage('page-chat')">
                    <div class="message-avatar" style="background: linear-gradient(135deg, #722ed1, #b37feb)">系</div>
                    <div class="message-content"><h4>系统通知</h4><p>您的帖子已通过审核</p></div>
                    <div class="message-time">昨天</div>
                </div>
                <div class="message-item" onclick="showPage('page-chat')">
                    <div class="message-avatar" style="background: linear-gradient(135deg, #52c41a, #95de64)">王</div>
                    <div class="message-content"><h4>王芳</h4><p>这些书您看要不要？</p></div>
                    <div class="message-time">3天前</div>
                </div>
            </div>
            <div class="tab-bar">
                <div class="tab-item" onclick="showPage('page-home')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>
                    <span>首页</span>
                </div>
                <div class="tab-item active" onclick="showPage('page-messages')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>消息</span>
                </div>
                <div class="tab-item" onclick="showPage('page-profile')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <!-- 个人中心页 -->
        <div id="page-profile" class="page hidden">
            <div class="profile-header">
                <div class="profile-info">
                    <div class="profile-avatar">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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="profile-details">
                        <h3>张小明</h3>
                        <p>ID: 888666</p>
                        <div class="profile-vip">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                            VIP会员
                        </div>
                    </div>
                </div>
                <div class="profile-stats">
                    <div class="stat-item"><h4>12</h4><p>发布</p></div>
                    <div class="stat-item"><h4>1.2k</h4><p>获赞</p></div>
                    <div class="stat-item"><h4>356</h4><p>粉丝</p></div>
                </div>
            </div>
            <div class="profile-menu">
                <div class="menu-group">
                    <div class="menu-item" onclick="showPage('page-my-posts')">
                        <div class="menu-item-left">
                            <div class="menu-icon orange">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
                            </div>
                            <span>我的帖子</span>
                        </div>
                        <span class="menu-arrow">></span>
                    </div>
                    <div class="menu-item" onclick="showPage('page-favorites')">
                        <div class="menu-item-left">
                            <div class="menu-icon blue">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
                            </div>
                            <span>我的收藏</span>
                        </div>
                        <span class="menu-arrow">></span>
                    </div>
                    <div class="menu-item" onclick="showPage('page-notifications')">
                        <div class="menu-item-left">
                            <div class="menu-icon red">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
                            <span>我的通知</span>
                        </div>
                        <span class="menu-badge">3</span>
                        <span class="menu-arrow">></span>
                    </div>
                </div>
                <div class="menu-group">
                    <div class="menu-item" onclick="showPage('page-vip')">
                        <div class="menu-item-left">
                            <div class="menu-icon purple">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                            </div>
                            <span>会员中心</span>
                        </div>
                        <span class="menu-arrow">></span>
                    </div>
                    <div class="menu-item" onclick="showPage('page-settings')">
                        <div class="menu-item-left">
                            <div class="menu-icon green">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                            </div>
                            <span>设置</span>
                        </div>
                        <span class="menu-arrow">></span>
                    </div>
                </div>
            </div>
            <div class="tab-bar">
                <div class="tab-item" onclick="showPage('page-home')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>
                    <span>首页</span>
                </div>
                <div class="tab-item" onclick="showPage('page-messages')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>消息</span>
                </div>
                <div class="tab-item active" onclick="showPage('page-profile')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <!-- 登录页 -->
        <div id="page-login" class="page hidden">
            <div class="auth-page">
                <div class="auth-logo">
                    <h1>同城圈</h1>
                    <p>本地生活信息社区</p>
                </div>
                <div class="auth-form">
                    <div class="form-title">登录</div>
                    <div class="form-group"><label>手机号</label><input type="tel" placeholder="请输入手机号" value="13812345678"></div>
                    <div class="form-group"><label>密码</label><input type="password" placeholder="请输入密码" value="123456"></div>
                    <button class="form-btn primary" onclick="showPage('page-home')">登录</button>
                    <div class="auth-switch">还没有账号？<a href="#" onclick="showPage('page-register'); event.preventDefault()">立即注册</a></div>
                </div>
            </div>
        </div>

        <!-- 注册页 -->
        <div id="page-register" class="page hidden">
            <div class="auth-page">
                <div class="auth-logo">
                    <h1>同城圈</h1>
                    <p>本地生活信息社区</p>
                </div>
                <div class="auth-form">
                    <div class="form-title">注册</div>
                    <div class="form-group"><label>手机号</label><input type="tel" placeholder="请输入手机号"></div>
                    <div class="form-group">
                        <label>验证码</label>
                        <div style="display: flex; gap: 10px;">
                            <input type="text" placeholder="请输入验证码" style="flex: 1;">
                            <button style="padding: 0 16px; background: #f5f5f5; border: none; border-radius: 10px; font-size: 13px; color: #ff6b35; cursor: pointer;">获取验证码</button>
                        </div>
                    </div>
                    <div class="form-group"><label>设置密码</label><input type="password" placeholder="请设置密码"></div>
                    <button class="form-btn primary" onclick="showPage('page-login')">注册</button>
                    <div class="auth-switch">已有账号？<a href="#" onclick="showPage('page-login'); event.preventDefault()">立即登录</a></div>
                </div>
            </div>
        </div>

        <!-- VIP页 -->
        <div id="page-vip" class="page hidden">
            <div class="nav-bar dark">
                <div class="back-btn" onclick="goBack()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
                </div>
                <div class="title">会员中心</div>
                <div class="action-btn"></div>
            </div>
            <div class="vip-header">
                <div class="vip-badge">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                </div>
                <h2>开通VIP会员</h2>
                <p>解锁更多特权，畅享无忧发布</p>
            </div>
            <div class="vip-benefits">
                <h3>会员特权</h3>
                <div class="benefit-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg><span>无限发布帖子</span></div>
                <div class="benefit-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg><span>优先审核</span></div>
                <div class="benefit-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg><span>专属标识</span></div>
                <div class="benefit-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg><span>更多曝光机会</span></div>
            </div>
            <div class="vip-plans">
                <h3>选择套餐</h3>
                <div class="plan-card selected" onclick="this.parentElement.querySelectorAll('.plan-card').forEach(c=>c.classList.remove('selected'));this.classList.add('selected')">
                    <div class="plan-info"><h4>月卡</h4><p>30天有效期</p></div>
                    <div class="plan-price"><div class="amount">¥29</div><div class="original">¥49</div></div>
                </div>
                <div class="plan-card" onclick="this.parentElement.querySelectorAll('.plan-card').forEach(c=>c.classList.remove('selected'));this.classList.add('selected')">
                    <div class="plan-info"><h4>年卡</h4><p>365天有效期 · 省钱40%</p></div>
                    <div class="plan-price"><div class="amount">¥199</div><div class="original">¥329</div></div>
                </div>
                <div class="plan-card" onclick="this.parentElement.querySelectorAll('.plan-card').forEach(c=>c.classList.remove('selected'));this.classList.add('selected')">
                    <div class="plan-info"><h4>永久会员</h4><p>一次购买永久有效</p></div>
                    <div class="plan-price"><div class="amount">¥599</div><div class="original">¥999</div></div>
                </div>
            </div>
            <button class="vip-pay-btn" onclick="showPage('page-post')">立即开通并发布</button>
        </div>

        <!-- 发布页 -->
        <div id="page-post" class="page hidden">
            <div class="nav-bar">
                <div class="back-btn" onclick="goBack()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
                </div>
                <div class="title">发布帖子</div>
                <div class="action-btn"></div>
            </div>
            <div style="flex: 1; overflow-y: auto;">
                <div class="form-section">
                    <div class="form-section-title">信息类型</div>
                    <div class="type-selector">
                        <div class="type-btn active" onclick="this.parentElement.querySelectorAll('.type-btn').forEach(b=>b.classList.remove('active'));this.classList.add('active')">出售</div>
                        <div class="type-btn" onclick="this.parentElement.querySelectorAll('.type-btn').forEach(b=>b.classList.remove('active'));this.classList.add('active')">求购</div>
                    </div>
                </div>
                <div class="form-section">
                    <div class="form-section-title">分类</div>
                    <div class="category-selector">
                        <div class="category-chip active" onclick="this.parentElement.querySelectorAll('.category-chip').forEach(c=>c.classList.remove('active'));this.classList.add('active')">数码</div>
                        <div class="category-chip" onclick="this.parentElement.querySelectorAll('.category-chip').forEach(c=>c.classList.remove('active'));this.classList.add('active')">家电</div>
                        <div class="category-chip" onclick="this.parentElement.querySelectorAll('.category-chip').forEach(c=>c.classList.remove('active'));this.classList.add('active')">家具</div>
                        <div class="category-chip" onclick="this.parentElement.querySelectorAll('.category-chip').forEach(c=>c.classList.remove('active'));this.classList.add('active')">服装</div>
                        <div class="category-chip" onclick="this.parentElement.querySelectorAll('.category-chip').forEach(c=>c.classList.remove('active'));this.classList.add('active')">图书</div>
                        <div class="category-chip" onclick="this.parentElement.querySelectorAll('.category-chip').forEach(c=>c.classList.remove('active'));this.classList.add('active')">其他</div>
                    </div>
                </div>
                <div class="form-section"><div class="form-section-title">标题</div><textarea placeholder="简述您要发布的内容">iPhone 15 Pro Max 256G 准新机
详细描述
上传图片（最多9张）
+
添加
价格
买了不到一个月，因为工作调动需要换手机，这台手机成色非常好，没有任何划痕，配件齐全，带官方保修。价格可小刀，有兴趣的可以私聊。
买了不到一个月，因为工作调动需要换手机...
编辑页面

李明

李明

李明发来新消息

有人评论了你的帖子

你的帖子被点赞

审核通知

发布成功，等待审核

编辑页面

李明

李明

李明 发来新消息

有人评论了你的帖子

你的帖子被点赞

审核通知

发布成功，等待审核

李明发来新消息
