编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医陪陪诊 - 专业陪诊服务</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f7f8fc; min-height: 100vh; }
        
        /* 顶部导航 */
        .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; position: sticky; top: 0; z-index: 100; }
        .header-content { padding: 18px 20px 35px; }
        .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .header h1 { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
        .header-notif { position: relative; cursor: pointer; }
        .header-notif svg { width: 24px; height: 24px; }
        .notif-badge { position: absolute; top: -5px; right: -5px; width: 8px; height: 8px; background: #ff6b6b; border-radius: 50%; }
        
        .header-search { background: rgba(255,255,255,0.2); border-radius: 25px; padding: 12px 18px; display: flex; align-items: center; gap: 10px; }
        .header-search svg { width: 18px; height: 18px; opacity: 0.8; }
        .header-search input { flex: 1; border: none; background: transparent; color: #fff; font-size: 14px; outline: none; }
        .header-search input::placeholder { color: rgba(255,255,255,0.7); }
        
        /* 页面容器 */
        .page { display: none; padding: 20px; padding-bottom: 85px; animation: fadeIn 0.3s; }
        .page.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
        
        /* 首页样式 - 简化版banner */
        .hero-banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; padding: 30px 25px; color: #fff; margin-bottom: 20px; text-align: center; }
        .hero-banner h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
        .hero-banner p { font-size: 14px; opacity: 0.9; }
        
        .quick-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
        .service-btn { background: #fff; border-radius: 16px; padding: 18px 10px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); cursor: pointer; transition: all 0.3s; }
        .service-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2); }
        .service-btn .icon-wrap { width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
        .service-btn .icon-wrap svg { width: 26px; height: 26px; }
        .service-btn span { font-size: 13px; color: #333; font-weight: 500; }
        
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .section-title { font-size: 18px; font-weight: 700; color: #1a1a1a; }
        .section-more { font-size: 13px; color: #667eea; font-weight: 500; cursor: pointer; }
        
        /* 陪诊师卡片 */
        .companion-list { display: flex; flex-direction: column; gap: 15px; }
        .companion-card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.3s; cursor: pointer; }
        .companion-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15); }
        .companion-top { display: flex; align-items: center; margin-bottom: 15px; }
        .companion-avatar-bg { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #e8e4ff 0%, #f5f0ff 100%); margin-right: 15px; display: flex; align-items: center; justify-content: center; }
        .companion-avatar-bg svg { width: 40px; height: 40px; color: #667eea; }
        .companion-info { flex: 1; }
        .companion-name { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
        .companion-tags { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
        .tag { font-size: 11px; padding: 4px 10px; border-radius: 12px; font-weight: 500; }
        .tag-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
        .tag-green { background: #e6f7e6; color: #52c41a; }
        .tag-orange { background: #fff7e6; color: #fa8c16; }
        .companion-rating { text-align: right; }
        .rating-score { font-size: 20px; font-weight: 700; color: #ff9500; }
        .rating-text { font-size: 11px; color: #999; }
        
        .companion-stats { display: flex; justify-content: space-around; padding: 15px 0; border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; margin-bottom: 15px; }
        .cstat { text-align: center; }
        .cstat-value { font-size: 18px; font-weight: 700; color: #333; }
        .cstat-label { font-size: 11px; color: #999; margin-top: 3px; }
        
        .companion-services { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
        .service-tag { font-size: 12px; padding: 6px 12px; background: #f8f7ff; color: #667eea; border-radius: 15px; }
        
        .companion-footer { display: flex; justify-content: space-between; align-items: center; }
        .companion-price { font-size: 22px; font-weight: 700; color: #ff6b6b; }
        .companion-price small { font-size: 12px; color: #999; font-weight: normal; }
        .book-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; padding: 10px 28px; border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; }
        .book-btn:hover { transform: scale(1.05); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); }
        
        /* 陪诊师详情页 */
        .detail-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 20px; border-radius: 0 0 30px 30px; padding-bottom: 40px; }
        .detail-profile { display: flex; align-items: center; gap: 20px; }
        .detail-avatar { width: 90px; height: 90px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.2); }
        .detail-avatar svg { width: 50px; height: 50px; }
        .detail-name { font-size: 24px; font-weight: 700; margin-bottom: 5px; }
        .detail-title { font-size: 14px; opacity: 0.9; margin-bottom: 10px; }
        .detail-tags { display: flex; gap: 8px; flex-wrap: wrap; }
        
        .detail-content { margin-top: -20px; background: #fff; border-radius: 20px; padding: 25px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 20px; }
        .detail-section { margin-bottom: 25px; }
        .detail-section:last-child { margin-bottom: 0; }
        .detail-section h3 { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
        .detail-section h3 svg { width: 20px; height: 20px; color: #667eea; }
        .detail-desc { font-size: 14px; color: #666; line-height: 1.8; }
        
        .skill-list { display: flex; flex-wrap: wrap; gap: 10px; }
        .skill-item { background: #f8f7ff; padding: 8px 16px; border-radius: 20px; font-size: 13px; color: #667eea; }
        
        .hospital-list { display: flex; flex-direction: column; gap: 12px; }
        .hospital-chip { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fafafa; border-radius: 12px; }
        .hospital-chip svg { width: 24px; height: 24px; color: #667eea; }
        .hospital-chip span { font-size: 14px; color: #333; }
        
        .reviews-list { display: flex; flex-direction: column; gap: 15px; }
        .review-item { padding-bottom: 15px; border-bottom: 1px solid #f5f5f5; }
        .review-item:last-child { border-bottom: none; }
        .review-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .review-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #e8e4ff 0%, #f5f0ff 100%); display: flex; align-items: center; justify-content: center; }
        .review-avatar svg { width: 22px; height: 22px; color: #667eea; }
        .review-name { font-size: 14px; font-weight: 600; color: #333; }
        .review-time { font-size: 12px; color: #999; }
        .review-stars { display: flex; gap: 2px; margin-bottom: 8px; }
        .review-stars svg { width: 14px; height: 14px; color: #ff9500; fill: #ff9500; }
        .review-text { font-size: 14px; color: #666; line-height: 1.6; }
        
        /* 预约表单 */
        .booking-form { background: #fff; border-radius: 20px; padding: 25px; margin-bottom: 20px; }
        .form-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 20px; text-align: center; }
        .form-group { margin-bottom: 18px; }
        .form-group label { font-size: 14px; color: #666; margin-bottom: 8px; display: block; }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 16px; border: 2px solid #f0f0f0; border-radius: 12px; font-size: 15px; color: #333; outline: none; transition: all 0.3s; background: #fafafa; }
        .form-group input:focus, .form-group textarea:focus { border-color: #667eea; background: #fff; }
        .form-group textarea { resize: none; height: 100px; }
        
        .time-select-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .time-option { padding: 12px 8px; text-align: center; border: 2px solid #f0f0f0; border-radius: 10px; font-size: 14px; color: #666; cursor: pointer; transition: all 0.3s; }
        .time-option:hover, .time-option.selected { border-color: #667eea; background: #f8f7ff; color: #667eea; font-weight: 600; }
        
        .submit-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; border-radius: 30px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 20px; transition: all 0.3s; }
        .submit-btn:hover { transform: scale(1.02); box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4); }
        
        /* 订单页面 */
        .order-filters { display: flex; gap: 12px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
        .filter-chip { padding: 10px 20px; background: #fff; border-radius: 25px; font-size: 14px; color: #666; white-space: nowrap; cursor: pointer; border: 2px solid transparent; transition: all 0.3s; }
        .filter-chip.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
        
        .order-card { background: #fff; border-radius: 20px; padding: 20px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .order-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .order-companion { display: flex; align-items: center; gap: 12px; }
        .order-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #e8e4ff 0%, #f5f0ff 100%); display: flex; align-items: center; justify-content: center; }
        .order-avatar svg { width: 28px; height: 28px; color: #667eea; }
        .order-name { font-size: 16px; font-weight: 700; color: #333; }
        .order-id { font-size: 12px; color: #999; }
        .order-status { padding: 6px 14px; border-radius: 15px; font-size: 12px; font-weight: 600; }
        .status-pending { background: #fff7e6; color: #fa8c16; }
        .status-progress { background: #e6f7ff; color: #1890ff; }
        .status-completed { background: #f6ffed; color: #52c41a; }
        .status-cancelled { background: #fff1f0; color: #ff4d4f; }
        
        .order-info { padding: 15px 0; border-top: 1px dashed #f0f0f0; border-bottom: 1px dashed #f0f0f0; margin-bottom: 15px; }
        .info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; color: #666; }
        .info-row:last-child { margin-bottom: 0; }
        .info-row svg { width: 18px; height: 18px; color: #999; flex-shrink: 0; }
        
        .order-bottom { display: flex; justify-content: space-between; align-items: center; }
        .order-amount { font-size: 20px; font-weight: 700; color: #ff6b6b; }
        .order-actions { display: flex; gap: 10px; }
        .action-btn { padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all 0.3s; }
        .btn-outline { background: #fff; color: #667eea; border: 2px solid #667eea; }
        .btn-outline:hover { background: #f8f7ff; }
        .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
        .btn-primary:hover { box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }
        
        /* 个人中心 - 简化版 */
        .profile-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 30px 20px; border-radius: 0 0 30px 30px; }
        .profile-info { display: flex; align-items: center; gap: 20px; }
        .profile-avatar { width: 80px; height: 80px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.2); }
        .profile-avatar svg { width: 45px; height: 45px; }
        .profile-name { font-size: 22px; font-weight: 700; margin-bottom: 5px; }
        .profile-phone { font-size: 14px; opacity: 0.8; }
        
        .profile-menu { background: #fff; border-radius: 20px; padding: 10px 0; margin-top: -20px; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        .menu-item { display: flex; align-items: center; padding: 20px 25px; cursor: pointer; transition: background 0.3s; }
        .menu-item:hover { background: #fafafa; }
        .menu-item svg { width: 26px; height: 26px; color: #667eea; margin-right: 18px; }
        .menu-item span { flex: 1; font-size: 16px; color: #333; font-weight: 500; }
        .menu-item .arrow { color: #ccc; width: 20px; height: 20px; }
        .menu-item .badge { background: #ff6b6b; color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 12px; }
        
        .menu-item.order-item { border-bottom: 1px solid #f5f5f5; }
        
        /* 底部导航 - 4个 */
        .bottom-nav { display: flex; background: #fff; border-top: 1px solid #f0f0f0; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; padding: 8px 0; padding-bottom: env(safe-area-inset-bottom, 8px); }
        .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 0; color: #999; cursor: pointer; transition: all 0.3s; }
        .nav-item.active { color: #667eea; }
        .nav-item svg { width: 26px; height: 26px; margin-bottom: 4px; }
        .nav-item span { font-size: 11px; font-weight: 500; }
        
        /* 返回头部 */
        .back-header { display: flex; align-items: center; padding: 15px 5px; color: #fff; }
        .back-btn { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; background: rgba(255,255,255,0.2); }
        .back-btn svg { width: 20px; height: 20px; }
        .back-title { flex: 1; text-align: center; font-size: 18px; font-weight: 600; margin-right: 35px; }
        
        /* 弹窗 */
        .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 200; align-items: flex-end; justify-content: center; }
        .modal.active { display: flex; }
        .modal-content { background: #fff; border-radius: 24px 24px 0 0; padding: 30px 25px; width: 100%; max-width: 500px; animation: slideUp 0.4s ease-out; }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .modal-handle { width: 40px; height: 4px; background: #e0e0e0; border-radius: 2px; margin: 0 auto 25px; }
        .modal-icon { width: 80px; height: 80px; margin: 0 auto 25px; background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .modal-icon svg { width: 45px; height: 45px; color: #fff; }
        .modal-title { font-size: 22px; font-weight: 700; color: #1a1a1a; text-align: center; margin-bottom: 10px; }
        .modal-desc { font-size: 14px; color: #666; text-align: center; line-height: 1.6; margin-bottom: 30px; }
        .modal-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; border-radius: 30px; font-size: 16px; font-weight: 700; cursor: pointer; }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="page-home" class="page active">
        <div class="header">
            <div class="header-content">
                <div class="header-top">
                    <h1>医陪陪诊</h1>
                    <div class="header-notif" onclick="showPage('profile')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                        <div class="notif-badge"></div>
                    </div>
                </div>
                <div class="header-search" onclick="showPage('companions')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                    <input type="text" placeholder="搜索陪诊师姓名或医院" readonly>
                </div>
            </div>
        </div>
        
        <div class="hero-banner">
            <h2>专业陪诊，温暖就医</h2>
            <p>全程陪伴，省心省力，让就医不再孤单</p>
        </div>
        
        <div class="quick-services">
            <div class="service-btn" onclick="showPage('companions')">
                <div class="icon-wrap" style="background: linear-gradient(135deg, #e8f0ff 0%, #d4e4ff 100%);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#667eea" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                </div>
                <span>找陪诊师</span>
            </div>
            <div class="service-btn" onclick="showPage('companions')">
                <div class="icon-wrap" style="background: linear-gradient(135deg, #fff3e6 0%, #ffe6d4 100%);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#fa8c16" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                </div>
                <span>立即预约</span>
            </div>
            <div class="service-btn" onclick="showPage('profile')">
                <div class="icon-wrap" style="background: linear-gradient(135deg, #fff0f5 0%, #ffe6ec 100%);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#eb2f96" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
                <span>我的</span>
            </div>
        </div>
        
        <div class="section-header">
            <span class="section-title">推荐陪诊师</span>
            <span class="section-more" onclick="showPage('companions')">查看全部 →</span>
        </div>
        
        <div class="companion-list">
            <div class="companion-card" onclick="showCompanionDetail('王芳')">
                <div class="companion-top">
                    <div class="companion-avatar-bg">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div class="companion-info">
                        <div class="companion-name">王芳</div>
                        <div class="companion-tags">
                            <span class="tag tag-primary">5年经验</span>
                            <span class="tag tag-green">认证陪诊师</span>
                            <span class="tag tag-orange">三甲医院</span>
                        </div>
                    </div>
                    <div class="companion-rating">
                        <div class="rating-score">4.9</div>
                        <div class="rating-text">服务评分</div>
                    </div>
                </div>
                <div class="companion-stats">
                    <div class="cstat">
                        <div class="cstat-value">856</div>
                        <div class="cstat-label">服务人次</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">99%</div>
                        <div class="cstat-label">好评率</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">30min</div>
                        <div class="cstat-label">平均响应</div>
                    </div>
                </div>
                <div class="companion-services">
                    <span class="service-tag">全程陪诊</span>
                    <span class="service-tag">代取报告</span>
                    <span class="service-tag">送药上门</span>
                </div>
                <div class="companion-footer">
                    <div class="companion-price">¥199<small>/次</small></div>
                    <button class="book-btn" onclick="event.stopPropagation(); bookCompanion('王芳')">立即预约</button>
                </div>
            </div>
            
            <div class="companion-card" onclick="showCompanionDetail('李明')">
                <div class="companion-top">
                    <div class="companion-avatar-bg">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div class="companion-info">
                        <div class="companion-name">李明</div>
                        <div class="companion-tags">
                            <span class="tag tag-primary">3年经验</span>
                            <span class="tag tag-green">认证陪诊师</span>
                        </div>
                    </div>
                    <div class="companion-rating">
                        <div class="rating-score">4.8</div>
                        <div class="rating-text">服务评分</div>
                    </div>
                </div>
                <div class="companion-stats">
                    <div class="cstat">
                        <div class="cstat-value">423</div>
                        <div class="cstat-label">服务人次</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">97%</div>
                        <div class="cstat-label">好评率</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">45min</div>
                        <div class="cstat-label">平均响应</div>
                    </div>
                </div>
                <div class="companion-services">
                    <span class="service-tag">尊享陪诊</span>
                    <span class="service-tag">VIP服务</span>
                </div>
                <div class="companion-footer">
                    <div class="companion-price">¥399<small>/次</small></div>
                    <button class="book-btn" onclick="event.stopPropagation(); bookCompanion('李明')">立即预约</button>
                </div>
            </div>
            
            <div class="companion-card" onclick="showCompanionDetail('张晓丽')">
                <div class="companion-top">
                    <div class="companion-avatar-bg">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div class="companion-info">
                        <div class="companion-name">张晓丽</div>
                        <div class="companion-tags">
                            <span class="tag tag-primary">8年经验</span>
                            <span class="tag tag-green">金牌陪诊师</span>
                            <span class="tag tag-orange">专家级</span>
                        </div>
                    </div>
                    <div class="companion-rating">
                        <div class="rating-score">5.0</div>
                        <div class="rating-text">服务评分</div>
                    </div>
                </div>
                <div class="companion-stats">
                    <div class="cstat">
                        <div class="cstat-value">1567</div>
                        <div class="cstat-label">服务人次</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">100%</div>
                        <div class="cstat-label">好评率</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">15min</div>
                        <div class="cstat-label">平均响应</div>
                    </div>
                </div>
                <div class="companion-services">
                    <span class="service-tag">全程陪诊</span>
                    <span class="service-tag">专家预约</span>
                    <span class="service-tag">手术陪同</span>
                    <span class="service-tag">康复指导</span>
                </div>
                <div class="companion-footer">
                    <div class="companion-price">¥299<small>/次</small></div>
                    <button class="book-btn" onclick="event.stopPropagation(); bookCompanion('张晓丽')">立即预约</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 陪诊师列表页 -->
    <div id="page-companions" class="page">
        <div class="header">
            <div class="back-header">
                <div class="back-btn" onclick="showPage('home')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
                </div>
                <div class="back-title">选择陪诊师</div>
            </div>
            <div class="header-content">
                <div class="header-search">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                    <input type="text" placeholder="搜索陪诊师姓名">
                </div>
            </div>
        </div>
        
        <div class="section-header" style="padding: 0 5px;">
            <span class="section-title">全部陪诊师</span>
            <span class="section-more">筛选 ↓</span>
        </div>
        
        <div class="companion-list">
            <div class="companion-card" onclick="showCompanionDetail('张晓丽')">
                <div class="companion-top">
                    <div class="companion-avatar-bg">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div class="companion-info">
                        <div class="companion-name">张晓丽</div>
                        <div class="companion-tags">
                            <span class="tag tag-primary">8年经验</span>
                            <span class="tag tag-green">金牌陪诊师</span>
                        </div>
                    </div>
                    <div class="companion-rating">
                        <div class="rating-score">5.0</div>
                        <div class="rating-text">服务评分</div>
                    </div>
                </div>
                <div class="companion-stats">
                    <div class="cstat">
                        <div class="cstat-value">1567</div>
                        <div class="cstat-label">服务人次</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">100%</div>
                        <div class="cstat-label">好评率</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">15min</div>
                        <div class="cstat-label">平均响应</div>
                    </div>
                </div>
                <div class="companion-footer">
                    <div class="companion-price">¥299<small>/次</small></div>
                    <button class="book-btn" onclick="event.stopPropagation(); bookCompanion('张晓丽')">立即预约</button>
                </div>
            </div>
            
            <div class="companion-card" onclick="showCompanionDetail('王芳')">
                <div class="companion-top">
                    <div class="companion-avatar-bg">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div class="companion-info">
                        <div class="companion-name">王芳</div>
                        <div class="companion-tags">
                            <span class="tag tag-primary">5年经验</span>
                            <span class="tag tag-green">认证陪诊师</span>
                        </div>
                    </div>
                    <div class="companion-rating">
                        <div class="rating-score">4.9</div>
                        <div class="rating-text">服务评分</div>
                    </div>
                </div>
                <div class="companion-stats">
                    <div class="cstat">
                        <div class="cstat-value">856</div>
                        <div class="cstat-label">服务人次</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">99%</div>
                        <div class="cstat-label">好评率</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">30min</div>
                        <div class="cstat-label">平均响应</div>
                    </div>
                </div>
                <div class="companion-footer">
                    <div class="companion-price">¥199<small>/次</small></div>
                    <button class="book-btn" onclick="event.stopPropagation(); bookCompanion('王芳')">立即预约</button>
                </div>
            </div>
            
            <div class="companion-card" onclick="showCompanionDetail('李明')">
                <div class="companion-top">
                    <div class="companion-avatar-bg">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div class="companion-info">
                        <div class="companion-name">李明</div>
                        <div class="companion-tags">
                            <span class="tag tag-primary">3年经验</span>
                            <span class="tag tag-green">认证陪诊师</span>
                        </div>
                    </div>
                    <div class="companion-rating">
                        <div class="rating-score">4.8</div>
                        <div class="rating-text">服务评分</div>
                    </div>
                </div>
                <div class="companion-stats">
                    <div class="cstat">
                        <div class="cstat-value">423</div>
                        <div class="cstat-label">服务人次</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">97%</div>
                        <div class="cstat-label">好评率</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">45min</div>
                        <div class="cstat-label">平均响应</div>
                    </div>
                </div>
                <div class="companion-footer">
                    <div class="companion-price">¥399<small>/次</small></div>
                    <button class="book-btn" onclick="event.stopPropagation(); bookCompanion('李明')">立即预约</button>
                </div>
            </div>
            
            <div class="companion-card" onclick="showCompanionDetail('陈静')">
                <div class="companion-top">
                    <div class="companion-avatar-bg">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div class="companion-info">
                        <div class="companion-name">陈静</div>
                        <div class="companion-tags">
                            <span class="tag tag-primary">4年经验</span>
                            <span class="tag tag-green">认证陪诊师</span>
                        </div>
                    </div>
                    <div class="companion-rating">
                        <div class="rating-score">4.7</div>
                        <div class="rating-text">服务评分</div>
                    </div>
                </div>
                <div class="companion-stats">
                    <div class="cstat">
                        <div class="cstat-value">358</div>
                        <div class="cstat-label">服务人次</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">96%</div>
                        <div class="cstat-label">好评率</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">40min</div>
                        <div class="cstat-label">平均响应</div>
                    </div>
                </div>
                <div class="companion-footer">
                    <div class="companion-price">¥299<small>/次</small></div>
                    <button class="book-btn" onclick="event.stopPropagation(); bookCompanion('陈静')">立即预约</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 陪诊师详情页 -->
    <div id="page-detail" class="page">
        <div class="detail-header">
            <div class="back-header">
                <div class="back-btn" onclick="showPage('companions')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
                </div>
                <div class="back-title">陪诊师详情</div>
            </div>
            <div class="detail-profile">
                <div class="detail-avatar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                </div>
                <div>
                    <div class="detail-name">王芳</div>
                    <div class="detail-title">专业陪诊师 · 5年服务经验</div>
                    <div class="detail-tags">
                        <span class="tag tag-primary">认证陪诊师</span>
                        <span class="tag tag-green">三甲医院</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="detail-content">
            <div class="detail-section">
                <h3>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                    服务统计
                </h3>
                <div class="companion-stats" style="margin-top: 0;">
                    <div class="cstat">
                        <div class="cstat-value">856</div>
                        <div class="cstat-label">服务人次</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">99%</div>
                        <div class="cstat-label">好评率</div>
                    </div>
                    <div class="cstat">
                        <div class="cstat-value">30min</div>
                        <div class="cstat-label">平均响应</div>
                    </div>
                </div>
            </div>
            
            <div class="detail-section">
                <h3>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
                    个人简介
                </h3>
                <div class="detail-desc">
                    王芳陪诊师拥有5年专业陪诊经验，服务过856位患者，好评率高达99%。擅长三甲医院全程陪诊，熟悉北京各大医院就诊流程，能够有效减少患者就医等待时间，提供贴心、周到的陪诊服务。
                </div>
            </div>
            
            <div class="detail-section">
                <h3>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                    服务技能
                </h3>
                <div class="skill-list">
                    <span class="skill-item">全程陪诊</span>
                    <span class="skill-item">代取报告</span>
                    <span class="skill-item">送药上门</span>
                    <span class="skill-item">预约挂号</span>
                    <span class="skill-item">导医导诊</span>
                    <span class="skill-item">取药送检</span>
                </div>
            </div>
            
            <div class="detail-section">
                <h3>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/></svg>
                    服务医院
                </h3>
                <div class="hospital-list">
                    <div class="hospital-chip">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/></svg>
                        <span>北京大学第一医院</span>
                    </div>
                    <div class="hospital-chip">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/></svg>
                        <span>北京协和医院</span>
                    </div>
                    <div class="hospital-chip">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/></svg>
                        <span>中国人民解放军总医院(301)</span>
                    </div>
                </div>
            </div>
            
            <div class="detail-section">
                <h3>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    用户评价
                </h3>
                <div class="reviews-list">
                    <div class="review-item">
                        <div class="review-user">
                            <div class="review-avatar">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                            </div>
                            <div>
                                <div class="review-name">张先生</div>
                                <div class="review-time">2025年5月8日</div>
                            </div>
                        </div>
                        <div class="review-stars">
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                        </div>
                        <div class="review-text">王芳陪诊师非常专业，提前了解了我的病情，就诊当天全程陪伴，减少了很多等待时间，非常满意！</div>
                    </div>
                    <div class="review-item">
                        <div class="review-user">
                            <div class="review-avatar">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                            </div>
                            <div>
                                <div class="review-name">李女士</div>
                                <div class="review-time">2025年5月5日</div>
                            </div>
                        </div>
                        <div class="review-stars">
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                            <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/></svg>
                        </div>
                        <div class="review-text">服务态度很好，帮了大忙！老人独自就医不方便，有了陪诊师省心多了，下次还找王芳！</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div style="padding: 0 20px; margin-bottom: 30px;">
            <div style="display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 16px; color: #fff;">
                <div>
                    <div style="font-size: 14px; opacity: 0.9;">服务价格</div>
                    <div style="font-size: 28px; font-weight: 700;">¥199<small style="font-size: 14px;">/次</small></div>
                </div>
                <button class="book-btn" style="background: #fff; color: #667eea;" onclick="bookCompanion('王芳')">立即预约</button>
            </div>
        </div>
    </div>
    
    <!-- 预约页面 -->
    <div id="page-booking" class="page">
        <div class="header">
            <div class="back-header">
                <div class="back-btn" onclick="showPage('home')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
                </div>
                <div class="back-title">预约陪诊</div>
            </div>
        </div>
        
        <div class="booking-form">
            <div class="form-title">填写预约信息</div>
            
            <div class="form-group">
                <label>选择陪诊师</label>
                <select id="select-companion">
                    <option value="">请选择陪诊师</option>
                    <option value="王芳">王芳 - ¥199/次</option>
                    <option value="张晓丽">张晓丽 - ¥299/次</option>
                    <option value="李明">李明 - ¥399/次</option>
                    <option value="陈静">陈静 - ¥299/次</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>就诊医院</label>
                <input type="text" placeholder="请输入医院名称" value="北京大学第一医院">
            </div>
            
            <div class="form-group">
                <label>就诊科室</label>
                <select>
                    <option value="">请选择科室</option>
                    <option>内科</option>
                    <option>外科</option>
                    <option>儿科</option>
                    <option>妇产科</option>
                    <option>骨科</option>
                    <option>皮肤科</option>
                    <option>眼科</option>
                    <option>口腔科</option>
                    <option>其他</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>预约日期</label>
                <input type="date" value="2025-05-12">
            </div>
            
            <div class="form-group">
                <label>预约时段</label>
                <div class="time-select-grid">
                    <div class="time-option" onclick="selectTime(this)">08:00-09:00</div>
                    <div class="time-option" onclick="selectTime(this)">09:00-10:00</div>
                    <div class="time-option selected" onclick="selectTime(this)">10:00-11:00</div>
                    <div class="time-option" onclick="selectTime(this)">11:00-12:00</div>
                    <div class="time-option" onclick="selectTime(this)">14:00-15:00</div>
                    <div class="time-option" onclick="selectTime(this)">15:00-16:00</div>
                    <div class="time-option" onclick="selectTime(this)">16:00-17:00</div>
                    <div class="time-option" onclick="selectTime(this)">17:00-18:00</div>
                </div>
            </div>
            
            <div class="form-group">
                <label>患者姓名</label>
                <input type="text" placeholder="请输入患者姓名" value="张三">
            </div>
            
            <div class="form-group">
                <label>联系电话</label>
                <input type="tel" placeholder="请输入联系电话" value="138****8888">
            </div>
            
            <div class="form-group">
                <label>病情描述（选填）</label>
                <textarea placeholder="请简要描述症状或需求，以便陪诊师更好地为您服务">