编辑页面

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>陪诊服务APP原型</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #333; min-height: 100vh; }
        .phone-frame { width: 375px; min-height: 812px; margin: 20px auto; background: #fff; border-radius: 40px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative; }
        .status-bar { height: 44px; background: #000; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; color: #fff; font-size: 12px; }
        .page { display: none; min-height: calc(812px - 44px - 83px - 20px); background: #f5f5f5; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(83px + 20px); }
        .page.active { display: block; }
        .page::-webkit-scrollbar { width: 0; }
        .header { background: linear-gradient(135deg, #4CAF50, #45a049); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
        .header-white { background: #fff; color: #333; border-bottom: 1px solid #eee; }
        .header-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; background: rgba(255,255,255,0.2); }
        .header-back.white { background: rgba(0,0,0,0.1); }
        .header-back svg { width: 20px; height: 20px; fill: #fff; }
        .header-back.white svg { fill: #333; }
        .header-title { font-size: 17px; font-weight: 600; }
        .tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 83px; background: #fff; display: flex; justify-content: space-around; padding-top: 8px; border-top: 1px solid #eee; }
        .tab-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; color: #999; font-size: 10px; padding: 4px 12px; }
        .tab-item.active { color: #4CAF50; }
        .tab-item svg { width: 24px; height: 24px; }
        .content { padding-bottom: 20px; }
        
        /* 登录页 */
        .login-bg { background: linear-gradient(180deg, #4CAF50 0%, #4CAF50 35%, #f5f5f5 35%); }
        .login-logo { text-align: center; padding: 60px 0 40px; color: #fff; }
        .login-logo-icon { width: 80px; height: 80px; background: #fff; border-radius: 20px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
        .login-form { padding: 0 24px; }
        .login-input-group { background: #fff; border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
        .login-input { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; }
        .login-input:last-child { border-bottom: none; }
        .login-input-icon { width: 24px; height: 24px; margin-right: 12px; color: #999; }
        .login-input input { flex: 1; border: none; outline: none; font-size: 15px; }
        .login-btn { width: 100%; padding: 14px; background: #4CAF50; color: #fff; border: none; border-radius: 24px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 8px; }
        .login-third { display: flex; justify-content: center; gap: 32px; margin-top: 32px; }
        .login-third-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
        .login-third-icon { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .login-third-text { font-size: 12px; color: #666; }
        
        /* 首页 */
        .home-header { background: linear-gradient(135deg, #4CAF50, #45a049); padding: 16px; color: #fff; }
        .home-location { display: flex; align-items: center; gap: 4px; font-size: 14px; margin-bottom: 12px; cursor: pointer; }
        .home-search { background: rgba(255,255,255,0.2); border-radius: 20px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.8); font-size: 14px; }
        .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 20px 16px; background: #fff; }
        .service-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
        .service-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .service-name { font-size: 12px; }
        .section-title { padding: 16px; font-size: 16px; font-weight: 600; background: #fff; border-bottom: 1px solid #f0f0f0; }
        .expert-card { display: flex; gap: 12px; padding: 14px 16px; background: #fff; cursor: pointer; }
        .expert-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .expert-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .expert-title { font-size: 12px; color: #666; margin-bottom: 4px; }
        .expert-tag { font-size: 10px; background: #e8f5e9; color: #4CAF50; padding: 2px 8px; border-radius: 10px; margin-right: 4px; }
        
        /* 预约页 */
        .booking-steps { display: flex; padding: 16px; background: #fff; }
        .booking-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
        .booking-step::after { content: ''; position: absolute; top: 16px; left: 50%; width: 100%; height: 2px; background:#ddd; }
        .booking-step:last-child::after { display: none; }
        .booking-step.active::after { background: #4CAF50; }
        .booking-step-num { width: 32px; height: 32px; border-radius: 50%; background: #ddd; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; z-index: 1; }
        .booking-step.active .booking-step-num { background: #4CAF50; }
        .booking-step-text { font-size: 12px; color: #999; margin-top: 8px; }
        .booking-step.active .booking-step-text { color: #4CAF50; }
        .form-section { padding: 16px; background: #fff; margin-bottom: 12px; }
        .form-label { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
        .form-label .required { color: #ff4d4f; }
        .service-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .service-option { padding: 12px; background: #f5f5f5; border-radius: 8px; text-align: center; cursor: pointer; border: 2px solid transparent; }
        .service-option.selected { border-color: #4CAF50; background: #e8f5e9; }
        .service-option-price { color: #4CAF50; font-weight: 600; margin-top: 4px; }
        .form-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; outline: none; }
        .insurance-box { display: flex; align-items: center; padding: 12px; background: #fff9e6; border-radius: 8px; }
        .insurance-check { width: 20px; height: 20px; border-radius: 4px; border: 2px solid #4CAF50; margin-right: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #4CAF50; }
        .insurance-check svg { width: 14px; height: 14px; fill: #fff; }
        .price-box { background: #fff; padding: 16px; border-radius: 12px; margin: 12px 16px; }
        .price-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
        .price-row.total { font-weight: 600; font-size: 18px; color: #ff4d4f; padding-top: 8px; border-top: 1px solid #eee; }
        
        /* 陪诊师选择 */
        .attendant-card { display: flex; gap: 12px; background: #fff; padding: 14px; margin: 12px 16px; border-radius: 12px; cursor: pointer; border: 2px solid transparent; }
        .attendant-card.selected { border-color: #4CAF50; }
        .attendant-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #e8f5e9, #c8e6c9); display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .attendant-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .attendant-rating { color: #ff9800; font-size: 12px; margin-bottom: 4px; }
        .attendant-exp { font-size: 12px; color: #666; }
        
        /* 支付 */
        .payment-amount { text-align: center; padding: 30px; background: #fff; }
        .payment-amount-label { font-size: 14px; color: #999; margin-bottom: 8px; }
        .payment-amount-value { font-size: 36px; font-weight: 700; color: #ff4d4f; }
        .payment-methods { padding: 16px; }
        .payment-method { display: flex; align-items: center; padding: 16px; background: #fff; border-radius: 12px; margin-bottom: 12px; cursor: pointer; }
        .payment-method-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; }
        .payment-method-name { flex: 1; font-size: 15px; }
        .payment-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; background: #4CAF50; border-color: #4CAF50; }
        .payment-check svg { width: 12px; height: 12px; fill: #fff; }
        .fixed-bottom { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 12px 16px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
        
        /* 订单列表 */
        .order-tabs { display: flex; background: #fff; padding: 0 16px; }
        .order-tab { flex: 1; padding: 14px 0; text-align: center; font-size: 14px; color: #666; border-bottom: 2px solid transparent; cursor: pointer; }
        .order-tab.active { color: #4CAF50; border-bottom-color: #4CAF50; }
        .order-card { background: #fff; border-radius: 12px; padding: 14px; margin: 12px 16px; cursor: pointer; }
        .order-header { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
        .order-no { font-size: 12px; color: #999; }
        .order-status { font-size: 13px; color: #4CAF50; }
        .order-status.pending { color: #ff9800; }
        .order-status.done { color: #999; }
        .order-service { font-size: 14px; margin: 12px 0 8px; }
        .order-info { font-size: 12px; color: #999; margin-bottom: 4px; }
        .order-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
        .order-price { font-size: 16px; font-weight: 600; color: #ff4d4f; }
        .order-actions { display: flex; gap: 8px; }
        .order-btn { padding: 6px 14px; border-radius: 16px; font-size: 12px; cursor: pointer; border: 1px solid #ddd; background: #fff; }
        .order-btn.primary { background: #4CAF50; color: #fff; border: none; }
        
        /* 个人中心 */
        .profile-header { background: linear-gradient(135deg, #4CAF50, #45a049); padding: 24px 16px; color: #fff; }
        .profile-info { display: flex; align-items: center; gap: 16px; }
        .profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .profile-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
        .profile-phone { font-size: 13px; opacity: 0.8; }
        .profile-stats { display: flex; gap: 32px; margin-top: 20px; }
        .profile-stat { text-align: center; cursor: pointer; }
        .profile-stat-num { font-size: 20px; font-weight: 600; }
        .profile-stat-text { font-size: 12px; opacity: 0.8; margin-top: 4px; }
        .profile-menu { background: #fff; margin: 12px; border-radius: 12px; overflow: hidden; }
        .profile-menu-item { display: flex; align-items: center; padding: 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
        .profile-menu-item:last-child { border-bottom: none; }
        .profile-menu-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; }
        .profile-menu-text { flex: 1; font-size: 14px; }
        .profile-menu-arrow { color: #ccc; }
        
        /* 分销 */
        .distrib-banner { background: linear-gradient(135deg, #4CAF50, #45a049); padding: 24px; color: #fff; text-align: center; }
        .distrib-amount { font-size: 36px; font-weight: 700; margin-bottom: 4px; }
        .distrib-label { font-size: 14px; opacity: 0.9; }
        .distrib-actions { display: flex; gap: 12px; padding: 16px; }
        .distrib-btn { flex: 1; padding: 12px; border-radius: 24px; text-align: center; font-size: 14px; font-weight: 600; cursor: pointer; }
        .distrib-btn.primary { background: #4CAF50; color: #fff; }
        .distrib-btn.secondary { background: #fff; color: #4CAF50; border: 1px solid #4CAF50; }
        .distrib-card { background: #fff; padding: 16px; border-radius: 12px; margin: 0 16px 12px; }
        .distrib-card-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
        
        /* 商城 */
        .mall-header { display: flex; gap: 8px; padding: 12px 16px; background: #fff; }
        .mall-search { flex: 1; display: flex; align-items: center; background: #f5f5f5; border-radius: 20px; padding: 8px 12px; }
        .mall-search input { border: none; background: none; outline: none; margin-left: 8px; width: 100%; }
        .mall-tabs { display: flex; padding: 0 16px; background: #fff; }
        .mall-tab { padding: 12px 16px; font-size: 14px; color: #666; border-bottom: 2px solid transparent; cursor: pointer; }
        .mall-tab.active { color: #4CAF50; border-bottom-color: #4CAF50; }
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px 16px; }
        .product-card { background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer; }
        .product-img { height: 140px; background: linear-gradient(135deg, #f5f5f5, #e0e0e0); display: flex; align-items: center; justify-content: center; font-size: 48px; }
        .product-info { padding: 10px; }
        .product-name { font-size: 13px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .product-price { color: #ff4d4f; font-size: 16px; font-weight: 600; }
        
        /* 商品详情 */
        .product-detail-img { height: 300px; background: linear-gradient(135deg, #f9f9f9, #eee); display: flex; align-items: center; justify-content: center; font-size: 80px; }
        .product-detail-info { background: #fff; padding: 16px; }
        .product-detail-price { color: #ff4d4f; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
        .product-detail-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
        .product-detail-desc { font-size: 13px; color: #666; line-height: 1.6; }
        
        /* 购物车 */
        .cart-item { display: flex; gap: 12px; background: #fff; padding: 14px; margin: 12px 16px; border-radius: 12px; }
        .cart-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ddd; margin-right: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #4CAF50; border-color: #4CAF50; }
        .cart-check svg { width: 12px; height: 12px; fill: #fff; }
        .cart-img { width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
        .cart-info { flex: 1; }
        .cart-name { font-size: 14px; margin-bottom: 8px; }
        .cart-price { color: #ff4d4f; font-weight: 600; }
        .cart-num { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
        .cart-num-btn { width: 24px; height: 24px; border-radius: 4px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
        .cart-num-value { font-size: 14px; font-weight: 600; }
        .cart-footer { background: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; position: fixed; bottom: 83px; left: 0; right: 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
        .cart-total { font-size: 14px; }
        .cart-total-price { color: #ff4d4f; font-weight: 600; }
        
        /* 餐饮 */
        .food-banner { height: 100px; background: linear-gradient(135deg, #ff9800, #f57c00); margin: 12px 16px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
        .food-actions { display: flex; gap: 8px; padding: 12px 16px; }
        .food-action { flex: 1; padding: 12px; border-radius: 8px; text-align: center; font-size: 13px; color: #fff; cursor: pointer; }
        .restaurant-card { display: flex; gap: 12px; background: #fff; padding: 12px; margin: 0 16px 12px; border-radius: 12px; cursor: pointer; }
        .restaurant-img { width: 80px; height: 80px; border-radius: 8px; background: linear-gradient(135deg, #fff3e0, #ffe0b2); display: flex; align-items: center; justify-content: center; font-size: 36px; }
        .restaurant-name { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
        .restaurant-meta { font-size: 12px; color: #999; margin-bottom: 6px; }
        .restaurant-tag { font-size: 10px; background: #fff3e0; color: #ff9800; padding: 2px 6px; border-radius: 4px; margin-right: 4px; }
        
        /* 商家详情 */
        .store-header { background: #fff; padding: 16px; text-align: center; border-bottom: 1px solid #eee; }
        .store-logo { width: 80px; height: 80px; background: linear-gradient(135deg, #fff3e0, #ffe0b2); border-radius: 12px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
        .store-name { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
        .store-info { font-size: 12px; color: #999; margin-bottom: 12px; }
        .store-tags { display: flex; justify-content: center; gap: 8px; }
        .store-tag { font-size: 11px; background: #e8f5e9; color: #4CAF50; padding: 4px 10px; border-radius: 12px; }
        .menu-tabs { display: flex; background: #fff; border-bottom: 1px solid #eee; }
        .menu-tab { flex: 1; padding: 14px; text-align: center; font-size: 14px; color: #666; cursor: pointer; }
        .menu-tab.active { color: #4CAF50; font-weight: 600; border-bottom: 2px solid #4CAF50; }
        .menu-item { display: flex; gap: 12px; padding: 14px 16px; background: #fff; border-bottom: 1px solid #f5f5f5; }
        .menu-img { width: 70px; height: 70px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .menu-info { flex: 1; }
        .menu-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
        .menu-desc { font-size: 12px; color: #999; margin-bottom: 6px; }
        .menu-bottom { display: flex; justify-content: space-between; align-items: center; }
        .menu-price { color: #ff4d4f; font-weight: 600; }
        .menu-add { width: 24px; height: 24px; background: #4CAF50; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; }
        
        /* 扫码点餐 */
        .scan-banner { background: linear-gradient(135deg, #4CAF50, #45a049); color: #fff; padding: 20px; text-align: center; }
        .scan-qr { width: 150px; height: 150px; background: #fff; margin: 16px auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 48px; }
        .scan-tips { font-size: 13px; opacity: 0.9; }
        
        /* 储值 */
        .store-value-amount { text-align: center; padding: 24px; background: linear-gradient(135deg, #ff9800, #f57c00); color: #fff; }
        .store-value-balance { font-size: 14px; opacity: 0.9; }
        .store-value-num { font-size: 36px; font-weight: 700; margin-top: 8px; }
        .store-value-packages { padding: 16px; }
        .store-value-package { display: flex; align-items: center; padding: 16px; background: #fff; border-radius: 12px; margin-bottom: 12px; cursor: pointer; border: 2px solid transparent; }
        .store-value-package.selected { border-color: #ff9800; background: #fff9f0; }
        .store-value-package-amount { font-size: 20px; font-weight: 700; color: #ff9800; margin-right: 16px; }
        .store-value-package-gift { font-size: 12px; color: #ff9800; }
        .store-value-package-tag { font-size: 10px; background: #ff9800; color: #fff; padding: 2px 6px; border-radius: 4px; margin-left: 8px; }
        
        /* 理疗 */
        .therapy-header { background: linear-gradient(135deg, #2196F3, #1976D2); padding: 16px; color: #fff; }
        .therapy-banner { height: 80px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
        .therapy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px 16px; }
        .therapy-card { background: #fff; padding: 16px; border-radius: 12px; text-align: center; cursor: pointer; }
        .therapy-icon { font-size: 36px; margin-bottom: 8px; }
        .therapy-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .therapy-price { font-size: 12px; color: #4CAF50; }
        
        /* 专家详情 */
        .expert-header { background: linear-gradient(135deg, #4CAF50, #45a049); padding: 60px 16px 30px; color: #fff; text-align: center; }
        .expert-header-avatar { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.3); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
        .expert-header-name { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
        .expert-header-title { font-size: 14px; opacity: 0.9; margin-bottom: 12px; }
        .expert-header-tags { display: flex; justify-content: center; gap: 8px; font-size: 13px; }
        
        /* 客服 */
        .chat-area { height: 400px; background: #f5f5f5; padding: 16px; }
        .chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: 14px; margin-bottom: 12px; }
        .chat-bubble.left { background: #fff; border-bottom-left-radius: 4px; }
        .chat-bubble.right { background: #4CAF50; color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
        .chat-input-bar { display: flex; gap: 10px; padding: 12px 16px; background: #fff; }
        .chat-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; outline: none; }
        .chat-send { padding: 10px 20px; background: #4CAF50; color: #fff; border: none; border-radius: 20px; cursor: pointer; }
        
        /* 订单详情 */
        .order-detail-card { background: #fff; padding: 16px; margin: 12px 16px; border-radius: 12px; }
        .order-detail-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
        .order-detail-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
        .order-detail-label { color: #999; }
        
        /* 病历 */
        .medical-record-card { background: #fff; padding: 16px; margin: 12px 16px; border-radius: 12px; }
        .medical-record-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
        .medical-record-name { font-size: 15px; font-weight: 600; }
        .medical-record-date { font-size: 12px; color: #999; }
        .medical-record-imgs { display: flex; gap: 8px; flex-wrap: wrap; }
        .medical-record-img { width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        
        /* 地址管理 */
        .address-card { background: #fff; padding: 16px; margin: 12px 16px; border-radius: 12px; display: flex; gap: 12px; cursor: pointer; }
        .address-info { flex: 1; }
        .address-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .address-phone { font-size: 13px; color: #666; margin-bottom: 4px; }
        .address-detail { font-size: 12px; color: #999; }
        .address-tag { font-size: 10px; background: #4CAF50; color: #fff; padding: 2px 6px; border-radius: 4px; margin-right: 8px; }
        .address-tag.default { background: #ff4d4f; }
        
        /* 优惠券 */
        .coupon-card { background: linear-gradient(135deg, #ff4d4f, #ff6b6b); color: #fff; padding: 16px; margin: 12px 16px; border-radius: 12px; display: flex; cursor: pointer; }
        .coupon-left { text-align: center; border-right: 1px dashed rgba(255,255,255,0.5); padding-right: 16px; margin-right: 16px; }
        .coupon-value { font-size: 28px; font-weight: 700; }
        .coupon-limit { font-size: 11px; opacity: 0.9; }
        .coupon-right { flex: 1; }
        .coupon-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .coupon-desc { font-size: 11px; opacity: 0.9; margin-bottom: 4px; }
        .coupon-time { font-size: 10px; opacity: 0.8; }
        
        /* 发票 */
        .invoice-type { display: flex; gap: 12px; padding: 16px; background: #fff; }
        .invoice-type-item { flex: 1; padding: 12px; text-align: center; border-radius: 8px; border: 2px solid #ddd; cursor: pointer; font-size: 14px; }
        .invoice-type-item.selected { border-color: #4CAF50; color: #4CAF50; background: #e8f5e9; }
        
        /* 帮助中心 */
        .help-item { background: #fff; margin: 12px 16px; border-radius: 12px; overflow: hidden; }
        .help-item-header { display: flex; justify-content: space-between; padding: 16px; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
        .help-item-content { padding: 16px; font-size: 13px; color: #666; line-height: 1.8; display: none; }
        .help-item-content.show { display: block; }
        
        /* 设置 */
        .setting-item { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #fff; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .setting-item-text { font-size: 14px; }
        .setting-item-arrow { color: #ccc; }
        
        /* 上门预约 */
        .home-service-card { background: #fff; padding: 16px; margin: 12px 16px; border-radius: 12px; }
        .home-service-form { margin-top: 12px; }
        .form-input-row { margin-bottom: 12px; }
        .form-input-label { font-size: 13px; color: #666; margin-bottom: 6px; }
        
        /* 弹窗 */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; }
        .modal-content { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 20px 20px 0 0; padding: 20px; }
        .modal-icon { width: 80px; height: 80px; border-radius: 50%; background: #4CAF50; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; }
        .modal-title { font-size: 18px; font-weight: 600; text-align: center; margin-bottom: 8px; }
        .modal-desc { text-align: center; color: #666; margin-bottom: 20px; }
        .modal-btn { width: 100%; padding: 14px; background: #4CAF50; color: #fff; border: none; border-radius: 24px; font-size: 16px; cursor: pointer; }
        .modal-close { position: absolute; right: 16px; top: 16px; font-size: 20px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="phone-frame">
        <div class="status-bar"><span>9:41</span><span></span></div>
        
        <!-- 登录页 -->
        <div class="page active" id="loginPage">
            <div class="login-bg">
                <div class="login-logo">
                    <div class="login-logo-icon">🏥</div>
                    <h1>陪诊助手</h1>
                </div>
                <div class="login-form">
                    <div class="login-input-group">
                        <div class="login-input">
                            <span class="login-input-icon">📱</span>
                            <input type="tel" placeholder="请输入手机号" value="13812345678">
                        </div>
                        <div class="login-input">
                            <span class="login-input-icon">🔒</span>
                            <input type="text" placeholder="请输入验证码" style="flex:1">
                            <span style="color:#4CAF50;font-size:13px;cursor:pointer">获取验证码</span>
                        </div>
                    </div>
                    <button class="login-btn" onclick="go('homePage')">登录</button>
                    <div class="login-third">
                        <div class="login-third-item" onclick="go('homePage')">
                            <div class="login-third-icon">💬</div>
                            <span class="login-third-text">微信登录</span>
                        </div>
                        <div class="login-third-item">
                            <div class="login-third-icon">📱</div>
                            <span class="login-third-text">手机登录</span>
                        </div>
                        <div class="login-third-item">
                            <div class="login-third-icon">👤</div>
                            <span class="login-third-text">密码登录</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 首页 -->
        <div class="page" id="homePage">
            <div class="home-header">
                <div class="home-location" onclick="go('locationPage')">
                    <span>📍</span><span>北京市朝阳区</span><span>▼</span>
                </div>
                <div class="home-search">
                    <span>🔍</span><span>搜索服务、医院、专家...</span>
                </div>
            </div>
            <div class="service-grid">
                <div class="service-item" onclick="go('bookingPage')"><div class="service-icon" style="background:#e3f2fd;">⏰</div><span class="service-name">半天陪诊</span></div>
                <div class="service-item" onclick="go('bookingPage')"><div class="service-icon" style="background:#fff3e0;">🌞</div><span class="service-name">全天陪诊</span></div>
                <div class="service-item" onclick="go('bookingPage')"><div class="service-icon" style="background:#e8eaf6;">🌙</div><span class="service-name">夜间陪诊</span></div>
                <div class="service-item" onclick="go('attendantJoinPage')"><div class="service-icon" style="background:#fce4ec;">👩‍⚕️</div><span class="service-name">陪诊师入驻</span></div>
            </div>
            <div class="service-grid" style="padding-top:0;">
                <div class="service-item" onclick="go('bookingPage')"><div class="service-icon" style="background:#e8f5e9;">💊</div><span class="service-name">代取药品</span></div>
                <div class="service-item" onclick="go('bookingPage')"><div class="service-icon" style="background:#f3e5f5;">📋</div><span class="service-name">代取报告</span></div>
                <div class="service-item" onclick="go('bookingPage')"><div class="service-icon" style="background:#fffde7;">🏨</div><span class="service-name">代办出入院</span></div>
                <div class="service-item" onclick="go('bookingPage')"><div class="service-icon" style="background:#e0f7fa;">🩺</div><span class="service-name">带问诊</span></div>
            </div>
            <div class="section-title" onclick="go('attendantListPage')">推荐陪诊师 ›</div>
            <div style="padding:0 16px 12px;background:#fff;">
                <div style="display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;">
                    <div style="min-width:140px;background:#f9f9f9;border-radius:12px;padding:12px;text-align:center;cursor:pointer;" onclick="go('attendantDetailPage')">
                        <div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg, #e8f5e9, #c8e6c9);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:28px;">👩</div>
                        <div style="font-size:13px;font-weight:600;margin-bottom:4px;">王小美</div>
                        <div style="font-size:11px;color:#ff9800;margin-bottom:4px;">⭐ 4.9</div>
                        <div style="font-size:10px;color:#999;">已服务856单</div>
                    </div>
                    <div style="min-width:140px;background:#f9f9f9;border-radius:12px;padding:12px;text-align:center;cursor:pointer;" onclick="go('attendantDetailPage')">
                        <div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg, #fff3e0, #ffe0b2);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:28px;">👨</div>
                        <div style="font-size:13px;font-weight:600;margin-bottom:4px;">李建国</div>
                        <div style="font-size:11px;color:#ff9800;margin-bottom:4px;">⭐ 4.8</div>
                        <div style="font-size:10px;color:#999;">已服务523单</div>
                    </div>
                    <div style="min-width:140px;background:#f9f9f9;border-radius:12px;padding:12px;text-align:center;cursor:pointer;" onclick="go('attendantDetailPage')">
                        <div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg, #e3f2fd, #bbdefb);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:28px;">👩</div>
                        <div style="font-size:13px;font-weight:600;margin-bottom:4px;">张丽华</div>
                        <div style="font-size:11px;color:#ff9800;margin-bottom:4px;">⭐ 4.9</div>
                        <div style="font-size:10px;color:#999;">已服务1203单</div>
                    </div>
                </div>
            </div>
            <div class="section-title" onclick="go('expertListPage')">专家团队 ›</div>
            <div class="expert-card" onclick="go('expertDetailPage')">
                <div class="expert-avatar">👨‍⚕️</div>
                <div>
                    <div class="expert-name">张明华 主任医师</div>
                    <div class="expert-title">北京协和医院 · 心内科</div>
                    <span class="expert-tag">心血管</span><span class="expert-tag">30年经验</span>
                </div>
            </div>
            <div class="section-title">更多服务</div>
            <div class="service-grid">
                <div class="service-item" onclick="go('mallPage')"><div class="service-icon" style="background:#fff3e0;">🛒</div><span class="service-name">商城</span></div>
                <div class="service-item" onclick="go('therapyPage')"><div class="service-icon" style="background:#e3f2fd;">💆</div><span class="service-name">理疗</span></div>
                <div class="service-item" onclick="go('foodPage')"><div class="service-icon" style="background:#ffebee;">🍜</div><span class="service-name">餐饮</span></div>
                <div class="service-item" onclick="go('pricingPage')"><div class="service-icon" style="background:#f3e5f5;">💰</div><span class="service-name">收费</span></div>
            </div>
            <div style="height:20px;"></div>
        </div>
        
        <!-- 位置选择 -->
        <div class="page" id="locationPage">
            <div class="header">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">选择位置</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="order-detail-card">
                    <div style="font-size:13px;color:#999;margin-bottom:8px;">当前定位</div>
                    <div style="display:flex;align-items:center;gap:8px;font-size:15px;">📍 北京市朝阳区</div>
                </div>
                <div class="order-detail-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">热门城市</div>
                    <div style="display:flex;flex-wrap:wrap;gap:10px;">
                        <div style="padding:8px 16px;background:#e8f5e9;color:#4CAF50;border-radius:20px;cursor:pointer;">北京</div>
                        <div style="padding:8px 16px;background:#f5f5f5;border-radius:20px;cursor:pointer;">上海</div>
                        <div style="padding:8px 16px;background:#f5f5f5;border-radius:20px;cursor:pointer;">广州</div>
                        <div style="padding:8px 16px;background:#f5f5f5;border-radius:20px;cursor:pointer;">深圳</div>
                        <div style="padding:8px 16px;background:#f5f5f5;border-radius:20px;cursor:pointer;">成都</div>
                        <div style="padding:8px 16px;background:#f5f5f5;border-radius:20px;cursor:pointer;">杭州</div>
                    </div>
                </div>
                <div class="order-detail-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">常用医院</div>
                    <div style="padding:12px 0;border-bottom:1px solid #f0f0f0;cursor:pointer;">🏥 北京协和医院</div>
                    <div style="padding:12px 0;border-bottom:1px solid #f0f0f0;cursor:pointer;">🏥 北京大学第一医院</div>
                    <div style="padding:12px 0;cursor:pointer;">🏥 中日友好医院</div>
                </div>
            </div>
        </div>
        
        <!-- 陪诊预约 -->
        <div class="page" id="bookingPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">预约陪诊服务</span>
                <div style="width:32px;"></div>
            </div>
            <div class="booking-steps">
                <div class="booking-step active"><div class="booking-step-num">1</div><span class="booking-step-text">选择服务</span></div>
                <div class="booking-step"><div class="booking-step-num">2</div><span class="booking-step-text">填写信息</span></div>
                <div class="booking-step"><div class="booking-step-num">3</div><span class="booking-step-text">支付</span></div>
            </div>
            <div class="form-section">
                <div class="form-label">选择服务类型 <span class="required">*</span></div>
                <div class="service-options">
                    <div class="service-option selected" onclick="selectOpt(this)"><div style="font-size:24px;margin-bottom:4px;">⏰</div><div>半天陪诊</div><div class="service-option-price">¥198</div></div>
                    <div class="service-option" onclick="selectOpt(this)"><div style="font-size:24px;margin-bottom:4px;">🌞</div><div>全天陪诊</div><div class="service-option-price">¥368</div></div>
                    <div class="service-option" onclick="selectOpt(this)"><div style="font-size:24px;margin-bottom:4px;">🌙</div><div>夜间陪诊</div><div class="service-option-price">¥268</div></div>
                </div>
            </div>
            <div class="form-section">
                <div class="form-label">选择日期和时间 <span class="required">*</span></div>
                <input type="date" class="form-input" value="2026-05-20">
                <div style="display:flex;gap:8px;margin-top:10px;">
                    <div class="service-option selected" style="flex:1;" onclick="selectOpt(this)">上午 8:00-12:00</div>
                    <div class="service-option" style="flex:1;" onclick="selectOpt(this)">下午 14:00-18:00</div>
                </div>
            </div>
            <div class="form-section">
                <div class="form-label">选择医院 <span class="required">*</span></div>
                <input type="text" class="form-input" placeholder="请输入医院名称" value="北京协和医院">
            </div>
            <div class="form-section">
                <div class="form-label">患者信息 <span class="required">*</span></div>
                <div class="order-detail-card" style="margin:0;padding:12px;">
                    <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span style="color:#999;">姓名</span><span>王先生</span></div>
                    <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span style="color:#999;">手机</span><span>138****5678</span></div>
                    <div style="display:flex;justify-content:space-between;"><span style="color:#999;">年龄</span><span>65岁</span></div>
                </div>
                <div style="font-size:12px;color:#4CAF50;margin-top:8px;cursor:pointer;" onclick="go('patientInfoPage')">+ 添加新患者</div>
            </div>
            <div class="form-section">
                <div class="form-label">上传病历（选填）</div>
                <div style="background:#f5f5f5;padding:30px;text-align:center;border-radius:8px;border:2px dashed #ddd;cursor:pointer;" onclick="go('uploadRecordPage')">
                    <div style="font-size:32px;margin-bottom:8px;">📁</div>
                    <div style="font-size:13px;color:#666;">点击上传病历图片或PDF</div>
                </div>
            </div>
            <div class="form-section">
                <div class="insurance-box">
                    <div class="insurance-check"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div>
                    <div style="flex:1;"><div style="font-size:14px;font-weight:600;">服务保险</div><div style="font-size:12px;color:#666;">含8元保险费</div></div>
                    <div style="color:#4CAF50;font-weight:600;">¥8</div>
                </div>
            </div>
            <div class="price-box">
                <div class="price-row"><span>半天陪诊服务</span><span>¥198</span></div>
                <div class="price-row"><span>服务保险</span><span>¥8</span></div>
                <div class="price-row total"><span>合计</span><span>¥206</span></div>
            </div>
            <div style="padding:0 16px 20px;">
                <button class="login-btn" onclick="go('attendantSelectPage')">选择陪诊师</button>
            </div>
        </div>
        
        <!-- 患者信息管理 -->
        <div class="page" id="patientInfoPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">患者信息管理</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="order-detail-card">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                        <span style="font-size:15px;font-weight:600;">我的信息</span>
                        <span style="color:#4CAF50;font-size:13px;cursor:pointer;">编辑</span>
                    </div>
                    <div class="order-detail-row"><span class="order-detail-label">姓名</span><span>王先生</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">性别</span><span>男</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">年龄</span><span>65岁</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">手机</span><span>13812345678</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">病史</span><span>高血压</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">过敏史</span><span>无</span></div>
                </div>
                <div class="order-detail-card">
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span style="font-size:15px;font-weight:600;">家属信息</span>
                        <span style="color:#4CAF50;font-size:13px;cursor:pointer;" onclick="go('patientInfoPage')">+ 添加</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 病历上传 -->
        <div class="page" id="uploadRecordPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">上传病历</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="order-detail-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">支持格式</div>
                    <div style="font-size:13px;color:#666;line-height:1.8;">
                        • 图片格式：JPG、PNG<br>
                        • 文档格式：PDF<br>
                        • 单个文件大小不超过10MB
                    </div>
                </div>
                <div class="order-detail-card">
                    <div style="display:flex;gap:12px;flex-wrap:wrap;">
                        <div style="width:80px;height:80px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;">📄</div>
                        <div style="width:80px;height:80px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;">📄</div>
                        <div style="width:80px;height:80px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;border:2px dashed #ccc;cursor:pointer;">+</div>
                    </div>
                </div>
                <div class="order-detail-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">示例病历</div>
                    <div style="padding:12px;background:#f5f5f5;border-radius:8px;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span style="color:#999;">检查报告.jpg</span><span style="color:#4CAF50;">已上传</span></div>
                        <div style="display:flex;justify-content:space-between;"><span style="color:#999;">出院小结.pdf</span><span style="color:#4CAF50;">已上传</span></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 陪诊师选择 -->
        <div class="page" id="attendantSelectPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">选择陪诊师</span>
                <div style="width:32px;"></div>
            </div>
            <div style="padding:12px 16px;background:#fff;border-bottom:1px solid #eee;font-size:13px;color:#666;">已选：半天陪诊 · 5月20日 上午</div>
            <div class="attendant-card selected" onclick="selectAttendant(this)">
                <div class="attendant-avatar">👩</div>
                <div><div class="attendant-name">王小美</div><div class="attendant-rating">⭐ 4.9</div><div class="attendant-exp">从业5年 | 已服务856单</div></div>
            </div>
            <div class="attendant-card" onclick="selectAttendant(this)">
                <div class="attendant-avatar">👨</div>
                <div><div class="attendant-name">李建国</div><div class="attendant-rating">⭐ 4.7</div><div class="attendant-exp">从业3年 | 已服务523单</div></div>
            </div>
            <div class="attendant-card" onclick="selectAttendant(this)">
                <div class="attendant-avatar">👩</div>
                <div><div class="attendant-name">张丽华</div><div class="attendant-rating">⭐ 4.9</div><div class="attendant-exp">从业7年 | 已服务1203单</div></div>
            </div>
            <div style="height:80px;"></div>
            <div class="fixed-bottom">
                <button class="login-btn" onclick="go('paymentPage')">确认并支付 ¥206</button>
            </div>
        </div>
        
        <!-- 陪诊师入驻 -->
        <div class="page" id="attendantJoinPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">陪诊师入驻</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div style="text-align:center;padding:30px;background:#fff;">
                    <div style="font-size:60px;margin-bottom:16px;">��‍⚕️</div>
                    <div style="font-size:18px;font-weight:600;margin-bottom:8px;">成为陪诊师</div>
                    <div style="font-size:13px;color:#666;">轻松兼职，高额回报</div>
                </div>
                <div class="order-detail-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">入驻要求</div>
                    <div style="font-size:13px;color:#666;line-height:1.8;margin-bottom:12px;">
                        • 年满18周岁，身体健康<br>
                        • 具备良好的沟通能力<br>
                        • 有陪诊相关经验优先<br>
                        • 需上传身份证、健康证等资质
                    </div>
                </div>
                <div class="order-detail-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">收益说明</div>
                    <div style="display:flex;justify-content:space-around;text-align:center;">
                        <div><div style="font-size:20px;font-weight:700;color:#4CAF50;">198元+</div><div style="font-size:11px;color:#999;">半天陪诊</div></div>
                        <div><div style="font-size:20px;font-weight:700;color:#ff9800;">368元+</div><div style="font-size:11px;color:#999;">全天陪诊</div></div>
                    </div>
                </div>
                <div style="padding:16px;">
                    <button class="login-btn" style="background:#ff9800;">立即申请入驻</button>
                </div>
            </div>
        </div>
        
        <!-- 支付页面 -->
        <div class="page" id="paymentPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">订单支付</span>
                <div style="width:32px;"></div>
            </div>
            <div class="payment-amount">
                <div class="payment-amount-label">应付金额</div>
                <div class="payment-amount-value">¥206.00</div>
            </div>
            <div class="payment-methods">
                <div style="font-size:13px;color:#999;margin-bottom:12px;">选择支付方式</div>
                <div class="payment-method" onclick="selectPay(this)">
                    <div class="payment-method-icon" style="background:#e8f5e9;">💬</div>
                    <span class="payment-method-name">微信支付</span>
                    <div class="payment-check"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div>
                </div>
                <div class="payment-method" onclick="selectPay(this)">
                    <div class="payment-method-icon" style="background:#e3f2fd;">📱</div>
                    <span class="payment-method-name">支付宝</span>
                    <div class="payment-check" style="background:#fff;border-color:#ddd;"></div>
                </div>
            </div>
            <div style="padding:16px;position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,0.1);">
                <button class="login-btn" onclick="showSuccess()">确认支付</button>
            </div>
        </div>
        
        <!-- 订单列表 -->
        <div class="page" id="orderPage">
            <div class="header header-white">
                <span class="header-title">我的订单</span>
            </div>
            <div class="order-tabs">
                <div class="order-tab active">全部</div>
                <div class="order-tab">待支付</div>
                <div class="order-tab">服务中</div>
                <div class="order-tab">已完成</div>
            </div>
            <div style="padding-bottom:20px;">
                <div class="order-card" onclick="go('orderDetailPage')">
                    <div class="order-header"><span class="order-no">订单号: PT20260520001</span><span class="order-status">服务中</span></div>
                    <div class="order-service">半天陪诊服务</div>
                    <div class="order-info">北京协和医院 · 5月20日 上午</div>
                    <div class="order-info">陪诊师：王小美</div>
                    <div class="order-footer">
                        <div class="order-price">¥206.00</div>
                        <div class="order-actions">
                            <span class="order-btn" onclick="event.stopPropagation();go('chatPage')">联系</span>
                            <span class="order-btn primary">详情</span>
                        </div>
                    </div>
                </div>
                <div class="order-card">
                    <div class="order-header"><span class="order-no">订单号: PT20260518002</span><span class="order-status done">已完成</span></div>
                    <div class="order-service">全天陪诊服务</div>
                    <div class="order-info">北京大学第一医院 · 5月18日</div>
                    <div class="order-footer">
                        <div class="order-price">¥376.00</div>
                        <div class="order-actions">
                            <span class="order-btn">售后</span>
                            <span class="order-btn primary">评价</span>
                        </div>
                    </div>
                </div>
                <div class="order-card">
                    <div class="order-header"><span class="order-no">订单号: PT20260515003</span><span class="order-status pending">待支付</span></div>
                    <div class="order-service">代取药品</div>
                    <div class="order-info">中日友好医院 · 5月15日</div>
                    <div class="order-footer">
                        <div class="order-price">¥68.00</div>
                        <div class="order-actions">
                            <span class="order-btn">取消</span>
                            <span class="order-btn primary">支付</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 订单详情 -->
        <div class="page" id="orderDetailPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">订单详情</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="order-detail-card">
                    <div style="text-align:center;padding-bottom:16px;border-bottom:1px solid #f0f0f0;">
                        <div style="color:#4CAF50;font-size:14px;margin-bottom:8px;">服务中</div>
                        <div style="font-size:12px;color:#666;">陪诊师正在前往医院</div>
                    </div>
                    <div style="display:flex;align-items:center;padding:16px 0;gap:12px;">
                        <div style="width:50px;height:50px;border-radius:50%;background:#e8f5e9;display:flex;align-items:center;justify-content:center;font-size:24px;">👩</div>
                        <div style="flex:1;"><div style="font-size:15px;font-weight:600;">王小美</div><div style="font-size:12px;color:#666;">182****1234</div></div>
                        <div style="display:flex;gap:8px;">
                            <div style="width:36px;height:36px;border-radius:50%;background:#e8f5e9;display:flex;align-items:center;justify-content:center;cursor:pointer;" onclick="go('chatPage')">💬</div>
                            <div style="width:36px;height:36px;border-radius:50%;background:#e3f2fd;display:flex;align-items:center;justify-content:center;cursor:pointer;">📞</div>
                        </div>
                    </div>
                </div>
                <div class="order-detail-card">
                    <div class="order-detail-title">服务信息</div>
                    <div class="order-detail-row"><span class="order-detail-label">服务类型</span><span>半天陪诊</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">预约医院</span><span>北京协和医院</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">预约时间</span><span>2026-05-20 上午</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">患者姓名</span><span>王先生</span></div>
                </div>
                <div class="order-detail-card">
                    <div class="order-detail-title">支付信息</div>
                    <div class="order-detail-row"><span class="order-detail-label">订单编号</span><span>PT20260520001</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">服务费用</span><span>¥198.00</span></div>
                    <div class="order-detail-row"><span class="order-detail-label">保险费用</span><span>¥8.00</span></div>
                    <div class="order-detail-row"><span class="order-detail-label" style="font-weight:600;">实付金额</span><span style="color:#ff4d4f;font-weight:600;">¥206.00</span></div>
                </div>
            </div>
        </div>
        
        <!-- 个人中心 -->
        <div class="page" id="profilePage">
            <div class="profile-header">
                <div class="profile-info">
                    <div class="profile-avatar">👤</div>
                    <div><div class="profile-name">王先生</div><div class="profile-phone">138****5678</div></div>
                </div>
                <div class="profile-stats">
                    <div class="profile-stat" onclick="go('orderPage')"><div class="profile-stat-num">12</div><div class="profile-stat-text">全部订单</div></div>
<div class="profile-stat"><div class="profile-stat-num">8</div><div class="profile-stat-text">我的收藏</div></div>
                    <div class="profile-stat" onclick="go('distribPage')"><div class="profile-stat-num">¥256</div><div class="profile-stat-text">我的佣金</div></div>
                </div>
            </div>
            <div class="profile-menu">
                <div class="profile-menu-item" onclick="go('orderPage')"><div class="profile-menu-icon" style="background:#e3f2fd;">📋</div><span class="profile-menu-text">我的订单</span><span class="profile-menu-arrow">›</span></div>
                <div class="profile-menu-item" onclick="go('medicalRecordPage')"><div class="profile-menu-icon" style="background:#fff3e0;">📁</div><span class="profile-menu-text">我的病历</span><span class="profile-menu-arrow">›</span></div>
                <div class="profile-menu-item" onclick="go('addressPage')"><div class="profile-menu-icon" style="background:#e8f5e9;">📍</div><span class="profile-menu-text">地址管理</span><span class="profile-menu-arrow">›</span></div>
            </div>
            <div class="profile-menu">
                <div class="profile-menu-item" onclick="go('distribPage')"><div class="profile-menu-icon" style="background:#fce4ec;">💰</div><span class="profile-menu-text">二级分销</span><span class="profile-menu-arrow">›</span></div>
                <div class="profile-menu-item" onclick="go('couponPage')"><div class="profile-menu-icon" style="background:#fffde7;">🎫</div><span class="profile-menu-text">优惠券</span><span class="profile-menu-arrow">›</span></div>
                <div class="profile-menu-item" onclick="go('invoicePage')"><div class="profile-menu-icon" style="background:#e0f7fa;">🧾</div><span class="profile-menu-text">发票申请</span><span class="profile-menu-arrow">›</span></div>
            </div>
            <div class="profile-menu">
                <div class="profile-menu-item" onclick="go('chatPage')"><div class="profile-menu-icon" style="background:#f3e5f5;">💬</div><span class="profile-menu-text">在线客服</span><span class="profile-menu-arrow">›</span></div>
                <div class="profile-menu-item"><div class="profile-menu-icon" style="background:#e8eaf6;">📞</div><span class="profile-menu-text">电话联系</span><span style="color:#4CAF50;font-size:13px;margin-right:8px;">400-888-8888</span><span class="profile-menu-arrow">›</span></div>
                <div class="profile-menu-item" onclick="go('helpPage')"><div class="profile-menu-icon" style="background:#efebe9;">❓</div><span class="profile-menu-text">客服与帮助</span><span class="profile-menu-arrow">›</span></div>
                <div class="profile-menu-item"><div class="profile-menu-icon" style="background:#f5f5f5;">ℹ️</div><span class="profile-menu-text">关于我们</span><span class="profile-menu-arrow">›</span></div>
                <div class="profile-menu-item" onclick="go('settingPage')"><div class="profile-menu-icon" style="background:#f5f5f5;">⚙️</div><span class="profile-menu-text">设置</span><span class="profile-menu-arrow">›</span></div>
            </div>
        </div>
        
        <!-- 病历管理 -->
        <div class="page" id="medicalRecordPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">我的病历</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="medical-record-card">
                    <div class="medical-record-header"><span class="medical-record-name">王先生</span><span class="medical-record-date">2026-05-18</span></div>
                    <div class="medical-record-imgs">
                        <div class="medical-record-img">📄</div>
                        <div class="medical-record-img">📄</div>
                    </div>
                </div>
                <div class="medical-record-card">
                    <div class="medical-record-header"><span class="medical-record-name">张女士（家属）</span><span class="medical-record-date">2026-04-15</span></div>
                    <div class="medical-record-imgs">
                        <div class="medical-record-img">📄</div>
                    </div>
                </div>
                <div style="padding:16px;">
                    <button class="login-btn" style="background:#fff;color:#4CAF50;border:1px solid #4CAF50;">+ 添加病历</button>
                </div>
            </div>
        </div>
        
        <!-- 地址管理 -->
        <div class="page" id="addressPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">地址管理</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="address-card">
                    <div class="address-info">
                        <div><span class="address-tag default">默认</span><span style="font-size:15px;font-weight:600;">王先生</span><span style="font-size:14px;color:#666;margin-left:8px;">138****5678</span></div>
                        <div class="address-detail">北京市朝阳区建国路88号北京协和医院</div>
                    </div>
                </div>
                <div class="address-card">
                    <div class="address-info">
                        <div><span class="address-tag">家</span><span style="font-size:15px;font-weight:600;">王先生</span><span style="font-size:14px;color:#666;margin-left:8px;">138****5678</span></div>
                        <div class="address-detail">北京市海淀区中关村大街1号</div>
                    </div>
                </div>
                <div style="padding:16px;">
                    <button class="login-btn" style="background:#fff;color:#4CAF50;border:1px solid #4CAF50;">+ 添加地址</button>
                </div>
            </div>
        </div>
        
        <!-- 二级分销 -->
        <div class="page" id="distribPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">二级分销</span>
                <div style="width:32px;"></div>
            </div>
            <div class="distrib-banner">
                <div class="distrib-amount">¥256.80</div>
                <div class="distrib-label">可提现佣金</div>
            </div>
            <div class="distrib-actions">
                <div class="distrib-btn primary" onclick="showWithdrawModal()">提现</div>
                <div class="distrib-btn secondary">推广海报</div>
            </div>
            <div class="distrib-card">
                <div class="distrib-card-title">分销统计</div>
                <div style="display:flex;justify-content:space-around;text-align:center;">
                    <div style="cursor:pointer;" onclick="go('level1UsersPage')"><div style="font-size:20px;font-weight:600;color:#4CAF50;">8</div><div style="font-size:12px;color:#999;">一级分销</div></div>
                    <div style="cursor:pointer;" onclick="go('level2UsersPage')"><div style="font-size:20px;font-weight:600;color:#ff9800;">7</div><div style="font-size:12px;color:#999;">二级分销</div></div>
                    <div><div style="font-size:20px;font-weight:600;color:#2196F3;">32</div><div style="font-size:12px;color:#999;">订单笔数</div></div>
                </div>
            </div>
            <div class="distrib-card">
                <div style="display:flex;justify-content:space-around;text-align:center;">
                    <div><div style="font-size:20px;font-weight:600;color:#4CAF50;">¥1,256</div><div style="font-size:12px;color:#999;">累计佣金</div></div>
                    <div><div style="font-size:20px;font-weight:600;color:#ff9800;">¥999.20</div><div style="font-size:12px;color:#999;">已提现</div></div>
                    <div><div style="font-size:20px;font-weight:600;color:#ff4d4f;">¥256.80</div><div style="font-size:12px;color:#999;">可提现</div></div>
                </div>
            </div>
            <div class="distrib-card">
                <div class="distrib-card-title">推广方式</div>
                <div style="display:flex;gap:12px;">
                    <div style="flex:1;padding:16px;background:#f5f5f5;border-radius:8px;text-align:center;cursor:pointer;"><div style="font-size:28px;margin-bottom:8px;">📱</div><div style="font-size:13px;">分享链接</div></div>
                    <div style="flex:1;padding:16px;background:#f5f5f5;border-radius:8px;text-align:center;cursor:pointer;"><div style="font-size:28px;margin-bottom:8px;">🖼️</div><div style="font-size:13px;">生成海报</div></div>
                    <div style="flex:1;padding:16px;background:#f5f5f5;border-radius:8px;text-align:center;cursor:pointer;"><div style="font-size:28px;margin-bottom:8px;">💬</div><div style="font-size:13px;">分享海报</div></div>
                </div>
            </div>
            <div class="distrib-card">
                <div class="distrib-card-title">佣金明细</div>
                <div style="display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                    <div><div style="font-size:14px;">下级用户消费返佣</div><div style="font-size:12px;color:#999;">5月18日 14:32</div></div>
                    <div style="color:#4CAF50;font-weight:600;">+¥12.80</div>
                </div>
                <div style="display:flex;justify-content:space-between;padding:12px 0;">
                    <div><div style="font-size:14px;">佣金提现</div><div style="font-size:12px;color:#999;">5月15日 09:00</div></div>
                    <div style="color:#ff4d4f;font-weight:600;">-¥100.00</div>
                </div>
            </div>
        </div>
        
        <!-- 优惠券 -->
        <div class="page" id="couponPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">优惠券</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="coupon-card">
                    <div class="coupon-left"><div class="coupon-value">¥20</div><div class="coupon-limit">满100可用</div></div>
                    <div class="coupon-right"><div class="coupon-name">新人专享券</div><div class="coupon-desc">限新用户首次使用</div><div class="coupon-time">有效期至 2026-06-30</div></div>
                </div>
                <div class="coupon-card" style="background:linear-gradient(135deg, #ff9800, #f57c00);">
                    <div class="coupon-left"><div class="coupon-value">¥10</div><div class="coupon-limit">无门槛</div></div>
                    <div class="coupon-right"><div class="coupon-name">限时折扣券</div><div class="coupon-desc">全品类通用</div><div class="coupon-time">有效期至 2026-05-31</div></div>
                </div>
                <div class="coupon-card" style="opacity:0.6;">
                    <div class="coupon-left"><div class="coupon-value">¥50</div><div class="coupon-limit">满300可用</div></div>
                    <div class="coupon-right"><div class="coupon-name">会员专享券</div><div class="coupon-desc">已使用</div><div class="coupon-time">有效期至 2026-05-15</div></div>
                </div>
            </div>
        </div>
        
        <!-- 发票申请 -->
        <div class="page" id="invoicePage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">发票申请</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="order-detail-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">发票类型</div>
                    <div class="invoice-type">
                        <div class="invoice-type-item selected">电子发票</div>
                        <div class="invoice-type-item">纸质发票</div>
                    </div>
                </div>
                <div class="order-detail-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">发票信息</div>
                    <div class="form-input-row"><div class="form-input-label">发票抬头</div><input type="text" class="form-input" placeholder="请输入单位名称" value="北京某某科技有限公司"></div>
                    <div class="form-input-row"><div class="form-input-label">税号</div><input type="text" class="form-input" placeholder="请输入税号" value="91110108MA01XXXXX"></div>
                    <div class="form-input-row"><div class="form-input-label">邮箱</div><input type="email" class="form-input" placeholder="用于接收电子发票" value="test@example.com"></div>
                </div>
                <div class="order-detail-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">选择订单</div>
                    <div style="display:flex;align-items:center;padding:12px;background:#f5f5f5;border-radius:8px;">
                        <div style="width:20px;height:20px;border-radius:50%;background:#4CAF50;margin-right:8px;display:flex;align-items:center;justify-content:center;"><svg width="12" height="12" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="#fff"/></svg></div>
                        <div style="flex:1;"><div style="font-size:13px;">半天陪诊服务</div><div style="font-size:12px;color:#999;">订单号: PT20260518002</div></div>
                        <div style="color:#ff4d4f;font-weight:600;">¥206</div>
                    </div>
                </div>
                <div style="padding:16px;">
                    <button class="login-btn">提交申请</button>
                </div>
            </div>
        </div>
        
        <!-- 帮助中心 -->
        <div class="page" id="helpPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">客服与帮助</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="help-item">
                    <div class="help-item-header" onclick="toggleHelp(this)"><span>如何预约陪诊服务？</span><span>›</span></div>
                    <div class="help-item-content">选择您需要的服务类型（半天/全天/夜间），填写预约信息和患者信息，选择陪诊师后完成支付即可。陪诊师将在预约时间前与您联系。</div>
                </div>
                <div class="help-item">
                    <div class="help-item-header" onclick="toggleHelp(this)"><span>陪诊服务包含哪些内容？</span><span>›</span></div>
                    <div class="help-item-content">陪诊服务包括：全程陪同就医、挂号、取药、取报告、协助医患沟通等服务。具体服务内容根据选择的服务类型而定。</div>
                </div>
                <div class="help-item">
                    <div class="help-item-header" onclick="toggleHelp(this)"><span>如何取消订单？</span><span>›</span></div>
                    <div class="help-item-content">在服务开始前，您可以进入订单详情页点击"取消订单"按钮。取消规则：服务开始前24小时可全额退款，24小时内将收取一定手续费。</div>
                </div>
                <div class="help-item">
                    <div class="help-item-header" onclick="toggleHelp(this)"><span>如何申请退款？</span><span>›</span></div>
                    <div class="help-item-content">服务完成后如有任何问题，您可以在订单详情页点击"申请售后"，我们的客服人员将在24小时内与您联系处理。</div>
                </div>
            </div>
        </div>
        
        <!-- 设置 -->
        <div class="page" id="settingPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">设置</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div style="background:#fff;">
                    <div class="setting-item"><span class="setting-item-text">账号设置</span><span class="setting-item-arrow">›</span></div>
                    <div class="setting-item"><span class="setting-item-text">消息通知</span><span class="setting-item-arrow">›</span></div>
                    <div class="setting-item"><span class="setting-item-text">隐私设置</span><span class="setting-item-arrow">›</span></div>
                    <div class="setting-item"><span class="setting-item-text">清除缓存</span><span class="setting-item-arrow">›</span></div>
                    <div class="setting-item"><span class="setting-item-text">版本更新</span><span style="color:#999;font-size:13px;margin-right:8px;">v1.0.0</span><span class="setting-item-arrow">›</span></div>
                </div>
                <div style="padding:16px;">
                    <button class="login-btn" style="background:#fff;color:#ff4d4f;border:1px solid #ff4d4f;">退出登录</button>
                </div>
            </div>
        </div>
        
        <!-- 专家列表 -->
        <div class="page" id="expertListPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">专家团队</span>
                <div style="width:32px;"></div>
            </div>
            <div style="padding-bottom:20px;">
                <div class="expert-card" onclick="go('expertDetailPage')">
                    <div class="expert-avatar">👨‍⚕️</div>
                    <div><div class="expert-name">张明华 主任医师</div><div class="expert-title">北京协和医院 · 心内科</div><span class="expert-tag">心血管</span><span class="expert-tag">30年经验</span></div>
                </div>
                <div class="expert-card" onclick="go('expertDetailPage')">
                    <div class="expert-avatar">👩‍⚕️</div>
                    <div><div class="expert-name">李秀英 副主任医师</div><div class="expert-title">北京大学第一医院 · 神经内科</div><span class="expert-tag">神经内科</span><span class="expert-tag">25年经验</span></div>
                </div>
                <div class="expert-card" onclick="go('expertDetailPage')">
                    <div class="expert-avatar">👨‍⚕️</div>
                    <div><div class="expert-name">王建国 主任医师</div><div class="expert-title">中日友好医院 · 消化内科</div><span class="expert-tag">消化科</span><span class="expert-tag">28年经验</span></div>
                </div>
            </div>
        </div>
        
        <!-- 专家详情 -->
        <div class="page" id="expertDetailPage">
            <div class="expert-header">
                <div class="header-back" onclick="back()" style="position:absolute;top:12px;left:16px;"><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>
                <div class="expert-header-avatar">👨‍⚕️</div>
                <div class="expert-header-name">张明华 主任医师</div>
                <div class="expert-header-title">北京协和医院 · 心内科</div>
                <div class="expert-header-tags"><span>⭐ 4.9分</span><span>|</span><span>30年经验</span><span>|</span><span>2000+服务</span></div>
            </div>
            <div class="content">
                <div class="distrib-card">
                    <div class="distrib-card-title">擅长领域</div>
                    <div style="display:flex;flex-wrap:wrap;gap:8px;">
                        <span style="padding:6px 12px;background:#e8f5e9;color:#4CAF50;border-radius:16px;font-size:13px;">心血管疾病</span>
                        <span style="padding:6px 12px;background:#e8f5e9;color:#4CAF50;border-radius:16px;font-size:13px;">高血压</span>
                        <span style="padding:6px 12px;background:#e8f5e9;color:#4CAF50;border-radius:16px;font-size:13px;">冠心病</span>
                        <span style="padding:6px 12px;background:#e8f5e9;color:#4CAF50;border-radius:16px;font-size:13px;">心律失常</span>
                    </div>
                </div>
                <div class="distrib-card">
                    <div class="distrib-card-title">个人简介</div>
                    <div style="font-size:14px;color:#666;line-height:1.6;">从事心血管内科临床工作30年，擅长心血管疾病的诊断与治疗，对高血压、冠心病、心律失常等疾病有丰富的临床经验。发表学术论文20余篇，获省部级科技进步奖3项。</div>
                </div>
                <div class="distrib-card">
                    <div class="distrib-card-title">用户评价</div>
                    <div style="padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span style="font-size:13px;">李先生</span><span style="color:#ff9800;">★★★★★</span></div>
                        <div style="font-size:13px;color:#666;">非常专业，耐心解答问题。</div>
                    </div>
                </div>
            </div>
            <div style="padding:16px;position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,0.1);">
                <div class="login-btn" onclick="go('bookingPage')">立即预约</div>
            </div>
        </div>
        
        <!-- 商城首页 -->
        <div class="page" id="mallPage">
            <div class="header header-white">
                <div class="header-back white" onclick="go('homePage')"><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>
                <span class="header-title">健康商城</span>
                <div style="width:32px;"></div>
            </div>
            <div class="mall-header">
                <div class="mall-search"><span>🔍</span><input type="text" placeholder="搜索商品"></div>
                <div style="padding:8px 12px;background:#4CAF50;color:#fff;border-radius:16px;font-size:13px;cursor:pointer;" onclick="go('cartPage')">购物车</div>
            </div>
            <div class="mall-tabs">
                <div class="mall-tab active">推荐</div>
                <div class="mall-tab">营养保健</div>
                <div class="mall-tab">医疗器械</div>
                <div class="mall-tab">护理用品</div>
            </div>
            <div class="product-grid">
                <div class="product-card" onclick="go('productDetailPage')"><div class="product-img">💊</div><div class="product-info"><div class="product-name">汤臣倍健蛋白粉 增强免疫力</div><div class="product-price">¥198</div></div></div>
                <div class="product-card" onclick="go('productDetailPage')"><div class="product-img">🩺</div><div class="product-info"><div class="product-name">欧姆龙电子血压计</div><div class="product-price">¥328</div></div></div>
                <div class="product-card" onclick="go('productDetailPage')"><div class="product-img">😷</div><div class="product-info"><div class="product-name">医用外科口罩 50只装</div><div class="product-price">¥29.9</div></div></div>
                <div class="product-card" onclick="go('productDetailPage')"><div class="product-img">🧴</div><div class="product-info"><div class="product-name">免洗消毒凝胶 500ml</div><div class="product-price">¥39</div></div></div>
            </div>
            <div style="height:20px;"></div>
        </div>
        
        <!-- 商品详情 -->
        <div class="page" id="productDetailPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">商品详情</span>
                <div style="width:32px;"></div>
            </div>
            <div class="product-detail-img">💊</div>
            <div class="product-detail-info">
                <div class="product-detail-price">¥198</div>
                <div class="product-detail-name">汤臣倍健蛋白粉 增强免疫力</div>
                <div class="product-detail-desc">优质蛋白来源，有助于增强免疫力，改善体质。适合老年人、术后康复人群使用。</div>
            </div>
            <div class="order-detail-card" style="margin:12px 16px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;">商品评价</div>
                <div style="padding:12px 0;border-bottom:1px solid #f0f0f0;">
                    <div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span>张***</span><span style="color:#ff9800;">★★★★★</span></div>
                    <div style="font-size:13px;color:#666;">质量很好，物流很快，下次还会购买。</div>
                </div>
            </div>
            <div style="height:80px;"></div>
            <div style="padding:16px;position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,0.1);display:flex;gap:12px;">
                <div style="flex:1;padding:14px;border:1px solid #ddd;border-radius:24px;text-align:center;cursor:pointer;">加入购物车</div>
                <div style="flex:1;padding:14px;background:#4CAF50;color:#fff;border-radius:24px;text-align:center;cursor:pointer;" onclick="go('cartPage')">立即购买</div>
            </div>
        </div>
        
        <!-- 购物车 -->
        <div class="page" id="cartPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">购物车</span>
                <div style="width:32px;"></div>
            </div>
            <div style="padding-bottom:100px;">
                <div class="cart-item">
                    <div class="cart-check"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div>
                    <div class="cart-img">💊</div>
                    <div class="cart-info"><div class="cart-name">汤臣倍健蛋白粉</div><div class="cart-price">¥198</div><div class="cart-num"><span class="cart-num-btn">-</span><span class="cart-num-value">1</span><span class="cart-num-btn">+</span></div></div>
                </div>
                <div class="cart-item">
                    <div class="cart-check"><svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div>
                    <div class="cart-img">🩺</div>
                    <div class="cart-info"><div class="cart-name">欧姆龙电子血压计</div><div class="cart-price">¥328</div><div class="cart-num"><span class="cart-num-btn">-</span><span class="cart-num-value">1</span><span class="cart-num-btn">+</span></div></div>
                </div>
            </div>
            <div class="cart-footer">
                <div class="cart-total">合计：<span class="cart-total-price">¥526</span></div>
                <div class="login-btn" style="padding:10px 24px;margin:0;" onclick="go('mallAddressPage')">去结算</div>
            </div>
        </div>
        
        <!-- 商城收货地址 -->
        <div class="page" id="mallAddressPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">选择收货地址</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="address-card" style="border:2px solid #4CAF50;">
                    <div class="address-info">
                        <div><span style="font-size:15px;font-weight:600;">王先生</span><span style="font-size:14px;color:#666;margin-left:8px;">138****5678</span></div>
                        <div class="address-detail">北京市朝阳区建国路88号</div>
                    </div>
                </div>
                <div class="address-card">
                    <div class="address-info">
                        <div><span style="font-size:15px;font-weight:600;">王先生</span><span style="font-size:14px;color:#666;margin-left:8px;">138****5678</span></div>
                        <div class="address-detail">北京市海淀区中关村大街1号</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 餐饮首页 -->
        <div class="page" id="foodPage">
            <div class="header header-white">
                <div class="header-back white" onclick="go('homePage')"><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>
                <span class="header-title">餐饮服务</span>
                <div style="width:32px;"></div>
            </div>
            <div class="food-banner" onclick="go('scanPayPage')">扫码支付享8折优惠</div>
            <div class="food-actions">
                <div class="food-action" style="background:#ff9800;" onclick="go('scanOrderPage')">扫码点餐</div>
                <div class="food-action" style="background:#4CAF50;" onclick="go('storeValuePage')">储值有礼</div>
                <div class="food-action" style="background:#2196F3;">外卖配送</div>
            </div>
            <div class="section-title" style="margin-top:12px;">附近商家</div>
            <div class="restaurant-card" onclick="go('restaurantPage')"><div class="restaurant-img">🍜</div><div><div class="restaurant-name">健康轻食餐厅</div><div class="restaurant-meta">⭐4.8 | 月销1.2k</div><span class="restaurant-tag">健康餐</span><span class="restaurant-tag">低脂</span></div></div>
            <div class="restaurant-card" onclick="go('restaurantPage')"><div class="restaurant-img">🥗</div><div><div class="restaurant-name">养生粥铺</div><div class="restaurant-meta">⭐4.6 | 月销800</div><span class="restaurant-tag">养生</span><span class="restaurant-tag">滋补</span></div></div>
        </div>
        
        <!-- 陪诊师列表 -->
        <div class="page" id="attendantListPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">推荐陪诊师</span>
                <div style="width:32px;"></div>
            </div>
            <div style="padding-bottom:20px;">
                <div class="attendant-card selected" onclick="go('attendantDetailPage')">
                    <div class="attendant-avatar">👩</div>
                    <div><div class="attendant-name">王小美</div><div class="attendant-rating">⭐ 4.9</div><div class="attendant-exp">从业5年 | 已服务856单 | 好评率98%</div></div>
                </div>
                <div class="attendant-card" onclick="go('attendantDetailPage')">
                    <div class="attendant-avatar">👨</div>
                    <div><div class="attendant-name">李建国</div><div class="attendant-rating">⭐ 4.8</div><div class="attendant-exp">从业3年 | 已服务523单 | 好评率95%</div></div>
                </div>
                <div class="attendant-card" onclick="go('attendantDetailPage')">
                    <div class="attendant-avatar">👩</div>
                    <div><div class="attendant-name">张丽华</div><div class="attendant-rating">⭐ 4.9</div><div class="attendant-exp">从业7年 | 已服务1203单 | 好评率99%</div></div>
                </div>
                <div class="attendant-card" onclick="go('attendantDetailPage')">
                    <div class="attendant-avatar">👨</div>
                    <div><div class="attendant-name">赵强</div><div class="attendant-rating">⭐ 4.7</div><div class="attendant-exp">从业4年 | 已服务680单 | 好评率96%</div></div>
                </div>
            </div>
        </div>
        
        <!-- 陪诊师详情 -->
        <div class="page" id="attendantDetailPage">
            <div class="expert-header">
                <div class="header-back" onclick="back()" style="position:absolute;top:12px;left:16px;"><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>
                <div class="expert-header-avatar">👩</div>
                <div class="expert-header-name">王小美</div>
                <div class="expert-header-title">金牌陪诊师</div>
                <div class="expert-header-tags"><span>⭐ 4.9分</span><span>|</span><span>5年经验</span><span>|</span><span>856单</span></div>
            </div>
            <div class="content">
                <div class="distrib-card">
                    <div class="distrib-card-title">服务优势</div>
                    <div style="display:flex;flex-wrap:wrap;gap:8px;">
                        <span style="padding:6px 12px;background:#e8f5e9;color:#4CAF50;border-radius:16px;font-size:13px;">准时守约</span>
                        <span style="padding:6px 12px;background:#e8f5e9;color:#4CAF50;border-radius:16px;font-size:13px;">服务专业</span>
                        <span style="padding:6px 12px;background:#e8f5e9;color:#4CAF50;border-radius:16px;font-size:13px;">耐心细致</span>
                        <span style="padding:6px 12px;background:#e8f5e9;color:#4CAF50;border-radius:16px;font-size:13px;">好评如潮</span>
                    </div>
                </div>
                <div class="distrib-card">
                    <div class="distrib-card-title">个人简介</div>
                    <div style="font-size:14px;color:#666;line-height:1.6;">从事陪诊服务5年，熟悉北京各大三甲医院就医流程。服务过上千位患者，以耐心、细心、专业著称。擅长与老年患者沟通，帮助无数家庭解决就医难题。</div>
                </div>
                <div class="distrib-card">
                    <div class="distrib-card-title">擅长领域</div>
                    <div style="display:flex;flex-wrap:wrap;gap:8px;">
                        <span style="padding:6px 12px;background:#fff3e0;color:#ff9800;border-radius:16px;font-size:13px;">心内科</span>
                        <span style="padding:6px 12px;background:#fff3e0;color:#ff9800;border-radius:16px;font-size:13px;">神经内科</span>
                        <span style="padding:6px 12px;background:#fff3e0;color:#ff9800;border-radius:16px;font-size:13px;">骨科</span>
                        <span style="padding:6px 12px;background:#fff3e0;color:#ff9800;border-radius:16px;font-size:13px;">肿瘤科</span>
                    </div>
                </div>
                <div class="distrib-card">
                    <div class="distrib-card-title">用户评价</div>
                    <div style="padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span style="font-size:13px;">张先生</span><span style="color:#ff9800;">★★★★★</span></div>
                        <div style="font-size:13px;color:#666;">非常专业，整个就医过程都很顺利，陪诊师很细心。</div>
</div>
                    <div style="padding:12px 0;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span style="font-size:13px;">李女士</span><span style="color:#ff9800;">★★★★★</span></div>
                        <div style="font-size:13px;color:#666;">陪诊师很有耐心，帮了大忙，强烈推荐！</div>
                    </div>
                </div>
            </div>
            <div style="padding:16px;position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,0.1);display:flex;gap:12px;">
                <div style="flex:1;padding:14px;border:1px solid #ddd;border-radius:24px;text-align:center;cursor:pointer;" onclick="go('chatPage')">💬 咨询</div>
                <div style="flex:1;padding:14px;background:#4CAF50;color:#fff;border-radius:24px;text-align:center;cursor:pointer;" onclick="go('bookingPage')">立即预约</div>
            </div>
        </div>
        
        <!-- 商家详情 -->
        <div class="page" id="restaurantPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">商家详情</span>
                <div style="width:32px;"></div>
            </div>
            <div class="store-header">
                <div class="store-logo">🍜</div>
                <div class="store-name">健康轻食餐厅</div>
                <div class="store-info">⭐4.8 | 约30分钟 | 配送费¥5</div>
                <div class="store-tags"><span class="store-tag">健康餐</span><span class="store-tag">低脂</span><span class="store-tag">减脂餐</span></div>
            </div>
            <div class="menu-tabs">
                <div class="menu-tab active">点餐</div>
                <div class="menu-tab">评价</div>
                <div class="menu-tab">商家</div>
            </div>
            <div class="menu-item"><div class="menu-img">🥗</div><div class="menu-info"><div class="menu-name">藜麦沙拉套餐</div><div class="menu-desc">藜麦、蔬菜、鸡胸肉</div><div class="menu-bottom"><span class="menu-price">¥38</span><span class="menu-add">+</span></div></div></div>
            <div class="menu-item"><div class="menu-img">🍲</div><div class="menu-info"><div class="menu-name">养生粥套餐</div><div class="menu-desc">小米粥、营养配菜</div><div class="menu-bottom"><span class="menu-price">¥28</span><span class="menu-add">+</span></div></div></div>
            <div class="menu-item"><div class="menu-img">🥤</div><div class="menu-info"><div class="menu-name">鲜榨果汁</div><div class="menu-desc">时令水果鲜榨</div><div class="menu-bottom"><span class="menu-price">¥18</span><span class="menu-add">+</span></div></div></div>
        </div>
        
        <!-- 扫码支付 -->
        <div class="page" id="scanPayPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">扫码支付</span>
                <div style="width:32px;"></div>
            </div>
            <div class="scan-banner">
                <div style="font-size:16px;">扫描餐桌二维码</div>
                <div class="scan-qr">📱</div>
                <div class="scan-tips">请扫描餐桌上的二维码进行支付<br>支付完成后可享受8折优惠</div>
            </div>
            <div style="padding:16px;text-align:center;">
                <div style="font-size:14px;color:#666;margin-bottom:16px;">如有疑问请联系服务员</div>
                <div style="padding:12px;background:#e8f5e9;border-radius:8px;display:inline-block;color:#4CAF50;font-size:13px;cursor:pointer;" onclick="go('chatPage')">💬 联系客服</div>
            </div>
        </div>
        
        <!-- 扫码点餐 -->
        <div class="page" id="scanOrderPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">扫码点餐</span>
                <div style="width:32px;"></div>
            </div>
            <div class="scan-banner">
                <div style="font-size:16px;">扫描餐桌二维码开始点餐</div>
                <div class="scan-qr">📱</div>
                <div class="scan-tips">将手机摄像头对准餐桌上的二维码<br>即可快速开始点餐</div>
            </div>
            <div style="padding:16px;text-align:center;">
                <div style="font-size:14px;color:#666;">或选择手动输入桌号</div>
                <input type="text" class="form-input" placeholder="请输入桌号" style="margin-top:12px;">
                <button class="login-btn" style="margin-top:12px;">确认</button>
            </div>
        </div>
        
        <!-- 储值 -->
        <div class="page" id="storeValuePage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">储值有礼</span>
                <div style="width:32px;"></div>
            </div>
            <div class="store-value-amount">
                <div class="store-value-balance">当前余额</div>
                <div class="store-value-num">¥0.00</div>
            </div>
            <div class="store-value-packages">
                <div style="font-size:14px;font-weight:600;margin-bottom:12px;">选择储值金额</div>
                <div class="store-value-package selected" onclick="selectPackage(this)">
                    <div><span class="store-value-package-amount">¥100</span><span class="store-value-package-gift">送¥10</span></div>
                    <div style="font-size:11px;color:#999;">实付¥100</div>
                </div>
                <div class="store-value-package" onclick="selectPackage(this)">
                    <div><span class="store-value-package-amount">¥200</span><span class="store-value-package-gift">送¥30 <span class="store-value-package-tag">推荐</span></span></div>
                    <div style="font-size:11px;color:#999;">实付¥200</div>
                </div>
                <div class="store-value-package" onclick="selectPackage(this)">
                    <div><span class="store-value-package-amount">¥500</span><span class="store-value-package-gift">送¥100</span></div>
                    <div style="font-size:11px;color:#999;">实付¥500</div>
                </div>
            </div>
            <div style="padding:16px;position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,0.1);">
                <button class="login-btn" onclick="go('paymentPage')">立即储值</button>
            </div>
        </div>
        
        <!-- 理疗首页 -->
        <div class="page" id="therapyPage">
            <div class="header" style="background:#2196F3;">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">大健康理疗</span>
                <div style="width:32px;"></div>
            </div>
            <div class="therapy-header" style="background:#2196F3;">
                <div class="therapy-banner">呵护健康 从理疗开始</div>
            </div>
            <div class="therapy-grid">
                <div class="therapy-card" onclick="go('therapyBookPage')"><div class="therapy-icon">💆</div><div class="therapy-name">推拿按摩</div><div class="therapy-price">¥128起</div></div>
                <div class="therapy-card" onclick="go('therapyBookPage')"><div class="therapy-icon">🧘</div><div class="therapy-name">中医理疗</div><div class="therapy-price">¥158起</div></div>
                <div class="therapy-card" onclick="go('therapyBookPage')"><div class="therapy-icon">🦶</div><div class="therapy-name">足疗SPA</div><div class="therapy-price">¥98起</div></div>
                <div class="therapy-card" onclick="go('therapyBookPage')"><div class="therapy-icon">🧴</div><div class="therapy-name">美容护理</div><div class="therapy-price">¥168起</div></div>
            </div>
            <div class="section-title" style="margin-top:0;">入驻商家</div>
            <div class="restaurant-card"><div class="restaurant-img">🏥</div><div><div class="restaurant-name">同仁堂中医馆</div><div class="restaurant-meta">⭐4.9 | 营业中 | 距您1.2km</div><span class="restaurant-tag" style="background:#e3f2fd;color:#1976D2;">官方认证</span></div></div>
        </div>
        
        <!-- 理疗预约 -->
        <div class="page" id="therapyBookPage">
            <div class="header" style="background:#2196F3;">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">预约理疗服务</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="order-detail-card">
                    <div style="display:flex;gap:12px;margin-bottom:16px;">
                        <div style="width:80px;height:80px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:36px;">💆</div>
                        <div><div style="font-size:15px;font-weight:600;margin-bottom:4px;">推拿按摩</div><div style="font-size:13px;color:#4CAF50;">¥128/次</div><div style="font-size:12px;color:#999;margin-top:4px;">约60分钟</div></div>
                    </div>
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">服务内容</div>
                    <div style="font-size:13px;color:#666;line-height:1.8;">
                        • 全身推拿按摩<br>
                        • 经络疏通<br>
                        • 肌肉放松
                    </div>
                </div>
                <div class="order-detail-card">
                    <div class="form-label">选择日期</div>
                    <input type="date" class="form-input" value="2026-05-20">
                    <div class="form-label" style="margin-top:12px;">选择时间</div>
                    <div style="display:flex;flex-wrap:wrap;gap:8px;">
                        <div class="service-option selected" style="width:calc(33% - 6px);" onclick="selectOpt(this)">10:00</div>
                        <div class="service-option" style="width:calc(33% - 6px);" onclick="selectOpt(this)">11:00</div>
                        <div class="service-option" style="width:calc(33% - 6px);" onclick="selectOpt(this)">14:00</div>
                        <div class="service-option" style="width:calc(33% - 6px);" onclick="selectOpt(this)">15:00</div>
                        <div class="service-option" style="width:calc(33% - 6px);" onclick="selectOpt(this)">16:00</div>
                    </div>
                </div>
                <div class="order-detail-card">
                    <div class="form-label">联系人信息</div>
                    <div class="form-input-row"><div class="form-input-label">姓名</div><input type="text" class="form-input" placeholder="请输入姓名" value="王先生"></div>
                    <div class="form-input-row"><div class="form-input-label">手机</div><input type="tel" class="form-input" placeholder="请输入手机号" value="13812345678"></div>
                </div>
                <div style="padding:16px;">
                    <button class="login-btn" style="background:#2196F3;" onclick="go('paymentPage')">确认预约 ¥128</button>
                </div>
            </div>
        </div>
        
        <!-- 收费标准 -->
        <div class="page" id="pricingPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">收费标准</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div style="background:#fff;border-radius:12px;overflow:hidden;margin:12px 16px;">
                    <div style="background:#4CAF50;color:#fff;padding:16px;text-align:center;font-size:18px;font-weight:600;">陪诊服务</div>
                    <div style="padding:16px;">
                        <div style="display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0;"><span>半天陪诊</span><span style="color:#4CAF50;font-weight:600;">¥198</span></div>
                        <div style="display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0;"><span>全天陪诊</span><span style="color:#4CAF50;font-weight:600;">¥368</span></div>
                        <div style="display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0;"><span>夜间陪诊</span><span style="color:#4CAF50;font-weight:600;">¥268</span></div>
                        <div style="display:flex;justify-content:space-between;padding:12px 0;"><span>服务保险</span><span style="color:#4CAF50;font-weight:600;">¥8/单</span></div>
                    </div>
                </div>
                <div style="background:#fff;border-radius:12px;overflow:hidden;margin:12px 16px;">
                    <div style="background:#ff9800;color:#fff;padding:16px;text-align:center;font-size:18px;font-weight:600;">代办服务</div>
                    <div style="padding:16px;">
                        <div style="display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0;"><span>代取药品</span><span style="color:#4CAF50;font-weight:600;">¥38起</span></div>
                        <div style="display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0;"><span>代取报告</span><span style="color:#4CAF50;font-weight:600;">¥28起</span></div>
                        <div style="display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0;"><span>代办出入院</span><span style="color:#4CAF50;font-weight:600;">¥68起</span></div>
                        <div style="display:flex;justify-content:space-between;padding:12px 0;"><span>带问诊</span><span style="color:#4CAF50;font-weight:600;">¥98起</span></div>
                    </div>
                </div>
                <div style="background:#fff;border-radius:12px;padding:16px;margin:12px 16px;font-size:13px;color:#666;line-height:1.8;">
                    <div style="font-weight:600;color:#333;margin-bottom:8px;">备注说明</div>
                    <div>• 以上价格为标准参考价</div>
                    <div>• 超出服务时间按比例加收</div>
                    <div>• 特殊医院可能产生额外费用</div>
                </div>
            </div>
        </div>
        
        <!-- 客服 -->
        <div class="page" id="chatPage">
            <div class="header header-white">
                <div class="header-back white" onclick="back()"><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>
                <span class="header-title">在线客服</span>
                <div style="width:32px;"></div>
            </div>
            <div class="chat-area">
                <div class="chat-bubble left">您好，欢迎使用陪诊助手！请问有什么可以帮助您的？</div>
                <div class="chat-bubble right">我想咨询一下半天陪诊的服务内容</div>
                <div class="chat-bubble left">半天陪诊服务包含全程陪同就医、挂号、取药、取报告等基础服务，时间为4小时内，费用198元起。</div>
            </div>
            <div class="chat-input-bar">
                <input type="text" class="chat-input" placeholder="输入您的问题...">
                <button class="chat-send">发送</button>
            </div>
        </div>
        
        <!-- 上门预约 -->
        <div class="page" id="homeServicePage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">预约上门服务</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="home-service-card">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">服务类型</div>
                    <div class="service-options" style="grid-template-columns:repeat(2,1fr);">
                        <div class="service-option selected" onclick="selectOpt(this)"><div>陪诊上门</div><div class="service-option-price">¥268</div></div>
                        <div class="service-option" onclick="selectOpt(this)"><div>代跑腿</div><div class="service-option-price">¥58</div></div>
                    </div>
                </div>
                <div class="home-service-card">
                    <div class="form-label">上门地址</div>
                    <div class="form-input-row"><div class="form-input-label">联系人</div><input type="text" class="form-input" value="王先生"></div>
                    <div class="form-input-row"><div class="form-input-label">联系电话</div><input type="tel" class="form-input" value="13812345678"></div>
                    <div class="form-input-row"><div class="form-input-label">地址</div><input type="text" class="form-input" placeholder="请输入上门地址" value="北京市朝阳区建国路88号"></div>
                </div>
                <div class="home-service-card">
                    <div class="form-label">预约时间</div>
                    <input type="date" class="form-input" value="2026-05-20">
                    <div class="form-input-row" style="margin-top:12px;"><div class="form-input-label">备注</div><input type="text" class="form-input" placeholder="请输入特殊需求"></div>
                </div>
                <div style="padding:16px;">
                    <button class="login-btn" onclick="go('paymentPage')">提交预约</button>
                </div>
            </div>
        </div>
        
        <!-- 一级分销用户 -->
        <div class="page" id="level1UsersPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">一级分销用户</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="order-detail-card">
                    <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
                        <span style="font-size:14px;">一级分销用户总数</span>
                        <span style="font-size:16px;font-weight:600;color:#4CAF50;">8人</span>
                    </div>
                </div>
                <div style="background:#fff;padding:16px;margin-bottom:12px;">
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#e8f5e9;display:flex;align-items:center;justify-content:center;font-size:20px;">👨</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">张先生</div><div style="font-size:12px;color:#999;">138****1234</div></div>
                        <div style="font-size:12px;color:#4CAF50;">消费3次</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#fff3e0;display:flex;align-items:center;justify-content:center;font-size:20px;">👩</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">李女士</div><div style="font-size:12px;color:#999;">139****5678</div></div>
                        <div style="font-size:12px;color:#4CAF50;">消费5次</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#e3f2fd;display:flex;align-items:center;justify-content:center;font-size:20px;">👨</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">王先生</div><div style="font-size:12px;color:#999;">137****9012</div></div>
                        <div style="font-size:12px;color:#4CAF50;">消费2次</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#fce4ec;display:flex;align-items:center;justify-content:center;font-size:20px;">👩</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">赵女士</div><div style="font-size:12px;color:#999;">136****3456</div></div>
                        <div style="font-size:12px;color:#4CAF50;">消费1次</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#f3e5f5;display:flex;align-items:center;justify-content:center;font-size:20px;">👨</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">钱先生</div><div style="font-size:12px;color:#999;">135****7890</div></div>
                        <div style="font-size:12px;color:#999;">未消费</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#e8eaf6;display:flex;align-items:center;justify-content:center;font-size:20px;">👩</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">孙女士</div><div style="font-size:12px;color:#999;">134****2345</div></div>
                        <div style="font-size:12px;color:#4CAF50;">消费4次</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#efebe9;display:flex;align-items:center;justify-content:center;font-size:20px;">👨</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">周先生</div><div style="font-size:12px;color:#999;">133****6789</div></div>
                        <div style="font-size:12px;color:#999;">未消费</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#e0f7fa;display:flex;align-items:center;justify-content:center;font-size:20px;">👩</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">吴女士</div><div style="font-size:12px;color:#999;">132****0123</div></div>
                        <div style="font-size:12px;color:#4CAF50;">消费2次</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 二级分销用户 -->
        <div class="page" id="level2UsersPage">
            <div class="header">
                <div class="header-back" onclick="back()"><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>
                <span class="header-title">二级分销用户</span>
                <div style="width:32px;"></div>
            </div>
            <div class="content">
                <div class="order-detail-card">
                    <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
                        <span style="font-size:14px;">二级分销用户总数</span>
                        <span style="font-size:16px;font-weight:600;color:#ff9800;">7人</span>
                    </div>
                </div>
                <div style="background:#fff;padding:16px;margin-bottom:12px;">
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#e8f5e9;display:flex;align-items:center;justify-content:center;font-size:20px;">👨</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">郑先生</div><div style="font-size:12px;color:#999;">131****1234</div></div>
                        <div style="font-size:12px;color:#ff9800;">上级：张先生</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#fff3e0;display:flex;align-items:center;justify-content:center;font-size:20px;">👩</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">冯女士</div><div style="font-size:12px;color:#999;">130****5678</div></div>
                        <div style="font-size:12px;color:#ff9800;">上级：李女士</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#e3f2fd;display:flex;align-items:center;justify-content:center;font-size:20px;">👨</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">陈先生</div><div style="font-size:12px;color:#999;">129****9012</div></div>
                        <div style="font-size:12px;color:#ff9800;">上级：王先生</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#fce4ec;display:flex;align-items:center;justify-content:center;font-size:20px;">👩</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">褚女士</div><div style="font-size:12px;color:#999;">128****3456</div></div>
                        <div style="font-size:12px;color:#ff9800;">上级：张先生</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#f3e5f5;display:flex;align-items:center;justify-content:center;font-size:20px;">👨</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">卫先生</div><div style="font-size:12px;color:#999;">127****7890</div></div>
                        <div style="font-size:12px;color:#ff9800;">上级：孙女士</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f0f0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#e8eaf6;display:flex;align-items:center;justify-content:center;font-size:20px;">👩</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">蒋女士</div><div style="font-size:12px;color:#999;">126****2345</div></div>
                        <div style="font-size:12px;color:#ff9800;">上级：李女士</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding:12px 0;">
                        <div style="width:40px;height:40px;border-radius:50%;background:#efebe9;display:flex;align-items:center;justify-content:center;font-size:20px;">👨</div>
                        <div style="flex:1;"><div style="font-size:14px;font-weight:600;">沈先生</div><div style="font-size:12px;color:#999;">125****6789</div></div>
                        <div style="font-size:12px;color:#ff9800;">上级：吴女士</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="tab-bar" id="tabBar" style="display:none;">
            <div class="tab-item active" onclick="go('homePage')"><span style="font-size:20px;">🏠</span><span>首页</span></div>
            <div class="tab-item" onclick="go('bookingPage')"><span style="font-size:20px;">📅</span><span>预约</span></div>
            <div class="tab-item" onclick="go('orderPage')"><span style="font-size:20px;">📋</span><span>订单</span></div>
            <div class="tab-item" onclick="go('profilePage')"><span style="font-size:20px;">👤</span><span>我的</span></div>
        </div>
    </div>
    
    <!-- 支付成功弹窗 -->
    <div class="modal-overlay" id="successModal">
        <div class="modal-content" style="text-align:center;padding:40px 20px;">
            <div class="modal-close" onclick="closeModal()" style="color:#fff;position:static;margin-bottom:20px;">✕</div>
            <div class="modal-icon">✓</div>
            <div class="modal-title">支付成功</div>
            <div class="modal-desc">您的陪诊服务已预约成功<br>陪诊师将尽快与您联系</div>
            <button class="modal-btn" onclick="closeModal()">确定</button>
        </div>
    </div>
    
    <!-- 提现弹窗 -->
    <div class="modal-overlay" id="withdrawModal">
        <div class="modal-content" style="padding:20px;">
            <div class="modal-close" onclick="closeWithdrawModal()">✕</div>
            <div style="text-align:center;font-size:16px;font-weight:600;margin-bottom:20px;">佣金提现</div>
            <div style="text-align:center;margin-bottom:20px;">
                <div style="font-size:13px;color:#999;">可提现金额</div>
                <div style="font-size:32px;font-weight:700;color:#4CAF50;">¥256.80</div>
            </div>
            <div style="margin-bottom:16px;">
                <div style="font-size:13px;margin-bottom:8px;">提现方式</div>
                <div style="display:flex;gap:12px;">
                    <div style="flex:1;padding:12px;background:#e8f5e9;border:2px solid #4CAF50;border-radius:8px;text-align:center;cursor:pointer;">💬 微信</div>
                    <div style="flex:1;padding:12px;background:#f5f5f5;border-radius:8px;text-align:center;cursor:pointer;">📱 支付宝</div>
                </div>
            </div>
            <button class="modal-btn" onclick="showWithdrawSuccess()">确认提现</button>
        </div>
    </div>
    
    <!-- 提现成功 -->
    <div class="modal-overlay" id="withdrawSuccessModal">
        <div class="modal-content" style="text-align:center;padding:40px 20px;">
            <div class="modal-icon">✓</div>
            <div class="modal-title">提现申请成功</div>
            <div class="modal-desc">预计1-3个工作日到账</div>
            <button class="modal-btn" onclick="closeAllModals()">确定</button>
        </div>
    </div>
    
    <script>
        let history = ['loginPage'];
        
        function go(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
            if (pageId !== history[history.length-1]) history.push(pageId);
            
            const tabBar = document.getElementById('tabBar');
            tabBar.style.display = ['homePage','orderPage','profilePage'].includes(pageId) ? 'flex' : 'none';
            
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            if (pageId === 'homePage') document.querySelectorAll('.tab-item')[0].classList.add('active');
            if (pageId === 'orderPage') document.querySelectorAll('.tab-item')[2].classList.add('active');
            if (pageId === 'profilePage') document.querySelectorAll('.tab-item')[3].classList.add('active');
        }
        
        function back() {
            if (history.length > 1) { history.pop(); go(history[history.length-1]); }
        }
        
        function selectOpt(el) {
            el.parentElement.querySelectorAll('.service-option').forEach(o => o.classList.remove('selected'));
            el.classList.add('selected');
        }
        
        function selectAttendant(el) {
            document.querySelectorAll('.attendant-card').forEach(c => c.classList.remove('selected'));
            el.classList.add('selected');
        }
        
        function selectPay(el) {
            document.querySelectorAll('.payment-check').forEach(c => { c.classList.remove('selected'); c.style.background='#fff'; c.style.borderColor='#ddd'; });
            el.querySelector('.payment-check').classList.add('selected');
            el.querySelector('.payment-check').style.background='#4CAF50';
            el.querySelector('.payment-check').style.borderColor='#4CAF50';
        }
        
        function selectPackage(el) {
            document.querySelectorAll('.store-value-package').forEach(p => p.classList.remove('selected'));
            el.classList.add('selected');
        }
        
        function toggleHelp(el) {
            el.nextElementSibling.classList.toggle('show');
        }
        
        function showSuccess() { document.getElementById('successModal').style.display = 'block'; }
        function closeModal() { document.getElementById('successModal').style.display = 'none'; go('orderPage'); }
        function showWithdrawModal() { document.getElementById('withdrawModal').style.display = 'block'; }
        function closeWithdrawModal() { document.getElementById('withdrawModal').style.display = 'none'; }
        function showWithdrawSuccess() { document.getElementById('withdrawModal').style.display = 'none'; document.getElementById('withdrawSuccessModal').style.display = 'block'; }
        function closeAllModals() { document.querySelectorAll('.modal-overlay').forEach(m => m.style.display = 'none'); }
        
        document.querySelectorAll('.modal-overlay').forEach(m => { m.addEventListener('click', function(e) { if(e.target === this) this.style.display = 'none'; }); });
        
        document.querySelectorAll('.order-tab').forEach((tab, i) => { tab.addEventListener('click', function() { document.querySelectorAll('.order-tab').forEach(t => t.classList.remove('active')); this.classList.add('active'); }); });
        document.querySelectorAll('.mall-tab').forEach(tab => { tab.addEventListener('click', function() { document.querySelectorAll('.mall-tab').forEach(t => t.classList.remove('active')); this.classList.add('active'); }); });
    </script>
</body>
</html>