编辑页面

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, viewport-fit=cover">
    <title>陪诊服务平台</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html, body { height: 100%; }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; 
            background: #f0f2f5; 
            min-height: 100vh;
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
            padding-top: env(safe-area-inset-top);
        }
        /* 顶部区域 */
        .header { 
            background: linear-gradient(135deg, #00b894 0%, #00cec9 100%); 
            color: white; 
            padding: 15px 15px 20px;
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .header-title { font-size: 18px; font-weight: 600; }
        .location { font-size: 12px; display: flex; align-items: center; gap: 3px; opacity: 0.9; }
        .banner { 
            background: linear-gradient(135deg, rgba(0,184,148,0.9), rgba(0,206,201,0.9)); 
            border-radius: 10px; 
            padding: 20px 15px; 
            color: white; 
            margin-bottom: 12px; 
            position: relative; 
            overflow: hidden; 
        }
        .banner::before { content: ""; position: absolute; right: -20px; top: -20px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; }
        .banner h2 { font-size: 18px; margin-bottom: 5px; }
        .banner p { font-size: 12px; opacity: 0.9; }
        /* 搜索框 */
        .search-box { 
            background: white; 
            border-radius: 20px; 
            padding: 10px 15px; 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            cursor: pointer;
        }
        .search-box input { border: none; outline: none; flex: 1; font-size: 13px; background: transparent; }
        .search-icon { color: #00b894; font-size: 16px; }
        /* 内容区域 */
        .content { padding: 15px 15px 0; }
        .page { display: none; }
        .page.active { display: block; }
        .section-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
        .section-title span { color: #00b894; font-size: 12px; font-weight: normal; }
        /* 陪诊师卡片 */
        .doctor-card { 
            background: white; 
            border-radius: 12px; 
            padding: 12px; 
            margin-bottom: 10px; 
            display: flex; 
            gap: 12px; 
            cursor: pointer; 
            box-shadow: 0 1px 4px rgba(0,0,0,0.05);
        }
        .doctor-avatar { 
            width: 60px; 
            height: 60px; 
            background: linear-gradient(135deg, #00b894, #00cec9); 
            border-radius: 8px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 24px; 
            font-weight: 600; 
            flex-shrink: 0; 
        }
        .doctor-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
        .doctor-name { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 4px; }
        .doctor-name span { color: #ff9900; font-size: 12px; margin-left: 5px; }
        .doctor-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
        .tag { background: #e8f8f5; color: #00b894; padding: 2px 6px; border-radius: 3px; font-size: 10px; }
        .tag.gray { background: #f5f5f5; color: #999; }
        .doctor-stats { font-size: 11px; color: #888; }
        /* 司机卡片 */
        .driver-card { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
            border-radius: 12px; 
            padding: 15px; 
            color: white; 
            margin-bottom: 15px; 
            cursor: pointer;
        }
        .driver-card h3 { font-size: 15px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
        .driver-card p { font-size: 11px; opacity: 0.85; margin-bottom: 10px; }
        .driver-form { display: flex; gap: 8px; }
        .driver-form input { flex: 1; padding: 8px; border: none; border-radius: 6px; font-size: 12px; }
        .driver-form button { background: white; color: #667eea; border: none; padding: 8px 15px; border-radius: 6px; font-weight: 600; font-size: 12px; }
        /* 订单页 */
        .order-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
        .order-tab { flex: 1; padding: 8px; background: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; color: #666; }
        .order-tab.active { background: #00b894; color: white; }
        .order-list { background: white; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
        .order-item { padding: 12px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .order-item:last-child { border-bottom: none; }
        .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
        .order-type { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #333; }
        .order-status { padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
        .status-pending { background: #fff3cd; color: #856404; }
        .status-confirmed { background: #d4edda; color: #155724; }
        .status-progress { background: #cce5ff; color: #004085; }
        .status-done { background: #f0f0f0; color: #666; }
        .order-info { font-size: 12px; color: #888; }
        /* 个人中心 */
        .profile-simple { background: white; border-radius: 12px; padding: 20px; text-align: center; }
        .profile-avatar { 
            width: 70px; 
            height: 70px; 
            background: linear-gradient(135deg, #00b894, #00cec9); 
            border-radius: 50%; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 26px; 
            font-weight: 600; 
            margin-bottom: 12px; 
        }
        .profile-name { font-size: 17px; font-weight: 600; color: #333; margin-bottom: 4px; }
        .profile-phone { font-size: 13px; color: #999; }
        .profile-menu { background: white; border-radius: 12px; margin-top: 12px; overflow: hidden; }
        .menu-item { 
            padding: 14px 15px; 
            display: flex; 
            align-items: center; 
            gap: 10px; 
            border-bottom: 1px solid #f5f5f5; 
            cursor: pointer; 
            font-size: 14px; 
            color: #333; 
        }
        .menu-item:last-child { border-bottom: none; }
        .menu-item .icon { font-size: 18px; color: #00b894; }
        .menu-item .arrow { margin-left: auto; color: #ccc; }
        /* 详情页通用 */
        .detail-card { background: white; border-radius: 12px; padding: 15px; margin-bottom: 12px; }
        .detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
        .detail-row:last-child { border-bottom: none; }
        .detail-label { color: #666; font-size: 14px; }
.detail-value { color: #333; font-size: 14px; font-weight: 500; }
        /* 底部导航 */
        .bottom-nav { 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            background: white; 
            display: flex; 
            padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
            box-shadow: 0 -1px 8px rgba(0,0,0,0.08);
            z-index: 100;
        }
        .nav-item { 
            flex: 1; 
            text-align: center; 
            padding: 6px 4px; 
            cursor: pointer; 
            color: #999; 
            font-size: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .nav-item.active { color: #00b894; }
        .nav-item .icon { font-size: 22px; line-height: 1; }
        /* 按钮 */
        .btn-primary { 
            width: 100%; 
            padding: 14px; 
            background: linear-gradient(135deg, #00b894, #00cec9); 
            color: white; 
            border: none; 
            border-radius: 10px; 
            font-size: 15px; 
            font-weight: 600; 
            cursor: pointer;
        }
        .btn-secondary { 
            width: 100%; 
            padding: 12px; 
            background: #f5f5f5; 
            color: #666; 
            border: none; 
            border-radius: 10px; 
            font-size: 13px; 
            margin-top: 10px; 
            cursor: pointer;
        }
        /* 表单 */
        .form-group { margin-bottom: 14px; }
        .form-label { font-size: 13px; color: #666; margin-bottom: 6px; display: block; }
        .form-input { 
            width: 100%; 
            padding: 12px; 
            border: 2px solid #eee; 
            border-radius: 8px; 
            font-size: 14px; 
            background: white;
        }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        /* 成功页 */
        .success-box { text-align: center; padding: 30px 15px; background: white; border-radius: 12px; }
        .success-icon { 
            width: 70px; 
            height: 70px; 
            background: #d4edda; 
            border-radius: 50%; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 36px; 
            color: #155724;
            margin-bottom: 15px;
        }
        .success-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px; }
        .success-desc { font-size: 13px; color: #888; margin-bottom: 20px; }
        /* 陪诊师详情 */
        .doctor-detail-avatar { 
            width: 80px; 
            height: 80px; 
            background: linear-gradient(135deg, #00b894, #00cec9); 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 32px; 
            font-weight: 600; 
            margin: 0 auto 12px;
        }
        .doctor-detail-name { text-align: center; font-size: 18px; font-weight: 600; color: #333; margin-bottom: 4px; }
        .doctor-detail-rating { text-align: center; color: #ff9900; font-size: 13px; margin-bottom: 15px; }
        .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 15px; }
        .stat-item { background: #f8f9fa; border-radius: 8px; padding: 12px 8px; text-align: center; }
        .stat-num { font-size: 18px; font-weight: 600; color: #00b894; }
        .stat-label { font-size: 11px; color: #888; }
        .info-section { border-top: 1px solid #eee; padding-top: 12px; margin-top: 12px; }
        .info-title { font-weight: 600; color: #333; margin-bottom: 8px; font-size: 14px; }
        .info-tags { display: flex; gap: 6px; flex-wrap: wrap; }
        .info-text { color: #666; font-size: 13px; line-height: 1.5; }
    </style>
</head>
<body>
    <!-- 顶部区域 -->
    <div class="header">
        <div class="header-top">
            <div class="header-title">陪诊服务平台</div>
            <div class="location">📍 北京市朝阳区</div>
        </div>
        <div class="banner">
            <h2>专业陪诊，温暖就医</h2>
            <p>三甲医院陪诊师全程陪护，让就医更轻松</p>
        </div>
        <div class="search-box" onclick="alert('搜索功能')">
            <span class="search-icon">🔍</span>
            <input type="text" placeholder="搜索陪诊师、服务类型..." readonly>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
        <!-- 首页 -->
        <div id="home" class="page active">
            <div class="section-title">
                推荐陪诊师
                <span onclick="alert('查看更多陪诊师')">查看更多 ></span>
            </div>
            
            <div class="doctor-card" onclick="showPage('doctor-detail')">
                <div class="doctor-avatar">李</div>
                <div class="doctor-info">
                    <div class="doctor-name">李明华 <span>⭐ 4.9</span></div>
                    <div class="doctor-tags">
                        <span class="tag">产科</span>
                        <span class="tag">儿科</span>
                        <span class="tag gray">5年经验</span>
                    </div>
                    <div class="doctor-stats">已服务326单 | 三甲医院背景</div>
                </div>
            </div>

            <div class="doctor-card" onclick="showPage('doctor-detail')">
                <div class="doctor-avatar">王</div>
                <div class="doctor-info">
                    <div class="doctor-name">王芳 <span>⭐ 4.8</span></div>
                    <div class="doctor-tags">
                        <span class="tag">肿瘤科</span>
                        <span class="tag">老年科</span>
                        <span class="tag gray">8年经验</span>
                    </div>
                    <div class="doctor-stats">已服务512单 | 专业资质</div>
                </div>
            </div>

            <div class="doctor-card" onclick="showPage('doctor-detail')">
                <div class="doctor-avatar">张</div>
                <div class="doctor-info">
                    <div class="doctor-name">张伟 <span>⭐ 4.7</span></div>
                    <div class="doctor-tags">
                        <span class="tag">骨科</span>
                        <span class="tag">康复科</span>
                        <span class="tag gray">3年经验</span>
                    </div>
                    <div class="doctor-stats">已服务189单 | 好评如潮</div>
                </div>
            </div>

            <div class="driver-card" onclick="showPage('driver-book')">
                <h3>🚘 预约用车</h3>
                <p>安全送达，舒适出行。一键预约司机</p>
                <div class="driver-form">
                    <input type="text" placeholder="出发地" readonly onclick="event.stopPropagation()">
                    <input type="text" placeholder="目的地" readonly onclick="event.stopPropagation()">
                    <button onclick="event.stopPropagation(); showPage('driver-book')">预约</button>
                </div>
            </div>
        </div>

        <!-- 陪诊师详情 -->
        <div id="doctor-detail" class="page">
            <div class="detail-card">
                <div class="doctor-detail-avatar">李</div>
                <div class="doctor-detail-name">李明华</div>
                <div class="doctor-detail-rating">⭐ 4.9分 | 5年经验 | 已服务326单</div>
                
                <div class="stat-grid">
                    <div class="stat-item">
                        <div class="stat-num">326</div>
                        <div class="stat-label">服务单数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">98%</div>
                        <div class="stat-label">好评率</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">5年</div>
                        <div class="stat-label">从业年限</div>
                    </div>
                </div>
                
                <div class="info-section">
                    <div class="info-title">擅长领域</div>
                    <div class="info-tags">
                        <span class="tag">产科</span>
                        <span class="tag">儿科</span>
                        <span class="tag">妇产科</span>
                    </div>
                </div>
                <div class="info-section">
                    <div class="info-title">个人简介</div>
                    <div class="info-text">三甲医院陪诊经验，专业温柔，服务好评如潮。熟悉各大医院科室分布，可快速引导就医流程。</div>
                </div>
                <div class="info-section">
                    <div class="info-title">资质证书</div>
                    <div class="info-text">高级陪诊师、健康管理师、急救证书</div>
                </div>
            </div>
            <button class="btn-primary" onclick="showPage('booking')">立即预约</button>
            <button class="btn-secondary" onclick="showPage('home')">返回</button>
        </div>

        <!-- 预约表单 -->
        <div id="booking" class="page">
            <div class="detail-card">
                <div class="info-title" style="margin-bottom:15px;">📝 填写预约信息</div>
                <div class="form-group">
                    <label class="form-label">陪诊师</label>
                    <input type="text" class="form-input" value="李明华" readonly>
                </div>
                <div class="form-group">
                    <label class="form-label">服务类型</label>
                    <select class="form-input">
                        <option>全程陪诊</option>
                        <option>代取报告</option>
                        <option>手术陪护</option>
                    </select>
                </div>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label">目标医院</label>
                        <input type="text" class="form-input" placeholder="请输入">
                    </div>
                    <div class="form-group">
                        <label class="form-label">预约日期</label>
                        <input type="date" class="form-input">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">患者姓名</label>
                    <input type="text" class="form-input" placeholder="请输入">
                </div>
                <div class="form-group">
                    <label class="form-label">联系方式</label>
                    <input type="tel" class="form-input" placeholder="请输入手机号">
                </div>
            </div>
            <button class="btn-primary" onclick="showPage('booking-success')">确认预约</button>
        </div>

        <!-- 预约成功 -->
        <div id="booking-success" class="page">
            <div class="success-box">
                <div class="success-icon">✓</div>
                <div class="success-title">预约成功！</div>
                <div class="success-desc">陪诊师将在24小时内与您联系确认详情</div>
            </div>
            <div class="detail-card" style="margin-top:12px;">
                <div class="detail-row">
                    <span class="detail-label">陪诊师</span>
                    <span class="detail-value">李明华</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">服务类型</span>
                    <span class="detail-value">全程陪诊</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">支付方式</span>
                    <span class="detail-value">线下支付</span>
                </div>
            </div>
            <button class="btn-primary" style="margin-top:15px;" onclick="showPage('home')">返回首页</button>
        </div>

        <!-- 司机预约 -->
        <div id="driver-book" class="page">
            <div class="detail-card">
                <div class="info-title" style="margin-bottom:15px;">🚗 预约用车</div>
                <div class="form-group">
                    <label class="form-label">出发地点</label>
                    <input type="text" class="form-input" placeholder="请输入出发地址">
                </div>
                <div class="form-group">
                    <label class="form-label">目的地</label>
                    <input type="text" class="form-input" placeholder="请输入目的地">
                </div>
                <div class="form-group">
                    <label class="form-label">用车时间</label>
                    <input type="datetime-local" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">备注</label>
                    <input type="text" class="form-input" placeholder="特殊需求说明">
                </div>
            </div>
            <button class="btn-primary" onclick="showPage('driver-success')">确认预约</button>
        </div>

        <!-- 司机预约成功 -->
        <div id="driver-success" class="page">
            <div class="success-box">
                <div class="success-icon">✓</div>
                <div class="success-title">预约成功！</div>
                <div class="success-desc">司机将在出发前与您联系确认</div>
            </div>
            <div class="detail-card" style="margin-top:12px;">
                <div class="detail-row">
                    <span class="detail-label">司机</span>
                    <span class="detail-value">张师傅</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">车型</span>
                    <span class="detail-value">丰田凯美瑞 · 京A12345</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">支付方式</span>
                    <span class="detail-value">线下支付</span>
                </div>
            </div>
            <button class="btn-primary" style="margin-top:15px;" onclick="showPage('home')">返回首页</button>
        </div>

        <!-- 订单页 -->
        <div id="orders" class="page">
            <div class="order-tabs">
                <button class="order-tab active" onclick="switchOrderTab(this)">全部</button>
                <button class="order-tab" onclick="switchOrderTab(this)">陪诊订单</button>
                <button class="order-tab" onclick="switchOrderTab(this)">司机订单</button>
            </div>

            <div class="order-list">
                <div class="order-item" onclick="showPage('order-detail')">
                    <div class="order-header">
                        <div class="order-type">🩺 陪诊服务</div>
                        <span class="order-status status-pending">待确认</span>
                    </div>
                    <div class="order-info">李明华 | 北京协和医院 | 2026-05-15 09:00</div>
                </div>
            </div>

            <div class="order-list">
                <div class="order-item">
                    <div class="order-header">
                        <div class="order-type">🚗 司机服务</div>
                        <span class="order-status status-done">已完成</span>
                    </div>
                    <div class="order-info">张师傅 | 丰田凯美瑞 | 2026-05-10</div>
                </div>
            </div>

            <div class="order-list">
                <div class="order-item">
                    <div class="order-header">
                        <div class="order-type">🩺 陪诊服务</div>
                        <span class="order-status status-progress">服务中</span>
                    </div>
                    <div class="order-info">王芳 | 北京大学第一医院 | 2026-05-12 14:00</div>
                </div>
            </div>
        </div>

        <!-- 订单详情 -->
        <div id="order-detail" class="page">
            <div class="detail-card">
                <div class="info-title" style="margin-bottom:15px;">订单详情</div>
                <div class="detail-row">
                    <span class="detail-label">订单编号</span>
                    <span class="detail-value">PC20260512001</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">服务类型</span>
                    <span class="detail-value">陪诊服务</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">陪诊师</span>
                    <span class="detail-value">李明华</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">目标医院</span>
                    <span class="detail-value">北京协和医院</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">预约时间</span>
                    <span class="detail-value">2026-05-15 09:00</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">订单状态</span>
                    <span class="order-status status-pending">待确认</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">支付方式</span>
                    <span class="detail-value">线下支付</span>
                </div>
            </div>
            <button class="btn-secondary" onclick="showPage('orders')">返回</button>
        </div>

        <!-- 个人中心 -->
        <div id="profile" class="page">
            <div class="profile-simple">
                <div class="profile-avatar">张</div>
                <div class="profile-name">张三</div>
                <div class="profile-phone">138****8888</div>
            </div>
            <div class="profile-menu">
                <div class="menu-item" onclick="alert('我的信息')">
                    <span class="icon">📝</span>我的信息
                    <span class="arrow">›</span>
                </div>
                <div class="menu-item" onclick="alert('联系方式')">
                    <span class="icon">📞</span>联系方式
                    <span class="arrow">›</span>
                </div>
                <div class="menu-item" onclick="alert('客服热线：400-888-8888')">
                    <span class="icon">💬</span>在线客服
                    <span class="arrow">›</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item active" onclick="switchTab(this, 'home')">
            <span class="icon">🏠</span>
            <span>首页</span>
        </div>
        <div class="nav-item" onclick="switchTab(this, 'orders')">
            <span class="icon">📋</span>
            <span>订单</span>
        </div>
        <div class="nav-item" onclick="switchTab(this, 'profile')">
            <span class="icon">👤</span>
            <span>我的</span>
        </div>
    </div>

    <script>
        function switchTab(el, pageId) {
            document.querySelectorAll('.nav-item').forEach(t => t.classList.remove('active'));
            el.classList.add('active');
            showPage(pageId);
        }

        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
            window.scrollTo(0, 0);
        }

        function switchOrderTab(el) {
            el.parentElement.querySelectorAll('.order-tab').forEach(t => t.classList.remove('active'));
            el.classList.add('active');
        }
    </script>
</body>
</html>