编辑页面

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, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
      background: #f5f5f5;
      max-width: 430px;
      margin: 0 auto;
      min-height: 100vh;
    }
    
    .page { display: none; min-height: 100vh; padding-bottom: 70px; }
    .page.active { display: block; }
    
    .page-header {
      background: white;
      padding: 15px;
      display: flex;
      align-items: center;
      gap: 15px;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .back-btn { font-size: 24px; color: #333; }
    .page-title { font-size: 17px; font-weight: bold; color: #333; flex: 1; text-align: center; margin-right: 39px; }
    
    /* 首页 */
    .home-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 15px;
      color: white;
    }
    .home-header .search-bar {
      background: rgba(255,255,255,0.2);
      border-radius: 20px;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }
    .home-header .search-bar input {
      background: transparent;
      border: none;
      color: white;
      flex: 1;
      font-size: 14px;
    }
    .home-header .search-bar input::placeholder { color: rgba(255,255,255,0.7); }
    
    .banner {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      margin: 15px;
      border-radius: 12px;
      padding: 20px;
      color: white;
    }
    .banner h3 { font-size: 18px; margin-bottom: 5px; }
    .banner p { font-size: 12px; opacity: 0.9; }
    
    .quick-nav {
      display: flex;
      justify-content: space-around;
      padding: 15px;
      background: white;
      margin: 0 15px;
      border-radius: 12px;
      margin-top: -20px;
      position: relative;
      z-index: 10;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    }
    .quick-nav .nav-item {
      text-align: center;
      font-size: 12px;
      color: #333;
    }
    .quick-nav .nav-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin: 0 auto 8px;
      color: white;
    }
    
    .section-title {
      padding: 20px 15px 10px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .section-title span { color: #999; font-size: 12px; font-weight: normal; }
    
    .companion-list { padding: 0 15px; }
    .companion-card {
      background: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 12px;
      display: flex;
      gap: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .companion-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: white;
      position: relative;
    }
    .companion-avatar .online-dot {
      width: 12px;
      height: 12px;
      background: #4ade80;
      border: 2px solid white;
      border-radius: 50%;
      position: absolute;
      bottom: 2px;
      right: 2px;
    }
    .companion-info { flex: 1; }
    .companion-name {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .vip-tag {
      background: linear-gradient(135deg, #ffd700, #ffb700);
      color: white;
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 10px;
    }
    .companion-tags { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
    .companion-tag {
      background: #f0f0ff;
      color: #667eea;
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 10px;
    }
    .companion-desc { font-size: 12px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .companion-action { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
    .companion-price { color: #ff4d4f; font-size: 16px; font-weight: bold; }
    .companion-price small { font-size: 10px; font-weight: normal; }
    .chat-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 15px;
      font-size: 12px;
      margin-top: 8px;
    }
    
    /* 聊天列表 */
    .chat-list { background: white; }
    .chat-item {
      display: flex;
      padding: 12px 15px;
      gap: 12px;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
    }
    .chat-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: white;
      position: relative;
    }
    .unread-badge {
      position: absolute;
      top: -3px;
      right: -3px;
      background: #ff4d4f;
      color: white;
      font-size: 10px;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .chat-content { flex: 1; overflow: hidden; }
    .chat-name { font-size: 15px; color: #333; display: flex; justify-content: space-between; align-items: center; }
    .chat-time { font-size: 11px; color: #999; }
    .chat-preview { font-size: 13px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
    
    /* 游戏陪玩 */
    .game-tabs { display: flex; padding: 10px 15px; gap: 10px; background: white; overflow-x: auto; }
    .game-tab { padding: 8px 16px; background: #f5f5f5; border-radius: 20px; font-size: 13px; color: #666; white-space: nowrap; }
    .game-tab.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
    .game-card { background: white; margin: 12px 15px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .game-banner { height: 120px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-size: 50px; }
    .game-info { padding: 12px; }
    .game-name { font-size: 15px; font-weight: bold; color: #333; }
    .game-players { font-size: 12px; color: #999; margin: 5px 0; }
    .game-price { color: #ff4d4f; font-size: 16px; font-weight: bold; }
    .game-price small { font-size: 11px; font-weight: normal; }
    
    /* 个人中心 */
    .profile-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 30px 15px;
      color: white;
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .profile-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 35px;
      border: 3px solid rgba(255,255,255,0.3);
    }
    .profile-info h3 { font-size: 20px; margin-bottom: 5px; }
    .profile-info p { font-size: 12px; opacity: 0.8; }
    .vip-card { background: linear-gradient(135deg, #ffd700, #ffb700); margin: 15px; border-radius: 12px; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
    .vip-card .vip-info { color: #7c5800; }
    .vip-card .vip-info h4 { font-size: 14px; }
    .vip-card .vip-info p { font-size: 11px; }
    .vip-card .vip-btn { background: #7c5800; color: white; padding: 8px 15px; border-radius: 15px; font-size: 12px; }
    
    .menu-list { background: white; margin: 0 15px; border-radius: 12px; overflow: hidden; }
    .menu-item { display: flex; padding: 15px; align-items: center; gap: 12px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
    .menu-item:last-child { border-bottom: none; }
    .menu-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
    .menu-text { flex: 1; font-size: 14px; color: #333; }
    .menu-arrow { color: #ccc; font-size: 14px; }
    
    /* 底部导航 */
    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 430px;
      background: white;
      display: flex;
      padding: 8px 0;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      z-index: 1000;
    }
    .tab-item { flex: 1; text-align: center; padding: 5px 0; cursor: pointer; }
    .tab-icon { font-size: 24px; margin-bottom: 3px; }
    .tab-text { font-size: 10px; color: #999; }
    .tab-item.active .tab-icon { color: #667eea; }
    .tab-item.active .tab-text { color: #667eea; }
    
    /* ========== 二级页面样式 ========== */
    
    /* 我的订单 */
    .order-tabs { display: flex; background: white; padding: 0 15px; }
    .order-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #666; position: relative; }
    .order-tab.active { color: #667eea; font-weight: bold; }
    .order-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: #667eea; border-radius: 2px; }
    
    .order-card { background: white; margin: 12px 15px; border-radius: 12px; padding: 15px; }
    .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f5f5f5; }
    .order-provider { display: flex; align-items: center; gap: 10px; }
    .order-provider-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 16px; color: white; }
    .order-provider-name { font-size: 14px; font-weight: bold; color: #333; }
    .order-status { font-size: 12px; color: #4ade80; }
    .order-status.pending { color: #ff9800; }
    .order-status.completed { color: #999; }
    .order-detail { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: #666; }
    .order-footer { display: flex; justify-content: flex-end; gap: 10px; }
    .order-btn { padding: 6px 15px; border-radius: 15px; font-size: 12px; border: none; }
    .order-btn.primary { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
    .order-btn.outline { border: 1px solid #ddd; color: #666; }
    
    /* 订单详情 */
    .order-info-card { background: white; margin: 15px; border-radius: 12px; padding: 15px; }
    .info-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; border-bottom: 1px solid #f5f5f5; }
    .info-row:last-child { border-bottom: none; }
    .info-label { color: #999; }
    .info-value { color: #333; }
    .order-total { background: #fff8e1; margin: -15px; margin-top: 15px; padding: 15px; border-radius: 0 0 12px 12px; display: flex; justify-content: space-between; font-size: 15px; }
    .order-total .label { color: #333; }
    .order-total .value { color: #ff4d4f; font-weight: bold; font-size: 18px; }
    
    /* 我的收藏 */
    .collect-card { background: white; margin: 12px 15px; border-radius: 12px; padding: 15px; display: flex; gap: 12px; }
    .collect-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; flex-shrink: 0; }
    .collect-info { flex: 1; }
    .collect-name { font-size: 15px; font-weight: bold; color: #333; margin-bottom: 5px; }
    .collect-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
    .collect-tag { background: #f0f0ff; color: #667eea; font-size: 10px; padding: 2px 6px; border-radius: 8px; }
    .collect-price { color: #ff4d4f; font-weight: bold; }
    .collect-action { display: flex; flex-direction: column; justify-content: center; }
    .collect-btn { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 8px 15px; border-radius: 15px; font-size: 12px; margin-bottom: 8px; }
    .uncollect-btn { background: #f5f5f5; color: #999; border: none; padding: 8px 15px; border-radius: 15px; font-size: 12px; }
    
    /* 我的钱包 */
    .wallet-header { background: linear-gradient(135deg, #667eea, #764ba2); padding: 30px; color: white; text-align: center; }
    .wallet-balance { font-size: 14px; margin-bottom: 10px; }
    .wallet-amount { font-size: 42px; font-weight: bold; }
    .wallet-actions { display: flex; justify-content: center; gap: 30px; margin-top: 20px; }
    .wallet-action { background: rgba(255,255,255,0.2); padding: 10px 25px; border-radius: 20px; font-size: 14px; cursor: pointer; }
    .trans-list { background: white; margin: 15px; border-radius: 12px; }
    .trans-item { display: flex; padding: 15px; align-items: center; gap: 12px; border-bottom: 1px solid #f5f5f5; }
    .trans-item:last-child { border-bottom: none; }
    .trans-icon { width: 40px; height: 40px; border-radius: 50%; background: #f0f0ff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
    .trans-info { flex: 1; }
    .trans-info h4 { font-size: 14px; color: #333; }
    .trans-info p { font-size: 11px; color: #999; }
    .trans-amount { font-size: 15px; font-weight: bold; }
    .trans-amount.income { color: #4ade80; }
    .trans-amount.expense { color: #ff4d4f; }
    
    /* 充值/提现 */
    .amount-input-card { background: white; margin: 15px; border-radius: 12px; padding: 20px; text-align: center; }
    .amount-label { font-size: 14px; color: #999; margin-bottom: 10px; }
    .amount-input-wrap { display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: bold; color: #333; }
    .amount-input-wrap input { width: 150px; text-align: center; border: none; font-size: 36px; font-weight: bold; color: #333; outline: none; }
    .quick-amounts { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
    .quick-amount { background: #f5f5f5; padding: 10px 20px; border-radius: 20px; font-size: 14px; color: #333; cursor: pointer; }
    .quick-amount.active { background: #667eea; color: white; }
    .submit-btn { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; width: calc(100% - 30px); margin: 20px 15px; padding: 15px; border-radius: 25px; font-size: 16px; }
    
    /* 认证中心 */
    .cert-card { background: white; margin: 15px; border-radius: 12px; padding: 20px; }
    .cert-item { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid #f5f5f5; }
    .cert-item:last-child { border-bottom: none; }
    .cert-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
    .cert-icon.pending { background: #fff3e0; }
    .cert-icon.approved { background: #e8f5e9; }
    .cert-info { flex: 1; }
    .cert-info h4 { font-size: 15px; color: #333; margin-bottom: 5px; }
    .cert-info p { font-size: 12px; color: #999; }
    .cert-status { font-size: 12px; padding: 5px 12px; border-radius: 12px; }
    .cert-status.pending { background: #fff3e0; color: #ff9800; }
    .cert-status.approved { background: #e8f5e9; color: #4caf50; }
    .cert-status.rejected { background: #ffebee; color: #f44336; }
    
    /* 消息通知 */
    .notice-card { background: white; margin: 12px 15px; border-radius: 12px; padding: 15px; }
    .notice-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
    .notice-title { font-size: 14px; font-weight: bold; color: #333; }
    .notice-time { font-size: 11px; color: #999; }
    .notice-content { font-size: 13px; color: #666; line-height: 1.6; }
    .notice-tag { display: inline-block; background: #f0f0ff; color: #667eea; font-size: 10px; padding: 3px 8px; border-radius: 8px; margin-right: 8px; }
    
    /* 客服聊天 */
    .service-header { background: white; padding: 15px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .service-avatar { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 22px; color: white; }
    .service-info h4 { font-size: 15px; color: #333; }
    .service-info p { font-size: 11px; color: #4ade80; }
    .service-status { margin-left: auto; font-size: 12px; color: #4ade80; }
    .service-msgs { padding: 15px; min-height: 55vh; }
    .service-msg { margin-bottom: 15px; }
    .service-msg.service { display: flex; gap: 10px; }
    .service-msg.user { display: flex; gap: 10px; flex-direction: row-reverse; }
    .msg-avatar { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: white; flex-shrink: 0; }
    .msg-avatar.service { background: linear-gradient(135deg, #667eea, #764ba2); }
    .msg-avatar.user { background: linear-gradient(135deg, #ffd700, #ffb700); }
    .msg-bubble { max-width: 70%; padding: 10px 15px; border-radius: 15px; font-size: 14px; line-height: 1.5; }
    .service-msg.service .msg-bubble { background: white; border-bottom-left-radius: 3px; }
    .service-msg.user .msg-bubble { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-bottom-right-radius: 3px; }
    .chat-input-area { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: white; padding: 10px 15px; display: flex; gap: 10px; align-items: center; border-top: 1px solid #f0f0f0; }
    .chat-input { flex: 1; background: #f5f5f5; border: none; border-radius: 20px; padding: 10px 15px; font-size: 14px; }
    .chat-send { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 10px 20px; border-radius: 20px; font-size: 14px; }
    
    /* 帮助中心 */
    .help-category { background: white; margin: 12px 15px; border-radius: 12px; overflow: hidden; }
    .help-item { display: flex; padding: 15px; align-items: center; gap: 12px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
    .help-item:last-child { border-bottom: none; }
    .help-icon { font-size: 20px; }
    .help-text { flex: 1; font-size: 14px; color: #333; }
    .help-arrow { color: #ccc; }
    .help-detail { background: white; margin: 15px; border-radius: 12px; padding: 20px; }
    .help-detail h4 { font-size: 16px; color: #333; margin-bottom: 15px; }
    .help-detail p { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 15px; }
    
    /* 设置 */
    .setting-item { display: flex; padding: 15px; align-items: center; gap: 12px; background: white; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
    .setting-icon { font-size: 20px; width: 24px; text-align: center; }
    .setting-text { flex: 1; font-size: 14px; color: #333; }
    .switch { width: 44px; height: 26px; background: #ddd; border-radius: 13px; position: relative; cursor: pointer; }
    .switch.active { background: #667eea; }
    .switch::after { content: ''; position: absolute; width: 22px; height: 22px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: 0.3s; }
    .switch.active::after { left: 20px; }
    
    /* 账号安全 */
    .security-item { display: flex; padding: 18px 15px; align-items: center; gap: 12px; background: white; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
    .security-icon { font-size: 22px; }
    .security-info { flex: 1; }
    .security-title { font-size: 14px; color: #333; margin-bottom: 4px; }
    .security-desc { font-size: 11px; color: #999; }
    .security-status { font-size: 12px; color: #4caf50; }
    .security-status.danger { color: #ff4d4f; }
    
    /* 隐私设置 */
    .privacy-item { display: flex; padding: 15px; align-items: center; gap: 12px; background: white; border-bottom: 1px solid #f5f5f5; }
    .privacy-text { flex: 1; font-size: 14px; color: #333; }
    
    /* 通知设置 */
    .notify-item { display: flex; padding: 18px 15px; align-items: center; gap: 12px; background: white; border-bottom: 1px solid #f5f5f5; }
    .notify-text { flex: 1; }
    .notify-title { font-size: 14px; color: #333; margin-bottom: 4px; }
    .notify-desc { font-size: 11px; color: #999; }
    
    /* 搜索页 */
    .search-header { background: white; padding: 10px 15px; display: flex; gap: 10px; align-items: center; }
    .search-input-wrap { flex: 1; background: #f5f5f5; border-radius: 20px; padding: 8px 15px; display: flex; align-items: center; gap: 8px; }
    .search-input-wrap input { border: none; background: transparent; flex: 1; font-size: 14px; }
    .cancel-btn { color: #667eea; font-size: 14px; }
    .hot-search, .history-search { padding: 15px; }
    .search-title { font-size: 13px; color: #999; margin-bottom: 12px; }
    .search-tags { display: flex; flex-wrap: wrap; gap: 10px; }
    .search-tag { background: #f5f5f5; padding: 8px 15px; border-radius: 15px; font-size: 13px; color: #333; cursor: pointer; }
    
    /* 陪聊师详情 */
    .detail-header { background: linear-gradient(135deg, #667eea, #764ba2); padding: 20px; color: white; text-align: center; position: relative; }
    .detail-avatar { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 40px; border: 3px solid rgba(255,255,255,0.3); }
    .detail-name { font-size: 20px; font-weight: bold; margin-bottom: 8px; }
    .detail-stats { display: flex; justify-content: center; gap: 30px; margin-top: 15px; }
    .detail-stat { text-align: center; }
    .detail-stat .num { font-size: 18px; font-weight: bold; }
    .detail-stat .label { font-size: 11px; opacity: 0.8; }
    .detail-tabs { display: flex; background: white; margin-top: -20px; border-radius: 15px 15px 0 0; }
    .detail-tab { flex: 1; text-align: center; padding: 15px; font-size: 14px; color: #666; position: relative; cursor: pointer; }
    .detail-tab.active { color: #667eea; font-weight: bold; }
    .detail-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: #667eea; border-radius: 2px; }
    .service-list { padding: 15px; }
    .service-item { background: white; border-radius: 12px; padding: 15px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
    .service-info h4 { font-size: 14px; color: #333; }
    .service-info p { font-size: 12px; color: #999; margin-top: 4px; }
    .service-price { text-align: right; }
    .service-price .price { color: #ff4d4f; font-size: 18px; font-weight: bold; }
    .service-price .unit { font-size: 11px; color: #999; }
    .order-btn { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 10px 20px; border-radius: 20px; font-size: 14px; margin-left: 10px; }
    
    /* 聊天详情 */
    .chat-detail-header { background: white; padding: 12px 15px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #f0f0f0; }
    .chat-detail-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; }
    .chat-detail-name { font-size: 16px; font-weight: bold; color: #333; flex: 1; }
    .chat-messages { padding: 15px; min-height: 55vh; }
    .message { margin-bottom: 15px; display: flex; gap: 10px; }
    .message.others .msg-avatar-sm { width: 35px; height: 35px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 16px; color: white; }
    .message.self { flex-direction: row-reverse; }
    .message.self .msg-avatar-sm { width: 35px; height: 35px; border-radius: 50%; background: linear-gradient(135deg, #ffd700, #ffb700); display: flex; align-items: center; justify-content: center; font-size: 16px; color: white; }
    .msg-bubble-sm { max-width: 70%; padding: 10px 15px; border-radius: 15px; font-size: 14px; line-height: 1.5; }
    .message.others .msg-bubble-sm { background: white; border-bottom-left-radius: 3px; }
    .message.self .msg-bubble-sm { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-bottom-right-radius: 3px; }
    
    /* 订单确认 */
    .order-confirm { background: white; margin: 15px; border-radius: 12px; padding: 15px; }
    .order-service { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }
    .order-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; }
    .order-info h4 { font-size: 15px; color: #333; }
    .order-info p { font-size: 12px; color: #999; margin-top: 4px; }
    .order-row { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; color: #666; border-bottom: 1px solid #f0f0f0; }
    .order-row:last-child { border-bottom: none; }
    .order-row.total { font-weight: bold; color: #333; }
    .order-row .value { color: #ff4d4f; font-size: 18px; }
    
    /* 视频通话 */
    .video-call { background: #000; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; }
    .video-avatar-lg { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 70px; margin-bottom: 20px; }
    .video-name { font-size: 20px; margin-bottom: 10px; }
    .video-time { font-size: 14px; opacity: 0.7; margin-bottom: 50px; }
    .video-controls { display: flex; gap: 30px; }
    .video-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; }
    .video-btn.mute { background: rgba(255,255,255,0.2); }
    .video-btn.hangup { background: #ff4d4f; }
    
  </style>
</head>
<body>

<!-- ========== 首页 ========== -->
<div class="page active" id="page-home">
  <div class="home-header">
    <div style="font-size:12px;">📍 北京</div>
    <div class="search-bar" onclick="showPage('search')">
      <span>🔍</span>
      <input type="text" placeholder="搜索陪聊师、游戏..." readonly>
    </div>
  </div>
  
  <div class="banner">
    <h3>🎉 新用户首单立减20元</h3>
    <p>立即体验文字/语音/视频陪聊服务</p>
  </div>
  
  <div class="quick-nav">
    <div class="nav-item" onclick="showPage('chat-list')">
      <div class="nav-icon">💬</div>
      <span>文字聊天</span>
    </div>
    <div class="nav-item" onclick="showPage('video-call')">
      <div class="nav-icon">📹</div>
      <span>视频通话</span>
    </div>
    <div class="nav-item" onclick="showPage('game')">
      <div class="nav-icon">🎮</div>
      <span>游戏陪玩</span>
    </div>
    <div class="nav-item" onclick="showPage('search')">
      <div class="nav-icon">🔍</div>
      <span>搜索</span>
    </div>
  </div>
  
  <div class="section-title">
    推荐陪聊师
    <span onclick="showPage('search')">查看更多 ></span>
  </div>
  
  <div class="companion-list">
    <div class="companion-card" onclick="showPage('detail')">
      <div class="companion-avatar">👩‍🦰<div class="online-dot"></div></div>
      <div class="companion-info">
        <div class="companion-name">小雅<span class="vip-tag">VIP</span></div>
        <div class="companion-tags">
          <span class="companion-tag">声音甜美</span>
          <span class="companion-tag">耐心倾听</span>
        </div>
        <div class="companion-desc">擅长情感陪伴，温柔治愈系小姐姐</div>
      </div>
      <div class="companion-action">
        <div class="companion-price">¥30<span style="font-size:10px">/分钟</span></div>
        <button class="chat-btn" onclick="event.stopPropagation();showPage('chat-detail')">聊天</button>
      </div>
    </div>
    
    <div class="companion-card" onclick="showPage('detail')">
      <div class="companion-avatar">👨‍🎤<div class="online-dot"></div></div>
      <div class="companion-info">
        <div class="companion-name">阿泽</div>
        <div class="companion-tags">
          <span class="companion-tag">游戏高手</span>
          <span class="companion-tag">王者荣耀</span>
        </div>
        <div class="companion-desc">国服段位，陪你上分带飞</div>
      </div>
      <div class="companion-action">
        <div class="companion-price">¥40<span style="font-size:10px">/局</span></div>
        <button class="chat-btn" onclick="event.stopPropagation();showPage('chat-detail')">聊天</button>
      </div>
    </div>
    
    <div class="companion-card" onclick="showPage('detail')">
      <div class="companion-avatar">👩‍🦱</div>
      <div class="companion-info">
        <div class="companion-name">雨晴<span class="vip-tag">VIP</span></div>
        <div class="companion-tags">
          <span class="companion-tag">心理咨询</span>
          <span class="companion-tag">聊天</span>
        </div>
        <div class="companion-desc">专业心理咨询师，倾听你的心声</div>
      </div>
      <div class="companion-action">
        <div class="companion-price">¥50<span style="font-size:10px">/分钟</span></div>
        <button class="chat-btn" onclick="event.stopPropagation();showPage('chat-detail')">聊天</button>
      </div>
    </div>
  </div>
</div>

<!-- ========== 搜索页 ========== -->
<div class="page" id="page-search">
  <div class="search-header">
    <div class="search-input-wrap">
      <span>🔍</span>
      <input type="text" placeholder="搜索陪聊师、游戏...">
    </div>
    <span class="cancel-btn" onclick="showPage('home')">取消</span>
  </div>
  <div class="hot-search">
    <div class="search-title">🔥 热门搜索</div>
    <div class="search-tags">
      <span class="search-tag">王者荣耀陪玩</span>
      <span class="search-tag">吃鸡队友</span>
      <span class="search-tag">深夜陪聊</span>
      <span class="search-tag">声优聊天</span>
      <span class="search-tag">心理咨询</span>
      <span class="search-tag">情感咨询</span>
    </div>
  </div>
  <div class="history-search">
    <div class="search-title">🕐 搜索历史</div>
    <div class="search-tags">
      <span class="search-tag">王者荣耀</span>
      <span class="search-tag">小雅</span>
      <span class="search-tag">视频聊天</span>
    </div>
  </div>
</div>

<!-- ========== 聊天列表 ========== -->
<div class="page" id="page-chat-list">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('home')">←</span>
    <div class="page-title">消息</div>
  </div>
  <div class="chat-list">
    <div class="chat-item" onclick="showPage('chat-detail')">
      <div class="chat-avatar">👩‍🦰<div class="unread-badge">3</div></div>
      <div class="chat-content">
        <div class="chat-name">小雅<span class="chat-time">刚刚</span></div>
        <div class="chat-preview">今天天气真好呀，要不要一起出去...</div>
      </div>
    </div>
    <div class="chat-item" onclick="showPage('chat-detail')">
      <div class="chat-avatar">👨‍🎤</div>
      <div class="chat-content">
        <div class="chat-name">阿泽<span class="chat-time">10分钟前</span></div>
        <div class="chat-preview">游戏已经开始了，快上线吧！</div>
      </div>
    </div>
    <div class="chat-item" onclick="showPage('chat-detail')">
      <div class="chat-avatar">👩‍🦱<div class="unread-badge">1</div></div>
      <div class="chat-content">
        <div class="chat-name">雨晴<span class="chat-time">30分钟前</span></div>
        <div class="chat-preview">好的，那我们约明天晚上8点见</div>
      </div>
    </div>
    <div class="chat-item" onclick="showPage('notice')">
      <div class="chat-avatar">🔔<div class="unread-badge">2</div></div>
      <div class="chat-content">
        <div class="chat-name">系统通知<span class="chat-time">昨天</span></div>
        <div class="chat-preview">您的订单已完成，感谢使用我们的服务</div>
      </div>
    </div>
  </div>
</div>

<!-- ========== 聊天详情 ========== -->
<div class="page" id="page-chat-detail">
  <div class="chat-detail-header">
    <span class="back-btn" onclick="showPage('chat-list')">←</span>
    <div class="chat-detail-avatar">👩‍🦰</div>
    <div class="chat-detail-name">小雅</div>
    <span style="font-size:20px;cursor:pointer;" onclick="showPage('video-call')">📞</span>
  </div>
  <div class="chat-messages">
    <div class="message others">
      <div class="msg-avatar-sm">👩‍🦰</div>
      <div class="msg-bubble-sm">你好呀，很高兴认识你~</div>
    </div>
    <div class="message self">
      <div class="msg-avatar-sm">😎</div>
      <div class="msg-bubble-sm">你好，小雅姐姐，我最近心情不太好，想找人聊聊</div>
    </div>
    <div class="message others">
      <div class="msg-avatar-sm">👩‍🦰</div>
      <div class="msg-bubble-sm">怎么了？有什么烦恼可以和我说说，我会认真倾听并陪伴你的</div>
    </div>
    <div class="message self">
      <div class="msg-avatar-sm">😎</div>
      <div class="msg-bubble-sm">工作压力太大了，每天都加班到很晚...</div>
    </div>
  </div>
  <div class="chat-input-area">
    <input type="text" class="chat-input" placeholder="输入消息...">
    <button class="chat-send">发送</button>
  </div>
</div>

<!-- ========== 游戏陪玩 ========== -->
<div class="page" id="page-game">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('home')">←</span>
    <div class="page-title">游戏陪玩</div>
  </div>
  <div class="game-tabs">
    <div class="game-tab active">全部</div>
    <div class="game-tab">王者荣耀</div>
    <div class="game-tab">和平精英</div>
    <div class="game-tab">英雄联盟</div>
    <div class="game-tab">原神</div>
  </div>
  <div class="game-card" onclick="showPage('order-confirm')">
    <div class="game-banner">🎮</div>
    <div class="game-info">
      <div class="game-name">王者荣耀 - 五排车队</div>
      <div class="game-players">👥 当前在线 128 人 | 国服段位带你上分</div>
      <div class="game-price">¥35<span style="font-size:11px">/局</span> <span style="color:#999;font-size:11px;text-decoration:line-through">¥50</span></div>
    </div>
  </div>
  <div class="game-card" onclick="showPage('order-confirm')">
    <div class="game-banner" style="background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">🔫</div>
    <div class="game-info">
      <div class="game-name">和平精英 - 双人四排</div>
      <div class="game-players">👥 当前在线 89 人 | 钢枪王带你吃鸡</div>
      <div class="game-price">¥40<span style="font-size:11px">/局</span></div>
    </div>
  </div>
</div>

<!-- ========== 个人中心 ========== -->
<div class="page" id="page-profile">
  <div class="profile-header">
    <div class="profile-avatar">😎</div>
    <div class="profile-info">
      <h3>用户小明</h3>
      <p>ID: 888888</p>
    </div>
    <span style="margin-left:auto;font-size:20px;cursor:pointer;" onclick="showPage('settings')">⚙️</span>
  </div>
  
  <div class="vip-card">
    <div class="vip-info">
      <h4>🌟 开通VIP会员</h4>
      <p>享受8折优惠 & 更多专属权益</p>
    </div>
    <div class="vip-btn">立即开通</div>
  </div>
  
  <div class="menu-list">
    <div class="menu-item" onclick="showPage('wallet')">
      <div class="menu-icon" style="background:#fff3e0;">💰</div>
      <div class="menu-text">我的钱包</div>
      <div class="menu-arrow">></div>
    </div>
    <div class="menu-item" onclick="showPage('orders')">
      <div class="menu-icon" style="background:#e8f5e9;">📋</div>
      <div class="menu-text">我的订单</div>
      <div class="menu-arrow">></div>
    </div>
    <div class="menu-item" onclick="showPage('collect')">
      <div class="menu-icon" style="background:#fce4ec;">⭐</div>
      <div class="menu-text">我的收藏</div>
      <div class="menu-arrow">></div>
    </div>
    <div class="menu-item" onclick="showPage('cert')">
      <div class="menu-icon" style="background:#e3f2fd;">🏆</div>
      <div class="menu-text">认证中心</div>
      <div class="menu-arrow">></div>
    </div>
  </div>
  
  <div class="menu-list" style="margin-top:15px;">
    <div class="menu-item" onclick="showPage('notice')">
      <div class="menu-icon" style="background:#f3e5f5;">🔔</div>
      <div class="menu-text">消息通知</div>
      <div class="menu-arrow">></div>
    </div>
    <div class="menu-item" onclick="showPage('service')">
      <div class="menu-icon" style="background:#fff8e1;">📞</div>
      <div class="menu-text">联系客服</div>
      <div class="menu-arrow">></div>
    </div>
    <div class="menu-item" onclick="showPage('help')">
      <div class="menu-icon" style="background:#e0f7fa;">❓</div>
      <div class="menu-text">帮助中心</div>
      <div class="menu-arrow">></div>
    </div>
    <div class="menu-item" onclick="showPage('settings')">
      <div class="menu-icon" style="background:#f5f5f5;">⚙️</div>
      <div class="menu-text">设置</div>
      <div class="menu-arrow">></div>
    </div>
  </div>
</div>

<!-- ========== 我的钱包 ========== -->
<div class="page" id="page-wallet">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('profile')">←</span>
    <div class="page-title">我的钱包</div>
  </div>
  <div class="wallet-header">
    <div class="wallet-balance">账户余额</div>
    <div class="wallet-amount">¥128.50</div>
    <div class="wallet-actions">
      <div class="wallet-action" onclick="showPage('recharge')">充值</div>
      <div class="wallet-action" onclick="showPage('withdraw')">提现</div>
    </div>
  </div>
  <div style="padding:15px;font-size:14px;color:#333;">交易记录</div>
  <div class="trans-list">
    <div class="trans-item">
      <div class="trans-icon">🎮</div>
      <div class="trans-info">
        <h4>游戏陪玩-王者荣耀</h4>
        <p>2026-04-14 15:30</p>
      </div>
      <div class="trans-amount expense">-¥40.00</div>
    </div>
    <div class="trans-item">
      <div class="trans-icon">💰</div>
      <div class="trans-info">
        <h4>充值</h4>
        <p>2026-04-13 10:20</p>
      </div>
      <div class="trans-amount income">+¥100.00</div>
    </div>
    <div class="trans-item">
      <div class="trans-icon">💬</div>
      <div class="trans-info">
        <h4>语音聊天-小雅</h4>
        <p>2026-04-12 20:15</p>
      </div>
      <div class="trans-amount expense">-¥30.00</div>
    </div>
  </div>
</div>

<!-- ========== 充值页 ========== -->
<div class="page" id="page-recharge">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('wallet')">←</span>
    <div class="page-title">充值</div>
  </div>
  <div class="amount-input-card">
    <div class="amount-label">充值金额</div>
    <div class="amount-input-wrap">
      <span>¥</span>
      <input type="number" value="100" id="rechargeAmount">
    </div>
    <div class="quick-amounts">
      <div class="quick-amount active" onclick="setAmount(this, 50)">¥50</div>
      <div class="quick-amount" onclick="setAmount(this, 100)">¥100</div>
      <div class="quick-amount" onclick="setAmount(this, 200)">¥200</div>
      <div class="quick-amount" onclick="setAmount(this, 500)">¥500</div>
      <div class="quick-amount" onclick="setAmount(this, 1000)">¥1000</div>
    </div>
  </div>
  <div style="padding:15px;font-size:14px;color:#333;">支付方式</div>
  <div class="menu-list" style="margin:0 15px;">
    <div class="menu-item">
      <div style="font-size:20px;">💳</div>
      <div class="menu-text">微信支付</div>
      <div style="color:#4caf50;">✓ 已开通</div>
    </div>
  </div>
  <button class="submit-btn" onclick="alert('充值成功！')">立即充值</button>
</div>

<!-- ========== 提现页 ========== -->
<div class="page" id="page-withdraw">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('wallet')">←</span>
    <div class="page-title">提现</div>
  </div>
  <div class="amount-input-card">
    <div class="amount-label">提现金额</div>
    <div class="amount-input-wrap">
      <span>¥</span>
      <input type="number" value="50" id="withdrawAmount">
    </div>
    <p style="font-size:12px;color:#999;margin-top:10px;">可提现余额：¥128.50</p>
    <div class="quick-amounts">
      <div class="quick-amount" onclick="setAmount(this, 50)">¥50</div>
      <div class="quick-amount" onclick="setAmount(this, 100)">¥100</div>
      <div class="quick-amount active" onclick="setAmount(this, 128.5)">全部</div>
    </div>
  </div>
  <div style="padding:15px;font-size:14px;color:#333;">提现方式</div>
  <div class="menu-list" style="margin:0 15px;">
    <div class="menu-item">
      <div style="font-size:20px;">💳</div>
      <div class="menu-text">提现至微信</div>
      <div style="color:#4caf50;">✓ 已绑定</div>
    </div>
  </div>
  <button class="submit-btn" onclick="alert('提现申请已提交！')">立即提现</button>
</div>

<!-- ========== 我的订单 ========== -->
<div class="page" id="page-orders">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('profile')">←</span>
    <div class="page-title">我的订单</div>
  </div>
  <div class="order-tabs">
    <div class="order-tab active">全部</div>
    <div class="order-tab">待支付</div>
    <div class="order-tab">进行中</div>
    <div class="order-tab">已完成</div>
  </div>
  
  <div class="order-card" onclick="showPage('order-detail')">
    <div class="order-header">
      <div class="order-provider">
        <div class="order-provider-avatar">👩‍🦰</div>
        <div class="order-provider-name">小雅</div>
      </div>
      <div class="order-status">进行中</div>
    </div>
    <div class="order-detail">
      <span>📹 视频聊天</span>
      <span>15分钟</span>
    </div>
    <div style="display:flex;justify-content:flex-end;gap:10px;">
      <span style="font-size:16px;font-weight:bold;color:#ff4d4f;">¥30.00</span>
    </div>
  </div>
  
  <div class="order-card">
    <div class="order-header">
      <div class="order-provider">
        <div class="order-provider-avatar">👨‍🎤</div>
        <div class="order-provider-name">阿泽</div>
      </div>
      <div class="order-status pending">待支付</div>
    </div>
    <div class="order-detail">
      <span>🎮 王者荣耀陪玩</span>
      <span>1局</span>
    </div>
    <div class="order-footer">
      <button class="order-btn outline" onclick="alert('已取消订单')">取消</button>
      <button class="order-btn primary" onclick="alert('去支付')">去支付</button>
    </div>
  </div>
  
  <div class="order-card">
    <div class="order-header">
      <div class="order-provider">
        <div class="order-provider-avatar">👩‍🦱</div>
        <div class="order-provider-name">雨晴</div>
      </div>
      <div class="order-status completed">已完成</div>
    </div>
    <div class="order-detail">
      <span>💬 文字聊天</span>
      <span>45分钟</span>
    </div>
    <div style="display:flex;justify-content:flex-end;gap:10px;">
      <span style="font-size:16px;font-weight:bold;color:#ff4d4f;">¥22.50</span>
    </div>
    <div class="order-footer">
      <button class="order-btn outline" onclick="showPage('detail')">再次预约</button>
      <button class="order-btn outline">评价</button>
    </div>
  </div>
</div>

<!-- ========== 订单详情 ========== -->
<div class="page" id="page-order-detail">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('orders')">←</span>
    <div class="page-title">订单详情</div>
  </div>
  <div class="order-info-card">
    <div class="order-header" style="border:none;margin-bottom:0;padding-bottom:0;">
      <div class="order-provider">
        <div class="order-provider-avatar">👩‍🦱</div>
        <div class="order-provider-name">雨晴</div>
      </div>
      <div class="order-status completed">已完成</div>
    </div>
  </div>
  <div class="order-info-card">
    <div class="info-row"><span class="info-label">服务类型</span><span class="info-value">文字聊天</span></div>
    <div class="info-row"><span class="info-label">服务时长</span><span class="info-value">45分钟</span></div>
    <div class="info-row"><span class="info-label">下单时间</span><span class="info-value">2026-04-12 19:30</span></div>
    <div class="info-row"><span class="info-label">订单编号</span><span class="info-value">ORD20260412001</span></div>
    <div class="order-total">
      <span class="label">实付金额</span>
      <span class="value">¥22.50</span>
    </div>
  </div>
  <div style="padding:15px;">
    <button class="submit-btn" style="margin:0;" onclick="showPage('detail')">再次预约</button>
  </div>
</div>

<!-- ========== 我的收藏 ========== -->
<div class="page" id="page-collect">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('profile')">←</span>
    <div class="page-title">我的收藏</div>
  </div>
  <div class="collect-card">
    <div class="collect-avatar">👩‍🦰</div>
    <div class="collect-info">
      <div class="collect-name">小雅 <span style="font-size:10px;background:#ffd700;color:white;padding:2px 5px;border-radius:8px;">VIP</span></div>
      <div class="collect-tags">
        <span class="collect-tag">声音甜美</span>
        <span class="collect-tag">情感陪伴</span>
      </div>
      <div class="collect-price">¥30/分钟</div>
    </div>
    <div class="collect-action">
      <button class="collect-btn" onclick="showPage('chat-detail')">聊天</button>
      <button class="uncollect-btn" onclick="alert('已取消收藏')">取消</button>
    </div>
  </div>
  <div class="collect-card">
    <div class="collect-avatar">👨‍🎤</div>
    <div class="collect-info">
      <div class="collect-name">阿泽</div>
      <div class="collect-tags">
        <span class="collect-tag">游戏高手</span>
        <span class="collect-tag">王者荣耀</span>
      </div>
      <div class="collect-price">¥40/局</div>
    </div>
    <div class="collect-action">
      <button class="collect-btn" onclick="showPage('chat-detail')">聊天</button>
      <button class="uncollect-btn" onclick="alert('已取消收藏')">取消</button>
    </div>
  </div>
</div>

<!-- ========== 认证中心 ========== -->
<div class="page" id="page-cert">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('profile')">←</span>
    <div class="page-title">认证中心</div>
  </div>
  <div class="cert-card">
    <div class="cert-item">
      <div class="cert-icon approved">✓</div>
      <div class="cert-info">
        <h4>身份认证</h4>
        <p>已认证 · 认证时间：2026-03-15</p>
      </div>
      <div class="cert-status approved">已认证</div>
    </div>
    <div class="cert-item">
      <div class="cert-icon approved">✓</div>
      <div class="cert-info">
        <h4>手机认证</h4>
        <p>已认证 · 138****8888</p>
      </div>
      <div class="cert-status approved">已认证</div>
    </div>
    <div class="cert-item">
      <div class="cert-icon pending">⏳</div>
      <div class="cert-info">
        <h4>技能认证</h4>
        <p>可认证您的专业技能，提升接单率</p>
      </div>
      <div class="cert-status pending">去认证</div>
    </div>
    <div class="cert-item">
      <div class="cert-icon pending">⏳</div>
      <div class="cert-info">
        <h4>视频认证</h4>
        <p>完成视频认证，提升用户信任度</p>
      </div>
      <div class="cert-status pending">去认证</div>
    </div>
  </div>
</div>

<!-- ========== 消息通知 ========== -->
<div class="page" id="page-notice">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('profile')">←</span>
    <div class="page-title">消息通知</div>
  </div>
  <div class="notice-card">
    <div class="notice-header">
      <div class="notice-title"><span class="notice-tag">订单</span>订单已完成</div>
      <div class="notice-time">刚刚</div>
    </div>
    <div class="notice-content">您与陪聊师小雅的视频聊天服务已完成，消费金额¥30.00，感谢您的使用！</div>
  </div>
  <div class="notice-card">
    <div class="notice-header">
      <div class="notice-title"><span class="notice-tag">系统</span>账户安全提醒</div>
      <div class="notice-time">10分钟前</div>
    </div>
    <div class="notice-content">您的账号于2026-04-14 16:20在新设备登录，如非本人操作请及时修改密码。</div>
  </div>
  <div class="notice-card">
    <div class="notice-header">
      <div class="notice-title"><span class="notice-tag">活动</span>新人专享优惠</div>
      <div class="notice-time">昨天</div>
    </div>
    <div class="notice-content">🎉 新用户首单立减20元！立即体验文字、语音、视频陪聊服务，开启愉快聊天时光~</div>
  </div>
  <div class="notice-card">
    <div class="notice-header">
      <div class="notice-title"><span class="notice-tag">订单</span>待支付提醒</div>
      <div class="notice-time">2天前</div>
    </div>
    <div class="notice-content">您有一笔王者荣耀陪玩订单待支付，请尽快完成支付，超时将自动取消。</div>
  </div>
</div>

<!-- ========== 联系客服 ========== -->
<div class="page" id="page-service">
  <div class="service-header">
    <span class="back-btn" onclick="showPage('profile')">←</span>
    <div class="service-avatar">🤖</div>
    <div class="service-info">
      <h4>在线客服</h4>
      <p>在线</p>
    </div>
    <div class="service-status">在线</div>
  </div>
  <div class="service-msgs">
    <div class="service-msg service">
      <div class="msg-avatar service">🤖</div>
      <div class="msg-bubble">您好！我是小陪客服，很高兴为您服务。请问有什么可以帮助您的？</div>
    </div>
    <div class="service-msg user">
      <div class="msg-avatar user">😎</div>
      <div class="msg-bubble">我想咨询一下充值退款的问题</div>
    </div>
    <div class="service-msg service">
      <div class="msg-avatar service">🤖</div>
      <div class="msg-bubble">好的，关于充值退款问题：<br>1. 充值金额7天内未消费可申请退款<br>2. 已消费金额按剩余未使用比例退款<br>3. 退款将在1-3个工作日内到账<br><br>请问您是需要退款吗？</div>
    </div>
  </div>
  <div class="chat-input-area">
    <input type="text" class="chat-input" placeholder="输入您的问题...">
    <button class="chat-send">发送</button>
  </div>
</div>

<!-- ========== 帮助中心 ========== -->
<div class="page" id="page-help">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('profile')">←</span>
    <div class="page-title">帮助中心</div>
  </div>
  <div class="help-category">
    <div class="help-item" onclick="showPage('help-detail')">
      <div class="help-icon">💰</div>
      <div class="help-text">如何申请退款？</div>
      <div class="help-arrow">></div>
    </div>
    <div class="help-item" onclick="showPage('help-detail')">
      <div class="help-icon">💳</div>
      <div class="help-text">如何充值？</div>
      <div class="help-arrow">></div>
    </div>
    <div class="help-item" onclick="showPage('help-detail')">
      <div class="help-icon">📞</div>
      <div class="help-text">如何联系客服？</div>
      <div class="help-arrow">></div>
    </div>
    <div class="help-item" onclick="showPage('help-detail')">
      <div class="help-icon">🔒</div>
      <div class="help-text">账户安全问题</div>
      <div class="help-arrow">></div>
    </div>
  </div>
  <div class="help-category">
    <div class="help-item" onclick="showPage('help-detail')">
      <div class="help-icon">🎮</div>
      <div class="help-text">游戏陪玩相关</div>
      <div class="help-arrow">></div>
    </div>
    <div class="help-item" onclick="showPage('help-detail')">
      <div class="help-icon">📹</div>
      <div class="help-text">视频聊天相关</div>
      <div class="help-arrow">></div>
    </div>
    <div class="help-item" onclick="showPage('help-detail')">
      <div class="help-icon">⭐</div>
      <div class="help-text">如何评价服务？</div>
      <div class="help-arrow">></div>
    </div>
  </div>
</div>

<!-- ========== 帮助详情 ========== -->
<div class="page" id="page-help-detail">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('help')">←</span>
    <div class="page-title">帮助详情</div>
  </div>
  <div class="help-detail">
    <h4>如何申请退款？</h4>
    <p>1. 打开"我的"页面，点击"我的订单"<br><br>
    2. 找到需要退款的订单，点击"申请退款"<br><br>
    3. 选择退款原因并提交申请<br><br>
    4. 退款申请审核通过后，金额将在1-3个工作日内退回您的支付账户</p>
    <h4>退款规则说明</h4>
    <p>• 充值金额7天内未使用，可全额退款<br>
    • 已消费金额按剩余未使用比例退款<br>
    • 订单完成后30天内可申请退款<br>
    • 特殊情况请联系客服处理</p>
  </div>
</div>

<!-- ========== 设置 ========== -->
<div class="page" id="page-settings">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('profile')">←</span>
    <div class="page-title">设置</div>
  </div>
  <div class="menu-list" style="margin-top:15px;">
    <div class="setting-item" onclick="showPage('security')">
      <div class="setting-icon">🔒</div>
      <div class="setting-text">账号与安全</div>
      <div class="menu-arrow">></div>
    </div>
    <div class="setting-item" onclick="showPage('privacy')">
      <div class="setting-icon">👁️</div>
      <div class="setting-text">隐私设置</div>
      <div class="menu-arrow">></div>
    </div>
    <div class="setting-item" onclick="showPage('notify-settings')">
      <div class="setting-icon">🔔</div>
      <div class="setting-text">通知设置</div>
      <div class="menu-arrow">></div>
    </div>
  </div>
  <div class="menu-list" style="margin:15px;">
    <div class="setting-item">
      <div class="setting-icon">🌐</div>
      <div class="setting-text">语言</div>
      <div style="color:#999;font-size:13px;">简体中文</div>
    </div>
    <div class="setting-item">
      <div class="setting-icon">📱</div>
      <div class="setting-text">清除缓存</div>
      <div style="color:#999;font-size:13px;">12.5MB</div>
    </div>
    <div class="setting-item">
      <div class="setting-icon">📝</div>
      <div class="setting-text">关于我们</div>
      <div class="menu-arrow">></div>
    </div>
  </div>
  <div style="padding:15px;">
    <button class="submit-btn" style="background:#ff4d4f;margin:0;" onclick="alert('已退出登录')">退出登录</button>
  </div>
</div>

<!-- ========== 账号安全 ========== -->
<div class="page" id="page-security">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('settings')">←</span>
    <div class="page-title">账号与安全</div>
  </div>
  <div class="security-item">
    <div class="security-icon">📱</div>
    <div class="security-info">
      <div class="security-title">手机号</div>
      <div class="security-desc">138****8888</div>
    </div>
    <div class="security-status">已绑定</div>
  </div>
  <div class="security-item">
    <div class="security-icon">🔑</div>
    <div class="security-info">
      <div class="security-title">登录密码</div>
      <div class="security-desc">已设置</div>
    </div>
    <div class="security-status">已设置</div>
  </div>
  <div class="security-item">
    <div class="security-icon">💳</div>
    <div class="security-info">
      <div class="security-title">微信</div>
      <div class="security-desc">已绑定</div>
    </div>
    <div class="security-status">已绑定</div>
  </div>
  <div class="security-item">
    <div class="security-icon">✉️</div>
    <div class="security-info">
      <div class="security-title">邮箱</div>
      <div class="security-desc">未绑定</div>
    </div>
    <div class="security-status danger">去绑定</div>
  </div>
  <div class="security-item">
    <div class="security-icon">🔐</div>
    <div class="security-info">
      <div class="security-title">实名认证</div>
      <div class="security-desc">已认证：张三</div>
    </div>
    <div class="security-status">已认证</div>
  </div>
  <div class="security-item">
    <div class="security-icon">📝</div>
    <div class="security-info">
      <div class="security-title">账号注销</div>
      <div class="security-desc">注销后所有数据将无法恢复</div>
    </div>
    <div class="menu-arrow">></div>
  </div>
</div>

<!-- ========== 隐私设置 ========== -->
<div class="page" id="page-privacy">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('settings')">←</span>
    <div class="page-title">隐私设置</div>
  </div>
  <div class="privacy-item">
    <div class="privacy-text">允许将我推荐给其他用户</div>
    <div class="switch active" onclick="this.classList.toggle('active')"></div>
  </div>
  <div class="privacy-item">
    <div class="privacy-text">允许他人查看我的收藏</div>
    <div class="switch" onclick="this.classList.toggle('active')"></div>
  </div>
  <div class="privacy-item">
    <div class="privacy-text">允许他人查看我的订单</div>
    <div class="switch" onclick="this.classList.toggle('active')"></div>
  </div>
  <div class="privacy-item">
    <div class="privacy-text">显示在线状态</div>
    <div class="switch active" onclick="this.classList.toggle('active')"></div>
  </div>
  <div class="privacy-item">
    <div class="privacy-text">显示最后上线时间</div>
    <div class="switch active" onclick="this.classList.toggle('active')"></div>
  </div>
  <div class="privacy-item">
    <div class="privacy-text">黑名单</div>
    <div class="menu-arrow">></div>
  </div>
</div>

<!-- ========== 通知设置 ========== -->
<div class="page" id="page-notify-settings">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('settings')">←</span>
    <div class="page-title">通知设置</div>
  </div>
  <div class="notify-item">
    <div class="notify-text">
      <div class="notify-title">新消息通知</div>
      <div class="notify-desc">收到新消息时推送通知</div>
    </div>
    <div class="switch active" onclick="this.classList.toggle('active')"></div>
  </div>
  <div class="notify-item">
    <div class="notify-text">
      <div class="notify-title">订单状态通知</div>
      <div class="notify-desc">订单状态变更时推送通知</div>
    </div>
    <div class="switch active" onclick="this.classList.toggle('active')"></div>
  </div>
  <div class="notify-item">
    <div class="notify-text">
      <div class="notify-title">活动优惠通知</div>
      <div class="notify-desc">收到优惠活动时推送通知</div>
    </div>
    <div class="switch" onclick="this.classList.toggle('active')"></div>
  </div>
  <div class="notify-item">
    <div class="notify-text">
      <div class="notify-title">声音</div>
      <div class="notify-desc">收到通知时播放声音</div>
    </div>
    <div class="switch active" onclick="this.classList.toggle('active')"></div>
  </div>
  <div class="notify-item">
    <div class="notify-text">
      <div class="notify-title">震动</div>
      <div class="notify-desc">收到通知时震动提醒</div>
    </div>
    <div class="switch active" onclick="this.classList.toggle('active')"></div>
  </div>
</div>

<!-- ========== 陪聊师详情 ========== -->
<div class="page" id="page-detail">
  <div class="detail-header">
    <div class="back-btn" style="position:absolute;top:15px;left:15px;color:white;font-size:24px;cursor:pointer;" onclick="showPage('home')">←</div>
    <div class="detail-avatar">👩‍🦰</div>
    <div class="detail-name">小雅 <span style="font-size:12px;opacity:0.8;">在线</span></div>
    <div style="font-size:12px;opacity:0.8;margin-top:5px;">声音甜美 · 耐心倾听 · 情感陪伴</div>
    <div class="detail-stats">
      <div class="detail-stat"><div class="num">4.9</div><div class="label">评分</div></div>
      <div class="detail-stat"><div class="num">1.2k</div><div class="label">服务次数</div></div>
      <div class="detail-stat"><div class="num">98%</div><div class="label">好评率</div></div>
    </div>
  </div>
  <div class="detail-tabs">
    <div class="detail-tab active">服务</div>
    <div class="detail-tab">评价</div>
    <div class="detail-tab">简介</div>
  </div>
  <div class="service-list">
    <div class="service-item">
      <div class="service-info"><h4>💬 文字聊天</h4><p>随时随地倾诉心事</p></div>
      <div class="service-price"><div class="price">¥0.5</div><div class="unit">/分钟</div></div>
      <button class="order-btn" onclick="showPage('chat-detail')">开始</button>
    </div>
    <div class="service-item">
      <div class="service-info"><h4>🎤 语音聊天</h4><p>温柔声音陪伴你</p></div>
      <div class="service-price"><div class="price">¥1.0</div><div class="unit">/分钟</div></div>
      <button class="order-btn" onclick="showPage('chat-detail')">开始</button>
    </div>
    <div class="service-item">
      <div class="service-info"><h4>📹 视频聊天</h4><p>面对面情感陪伴</p></div>
      <div class="service-price"><div class="price">¥2.0</div><div class="unit">/分钟</div></div>
      <button class="order-btn" onclick="showPage('video-call')">开始</button>
    </div>
  </div>
</div>

<!-- ========== 订单确认 ========== -->
<div class="page" id="page-order-confirm">
  <div class="page-header">
    <span class="back-btn" onclick="showPage('game')">←</span>
    <div class="page-title">订单确认</div>
  </div>
  <div class="order-confirm">
    <div class="order-service">
      <div class="order-avatar">👨‍🎤</div>
      <div class="order-info"><h4>阿泽 - 王者荣耀陪玩</h4><p>国服段位 · 带你上分</p></div>
    </div>
    <div class="order-row"><span>服务类型</span><span>王者荣耀 · 五排车队</span></div>
    <div class="order-row"><span>陪玩时长</span><span>1 局</span></div>
    <div class="order-row"><span>平台服务费</span><span>¥5.00</span></div>
    <div class="order-row total"><span>应付金额</span><span class="value">¥40.00</span></div>
  </div>
  <button class="submit-btn" onclick="alert('订单创建成功！')">确认下单</button>
</div>

<!-- ========== 视频通话 ========== -->
<div class="page" id="page-video-call">
  <div class="video-call">
    <div class="back-btn" style="position:absolute;top:50px;left:20px;color:white;font-size:28px;cursor:pointer;" onclick="showPage('home')">←</div>
    <div class="video-avatar-lg">👩‍🦰</div>
    <div class="video-name">小雅</div>
    <div class="video-time">00:15:32</div>
    <div class="video-controls">
      <div class="video-btn mute">🎤</div>
      <div class="video-btn hangup" onclick="showPage('home')">📞</div>
      <div class="video-btn mute">🔄</div>
    </div>
  </div>
</div>

<!-- ========== 底部导航栏 ========== -->
<div class="tab-bar">
  <div class="tab-item active" onclick="showPage('home')">
    <div class="tab-icon">🏠</div>
    <div class="tab-text">首页</div>
  </div>
  <div class="tab-item" onclick="showPage('chat-list')">
    <div class="tab-icon">💬</div>
    <div class="tab-text">聊天</div>
  </div>
  <div class="tab-item" onclick="showPage('game')">
    <div class="tab-icon">🎮</div>
    <div class="tab-text">陪玩</div>
  </div>
  <div class="tab-item" onclick="showPage('profile')">
    <div class="tab-icon">👤</div>
    <div class="tab-text">我的</div>
  </div>
</div>

<script>
  function showPage(pageName) {
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    const page = document.getElementById('page-' + pageName);
    if (page) page.classList.add('active');
    
    const tabMap = {
      'home': 0, 'search': 0, 'detail': 0,
      'chat-list': 1, 'chat-detail': 1,
      'game': 2, 'order-confirm': 2,
      'profile': 3, 'wallet': 3, 'orders': 3, 'collect': 3, 'cert': 3,
      'notice': 3, 'service': 3, 'help': 3, 'settings': 3,
      'recharge': 3, 'withdraw': 3, 'order-detail': 3,
      'security': 3, 'privacy': 3, 'notify-settings': 3, 'help-detail': 3,
      'video-call': -1
    };
    
    document.querySelectorAll('.tab-item').forEach((tab, i) => {
      tab.classList.toggle('active', i === tabMap[pageName]);
    });
    
    window.scrollTo(0, 0);
  }
  
  function setAmount(el, amount) {
    document.querySelectorAll('.quick-amount').forEach(a => a.classList.remove('active'));
    el.classList.add('active');
    const input = el.closest('.amount-input-card').querySelector('input');
    input.value = amount;
  }
</script>

</body>
</html>