编辑页面

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>TF交友 - 小程序原型</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #FF6B9D;
            --primary-light: #FFE5EE;
            --secondary: #7C5CFF;
            --bg-main: #F8F9FA;
            --bg-white: #FFFFFF;
            --text-primary: #333333;
            --text-secondary: #666666;
            --text-light: #999999;
            --border: #EEEEEE;
            --success: #52C41A;
            --vip-gold: #FFD700;
            --safe-bottom: env(safe-area-inset-bottom);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #1a1a1a;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            padding: 40px 20px;
        }
        
        /* 小程序容器 - 标准375px宽度 */
        .miniprogram-container {
            width: 375px;
            min-height: 812px;
            background: var(--bg-main);
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        /* 状态栏 - 小程序标准20px */
        .status-bar {
            height: 20px;
            padding: 0 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: white;
            background: transparent;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }
        
        /* 页面容器 */
        .page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding-top: 20px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s;
            display: flex;
            flex-direction: column;
            background: var(--bg-main);
        }
        
        .page.active {
            opacity: 1;
            visibility: visible;
        }
        
        /* 自定义导航栏 - 小程序标准44px */
        .nav-bar {
            height: 44px;
            display: flex;
            align-items: center;
            padding: 0 16px;
            background: white;
            position: relative;
        }
        
        .nav-bar.center-title {
            justify-content: center;
        }
        
        .nav-back {
            font-size: 24px;
            color: var(--text-primary);
            position: absolute;
            left: 16px;
        }
        
        .nav-title {
            font-size: 17px;
            font-weight: 600;
        }
        
        .nav-icon {
            font-size: 20px;
            color: var(--text-primary);
            position: absolute;
            right: 16px;
        }
        
        /* 内容区域 */
        .page-content {
            flex: 1;
            overflow-y: auto;
            padding-bottom: calc(48px + var(--safe-bottom, 0px));
        }
        
        /* 小程序底部TabBar - 标准48px */
        .tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: calc(48px + var(--safe-bottom, 0px));
            padding-bottom: var(--safe-bottom, 0px);
            background: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border);
            z-index: 100;
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            font-size: 10px;
            color: var(--text-light);
        }
        
        .tab-item.active {
            color: var(--primary);
        }
        
        .tab-item i {
            font-size: 22px;
        }
        
        .tab-publish {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 22px;
            margin-top: -10px;
        }
        
        /* 登录页 */
        .login-page {
            background: linear-gradient(180deg, var(--primary-light) 0%, white 50%);
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .login-content {
            text-align: center;
            width: 100%;
        }
        
        .login-logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 20px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: white;
        }
        
        .login-title {
            font-size: 28px;
font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        
        .login-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 60px;
        }
        
        .login-btn {
            width: 100%;
            padding: 14px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 12px;
            border: none;
        }
        
        .login-btn.wechat {
            background: #07C160;
            color: white;
        }
        
        .login-btn.phone {
            background: var(--primary);
            color: white;
        }
        
        .login-btn.密码 {
            background: white;
            color: var(--text-primary);
            border: 1px solid var(--border);
        }
        
        .login-agreement {
            font-size: 12px;
            color: var(--text-light);
            margin-top: 40px;
        }
        
        .login-agreement a {
            color: var(--primary);
        }
        
        /* 首页 */
        .home-header {
            background: white;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .location-tag {
            display: flex;
            align-items: center;
            gap: 4px;
            background: var(--primary-light);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 13px;
            color: var(--primary);
        }
        
        .search-box {
            flex: 1;
            height: 32px;
            background: var(--bg-main);
            border-radius: 16px;
            display: flex;
            align-items: center;
            padding: 0 12px;
            gap: 6px;
            font-size: 13px;
            color: var(--text-light);
        }
        
        .nav-tabs {
            background: white;
            padding: 0 16px;
            display: flex;
            gap: 20px;
        }
        
        .nav-tab {
            padding: 12px 0;
            font-size: 15px;
            color: var(--text-secondary);
            position: relative;
        }
        
        .nav-tab.active {
            color: var(--primary);
            font-weight: 600;
        }
        
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--primary);
            border-radius: 2px;
        }
        
        /* 故事栏 */
        .story-bar {
            background: white;
            padding: 12px 16px;
            display: flex;
            gap: 16px;
            overflow-x: auto;
        }
        
        .story-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            min-width: 50px;
        }
        
        .story-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 2px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }
        
        .story-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid white;
        }
        
        .story-name {
            font-size: 11px;
            color: var(--text-secondary);
            max-width: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* 动态卡片 */
        .feed-card {
            background: white;
            margin-top: 8px;
            padding: 12px;
        }
        
        .feed-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .feed-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .feed-user-info {
            flex: 1;
        }
        
        .feed-username {
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .vip-badge {
            background: linear-gradient(135deg, var(--vip-gold), #FFA500);
            color: white;
            font-size: 9px;
            padding: 2px 4px;
            border-radius: 4px;
        }
        
        .feed-time {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .feed-content {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        
        .feed-images {
            display: grid;
            gap: 4px;
            margin-bottom: 10px;
        }
        
        .feed-images.grid-3 {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .feed-images img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .feed-images.single img {
            width: 100%;
            max-height: 250px;
            object-fit: cover;
            border-radius: 8px;
        }
        
        .feed-actions {
            display: flex;
            justify-content: space-between;
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }
        
        .feed-action {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--text-secondary);
            font-size: 13px;
            padding: 6px 10px;
        }
        
        .feed-action i {
            font-size: 18px;
        }
        
        /* 消息列表 */
        .message-list {
            background: white;
        }
        
        .message-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .message-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            flex-shrink: 0;
            background: #f0f0f0;
        }
        
        .message-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        
        .online-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            background: var(--success);
            border-radius: 50%;
            border: 2px solid white;
        }
        
        .message-info {
            flex: 1;
        }
        
        .message-name {
            font-size: 15px;
            font-weight: 600;
        }
        
        .message-preview {
            font-size: 13px;
            color: var(--text-light);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .message-meta {
            text-align: right;
        }
        
        .message-time {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .message-badge {
            width: 18px;
            height: 18px;
            background: #FF3B30;
            border-radius: 50%;
            color: white;
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 4px;
            margin-left: auto;
        }
        
        /* 个人中心 */
        .profile-header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            padding: 30px 16px 40px;
            color: white;
        }
        
        .profile-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .profile-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.5);
            object-fit: cover;
        }
        
        .profile-stats {
            flex: 1;
        }
        
        .profile-name {
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .profile-id {
            font-size: 13px;
            opacity: 0.8;
            margin-top: 2px;
        }
        
        .profile-stat-row {
            display: flex;
            gap: 24px;
            margin-top: 12px;
        }
        
        .profile-stat {
            text-align: center;
        }
        
        .profile-stat-num {
            font-size: 16px;
            font-weight: 700;
        }
        
        .profile-stat-label {
            font-size: 11px;
            opacity: 0.8;
        }
        
        .profile-menu {
            background: white;
            margin: -30px 12px 0;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 18px;
        }
        
        .menu-icon.pink { background: #FFE5EE; color: #FF6B9D; }
        .menu-icon.purple { background: #F0E5FF; color: #7C5CFF; }
        .menu-icon.blue { background: #E5F3FF; color: #1890FF; }
        .menu-icon.orange { background: #FFF4E5; color: #FF9500; }
        
        .menu-text {
            flex: 1;
            font-size: 15px;
        }
        
        .menu-arrow {
            color: var(--text-light);
        }
        
        .menu-badge {
            font-size: 12px;
            color: var(--primary);
            margin-right: 8px;
        }
        
        /* 聊天页面 */
        .chat-header {
            background: white;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid var(--border);
        }
        
        .chat-user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .chat-user-name {
            font-size: 15px;
            font-weight: 600;
        }
        
        .chat-user-status {
            font-size: 11px;
            color: var(--success);
        }
        
        .chat-actions {
            margin-left: auto;
            display: flex;
            gap: 16px;
        }
        
        .chat-action {
            font-size: 20px;
            color: var(--text-secondary);
        }
        
        .chat-messages {
            flex: 1;
            padding: 16px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .message {
            display: flex;
            gap: 8px;
            max-width: 70%;
        }
        
        .message.sent {
            align-self: flex-end;
            flex-direction: row-reverse;
        }
        
        .message-avatar-sm {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .message-bubble {
            padding: 10px 14px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.5;
        }
        
        .message.received .message-bubble {
            background: white;
            border-bottom-left-radius: 4px;
        }
        
        .message.sent .message-bubble {
            background: var(--primary);
            color: white;
            border-bottom-right-radius: 4px;
        }
        
        .chat-input-bar {
            background: white;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-top: 1px solid var(--border);
        }
        
        .chat-input {
            flex: 1;
            height: 32px;
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 0 14px;
            font-size: 14px;
            outline: none;
        }
        
        .chat-send {
            width: 32px;
            height: 32px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
        }
        
        /* 登录弹窗 */
        .login-modal {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            z-index: 200;
            display: none;
            flex-direction: column;
        }
        
        .login-modal.active {
            display: flex;
        }
        
        .login-modal-header {
            height: 44px;
            display: flex;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .login-modal-back {
            font-size: 24px;
        }
        
        .login-modal-title {
            flex: 1;
            text-align: center;
            font-size: 17px;
            font-weight: 600;
            margin-right: 32px;
        }
        
        .login-modal-content {
            flex: 1;
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .input-group {
            width: 100%;
            margin-bottom: 16px;
        }
        
        .input-row {
            display: flex;
            gap: 12px;
        }
        
        .input-field {
            width: 100%;
            height: 48px;
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 0 20px;
            font-size: 15px;
            outline: none;
        }
        
        .input-field.with-prefix {
            display: flex;
            align-items: center;
        }
        
        .input-field input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 15px;
            background: transparent;
        }
        
        .code-btn {
            width: 100px;
            height: 48px;
            background: var(--primary-light);
            color: var(--primary);
            border: none;
            border-radius: 24px;
            font-size: 13px;
            font-weight: 600;
        }
        
        .submit-btn {
            width: 100%;
            height: 48px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            border-radius: 24px;
            font-size: 16px;
            font-weight: 600;
            margin-top: 10px;
        }
        
        .wechat-qr-box {
            width: 180px;
            height: 180px;
            background: #f5f5f5;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .wechat-logo {
            width: 60px;
            height: 60px;
            background: #07C160;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .wechat-logo i {
            font-size: 32px;
            color: white;
        }
        
        /* Toast */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background: rgba(0,0,0,0.75);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            opacity: 0;
            transition: all 0.3s;
            pointer-events: none;
            z-index: 1000;
        }
        
        .toast.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        
        /* 交友页面样式 */
        .dating-tabs {
            display: flex;
            background: white;
            padding: 0 16px;
            gap: 20px;
            border-bottom: 1px solid var(--border);
        }
        
        .dating-tab {
            padding: 12px 0;
            font-size: 14px;
            color: var(--text-secondary);
            position: relative;
        }
        
        .dating-tab.active {
            color: var(--primary);
            font-weight: 600;
        }
        
        .dating-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary);
        }
        
        .swipe-area {
            padding: 16px;
            background: linear-gradient(180deg, #FFE5EE 0%, white 100%);
        }
        
        .swipe-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            position: relative;
        }
        
        .swipe-img {
            width: 100%;
            height: 380px;
            object-fit: cover;
        }
        
        .swipe-info {
            padding: 16px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
        }
        
        .swipe-name {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        
        .swipe-detail {
            font-size: 13px;
            opacity: 0.9;
            margin-bottom: 8px;
        }
        
        .swipe-tags {
            display: flex;
            gap: 8px;
        }
        
        .swipe-tag {
            background: rgba(255,255,255,0.2);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .swipe-vip {
            position: absolute;
            top: 12px;
            right: 12px;
            background: linear-gradient(135deg, var(--vip-gold), #FFA500);
            color: white;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .swipe-actions {
            display: flex;
            justify-content: center;
            gap: 30px;
            padding: 16px 0;
        }
        
        .swipe-btn {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: transform 0.2s;
        }
        
        .swipe-btn:active {
            transform: scale(0.9);
        }
        
        .swipe-btn.dislike {
            background: white;
            color: #ccc;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .swipe-btn.superlike {
            background: linear-gradient(135deg, #1890FF, #7C5CFF);
            color: white;
            box-shadow: 0 2px 15px rgba(24,144,255,0.3);
        }
        
        .swipe-btn.like {
            background: linear-gradient(135deg, var(--primary), #FF3B30);
            color: white;
            box-shadow: 0 2px 15px rgba(255,107,157,0.3);
        }
        
        .quick-chat-section {
            padding: 16px;
        }
        
        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 15px;
            font-weight: 600;
        }
        
        .section-title .more {
            font-size: 12px;
            color: var(--text-light);
            font-weight: normal;
        }
        
        .quick-chat-list {
            background: white;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .quick-chat-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-bottom: 1px solid var(--border);
        }
        
        .quick-chat-item:last-child {
            border-bottom: none;
        }
        
        .quick-chat-item img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .quick-chat-info {
            flex: 1;
        }
        
        .quick-chat-name {
            font-size: 14px;
            font-weight: 600;
        }
        
        .quick-chat-msg {
            font-size: 12px;
            color: var(--text-light);
            margin-top: 2px;
        }
        
        .quick-chat-time {
            font-size: 11px;
            color: var(--text-light);
        }
        
        .visitor-section {
            padding: 0 16px 16px;
        }
        
        .visitor-list {
            display: flex;
            gap: 12px;
            overflow-x: auto;
        }
        
        .visitor-item {
            text-align: center;
            min-width: 60px;
        }
        
        .visitor-item img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary-light);
        }
        
        .visitor-name {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .recommend-section {
            padding: 16px;
        }
        
        .recommend-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .recommend-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .recommend-card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        
        .recommend-info {
            padding: 10px;
        }
        
        .recommend-name {
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .recommend-desc {
            font-size: 12px;
            color: var(--text-secondary);
            margin: 4px 0;
        }
        
        .recommend-tags {
            display: flex;
            gap: 4px;
        }
        
        .recommend-tags span {
            background: var(--primary-light);
            color: var(--primary);
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 8px;
        }
        
        /* 用户资料弹窗 */
        .user-profile-modal {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-main);
            z-index: 200;
            display: none;
            flex-direction: column;
        }
        
        .user-profile-modal.active {
            display: flex;
        }
        
        .profile-modal-header {
            height: 44px;
            display: flex;
            align-items: center;
            padding: 0 16px;
            background: white;
            border-bottom: 1px solid var(--border);
        }
        
        .profile-modal-back {
            font-size: 24px;
        }
        
        .profile-modal-title {
            flex: 1;
            text-align: center;
            font-size: 17px;
            font-weight: 600;
        }
        
        .profile-modal-action {
            font-size: 20px;
        }
        
        .profile-modal-content {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 70px;
        }
        
        .profile-modal-avatar {
            text-align: center;
            padding: 30px 0 20px;
            background: linear-gradient(180deg, var(--primary-light) 0%, white 50%);
        }
        
        .profile-modal-avatar img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid white;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .profile-modal-level {
            background: linear-gradient(135deg, var(--vip-gold), #FFA500);
            color: white;
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
            display: inline-block;
            margin-top: 8px;
        }
        
        .profile-modal-name {
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .profile-modal-id {
            text-align: center;
            font-size: 13px;
            color: var(--text-light);
            margin-top: 4px;
        }
        
        .profile-modal-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            padding: 20px 0;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-num {
            font-size: 18px;
            font-weight: 700;
        }
        
        .stat-label {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .profile-modal-tags {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            padding: 0 16px;
        }
        
        .profile-modal-tags .tag {
            background: var(--primary-light);
            color: var(--primary);
            padding: 6px 14px;
            border-radius: 16px;
            font-size: 13px;
        }
        
        .profile-modal-desc {
            text-align: center;
            padding: 16px;
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .profile-modal-album {
            padding: 16px;
        }
        
        .album-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .album-title span {
            font-size: 12px;
            color: var(--text-light);
            font-weight: normal;
        }
        
        .album-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        
        .album-grid img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 8px;
        }
        
        .profile-modal-actions {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px 16px;
            padding-bottom: calc(12px + var(--safe-bottom, 0px));
            background: white;
            display: flex;
            gap: 12px;
            border-top: 1px solid var(--border);
        }
        
        .action-btn {
            flex: 1;
            height: 44px;
            border-radius: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 15px;
            font-weight: 600;
            background: white;
            border: 1px solid var(--border);
            color: var(--text-primary);
        }
        
        .action-btn.primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
        }
        
        /* Loading */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.95);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 300;
        }

        .loading-overlay.active {
            display: flex;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="miniprogram-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span>9:41</span>
            <div style="display:flex;gap:4px;">
                <i class="ri-signal-fill"></i>
                <i class="ri-wifi-fill"></i>
                <i class="ri-battery-2-line"></i>
            </div>
        </div>
        
        <!-- 登录页 -->
        <div class="page login-page" id="page-login">
            <div class="login-content">
                <div class="login-logo">
                    <i class="ri-heart-3-fill"></i>
                </div>
                <h1 class="login-title">TF 交友</h1>
                <p class="login-subtitle">民航人专属社交平台</p>
                
                <button class="login-btn wechat" onclick="openWechatLogin()">
                    <i class="ri-wechat-fill"></i>
                    微信授权登录
                </button>
                <button class="login-btn phone" onclick="openPhoneLogin()">
                    <i class="ri-smartphone-line"></i>
                    手机验证码登录
                </button>
                <button class="login-btn 密码" onclick="openPasswordLogin()">
                    <i class="ri-lock-line"></i>
                    密码登录
                </button>
                
                <p class="login-agreement">
                    登录即表示同意<br>
                    <a href="#">《用户协议》</a> 和 <a href="#">《隐私政策》</a>
                </p>
            </div>
        </div>
        
        <!-- 首页 -->
        <div class="page active" id="page-home">
            <div class="home-header">
                <div class="location-tag">
                    <i class="ri-map-pin-2-fill"></i>
                    北京
                </div>
                <div class="search-box">
                    <i class="ri-search-line"></i>
                    搜索
                </div>
            </div>
            
            <div class="nav-tabs">
                <div class="nav-tab active">推荐</div>
                <div class="nav-tab">热榜</div>
                <div class="nav-tab">频道</div>
                <div class="nav-tab">需求</div>
            </div>
            
            <div class="page-content">
                <div class="story-bar">
                    <div class="story-item">
                        <div class="story-avatar">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" alt="">
                        </div>
                        <span class="story-name">我的故事</span>
                    </div>
                    <div class="story-item">
                        <div class="story-avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" alt="">
                        </div>
                        <span class="story-name">小美</span>
                    </div>
                    <div class="story-item">
                        <div class="story-avatar">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop" alt="">
                        </div>
                        <span class="story-name">空姐小雅</span>
                    </div>
                    <div class="story-item">
                        <div class="story-avatar">
                            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=100&h=100&fit=crop" alt="">
                        </div>
                        <span class="story-name">飞行员</span>
                    </div>
                    <div class="story-item">
                        <div class="story-avatar">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop" alt="">
                        </div>
                        <span class="story-name">民航人</span>
                    </div>
                </div>
                
                <div class="feed-card">
                    <div class="feed-header">
                        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop" class="feed-avatar" alt="">
                        <div class="feed-user-info">
                            <div class="feed-username">
                                空姐小雅
                                <span class="vip-badge">VIP</span>
                            </div>
                            <div class="feed-time">2小时前 · 北京</div>
                        </div>
                    </div>
                    <div class="feed-content">今天的航班顺利结束啦～又是一次美好的飞行体验 ✨</div>
                    <div class="feed-images grid-3">
                        <img src="https://images.unsplash.com/photo-1524638431109-93d95c968f03?w=200&h=200&fit=crop" alt="">
                        <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?w=200&h=200&fit=crop" alt="">
                        <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=200&h=200&fit=crop" alt="">
                    </div>
                    <div class="feed-actions">
                        <div class="feed-action" onclick="toggleLike(this)">
                            <i class="ri-heart-line"></i>
                            <span>328</span>
                        </div>
                        <div class="feed-action" onclick="switchPage('messages')">
                            <i class="ri-chat-3-line"></i>
                            <span>56</span>
                        </div>
                        <div class="feed-action">
                            <i class="ri-star-line"></i>
                        </div>
                        <div class="feed-action">
                            <i class="ri-share-forward-line"></i>
                        </div>
                    </div>
                </div>
                
                <div class="feed-card">
                    <div class="feed-header">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop" class="feed-avatar" alt="">
                        <div class="feed-user-info">
                            <div class="feed-username">机长李哥</div>
                            <div class="feed-time">4小时前 · 上海</div>
                        </div>
                    </div>
                    <div class="feed-content">有没有同行一起约飞 ✈️ 最近天气不错</div>
                    <div class="feed-images single">
                        <img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=400&h=250&fit=crop" alt="">
                    </div>
                    <div class="feed-actions">
                        <div class="feed-action" onclick="toggleLike(this)">
                            <i class="ri-heart-line"></i>
                            <span>156</span>
                        </div>
                        <div class="feed-action">
                            <i class="ri-chat-3-line"></i>
                            <span>23</span>
                        </div>
                        <div class="feed-action">
                            <i class="ri-star-line"></i>
                        </div>
                        <div class="feed-action">
                            <i class="ri-share-forward-line"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="tab-bar">
                <div class="tab-item active" onclick="switchTab('home')">
                    <i class="ri-home-5-fill"></i>
                    <span>首页</span>
                </div>
                <div class="tab-item" onclick="switchTab('dating')">
                    <i class="ri-user-heart-line"></i>
                    <span>交友</span>
                </div>
                <div class="tab-item">
                    <div class="tab-publish">
                        <i class="ri-add-fill"></i>
                    </div>
                </div>
                <div class="tab-item" onclick="switchTab('messages')">
                    <i class="ri-message-3-line"></i>
                    <span>消息</span>
                </div>
                <div class="tab-item" onclick="switchTab('profile')">
                    <i class="ri-user-line"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 消息页 -->
        <div class="page" id="page-messages">
            <div class="nav-bar center-title">
                <div class="nav-title">消息</div>
                <div class="nav-icon">
                    <i class="ri-edit-2-line"></i>
                </div>
            </div>
            
            <div class="page-content">
                <div class="message-list">
                    <div class="message-item" onclick="switchPage('chat')">
                        <div class="message-avatar">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" alt="">
                            <span class="online-dot"></span>
                        </div>
                        <div class="message-info">
                            <div class="message-name">小美</div>
                            <div class="message-preview">今天天气真好呀～有空一起飞吗？</div>
                        </div>
                        <div class="message-meta">
                            <div class="message-time">刚刚</div>
                            <div class="message-badge">2</div>
                        </div>
                    </div>
                    
                    <div class="message-item">
                        <img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100&h=100&fit=crop" class="message-avatar" alt="">
                        <div class="message-info">
                            <div class="message-name">系统消息</div>
                            <div class="message-preview">您的认证已通过审核</div>
                        </div>
                        <div class="message-meta">
                            <div class="message-time">昨天</div>
                        </div>
                    </div>
                    
                    <div class="message-item">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" class="message-avatar" alt="">
                        <div class="message-info">
                            <div class="message-name">搭讪消息</div>
                            <div class="message-preview">机长李哥 向您打了招呼</div>
                        </div>
                        <div class="message-meta">
                            <div class="message-time">2天前</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="tab-bar">
                <div class="tab-item" onclick="switchTab('home')">
                    <i class="ri-home-5-line"></i>
                    <span>首页</span>
                </div>
                <div class="tab-item" onclick="switchTab('dating')">
                    <i class="ri-user-heart-line"></i>
                    <span>交友</span>
                </div>
                <div class="tab-item">
                    <div class="tab-publish">
                        <i class="ri-add-fill"></i>
                    </div>
                </div>
                <div class="tab-item active" onclick="switchTab('messages')">
                    <i class="ri-message-3-fill"></i>
                    <span>消息</span>
                </div>
                <div class="tab-item" onclick="switchTab('profile')">
                    <i class="ri-user-line"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 交友页 -->
        <div class="page" id="page-dating">
            <div class="nav-bar">
                <div class="nav-title" style="flex:1;text-align:center;">交友</div>
                <div class="nav-icon">
                    <i class="ri-filter-3-line"></i>
                </div>
            </div>
            
            <div class="dating-tabs">
                <div class="dating-tab active">同城</div>
                <div class="dating-tab">在线</div>
                <div class="dating-tab">民航招聘</div>
                <div class="dating-tab">大众点评</div>
            </div>
            
            <div class="page-content">
                <!-- 滑动卡片区 -->
                <div class="swipe-area">
                    <div class="swipe-card">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=375&h=500&fit=crop" alt="" class="swipe-img">
                        <div class="swipe-info">
                            <div class="swipe-name">小美 24 <i class="ri-women-line"></i></div>
                            <div class="swipe-detail">空乘 · 本科 · 175cm</div>
                            <div class="swipe-tags">
                                <span class="swipe-tag">旅行</span>
                                <span class="swipe-tag">摄影</span>
                                <span class="swipe-tag">美食</span>
                            </div>
                        </div>
                        <div class="swipe-vip">
                            <i class="ri-vip-diamond-fill"></i> VIP可见详情
                        </div>
                    </div>
                    
                    <div class="swipe-actions">
                        <div class="swipe-btn dislike" onclick="showToast('不喜欢')">
                            <i class="ri-close-line"></i>
                        </div>
                        <div class="swipe-btn superlike" onclick="showToast('超级喜欢')">
                            <i class="ri-star-fill"></i>
                        </div>
                        <div class="swipe-btn like" onclick="nextCard()">
                            <i class="ri-heart-fill"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 快速搭讪入口 -->
                <div class="quick-chat-section">
                    <div class="section-title">
                        <span>搭讪消息</span>
                        <span class="more">查看更多 <i class="ri-arrow-right-s-line"></i></span>
                    </div>
                    <div class="quick-chat-list">
                        <div class="quick-chat-item" onclick="switchPage('chat')">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" alt="">
                            <div class="quick-chat-info">
                                <div class="quick-chat-name">机长李哥</div>
                                <div class="quick-chat-msg">你好，很高兴认识你～</div>
                            </div>
                            <div class="quick-chat-time">刚刚</div>
                        </div>
                        <div class="quick-chat-item" onclick="switchPage('chat')">
                            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=100&h=100&fit=crop" alt="">
                            <div class="quick-chat-info">
                                <div class="quick-chat-name">飞行员小王</div>
                                <div class="quick-chat-msg">同行呀！有空一起飞？</div>
                            </div>
                            <div class="quick-chat-time">10分钟前</div>
                        </div>
                    </div>
                </div>
                
                <!-- 谁看过我 -->
                <div class="visitor-section">
                    <div class="section-title">
                        <span><i class="ri-eye-line"></i> 谁看过我</span>
                        <span class="more">更多 <i class="ri-arrow-right-s-line"></i></span>
                    </div>
                    <div class="visitor-list">
                        <div class="visitor-item">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop" alt="">
                            <div class="visitor-name">空姐小雅</div>
                        </div>
                        <div class="visitor-item">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop" alt="">
                            <div class="visitor-name">民航小哥</div>
                        </div>
                        <div class="visitor-item">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop" alt="">
                            <div class="visitor-name">机长王哥</div>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐用户列表 -->
                <div class="recommend-section">
                    <div class="section-title">
                        <span>为你推荐</span>
                    </div>
                    <div class="recommend-list">
                        <div class="recommend-card" onclick="showUserProfile()">
                            <img src="https://images.unsplash.com/photo-1524638431109-93d95c968f03?w=200&h=250&fit=crop" alt="">
                            <div class="recommend-info">
                                <div class="recommend-name">空乘小雨 <span class="vip-badge">VIP</span></div>
                                <div class="recommend-desc">24岁 · 168cm · 北京</div>
                                <div class="recommend-tags">
                                    <span>旅行</span><span>摄影</span>
                                </div>
                            </div>
                        </div>
                        <div class="recommend-card" onclick="showUserProfile()">
                            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=200&h=250&fit=crop" alt="">
                            <div class="recommend-info">
                                <div class="recommend-name">飞行员阿杰</div>
                                <div class="recommend-desc">28岁 · 180cm · 上海</div>
                                <div class="recommend-tags">
                                    <span>健身</span><span>飞行</span>
                                </div>
                            </div>
                        </div>
                        <div class="recommend-card" onclick="showUserProfile()">
                            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&h=250&fit=crop" alt="">
                            <div class="recommend-info">
                                <div class="recommend-name">空姐小雅 <span class="vip-badge">VIP</span></div>
                                <div class="recommend-desc">25岁 · 172cm · 广州</div>
                                <div class="recommend-tags">
                                    <span>美食</span><span>音乐</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="tab-bar">
                <div class="tab-item" onclick="switchTab('home')">
                    <i class="ri-home-5-line"></i>
                    <span>首页</span>
                </div>
                <div class="tab-item active" onclick="switchTab('dating')">
                    <i class="ri-user-heart-fill"></i>
                    <span>交友</span>
                </div>
                <div class="tab-item">
                    <div class="tab-publish">
                        <i class="ri-add-fill"></i>
                    </div>
                </div>
                <div class="tab-item" onclick="switchTab('messages')">
                    <i class="ri-message-3-line"></i>
                    <span>消息</span>
                </div>
                <div class="tab-item" onclick="switchTab('profile')">
                    <i class="ri-user-line"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 用户资料弹窗 -->
        <div class="user-profile-modal" id="user-profile-modal">
            <div class="profile-modal-header">
                <div class="profile-modal-back" onclick="closeUserProfile()">
                    <i class="ri-arrow-left-s-line"></i>
                </div>
                <div class="profile-modal-title">个人主页</div>
                <div class="profile-modal-action">
                    <i class="ri-more-2-line"></i>
                </div>
            </div>
            <div class="profile-modal-content">
                <div class="profile-modal-avatar">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop" alt="">
                    <div class="profile-modal-level">LV.5</div>
                </div>
                <div class="profile-modal-name">
                    小美 <span class="vip-badge">VIP</span>
                </div>
                <div class="profile-modal-id">ID: 666888</div>
                <div class="profile-modal-stats">
                    <div class="stat-item">
                        <div class="stat-num">1.5k</div>
                        <div class="stat-label">粉丝</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">328</div>
                        <div class="stat-label">关注</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">5.2k</div>
                        <div class="stat-label">获赞</div>
                    </div>
                </div>
                
                <div class="profile-modal-tags">
                    <span class="tag">空乘</span>
                    <span class="tag">本科</span>
                    <span class="tag">175cm</span>
                    <span class="tag">北京</span>
                </div>
                
                <div class="profile-modal-desc">
                    热爱生活的空乘小姐姐，喜欢旅行和摄影 ✈️
                </div>
                
                <div class="profile-modal-album">
                    <div class="album-title">相册 <span>6张</span></div>
                    <div class="album-grid">
                        <img src="https://images.unsplash.com/photo-1524638431109-93d95c968f03?w=100&h=100&fit=crop" alt="">
                        <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?w=100&h=100&fit=crop" alt="">
                        <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=100&h=100&fit=crop" alt="">
                        <img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=100&h=100&fit=crop" alt="">
                    </div>
                </div>
            </div>
            <div class="profile-modal-actions">
                <div class="action-btn" onclick="showToast('已关注')">
                    <i class="ri-user-follow-line"></i>
                    关注
                </div>
                <div class="action-btn primary" onclick="switchPage('chat');closeUserProfile();">
                    <i class="ri-message-3-line"></i>
                    搭讪
                </div>
            </div>
        </div>
        
        <!-- 聊天页 -->
        <div class="page" id="page-chat">
            <div class="chat-header">
                <div class="nav-back" onclick="switchPage('messages')">
                    <i class="ri-arrow-left-s-line"></i>
                </div>
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop" class="chat-user-avatar" alt="">
                <div>
                    <div class="chat-user-name">小美</div>
                    <div class="chat-user-status">在线</div>
                </div>
                <div class="chat-actions">
                    <i class="ri-phone-line chat-action"></i>
                    <i class="ri-vidicon-line chat-action"></i>
                </div>
            </div>
            
            <div class="chat-messages">
                <div class="message received">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop" class="message-avatar-sm" alt="">
                    <div class="message-bubble">你好呀～看到你是民航人，我们还是老乡呢！</div>
                </div>
                <div class="message sent">
                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&h=64&fit=crop" class="message-avatar-sm" alt="">
                    <div class="message-bubble">哈哈是啊！你是做什么航线的？</div>
                </div>
                <div class="message received">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop" class="message-avatar-sm" alt="">
                    <div class="message-bubble">我是飞国际航线的，经常去欧洲～你呢？</div>
                </div>
                <div class="message sent">
                    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&h=64&fit=crop" class="message-avatar-sm" alt="">
                    <div class="message-bubble">我在国航，飞国内比较多。有机会一起约飞呀！</div>
                </div>
            </div>
            
            <div class="chat-input-bar">
                <i class="ri-emotion-line" style="font-size:22px;color:#999;"></i>
                <i class="ri-add-circle-line" style="font-size:22px;color:#999;"></i>
                <input type="text" class="chat-input" placeholder="输入消息...">
                <div class="chat-send">
                    <i class="ri-send-plane-fill"></i>
                </div>
            </div>
        </div>
        
        <!-- 个人中心 -->
        <div class="page" id="page-profile">
            <div class="page-content" style="padding-top:0;">
                <div class="profile-header">
                    <div class="profile-info">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=140&h=140&fit=crop" class="profile-avatar" alt="">
                        <div class="profile-stats">
                            <div class="profile-name">
                                民航小哥哥
                                <span class="vip-badge">VIP</span>
                            </div>
                            <div class="profile-id">ID: 888888</div>
                            <div class="profile-stat-row">
                                <div class="profile-stat">
                                    <div class="profile-stat-num">1.2k</div>
                                    <div class="profile-stat-label">粉丝</div>
                                </div>
                                <div class="profile-stat">
                                    <div class="profile-stat-num">568</div>
                                    <div class="profile-stat-label">关注</div>
                                </div>
                                <div class="profile-stat">
                                    <div class="profile-stat-num">3.5k</div>
                                    <div class="profile-stat-label">获赞</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="profile-menu">
                    <div class="menu-item">
                        <div class="menu-icon pink">
                            <i class="ri-vip-diamond-fill"></i>
                        </div>
                        <div class="menu-text">开通VIP会员</div>
                        <span class="menu-badge">限时特惠</span>
                        <i class="ri-arrow-right-s-line menu-arrow"></i>
                    </div>
                </div>
                
                <div class="profile-menu" style="margin-top:12px;">
                    <div class="menu-item">
                        <div class="menu-icon purple">
                            <i class="ri-file-list-3-line"></i>
                        </div>
                        <div class="menu-text">我的简历</div>
                        <i class="ri-arrow-right-s-line menu-arrow"></i>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon blue">
                            <i class="ri-shopping-bag-line"></i>
                        </div>
                        <div class="menu-text">我的订单</div>
                        <span class="menu-badge">待收货 2</span>
                        <i class="ri-arrow-right-s-line menu-arrow"></i>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon orange">
                            <i class="ri-star-line"></i>
                        </div>
                        <div class="menu-text">我的收藏</div>
                        <i class="ri-arrow-right-s-line menu-arrow"></i>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon pink">
                            <i class="ri-wallet-3-line"></i>
                        </div>
                        <div class="menu-text">我的钱包</div>
                        <span class="menu-badge">¥ 128.00</span>
                        <i class="ri-arrow-right-s-line menu-arrow"></i>
                    </div>
                </div>
                
                <div class="profile-menu" style="margin-top:12px;margin-bottom:100px;">
                    <div class="menu-item">
                        <div class="menu-icon blue">
                            <i class="ri-shield-check-line"></i>
                        </div>
                        <div class="menu-text">实名认证</div>
                        <span class="menu-badge" style="color:#52C41A;">已认证</span>
                        <i class="ri-arrow-right-s-line menu-arrow"></i>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon purple">
                            <i class="ri-medal-line"></i>
                        </div>
                        <div class="menu-text">民航认证</div>
                        <i class="ri-arrow-right-s-line menu-arrow"></i>
                    </div>
                    <div class="menu-item">
                        <div class="menu-icon blue">
                            <i class="ri-customer-service-2-line"></i>
                        </div>
                        <div class="menu-text">联系客服</div>
                        <i class="ri-arrow-right-s-line menu-arrow"></i>
                    </div>
                </div>
            </div>
            
            <div class="tab-bar">
                <div class="tab-item" onclick="switchTab('home')">
                    <i class="ri-home-5-line"></i>
                    <span>首页</span>
                </div>
                <div class="tab-item" onclick="switchTab('dating')">
                    <i class="ri-user-heart-line"></i>
                    <span>交友</span>
                </div>
                <div class="tab-item">
                    <div class="tab-publish">
                        <i class="ri-add-fill"></i>
                    </div>
                </div>
                <div class="tab-item" onclick="switchTab('messages')">
                    <i class="ri-message-3-line"></i>
                    <span>消息</span>
                </div>
                <div class="tab-item active" onclick="switchTab('profile')">
                    <i class="ri-user-fill"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
        
        <!-- 微信登录弹窗 -->
        <div class="login-modal" id="wechat-login-modal">
            <div class="login-modal-header">
                <div class="login-modal-back" onclick="closeLoginModal()">
                    <i class="ri-arrow-left-s-line"></i>
                </div>
                <div class="login-modal-title">微信授权登录</div>
            </div>
            <div class="login-modal-content">
                <div class="wechat-logo">
                    <i class="ri-wechat-fill"></i>
                </div>
                <div style="font-size:18px;font-weight:600;margin-bottom:8px;">使用微信登录</div>
                <div style="font-size:14px;color:#999;margin-bottom:30px;">扫码下方二维码完成授权</div>
                <div class="wechat-qr-box">
                    <div style="text-align:center;color:#999;">
                        <i class="ri-qr-code-line" style="font-size:60px;"></i>
                        <div style="font-size:12px;margin-top:8px;">二维码区域</div>
                    </div>
                </div>
                <div style="font-size:13px;color:#999;">请使用微信扫描上方二维码</div>
            </div>
        </div>
        
        <!-- 手机登录弹窗 -->
        <div class="login-modal" id="phone-login-modal">
            <div class="login-modal-header">
                <div class="login-modal-back" onclick="closeLoginModal()">
                    <i class="ri-arrow-left-s-line"></i>
                </div>
                <div class="login-modal-title">手机验证码登录</div>
            </div>
            <div class="login-modal-content">
                <div class="input-group">
                    <div class="input-field with-prefix">
                        <span style="color:#999;">+86</span>
                        <input type="tel" id="phone-number" placeholder="请输入手机号码" maxlength="11">
                    </div>
                </div>
                <div class="input-group input-row">
                    <div class="input-field">
                        <input type="text" id="verify-code" placeholder="请输入验证码" maxlength="6">
                    </div>
                    <button class="code-btn" onclick="getCode(this)">获取验证码</button>
                </div>
                <button class="submit-btn" onclick="doPhoneLogin()">登录</button>
            </div>
        </div>
        
        <!-- 密码登录弹窗 -->
        <div class="login-modal" id="password-login-modal">
            <div class="login-modal-header">
                <div class="login-modal-back" onclick="closeLoginModal()">
                    <i class="ri-arrow-left-s-line"></i>
                </div>
                <div class="login-modal-title">密码登录</div>
            </div>
            <div class="login-modal-content">
                <div class="input-group">
                    <div class="input-field with-prefix">
                        <span style="color:#999;">+86</span>
                        <input type="tel" id="login-phone" placeholder="请输入手机号码">
                    </div>
                </div>
                <div class="input-group">
                    <div class="input-field">
                        <input type="password" id="login-password" placeholder="请输入密码">
                    </div>
                </div>
                <div style="width:100%;text-align:right;margin-bottom:20px;">
                    <a href="#" style="color:var(--primary);font-size:14px;">忘记密码？</a>
                </div>
                <button class="submit-btn" onclick="doPasswordLogin()">登录</button>
            </div>
        </div>
        
        <!-- 加载动画 -->
        <div class="loading-overlay" id="loading-overlay">
            <div class="loading-spinner"></div>
            <div style="font-size:14px;color:#666;">登录中...</div>
        </div>
        
        <!-- Toast -->
        <div class="toast" id="toast"></div>
    </div>
    
    <script>
        let currentTab = 'home';
        
        function switchPage(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById('page-' + pageId).classList.add('active');
        }
        
        function switchTab(tab) {
            currentTab = tab;
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            switchPage(tab);
        }
        
        function showToast(msg) {
            const toast = document.getElementById('toast');
            toast.textContent = msg;
            toast.classList.add('show');
            setTimeout(() => toast.classList.remove('show'), 2000);
        }
        
        function openWechatLogin() {
            document.getElementById('wechat-login-modal').classList.add('active');
        }
        
        function openPhoneLogin() {
            document.getElementById('phone-login-modal').classList.add('active');
        }
        
        function openPasswordLogin() {
            document.getElementById('password-login-modal').classList.add('active');
        }
        
        function closeLoginModal() {
            document.querySelectorAll('.login-modal').forEach(m => m.classList.remove('active'));
        }
        
        function getCode(btn) {
            const phone = document.getElementById('phone-number').value;
            if (!phone || phone.length < 11) {
                showToast('请输入正确的手机号');
                return;
            }
            btn.textContent = '发送中...';
            btn.disabled = true;
            showToast('验证码已发送');
            let countdown = 60;
            const timer = setInterval(() => {
                countdown--;
                if (countdown <= 0) {
                    btn.textContent = '获取验证码';
                    btn.disabled = false;
                    clearInterval(timer);
                } else {
                    btn.textContent = countdown + 's';
                }
            }, 1000);
        }
        
        function doPhoneLogin() {
            const phone = document.getElementById('phone-number').value;
            const code = document.getElementById('verify-code').value;
            if (!phone || phone.length < 11) {
                showToast('请输入正确的手机号');
                return;
            }
            if (!code || code.length < 4) {
                showToast('请输入验证码');
                return;
            }
            document.getElementById('loading-overlay').classList.add('active');
            setTimeout(() => {
                document.getElementById('loading-overlay').classList.remove('active');
                closeLoginModal();
                switchPage('home');
                showToast('登录成功');
            }, 1500);
        }
        
        function doPasswordLogin() {
            const phone = document.getElementById('login-phone').value;
            const password = document.getElementById('login-password').value;
            if (!phone || phone.length < 11) {
                showToast('请输入正确的手机号');
                return;
            }
            if (!password) {
                showToast('请输入密码');
                return;
            }
            document.getElementById('loading-overlay').classList.add('active');
            setTimeout(() => {
                document.getElementById('loading-overlay').classList.remove('active');
                closeLoginModal();
                switchPage('home');
                showToast('登录成功');
            }, 1500);
        }
        
        function toggleLike(el) {
            const icon = el.querySelector('i');
            const count = el.querySelector('span');
            if (icon.classList.contains('ri-heart-line')) {
                icon.classList.remove('ri-heart-line');
                icon.classList.add('ri-heart-fill');
                icon.style.color = '#FF6B9D';
                count.textContent = parseInt(count.textContent) + 1;
            } else {
                icon.classList.remove('ri-heart-fill');
                icon.classList.add('ri-heart-line');
                icon.style.color = '';
                count.textContent = parseInt(count.textContent) - 1;
            }
        }
        
        // 交友页面相关函数
        function nextCard() {
            showToast('喜欢了～等待对方回应');
        }
        
        function showUserProfile() {
            document.getElementById('user-profile-modal').classList.add('active');
        }
        
        function closeUserProfile() {
            document.getElementById('user-profile-modal').classList.remove('active');
        }
    </script>
</body>
</html>