编辑页面

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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #FF6B9D;
            --primary-light: #FFF0F5;
            --secondary: #FFD700;
            --text-dark: #333333;
            --text-gray: #999999;
            --bg-gray: #F5F5F5;
            --border: #EEEEEE;
            --success: #07C160;
            --danger: #FF4757;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg-gray);
            color: var(--text-dark);
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
        }
        
        /* 手机框架 */
        .phone-frame {
            width: 100%;
            max-width: 430px;
            min-height: 100vh;
            background: #fff;
            position: relative;
            overflow: hidden;
        }
        
        /* 状态栏 */
        .status-bar {
            height: 44px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            padding-bottom: 8px;
            font-size: 14px;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .status-bar::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: var(--border);
        }
        
        /* 页面容器 */
        .page {
            display: none;
            min-height: calc(100vh - 60px);
            animation: fadeIn 0.3s ease;
        }
        
        .page.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 底部导航 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 60px;
            background: #fff;
            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: 4px;
            padding: 6px 20px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .tab-item svg {
            width: 24px;
            height: 24px;
            fill: var(--text-gray);
        }
        
        .tab-item.active svg {
            fill: var(--primary);
        }
        
        .tab-item span {
            font-size: 11px;
            color: var(--text-gray);
        }
        
        .tab-item.active span {
            color: var(--primary);
        }
        
        /* 首页样式 */
        .home-header {
            padding: 16px;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8FB1 100%);
            color: #fff;
        }
        
        .home-header h1 {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .home-header p {
            font-size: 12px;
            opacity: 0.9;
        }
        
        /* 分类标签 */
        .category-tabs {
            display: flex;
            gap: 8px;
            padding: 16px;
            overflow-x: auto;
            background: #fff;
        }
        
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .category-tab {
            flex-shrink: 0;
            padding: 8px 16px;
            background: var(--bg-gray);
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid transparent;
        }
        
        .category-tab.active {
            background: var(--primary-light);
            color: var(--primary);
            border-color: var(--primary);
        }
        
        /* 搜索框 */
        .search-bar {
            margin: 0 16px 16px;
            padding: 10px 16px;
            background: var(--bg-gray);
            border-radius: 24px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .search-bar input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 14px;
            outline: none;
        }
        
        .search-bar svg {
            width: 18px;
            height: 18px;
            fill: var(--text-gray);
        }
        
        /* 陪玩师卡片 */
        .companion-list {
            padding: 0 16px 80px;
        }
        
        .companion-card {
            background: #fff;
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            gap: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .companion-card:active {
            transform: scale(0.98);
            background: #fafafa;
        }
        
        .companion-avatar {
            width: 70px;
            height: 70px;
            border-radius: 12px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .companion-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .companion-name {
            font-size: 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .vip-tag {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: #fff;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .companion-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        
        .tag {
            font-size: 11px;
            padding: 2px 8px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 4px;
        }
        
        .tag.green {
            background: #E8F8F0;
            color: var(--success);
        }
        
        .companion-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .rating {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--text-gray);
        }
        
        .rating svg {
            fill: var(--secondary);
            width: 12px;
            height: 12px;
        }
        
        .price {
            color: var(--danger);
            font-weight: 600;
            font-size: 15px;
        }
        
        .price span {
            font-size: 11px;
            font-weight: normal;
        }
        
        /* 陪玩师详情页 */
        .detail-header {
            position: relative;
        }
        
        .detail-cover {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .detail-back {
            position: absolute;
            top: 12px;
            left: 12px;
            width: 36px;
            height: 36px;
            background: rgba(0,0,0,0.4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .detail-back svg {
            fill: #fff;
            width: 20px;
            height: 20px;
        }
        
        .detail-profile {
            display: flex;
            gap: 16px;
            padding: 16px;
            background: #fff;
            margin-top: -40px;
            position: relative;
            border-radius: 16px 16px 0 0;
        }
        
        .detail-avatar {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            object-fit: cover;
            border: 3px solid #fff;
            margin-top: -50px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .detail-name {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .detail-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .detail-tags .tag {
            font-size: 12px;
        }
        
        .detail-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: var(--border);
            margin-top: 16px;
        }
        
        .stat-item {
            background: #fff;
            padding: 16px;
            text-align: center;
        }
        
        .stat-value {
            font-size: 18px;
            font-weight: 600;
            color: var(--primary);
        }
        
        .stat-label {
            font-size: 11px;
            color: var(--text-gray);
            margin-top: 4px;
        }
        
        .detail-section {
            background: #fff;
            padding: 16px;
            margin-top: 8px;
        }
        
        .section-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-title::before {
            content: '';
            width: 4px;
            height: 16px;
            background: var(--primary);
            border-radius: 2px;
        }
        
        .service-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .service-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            background: var(--bg-gray);
            border-radius: 12px;
        }
        
        .service-name {
            font-size: 14px;
        }
        
        .service-price {
            color: var(--danger);
            font-weight: 600;
        }
        
        .detail-footer {
            position: fixed;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            padding: 12px 16px;
            background: #fff;
            display: flex;
            gap: 12px;
            border-top: 1px solid var(--border);
            z-index: 150;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        
        .btn-contact {
            width: 50px;
            height: 50px;
            border: 2px solid var(--primary);
            background: #fff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .btn-contact svg {
            fill: var(--primary);
            width: 24px;
            height: 24px;
        }
        
        .btn-order {
            flex: 1;
            height: 50px;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8FB1 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }
        
        /* 评价列表 */
        .review-item {
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .review-item:last-child {
            border-bottom: none;
        }
        
        .review-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .review-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .review-name {
            font-size: 13px;
            font-weight: 500;
        }
        
        .review-time {
            font-size: 11px;
            color: var(--text-gray);
            margin-left: auto;
        }
        
        .review-content {
            font-size: 13px;
            color: var(--text-dark);
            line-height: 1.5;
        }
        
        /* 下单须知弹窗 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            z-index: 200;
            align-items: flex-end;
            justify-content: center;
        }
        
        .modal-overlay.active {
            display: flex;
        }
        
        .modal-content {
            width: 100%;
            max-width: 430px;
            background: #fff;
            border-radius: 20px 20px 0 0;
            padding: 20px;
            max-height: 80vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
        }
        
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        
        .modal-handle {
            width: 40px;
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            margin: 0 auto 20px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .notice-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .notice-item {
            display: flex;
            gap: 12px;
        }
        
        .notice-icon {
            width: 24px;
            height: 24px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .notice-icon svg {
            width: 14px;
            height: 14px;
            fill: var(--primary);
}
        
        .notice-text h4 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .notice-text p {
            font-size: 12px;
            color: var(--text-gray);
            line-height: 1.5;
        }
        
        .notice-confirm {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: var(--bg-gray);
            border-radius: 12px;
            margin-top: 16px;
            cursor: pointer;
        }
        
        .notice-confirm input {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
        }
        
        .notice-confirm span {
            font-size: 13px;
        }
        
        .modal-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        
        .btn-cancel {
            flex: 1;
            height: 48px;
            background: var(--bg-gray);
            color: var(--text-dark);
            border: none;
            border-radius: 12px;
            font-size: 15px;
            cursor: pointer;
        }
        
        .btn-confirm {
            flex: 2;
            height: 48px;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8FB1 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }
        
        /* 客服页面 */
        .service-header {
            padding: 16px;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8FB1 100%);
            color: #fff;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .service-header h2 {
            font-size: 18px;
        }
        
        .service-content {
            padding: 16px;
        }
        
        .service-card {
            background: #fff;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            margin-bottom: 16px;
        }
        
        .service-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
        }
        
        .service-icon svg {
            width: 30px;
            height: 30px;
            fill: var(--primary);
        }
        
        .service-card h3 {
            font-size: 16px;
            margin-bottom: 4px;
        }
        
        .service-card p {
            font-size: 12px;
            color: var(--text-gray);
        }
        
        .service-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: #E8F8F0;
            color: var(--success);
            border-radius: 20px;
            font-size: 12px;
            margin-top: 12px;
        }
        
        .status-dot {
            width: 8px;
            height: 8px;
            background: var(--success);
            border-radius: 50%;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        
        .faq-section {
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
        }
        
        .faq-item {
            padding: 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .faq-item:last-child {
            border-bottom: none;
        }
        
        .faq-item span {
            font-size: 14px;
        }
        
        .faq-item svg {
            width: 16px;
            height: 16px;
            fill: var(--text-gray);
        }
        
        /* 个人中心 */
        .profile-header {
            background: linear-gradient(135deg, var(--primary) 0%, #FF8FB1 100%);
            padding: 30px 20px;
            color: #fff;
        }
        
        .profile-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .profile-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid rgba(255,255,255,0.3);
        }
        
        .profile-name {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .profile-id {
            font-size: 12px;
            opacity: 0.8;
        }
        
        .profile-edit {
            margin-left: auto;
            width: 36px;
            height: 36px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .profile-edit svg {
            fill: #fff;
            width: 18px;
            height: 18px;
        }
        
        .balance-card {
            background: #fff;
            margin: -20px 16px 16px;
            padding: 20px;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .balance-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .balance-label {
            font-size: 13px;
            color: var(--text-gray);
        }
        
        .balance-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .balance-value span {
            font-size: 14px;
            font-weight: normal;
        }
        
        .btn-recharge {
            padding: 10px 24px;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8FB1 100%);
            color: #fff;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .profile-menu {
            margin: 0 16px;
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-icon {
            width: 36px;
            height: 36px;
            background: var(--bg-gray);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .menu-icon svg {
            width: 20px;
            height: 20px;
            fill: var(--primary);
        }
        
        .menu-text {
            flex: 1;
            font-size: 14px;
        }
        
        .menu-arrow {
            width: 16px;
            height: 16px;
            fill: var(--text-gray);
        }
        
        /* 订单列表 */
        .order-tabs {
            display: flex;
            background: #fff;
            padding: 0 16px;
        }
        
        .order-tab {
            flex: 1;
            padding: 14px;
            text-align: center;
            font-size: 14px;
            color: var(--text-gray);
            border-bottom: 2px solid transparent;
            cursor: pointer;
        }
        
        .order-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .order-list {
            padding: 16px;
        }
        
        .order-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .order-companion {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .order-avatar {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            object-fit: cover;
        }
        
        .order-name {
            font-size: 14px;
            font-weight: 500;
        }
        
        .order-game {
            font-size: 11px;
            color: var(--text-gray);
        }
        
        .order-status {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 12px;
        }
        
        .order-status.pending {
            background: #FFF3E0;
            color: #FF9800;
        }
        
        .order-status.completed {
            background: #E8F8F0;
            color: var(--success);
        }
        
        .order-status.cancelled {
            background: #FFEBEE;
            color: var(--danger);
        }
        
        .order-detail {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--text-gray);
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }
        
        .order-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 12px;
        }
        
        .btn-small {
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 12px;
            border: 1px solid var(--border);
            background: #fff;
            cursor: pointer;
        }
        
        .btn-small.primary {
            background: var(--primary);
            color: #fff;
            border: none;
        }
        
        /* 充值页面 */
        .recharge-page {
            padding: 16px;
        }
        
        .recharge-amount {
            text-align: center;
            padding: 30px;
            background: #fff;
            border-radius: 16px;
            margin-bottom: 16px;
        }
        
        .recharge-label {
            font-size: 13px;
            color: var(--text-gray);
            margin-bottom: 8px;
        }
        
        .recharge-input {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        
        .recharge-input span {
            font-size: 32px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .recharge-input input {
            width: 120px;
            font-size: 32px;
            font-weight: 700;
            color: var(--primary);
            border: none;
            text-align: center;
            outline: none;
        }
        
        .recharge-packages {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .package-item {
            background: #fff;
            border-radius: 12px;
            padding: 20px 12px;
            text-align: center;
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .package-item.active {
            border-color: var(--primary);
            background: var(--primary-light);
        }
        
        .package-amount {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-dark);
        }
        
        .package-bonus {
            font-size: 11px;
            color: var(--primary);
            margin-top: 4px;
        }
        
        .recharge-methods {
            background: #fff;
            border-radius: 16px;
            padding: 16px;
        }
        
        .method-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
        }
        
        .method-item:last-child {
            border-bottom: none;
        }
        
        .method-item.active .method-check {
            background: var(--primary);
        }
        
        .method-check {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .method-check svg {
            fill: #fff;
            width: 12px;
            height: 12px;
        }
        
        .btn-recharge-submit {
            width: 100%;
            height: 50px;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8FB1 100%);
            color: #fff;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            margin-top: 24px;
            cursor: pointer;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }
        
        .empty-icon {
            width: 100px;
            height: 100px;
            background: var(--bg-gray);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        
        .empty-icon svg {
            width: 50px;
            height: 50px;
            fill: var(--text-gray);
        }
        
        .empty-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .empty-desc {
            font-size: 13px;
            color: var(--text-gray);
        }
        
        /* Toast */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.75);
            color: #fff;
            padding: 14px 24px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 300;
            animation: toastIn 0.3s ease;
        }
        
        @keyframes toastIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- 首页 -->
        <div id="home-page" class="page active">
            <div class="status-bar">
                <span>陪玩</span>
            </div>
            
            <div class="home-header">
                <h1>🎮 找个大神带飞</h1>
                <p>专业陪玩，开心游戏</p>
            </div>
            
            <div class="search-bar">
                <svg viewBox="0 0 24 24"><path d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM11 18a7 7 0 1 1 7-7 7 7 0 0 1-7 7z"/></svg>
                <input type="text" placeholder="搜索陪玩师或游戏" id="search-input">
            </div>
            
            <div class="category-tabs">
                <div class="category-tab active" data-category="all">全部</div>
                <div class="category-tab" data-category="wzry">王者荣耀</div>
                <div class="category-tab" data-category="lol">英雄联盟</div>
                <div class="category-tab" data-category="hpsm">和平精英</div>
                <div class="category-tab" data-category="yxx">永劫间</div>
                <div class="category-tab" data-category="other">其他游戏</div>
            </div>
            
            <div class="companion-list" id="companion-list">
                <!-- 动态生成陪玩师卡片 -->
            </div>
        </div>
        
        <!-- 陪玩师详情页 -->
        <div id="detail-page" class="page">
            <div class="detail-header">
                <img src="https://picsum.photos/430/200?random=cover" class="detail-cover" alt="封面">
                <div class="detail-back" onclick="switchPage('home')">
                    <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                </div>
                <img src="" class="detail-avatar" id="detail-avatar" alt="头像">
            </div>
            
            <div class="detail-profile">
                <div>
                    <div class="detail-name" id="detail-name">
                        陪玩师名称
                        <span class="vip-tag">认证</span>
                    </div>
                    <div class="detail-tags" id="detail-tags"></div>
                </div>
            </div>
            
            <div class="detail-stats">
                <div class="stat-item">
                    <div class="stat-value" id="detail-rating">5.0</div>
                    <div class="stat-label">综合评分</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="detail-orders">328</div>
                    <div class="stat-label">完成订单</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value" id="detail-hours">520</div>
                    <div class="stat-label">服务时长(h)</div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="section-title">服务项目</div>
                <div class="service-list" id="service-list">
                    <div class="service-item">
                        <div>
                            <div class="service-name">语音连麦</div>
                            <div style="font-size: 11px; color: #999; margin-top: 2px;">约1小时，包含聊天+游戏指导</div>
                        </div>
                        <div class="service-price">¥35<span>/小时</span></div>
                    </div>
                    <div class="service-item">
                        <div>
                            <div class="service-name">全程陪玩</div>
                            <div style="font-size: 11px; color: #999; margin-top: 2px;">陪你一起开黑，指挥带躺</div>
                        </div>
                        <div class="service-price">¥45<span>/小时</span></div>
                    </div>
                    <div class="service-item">
                        <div>
                            <div class="service-name">上分托管</div>
                            <div style="font-size: 11px; color: #999; margin-top: 2px;">代打上分，包赢不赢退款</div>
                        </div>
                        <div class="service-price">¥200<span>/局</span></div>
                    </div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="section-title">用户评价</div>
                <div id="review-list">
                    <div class="review-item">
                        <div class="review-header">
                            <img src="https://picsum.photos/32/32?random=u1" class="review-avatar" alt="">
                            <span class="review-name">玩家小明</span>
                            <span class="review-time">3天前</span>
                        </div>
                        <div class="review-content">声音超甜！游戏打得也很好，带我上了一波分，下次还点她！</div>
                    </div>
                    <div class="review-item">
                        <div class="review-header">
                            <img src="https://picsum.photos/32/32?random=u2" class="review-avatar" alt="">
                            <span class="review-name">游戏达人</span>
                            <span class="review-time">1周前</span>
                        </div>
                        <div class="review-content">技术流主播，意识很好，指挥到位，值得推荐！</div>
                    </div>
                </div>
            </div>
            
            <div style="height: 80px;"></div>
            
            <div class="detail-footer">
                <div class="btn-contact" onclick="showService()">
                    <svg viewBox="0 0 24 24"><path d="M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/></svg>
                </div>
                <button class="btn-order" onclick="showOrderNotice()">立即预约</button>
            </div>
        </div>
        
        <!-- 个人中心 -->
        <div id="profile-page" class="page">
            <div class="status-bar"><span>个人中心</span></div>
            
            <div class="profile-header">
                <div class="profile-info">
                    <img src="https://picsum.photos/70/70?random=user" class="profile-avatar" alt="头像">
                    <div>
                        <div class="profile-name">李小红</div>
                        <div class="profile-id">ID: 88866688</div>
                    </div>
                    <div class="profile-edit">
                        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
                    </div>
                </div>
            </div>
            
            <div class="balance-card">
                <div class="balance-header">
                    <div>
                        <div class="balance-label">我的余额</div>
                        <div class="balance-value">288.00<span>元</span></div>
                    </div>
                    <button class="btn-recharge" onclick="switchPage('recharge')">立即充值</button>
                </div>
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1; padding: 12px; background: var(--bg-gray); border-radius: 10px; text-align: center;">
                        <div style="font-size: 16px; font-weight: 600; color: var(--text-dark);">5</div>
                        <div style="font-size: 11px; color: var(--text-gray);">优惠券</div>
                    </div>
                    <div style="flex: 1; padding: 12px; background: var(--bg-gray); border-radius: 10px; text-align: center;">
                        <div style="font-size: 16px; font-weight: 600; color: var(--text-dark);">12</div>
                        <div style="font-size: 11px; color: var(--text-gray);">收藏</div>
                    </div>
                </div>
            </div>
            
            <div class="profile-menu">
                <div class="menu-item" onclick="switchPage('orders')">
                    <div class="menu-icon">
                        <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                    </div>
                    <span class="menu-text">我的订单</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
                <div class="menu-item">
                    <div class="menu-icon" style="background: #FFF3E0;">
                        <svg viewBox="0 0 24 24" style="fill: #FF9800;"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
                    </div>
                    <span class="menu-text">我的优惠券</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
                <div class="menu-item">
                    <div class="menu-icon" style="background: #E3F2FD;">
                        <svg viewBox="0 0 24 24" style="fill: #2196F3;"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                    </div>
                    <span class="menu-text">我的收藏</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
                <div class="menu-item" onclick="switchPage('service')">
                    <div class="menu-icon" style="background: #F3E5F5;">
                        <svg viewBox="0 0 24 24" style="fill: #9C27B0;"><path d="M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/></svg>
                    </div>
                    <span class="menu-text">联系客服</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
            </div>
            
            <div class="profile-menu" style="margin-top: 16px;">
                <div class="menu-item">
                    <div class="menu-icon" style="background: #ECEFF1;">
                        <svg viewBox="0 0 24 24" style="fill: #607D8B;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
                    </div>
                    <span class="menu-text">帮助与反馈</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
                <div class="menu-item">
                    <div class="menu-icon" style="background: #ECEFF1;">
                        <svg viewBox="0 0 24 24" style="fill: #607D8B;"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
                    </div>
                    <span class="menu-text">设置</span>
                    <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
            </div>
            
            <div style="height: 80px;"></div>
        </div>
        
        <!-- 我的订单 -->
        <div id="orders-page" class="page">
            <div class="status-bar">
                <span onclick="switchPage('profile')">← 我的订单</span>
            </div>
            
            <div class="order-tabs">
                <div class="order-tab active" data-status="all">全部</div>
                <div class="order-tab" data-status="pending">待服务</div>
                <div class="order-tab" data-status="completed">已完成</div>
                <div class="order-tab" data-status="cancelled">已取消</div>
            </div>
            
            <div class="order-list" id="order-list">
                <div class="order-card">
                    <div class="order-header">
                        <div class="order-companion">
                            <img src="https://picsum.photos/40/40?random=o1" class="order-avatar" alt="">
                            <div>
                                <div class="order-name">甜甜小雅</div>
                                <div class="order-game">王者荣耀 · 语音连麦</div>
                            </div>
                        </div>
                        <span class="order-status pending">待服务</span>
                    </div>
                    <div class="order-detail">
                        <span>下单时间: 2026-04-09 15:30</span>
                        <span>订单号: PB20260409001</span>
                    </div>
                    <div class="order-footer">
                        <button class="btn-small">联系陪玩师</button>
                        <button class="btn-small primary">去评价</button>
                    </div>
                </div>
                
                <div class="order-card">
                    <div class="order-header">
                        <div class="order-companion">
                            <img src="https://picsum.photos/40/40?random=o2" class="order-avatar" alt="">
                            <div>
                                <div class="order-name">电竞女王</div>
                                <div class="order-game">英雄联盟 · 全程陪玩</div>
                            </div>
                        </div>
                        <span class="order-status completed">已完成</span>
                    </div>
                    <div class="order-detail">
                        <span>下单时间: 2026-04-07 20:15</span>
                        <span>订单号: PB20260407003</span>
                    </div>
                    <div class="order-footer">
                        <button class="btn-small primary">查看详情</button>
                    </div>
                </div>
                
                <div class="order-card">
                    <div class="order-header">
                        <div class="order-companion">
                            <img src="https://picsum.photos/40/40?random=o3" class="order-avatar" alt="">
                            <div>
                                <div class="order-name">萌神小七</div>
                                <div class="order-game">和平精英 · 全程陪玩</div>
                            </div>
                        </div>
                        <span class="order-status cancelled">已取消</span>
                    </div>
                    <div class="order-detail">
                        <span>下单时间: 2026-04-05 10:00</span>
                        <span>订单号: PB20260405002</span>
                    </div>
                    <div class="order-footer">
                        <button class="btn-small primary">再次预约</button>
                    </div>
                </div>
            </div>
            
            <div style="height: 80px;"></div>
        </div>
        
        <!-- 充值页面 -->
        <div id="recharge-page" class="page recharge-page">
            <div class="status-bar">
                <span onclick="switchPage('profile')">← 充值中心</span>
            </div>
            
            <div class="recharge-amount">
                <div class="recharge-label">充值金额</div>
                <div class="recharge-input">
                    <span>¥</span>
                    <input type="number" value="100" id="recharge-input" oninput="updateRechargeAmount()">
                </div>
            </div>
            
            <div class="recharge-packages">
                <div class="package-item active" data-amount="30" onclick="selectPackage(this)">
                    <div class="package-amount">30</div>
                    <div class="package-bonus"></div>
                </div>
                <div class="package-item" data-amount="50" onclick="selectPackage(this)">
                    <div class="package-amount">50</div>
                    <div class="package-bonus">送2元</div>
                </div>
                <div class="package-item" data-amount="100" onclick="selectPackage(this)">
                    <div class="package-amount">100</div>
                    <div class="package-bonus">送10元</div>
                </div>
                <div class="package-item" data-amount="200" onclick="selectPackage(this)">
                    <div class="package-amount">200</div>
                    <div class="package-bonus">送25元</div>
                </div>
                <div class="package-item" data-amount="500" onclick="selectPackage(this)">
                    <div class="package-amount">500</div>
                    <div class="package-bonus">送80元</div>
                </div>
                <div class="package-item" data-amount="1000" onclick="selectPackage(this)">
                    <div class="package-amount">1000</div>
                    <div class="package-bonus">送200元</div>
                </div>
            </div>
            
            <div class="recharge-methods">
                <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">支付方式</div>
                <div class="method-item active" onclick="selectMethod(this)">
                    <div class="method-check">
                        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
                    </div>
                    <span style="flex: 1;">微信支付</span>
                </div>
                <div class="method-item" onclick="selectMethod(this)">
                    <div class="method-check">
                        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
                    </div>
                    <span style="flex: 1;">支付宝</span>
                </div>
            </div>
            
            <button class="btn-recharge-submit" onclick="submitRecharge()">立即充值</button>
        </div>
        
        <!-- 客服页面 -->
        <div id="service-page" class="page">
            <div class="status-bar">
                <span onclick="switchPage('profile')">← 客服中心</span>
            </div>
            
            <div class="service-header">
                <div class="service-icon" style="background: rgba(255,255,255,0.2);">
                    <svg viewBox="0 0 24 24" style="fill: #fff;"><path d="M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/></svg>
                </div>
                <div>
                    <h2>在线客服</h2>
                    <p style="font-size: 12px; opacity: 0.9;">7x24小时为您服务</p>
                </div>
            </div>
            
            <div class="service-content">
                <div class="service-card">
                    <div class="service-icon">
                        <svg viewBox="0 0 24 24"><path d="M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/></svg>
                    </div>
                    <h3>在线聊天</h3>
                    <p>点击立即与客服对话</p>
                    <div class="service-status">
                        <div class="status-dot"></div>
                        在线
                    </div>
                </div>
                
                <div style="display: flex; gap: 12px; margin-bottom: 16px;">
                    <div class="service-card" style="flex: 1;">
                        <div class="service-icon" style="background: #E3F2FD;">
                            <svg viewBox="0 0 24 24" style="fill: #2196F3;"><path d="M6.47 5.12L5.47 6.12a5.74 5.74 0 0 0 0 8.13l.99.99a5.74 5.74 0 0 0 8.13 0l1.99-1.99a5.74 5.74 0 0 0 0-8.13l-.99-.99a5.74 5.74 0 0 0-8.13 0zM7.79 8.1l.99-.99.99.99-.99.99-.99-.99zM9.17 12l-.99.99-.99-.99.99-.99.99.99zM12.06 14.2l-.99.99-.99-.99.99-.99.99.99z"/></svg>
                        </div>
                        <h3 style="font-size: 14px;">常见问题</h3>
                    </div>
                    <div class="service-card" style="flex: 1;">
                        <div class="service-icon" style="background: #FFF3E0;">
                            <svg viewBox="0 0 24 24" style="fill: #FF9800;"><path d="M20 2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h14l4 4V4a2 2 0 0 0-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
                        </div>
                        <h3 style="font-size: 14px;">意见反馈</h3>
                    </div>
                </div>
                
                <div class="faq-section">
                    <div style="padding: 16px; font-weight: 600;">常见问题</div>
                    <div class="faq-item">
                        <span>如何联系陪玩师？</span>
                        <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                    <div class="faq-item">
                        <span>如何申请退款？</span>
                        <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                    <div class="faq-item">
                        <span>陪玩服务如何计时？</span>
                        <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                    <div class="faq-item">
                        <span>如何成为陪玩师？</span>
                        <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                    </div>
                </div>
            </div>
            
            <div style="height: 80px;"></div>
        </div>
        
        <!-- 底部导航 -->
        <div class="tab-bar">
            <div class="tab-item active" data-page="home" onclick="switchTab('home')">
                <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                <span>首页</span>
            </div>
            <div class="tab-item" data-page="service" onclick="switchTab('service')">
                <svg viewBox="0 0 24 24"><path d="M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/></svg>
                <span>客服</span>
            </div>
            <div class="tab-item" data-page="profile" onclick="switchTab('profile')">
                <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                <span>我的</span>
            </div>
        </div>
        
        <!-- 下单须知弹窗 -->
        <div class="modal-overlay" id="order-notice-modal">
            <div class="modal-content">
                <div class="modal-handle"></div>
                <div class="modal-title">下单须知</div>
                
                <div class="notice-list">
                    <div class="notice-item">
                        <div class="notice-icon">
                            <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                        </div>
                        <div class="notice-text">
                            <h4>服务规则</h4>
                            <p>下单前请确认游戏和时间，服务开始后不可中途取消，如需调整请提前联系陪玩师协商。</p>
                        </div>
                    </div>
                    <div class="notice-item">
                        <div class="notice-icon">
                            <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
                        </div>
                        <div class="notice-text">
                            <h4>退款政策</h4>
                            <p>服务未开始可全额退款；服务开始后按剩余时间比例退款；陪玩师迟到10分钟以上可全额退款。</p>
                        </div>
                    </div>
                    <div class="notice-item">
                        <div class="notice-icon">
                            <svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
                        </div>
                        <div class="notice-text">
                            <h4>安全保障</h4>
                            <p>平台全程保障您的交易安全，服务结束后再确认付款，如有问题可联系客服调解。</p>
                        </div>
                    </div>
                    <div class="notice-item">
                        <div class="notice-icon">
                            <svg viewBox="0 0 24 24"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
                        </div>
                        <div class="notice-text">
                            <h4>注意事项</h4>
                            <p>请文明交流，尊重陪玩师；禁止任何违规行为；账号安全由您自行负责。</p>
                        </div>
                    </div>
                </div>
                
                <div class="notice-confirm" onclick="toggleConfirm()">
                    <input type="checkbox" id="notice-check">
                    <span>我已阅读并同意以上条款</span>
                </div>
                
                <div class="modal-actions">
                    <button class="btn-cancel" onclick="closeModal()">取消</button>
                    <button class="btn-confirm" id="confirm-btn" onclick="confirmOrder()" disabled>确认下单</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 陪玩师数据
        const companions = [
            {
                id: 1,
                name: '甜甜小雅',
                avatar: 'https://picsum.photos/140/140?random=1',
                tags: ['王者荣耀', '声音甜美', '国服法师'],
                game: 'wzry',
                rating: 4.9,
                orders: 328,
                price: 35,
                isVip: true
            },
            {
                id: 2,
                name: '电竞女王',
                avatar: 'https://picsum.photos/140/140?random=2',
                tags: ['英雄联盟', '技术流', '打野'],
                game: 'lol',
                rating: 5.0,
                orders: 520,
                price: 45,
                isVip: true
            },
            {
                id: 3,
                name: '萌神小七',
                avatar: 'https://picsum.photos/140/140?random=3',
                tags: ['和平精英', '刚枪王', '上分快'],
                game: 'hpsm',
                rating: 4.8,
                orders: 256,
                price: 40,
                isVip: false
            },
            {
                id: 4,
                name: '剑圣传说',
                avatar: 'https://picsum.photos/140/140?random=4',
                tags: ['永劫间', '近战', '天选之人'],
                game: 'yxx',
                rating: 4.7,
                orders: 189,
                price: 50,
                isVip: true
            },
            {
                id: 5,
                name: '温柔小妹',
                avatar: 'https://picsum.photos/140/140?random=5',
                tags: ['王者荣耀', '辅助', '聊天陪伴'],
                game: 'wzry',
                rating: 4.9,
                orders: 412,
                price: 30,
                isVip: false
            },
            {
                id: 6,
                name: 'Carry全场',
                avatar: 'https://picsum.photos/140/140?random=6',
                tags: ['英雄联盟', 'ADC', '带飞'],
                game: 'lol',
                rating: 4.8,
                orders: 367,
                price: 55,
                isVip: true
            }
        ];
        
        let currentCompanion = null;
        
        // 渲染陪玩师列表
        function renderCompanions(category = 'all') {
            const list = document.getElementById('companion-list');
            const filtered = category === 'all' 
                ? companions 
                : companions.filter(c => c.game === category);
            
            list.innerHTML = filtered.map(c => `
                <div class="companion-card" onclick="showDetail(${c.id})">
                    <img src="${c.avatar}" class="companion-avatar" alt="${c.name}">
                    <div class="companion-info">
                        <div>
                            <div class="companion-name">
                                ${c.name}
                                ${c.isVip ? '<span class="vip-tag">认证</span>' : ''}
                            </div>
                            <div class="companion-tags">
                                ${c.tags.slice(0, 3).map(t => `<span class="tag">${t}</span>`).join('')}
                            </div>
                        </div>
                        <div class="companion-meta">
                            <div class="rating">
                                <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                                ${c.rating}
                            </div>
                            <div class="price">¥${c.price}<span>/小时</span></div>
                        </div>
                    </div>
                </div>
            `).join('');
        }
        
        // 显示详情
        function showDetail(id) {
            currentCompanion = companions.find(c => c.id === id);
            if (!currentCompanion) return;
            
            document.getElementById('detail-avatar').src = currentCompanion.avatar;
            document.getElementById('detail-name').innerHTML = 
                `${currentCompanion.name} <span class="vip-tag">认证</span>`;
            document.getElementById('detail-tags').innerHTML = 
                currentCompanion.tags.map(t => `<span class="tag">${t}</span>`).join('');
            document.getElementById('detail-rating').textContent = currentCompanion.rating;
            document.getElementById('detail-orders').textContent = currentCompanion.orders;
            document.getElementById('detail-hours').textContent = Math.floor(currentCompanion.orders * 1.5);
            
            switchPage('detail');
        }
        
        // 分类切换
        document.querySelectorAll('.category-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                renderCompanions(this.dataset.category);
            });
        });
        
        // 页面切换
        function switchPage(page) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(page + '-page').classList.add('active');
            
            // 更新底部导航
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            const tabItem = document.querySelector(`.tab-item[data-page="${page}"]`);
            if (tabItem) tabItem.classList.add('active');
        }
        
        // 底部标签切换
        function switchTab(page) {
            switchPage(page);
        }
        
        // 显示下单须知
        function showOrderNotice() {
            document.getElementById('order-notice-modal').classList.add('active');
        }
        
        // 关闭弹窗
        function closeModal() {
            document.getElementById('order-notice-modal').classList.remove('active');
        }
        
        // 勾选确认
        function toggleConfirm() {
            const checkbox = document.getElementById('notice-check');
            checkbox.checked = !checkbox.checked;
            document.getElementById('confirm-btn').disabled = !checkbox.checked;
        }
        
        // 确认下单
        function confirmOrder() {
            if (!document.getElementById('notice-check').checked) return;
            closeModal();
            showToast('下单成功！陪玩师稍后会联系您');
        }
        
        // 显示客服
        function showService() {
            switchPage('service');
        }
        
        // 选择充值套餐
        function selectPackage(el) {
            document.querySelectorAll('.package-item').forEach(p => p.classList.remove('active'));
            el.classList.add('active');
            document.getElementById('recharge-input').value = el.dataset.amount;
        }
        
        // 更新充值金额
        function updateRechargeAmount() {
            document.querySelectorAll('.package-item').forEach(p => {
                p.classList.remove('active');
                if (p.dataset.amount === document.getElementById('recharge-input').value) {
                    p.classList.add('active');
                }
            });
        }
        
        // 选择支付方式
        function selectMethod(el) {
            document.querySelectorAll('.method-item').forEach(m => m.classList.remove('active'));
            el.classList.add('active');
        }
        
        // 提交充值
        function submitRecharge() {
            const amount = document.getElementById('recharge-input').value;
            showToast(`充值${amount}元成功！`);
            setTimeout(() => switchPage('profile'), 1500);
        }
        
        // Toast提示
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 2000);
        }
        
        // 初始化
        renderCompanions();
    </script>
</body>
</html>