编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陪诊服务后台管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            min-height: 100vh;
        }
        /* 左侧导航 */
        .sidebar {
            width: 240px;
            background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            padding: 20px 0;
            flex-shrink: 0;
            height: 100vh;
            position: fixed;
            overflow-y: auto;
        }
        .logo {
            padding: 0 20px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 20px;
        }
        .logo h1 {
            font-size: 18px;
            color: #00d4ff;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #00d4ff, #0099cc);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-section {
            margin-bottom: 10px;
        }
        .nav-title {
            padding: 10px 20px;
            font-size: 11px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.4);
            letter-spacing: 1px;
        }
        .nav-item {
            padding: 12px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s;
            border-left: 3px solid transparent;
            font-size: 14px;
        }
        .nav-item:hover {
            background: rgba(255,255,255,0.1);
            border-left-color: #00d4ff;
        }
        .nav-item.active {
            background: rgba(0,212,255,0.15);
            border-left-color: #00d4ff;
            color: #00d4ff;
        }
        .nav-item svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }
        .nav-item .arrow {
            margin-left: auto;
            transition: transform 0.3s;
        }
        .nav-item.expanded .arrow {
            transform: rotate(90deg);
        }
        .sub-nav {
            display: none;
            background: rgba(0,0,0,0.2);
        }
        .sub-nav.show {
            display: block;
        }
        .sub-nav .nav-item {
            padding-left: 50px;
            font-size: 13px;
        }
        /* 右侧内容 */
        .main-content {
            flex: 1;
            margin-left: 240px;
            background: #f5f7fa;
            min-height: 100vh;
        }
        .header {
            background: #fff;
            padding: 16px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .breadcrumb {
            color: #666;
            font-size: 14px;
        }
        .breadcrumb span {
            color: #00d4ff;
        }
        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .admin-info {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        .admin-avatar {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: bold;
        }
        .content-area {
            padding: 30px;
        }
        /* 页面通用样式 */
        .page-header {
            margin-bottom: 24px;
        }
        .page-header h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 8px;
        }
        .page-header p {
            color: #888;
            font-size: 14px;
        }
        /* 卡片网格 */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        }
        .card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        .card-icon svg {
            width: 24px;
            height: 24px;
        }
        .card-icon.blue { background: rgba(0,212,255,0.1); color: #00d4ff; }
        .card-icon.green { background: rgba(0,200,83,0.1); color: #00c853; }
        .card-icon.orange { background: rgba(255,152,0,0.1); color: #ff9800; }
        .card-icon.purple { background: rgba(156,39,176,0.1); color: #9c27b0; }
        .card-icon.red { background: rgba(244,67,54,0.1); color: #f44336; }
        .card-icon.pink { background: rgba(233,30,99,0.1); color: #e91e63; }
        .card h3 {
            font-size: 28px;
            color: #333;
            margin-bottom: 4px;
        }
        .card p {
            color: #888;
            font-size: 14px;
        }
        /* 小卡片模块样式 */
        .card-grid.small-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 16px;
        }
        .card-grid.small-cards .card {
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .card-grid.small-cards .card-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 0;
        }
        .card-grid.small-cards .card-icon svg {
            width: 20px;
            height: 20px;
        }
        .card-grid.small-cards .card h3 {
            font-size: 24px;
            margin-bottom: 2px;
        }
        .card-grid.small-cards .card p {
            font-size: 13px;
        }
        /* 表格 */
        .table-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        .table-header {
            padding: 20px 24px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .table-header h3 {
            font-size: 16px;
            color: #333;
        }
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-primary {
            background: linear-gradient(135deg, #00d4ff, #0099cc);
            color: #fff;
        }
        .btn-primary:hover {
            box-shadow: 0 4px 12px rgba(0,212,255,0.4);
        }
        .btn-secondary {
            background: #f0f0f0;
            color: #666;
        }
        .btn-secondary:hover {
            background: #e0e0e0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 14px 24px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }
        th {
            background: #fafafa;
            font-weight: 600;
            color: #666;
            font-size: 13px;
        }
        td {
            color: #333;
            font-size: 14px;
        }
        tr:hover {
            background: #f9f9f9;
        }
        .status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        .status.active { background: #e8f5e9; color: #4caf50; }
        .status.inactive { background: #ffebee; color: #f44336; }
        .status.pending { background: #fff3e0; color: #ff9800; }
        .action-btns {
            display: flex;
            gap: 8px;
        }
        .action-btn {
            padding: 6px 12px;
            border: 1px solid #ddd;
            background: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
        }
        .action-btn:hover {
            border-color: #00d4ff;
            color: #00d4ff;
        }
        /* 表单 */
        .form-section {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #00d4ff;
        }
        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        /* 详情卡片 */
        .detail-card {
            background: #fff;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }
        .detail-row {
            display: flex;
            padding: 16px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .detail-row:last-child {
            border-bottom: none;
        }
        .detail-label {
            width: 140px;
            color: #888;
            font-size: 14px;
        }
        .detail-value {
            flex: 1;
            color: #333;
            font-size: 14px;
        }
        /* 图表区域 */
        .chart-section {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        .chart-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }
        .chart-placeholder {
            height: 200px;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            font-size: 14px;
        }
        /* 分页 */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-top: 1px solid #eee;
        }
        .pagination-info {
            color: #888;
            font-size: 14px;
        }
        .pagination-btns {
            display: flex;
            gap: 8px;
        }
        .page-btn {
            width: 36px;
            height: 36px;
            border: 1px solid #ddd;
            background: #fff;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        .page-btn:hover {
            border-color: #00d4ff;
            color: #00d4ff;
        }
        .page-btn.active {
            background: #00d4ff;
            border-color: #00d4ff;
            color: #fff;
        }
        /* 弹窗 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.show {
            display: flex;
        }
        .modal {
            background: #fff;
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
        }
        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-header h3 {
            font-size: 18px;
            color: #333;
        }
        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: #f0f0f0;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        .modal-close:hover {
            background: #e0e0e0;
        }
        .modal-body {
            padding: 24px;
        }
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        /* 列表页样式 */
        .list-filters {
            display: flex;
            gap: 16px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .filter-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .filter-item select,
        .filter-item input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }
        /* 隐藏所有页面 */
        .page {
            display: none;
        }
        .page.active {
            display: block;
        }
        /* 设置页面 */
        .settings-group {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }
        .settings-group h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid #eee;
        }
        /* 评价星星 */
        .stars {
            color: #ffc107;
        }
        /* 区域标签 */
        .tag {
            display: inline-block;
            padding: 2px 8px;
            background: #e3f2fd;
            color: #1976d2;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 4px;
        }
    </style>
</head>
<body>
    <!-- 左侧导航 -->
    <nav class="sidebar">
        <div class="logo">
            <h1>
                <div class="logo-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
                    </svg>
                </div>
                陪诊管理系统
            </h1>
        </div>
        
        <div class="nav-section">
            <div class="nav-title">首页</div>
            <div class="nav-item active" data-page="overview">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
                    <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                </svg>
                <span>数据概览</span>
            </div>
        </div>

        <div class="nav-section">
            <div class="nav-title">资源管理</div>
            <div class="nav-item" data-page="area">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
                    <circle cx="12" cy="10" r="3"/>
                </svg>
                <span>区域管理</span>
            </div>
            <div class="nav-item" data-expand="staff">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
                    <circle cx="9" cy="7" r="4"/>
                    <path d="M23 21v-2a4 4 0 00-3-3.87"/>
                    <path d="M16 3.13a4 4 0 010 7.75"/>
                </svg>
                <span>人员管理</span>
                <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                    <polyline points="9 18 15 12 9 6"/>
                </svg>
            </div>
            <div class="sub-nav" id="staff-subnav">
                <div class="nav-item" data-page="escort-list">
                    <span>陪诊师列表</span>
                </div>
                <div class="nav-item" data-page="driver-list">
                    <span>司机列表</span>
                </div>
            </div>
        </div>

        <div class="nav-section">
            <div class="nav-title">业务中心</div>
            <div class="nav-item" data-expand="order">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                    <polyline points="14 2 14 8 20 8"/>
                    <line x1="16" y1="13" x2="8" y2="13"/>
                    <line x1="16" y1="17" x2="8" y2="17"/>
                </svg>
                <span>订单管理</span>
                <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                    <polyline points="9 18 15 12 9 6"/>
                </svg>
            </div>
            <div class="sub-nav" id="order-subnav">
                <div class="nav-item" data-page="escort-order">
                    <span>陪诊订单</span>
                </div>
                <div class="nav-item" data-page="driver-order">
                    <span>司机订单</span>
                </div>
            </div>
        </div>

        <div class="nav-section">
            <div class="nav-title">系统配置</div>
            <div class="nav-item" data-page="basic-data">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <ellipse cx="12" cy="5" rx="9" ry="3"/>
                    <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
                    <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
                </svg>
                <span>基础数据</span>
            </div>
            <div class="nav-item" data-page="settings">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="3"/>
                    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
                </svg>
                <span>系统设置</span>
            </div>
        </div>
    </nav>

    <!-- 右侧内容 -->
    <main class="main-content">
        <header class="header">
            <div class="header-left">
                <div class="breadcrumb">
                    <span id="current-page-name">数据概览</span>
                </div>
            </div>
            <div class="header-right">
                <div class="admin-info">
                    <div class="admin-avatar">管</div>
                    <span>系统管理员</span>
                </div>
            </div>
        </header>

        <div class="content-area">
            <!-- 数据概览页面 -->
            <div class="page active" id="page-overview">
                <div class="page-header">
                    <h2>数据概览</h2>
                    <p>实时监控平台业务运行状态</p>
                </div>
                
                <div class="card-grid">
                    <div class="card">
                        <div class="card-icon blue">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                                <polyline points="14 2 14 8 20 8"/>
                            </svg>
                        </div>
                        <h3 id="today-orders">156</h3>
                        <p>今日订单总数</p>
                    </div>
                    <div class="card">
                        <div class="card-icon orange">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                        </div>
                        <h3 id="pending-orders">23</h3>
                        <p>待确认订单</p>
                    </div>
                    <div class="card">
                        <div class="card-icon green">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
                                <polyline points="22 4 12 14.01 9 11.01"/>
                            </svg>
                        </div>
                        <h3 id="in-service">89</h3>
                        <p>正在服务中</p>
                    </div>
                    <div class="card">
                        <div class="card-icon purple">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
                                <circle cx="9" cy="7" r="4"/>
                            </svg>
                        </div>
                        <h3 id="total-users">2,458</h3>
                        <p>累计注册用户</p>
                    </div>
                </div>

                <div class="card-grid small-cards">
                    <div class="card">
                        <div class="card-icon blue">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                        </div>
                        <h3 id="total-areas">12</h3>
                        <p>服务区域数</p>
                    </div>
                    <div class="card">
                        <div class="card-icon green">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
                                <circle cx="12" cy="7" r="4"/>
                            </svg>
                        </div>
                        <h3 id="total-escorts">86</h3>
                        <p>陪诊师数量</p>
                    </div>
                    <div class="card">
                        <div class="card-icon orange">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="1" y="3" width="15" height="13"/>
                                <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
                                <circle cx="5.5" cy="18.5" r="2.5"/>
                                <circle cx="18.5" cy="18.5" r="2.5"/>
                            </svg>
                        </div>
                        <h3 id="total-drivers">45</h3>
                        <p>司机数量</p>
                    </div>
                </div>

                <div class="chart-section">
                    <div class="chart-card">
                        <h3 style="margin-bottom: 16px; color: #333;">订单趋势</h3>
                        <div class="chart-placeholder">
                            <svg viewBox="0 0 200 80" width="100%" height="200">
                                <polyline fill="none" stroke="#00d4ff" stroke-width="2" points="0,60 30,45 60,50 90,30 120,35 150,20 180,25 200,15"/>
                                <polyline fill="none" stroke="#00c853" stroke-width="2" points="0,70 30,55 60,60 90,45 120,50 150,40 180,35 200,30"/>
                            </svg>
                        </div>
                    </div>
                    <div class="chart-card">
                        <h3 style="margin-bottom: 16px; color: #333;">订单类型分布</h3>
                        <div class="chart-placeholder" style="flex-direction: column; gap: 12px;">
                            <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
                                <div style="width: 12px; height: 12px; background: #00d4ff; border-radius: 2px;"></div>
                                <span style="width: 60px; font-size: 12px;">陪诊服务</span>
                                <div style="flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px;">
                                    <div style="width: 65%; height: 100%; background: #00d4ff; border-radius: 4px;"></div>
                                </div>
                                <span style="font-size: 12px;">65%</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
                                <div style="width: 12px; height: 12px; background: #00c853; border-radius: 2px;"></div>
                                <span style="width: 60px; font-size: 12px;">接送服务</span>
                                <div style="flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px;">
                                    <div style="width: 35%; height: 100%; background: #00c853; border-radius: 4px;"></div>
                                </div>
                                <span style="font-size: 12px;">35%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 区域管理页面 -->
            <div class="page" id="page-area">
                <div class="page-header">
                    <h2>区域管理</h2>
                    <p>管理服务覆盖的地理范围</p>
                </div>

                <div class="list-filters">
                    <button class="btn btn-primary" onclick="showModal('add-area-modal')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        添加区域
                    </button>
                </div>

                <div class="table-container">
                    <div class="table-header">
                        <h3>区域列表</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>区域ID</th>
                                <th>区域名称</th>
                                <th>陪诊师数量</th>
                                <th>司机数量</th>
                                <th>订单数量</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>#1001</td>
                                <td>北京市朝阳区</td>
                                <td>15</td>
                                <td>8</td>
                                <td>1,256</td>
                                <td><span class="status active">已开通</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">关闭</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>#1002</td>
                                <td>上海市浦东新区</td>
                                <td>12</td>
                                <td>6</td>
                                <td>980</td>
                                <td><span class="status active">已开通</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">关闭</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>#1003</td>
                                <td>广州市天河区</td>
                                <td>10</td>
                                <td>5</td>
                                <td>756</td>
                                <td><span class="status active">已开通</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">关闭</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>#1004</td>
                                <td>深圳市南山区</td>
                                <td>8</td>
                                <td>4</td>
                                <td>623</td>
                                <td><span class="status inactive">已关闭</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">启用</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <div class="pagination-info">共 12 条数据</div>
                        <div class="pagination-btns">
                            <button class="page-btn"><</button>
                            <button class="page-btn active">1</button>
<button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 陪诊师列表页面 -->
            <div class="page" id="page-escort-list">
                <div class="page-header">
                    <h2>陪诊师管理</h2>
                    <p>管理提供陪同就医服务的人员</p>
                </div>

                <div class="list-filters">
                    <button class="btn btn-primary" onclick="showModal('add-escort-modal')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        添加陪诊师
                    </button>
                </div>

                <div class="table-container">
                    <div class="table-header">
                        <h3>陪诊师列表</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>工号</th>
                                <th>姓名</th>
                                <th>手机号</th>
                                <th>服务区域</th>
                                <th>累计订单</th>
                                <th>评分</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>EP001</td>
                                <td>李明</td>
                                <td>138****5678</td>
                                <td><span class="tag">北京朝阳</span></td>
                                <td>256</td>
                                <td><span class="stars">★★★★★</span> 4.9</td>
                                <td><span class="status active">接单中</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">下架</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>EP002</td>
                                <td>王芳</td>
                                <td>139****1234</td>
                                <td><span class="tag">上海浦东</span></td>
                                <td>189</td>
                                <td><span class="stars">★★★★☆</span> 4.7</td>
                                <td><span class="status active">接单中</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">下架</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>EP003</td>
                                <td>张伟</td>
                                <td>137****9876</td>
                                <td><span class="tag">广州天河</span></td>
                                <td>142</td>
                                <td><span class="stars">★★★★☆</span> 4.5</td>
                                <td><span class="status inactive">已下架</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">上架</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <div class="pagination-info">共 86 条数据</div>
                        <div class="pagination-btns">
                            <button class="page-btn"><</button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 司机列表页面 -->
            <div class="page" id="page-driver-list">
                <div class="page-header">
                    <h2>司机管理</h2>
                    <p>管理负责接送服务的司机人员</p>
                </div>

                <div class="list-filters">
                    <button class="btn btn-primary" onclick="showModal('add-driver-modal')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        添加司机
                    </button>
                </div>

                <div class="table-container">
                    <div class="table-header">
                        <h3>司机列表</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>工号</th>
                                <th>姓名</th>
                                <th>手机号</th>
                                <th>车牌号</th>
                                <th>服务区域</th>
                                <th>累计订单</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>DV001</td>
                                <td>刘强</td>
                                <td>136****4567</td>
                                <td>京A·12345</td>
                                <td><span class="tag">北京朝阳</span></td>
                                <td>312</td>
                                <td><span class="status active">接单中</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">下架</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>DV002</td>
                                <td>陈静</td>
                                <td>135****7890</td>
                                <td>沪B·67890</td>
                                <td><span class="tag">上海浦东</span></td>
                                <td>245</td>
                                <td><span class="status active">接单中</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">下架</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>DV003</td>
                                <td>赵磊</td>
                                <td>133****3456</td>
                                <td>粤B·23456</td>
                                <td><span class="tag">广州天河</span></td>
                                <td>178</td>
                                <td><span class="status inactive">已下架</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn">编辑</button>
                                        <button class="action-btn">上架</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <div class="pagination-info">共 45 条数据</div>
                        <div class="pagination-btns">
                            <button class="page-btn"><</button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 陪诊订单页面 -->
            <div class="page" id="page-escort-order">
                <div class="page-header">
                    <h2>陪诊订单</h2>
                    <p>查看和管理陪诊类订单</p>
                </div>

                <div class="list-filters">
                    <div class="filter-item">
                        <select>
                            <option>全部状态</option>
                            <option>待确认</option>
                            <option>服务中</option>
                            <option>已完成</option>
                            <option>已取消</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <input type="date" placeholder="开始日期">
                    </div>
                    <div class="filter-item">
                        <input type="date" placeholder="结束日期">
                    </div>
                    <div class="filter-item">
                        <input type="text" placeholder="搜索订单号/手机号">
                    </div>
                </div>

                <div class="table-container">
                    <div class="table-header">
                        <h3>订单列表</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>用户信息</th>
                                <th>服务类型</th>
                                <th>医院</th>
                                <th>陪诊师</th>
                                <th>金额</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>PE20240101001</td>
                                <td>张女士<br><small style="color:#888">139****1234</small></td>
                                <td>陪诊服务</td>
                                <td>北京协和医院</td>
                                <td>李明</td>
                                <td>¥280</td>
                                <td><span class="status pending">待确认</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn" onclick="showModal('order-detail-modal')">详情</button>
                                        <button class="action-btn">确认</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>PE20240101002</td>
                                <td>李先生<br><small style="color:#888">138****5678</small></td>
                                <td>陪检服务</td>
                                <td>上海市第一人民医院</td>
                                <td>王芳</td>
                                <td>¥350</td>
                                <td><span class="status active">服务中</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn" onclick="showModal('order-detail-modal')">详情</button>
                                        <button class="action-btn">完成</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>PE20240101003</td>
                                <td>王女士<br><small style="color:#888">137****9876</small></td>
                                <td>陪手术</td>
                                <td>广州中山医院</td>
                                <td>-</td>
                                <td>¥500</td>
                                <td><span class="status inactive">已取消</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn" onclick="showModal('order-detail-modal')">详情</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <div class="pagination-info">共 1,256 条数据</div>
                        <div class="pagination-btns">
                            <button class="page-btn"><</button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">...</button>
                            <button class="page-btn">50</button>
                            <button class="page-btn">></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 司机订单页面 -->
            <div class="page" id="page-driver-order">
                <div class="page-header">
                    <h2>司机订单</h2>
                    <p>查看和管理接送类订单</p>
                </div>

                <div class="list-filters">
                    <div class="filter-item">
                        <select>
                            <option>全部状态</option>
                            <option>待确认</option>
                            <option>服务中</option>
                            <option>已完成</option>
                            <option>已取消</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <input type="date">
                    </div>
                    <div class="filter-item">
                        <input type="date">
                    </div>
                    <div class="filter-item">
                        <input type="text" placeholder="搜索订单号/手机号">
                    </div>
                </div>

                <div class="table-container">
                    <div class="table-header">
                        <h3>订单列表</h3>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>用户信息</th>
                                <th>接送类型</th>
                                <th>车辆信息</th>
                                <th>司机</th>
                                <th>金额</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>PD20240101001</td>
                                <td>陈先生<br><small style="color:#888">136****4567</small></td>
                                <td>医院接送</td>
                                <td>-</td>
                                <td>-</td>
                                <td>¥80</td>
                                <td><span class="status pending">待确认</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn" onclick="showModal('order-detail-modal')">详情</button>
                                        <button class="action-btn">确认</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>PD20240101002</td>
                                <td>赵女士<br><small style="color:#888">135****7890</small></td>
                                <td>医院接送</td>
                                <td>京A·12345</td>
                                <td>刘强</td>
                                <td>¥100</td>
                                <td><span class="status active">服务中</span></td>
                                <td>
                                    <div class="action-btns">
                                        <button class="action-btn" onclick="showModal('order-detail-modal')">详情</button>
                                        <button class="action-btn">完成</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <div class="pagination-info">共 680 条数据</div>
                        <div class="pagination-btns">
                            <button class="page-btn"><</button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 基础数据页面 -->
            <div class="page" id="page-basic-data">
                <div class="page-header">
                    <h2>基础数据管理</h2>
                    <p>维护系统运行所需的底层元数据</p>
                </div>

                <div class="card-grid">
                    <div class="card" onclick="showSubPage('service-type')" style="cursor: pointer;">
                        <div class="card-icon blue">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>
                            </svg>
                        </div>
                        <h3>服务类型管理</h3>
                        <p>陪诊、陪检、陪手术等</p>
                    </div>
                    <div class="card" onclick="showSubPage('hospital')" style="cursor: pointer;">
                        <div class="card-icon green">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M3 21h18"/>
                                <path d="M5 21V7l8-4v18"/>
                                <path d="M19 21V11l-6-4"/>
                                <path d="M9 9h1"/>
                                <path d="M9 13h1"/>
                                <path d="M9 17h1"/>
                            </svg>
                        </div>
                        <h3>医院管理</h3>
                        <p>维护各区域内合作医院</p>
                    </div>
                    <div class="card" onclick="showSubPage('review')" style="cursor: pointer;">
                        <div class="card-icon orange">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                            </svg>
                        </div>
                        <h3>评价管理</h3>
                        <p>监控用户服务评价</p>
                    </div>
                </div>

                <!-- 服务类型子页面 -->
                <div class="page sub-page" id="sub-service-type">
                    <div class="list-filters">
                        <button class="btn btn-primary">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                                <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                            添加服务类型
                        </button>
                    </div>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>类型ID</th>
                                    <th>服务名称</th>
                                    <th>单价(元/次)</th>
                                    <th>服务时长</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>ST001</td>
                                    <td>陪诊服务</td>
                                    <td>280</td>
                                    <td>2小时</td>
                                    <td><span class="status active">启用</span></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="action-btn">编辑</button>
                                            <button class="action-btn">禁用</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>ST002</td>
                                    <td>陪检服务</td>
                                    <td>350</td>
                                    <td>3小时</td>
                                    <td><span class="status active">启用</span></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="action-btn">编辑</button>
                                            <button class="action-btn">禁用</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>ST003</td>
                                    <td>陪手术</td>
                                    <td>500</td>
                                    <td>按需</td>
                                    <td><span class="status active">启用</span></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="action-btn">编辑</button>
                                            <button class="action-btn">禁用</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 医院管理子页面 -->
                <div class="page sub-page" id="sub-hospital">
                    <div class="list-filters">
                        <button class="btn btn-primary">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                                <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                            添加医院
                        </button>
                    </div>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>医院ID</th>
                                    <th>医院名称</th>
                                    <th>所属区域</th>
                                    <th>地址</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>HP001</td>
                                    <td>北京协和医院</td>
                                    <td><span class="tag">北京朝阳</span></td>
                                    <td>北京市东城区帅府园1号</td>
                                    <td><span class="status active">合作中</span></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="action-btn">编辑</button>
                                            <button class="action-btn">暂停</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>HP002</td>
                                    <td>上海市第一人民医院</td>
                                    <td><span class="tag">上海浦东</span></td>
                                    <td>上海市虹口区武进路85号</td>
                                    <td><span class="status active">合作中</span></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="action-btn">编辑</button>
                                            <button class="action-btn">暂停</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>HP003</td>
                                    <td>广州中山医院</td>
                                    <td><span class="tag">广州天河</span></td>
                                    <td>广州市越秀区中山二路58号</td>
                                    <td><span class="status pending">待审核</span></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="action-btn">编辑</button>
                                            <button class="action-btn">审核</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 评价管理子页面 -->
                <div class="page sub-page" id="sub-review">
                    <div class="list-filters">
                        <div class="filter-item">
                            <select>
                                <option>全部评价</option>
                                <option>陪诊评价</option>
                                <option>司机评价</option>
                            </select>
                        </div>
                        <div class="filter-item">
                            <select>
                                <option>全部评分</option>
                                <option>5星</option>
                                <option>4星</option>
                                <option>3星</option>
                                <option>2星</option>
                                <option>1星</option>
                            </select>
                        </div>
                    </div>
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>用户</th>
                                    <th>服务人员</th>
                                    <th>评分</th>
                                    <th>评价内容</th>
                                    <th>时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>PE20240101001</td>
                                    <td>张女士</td>
                                    <td>李明(陪诊师)</td>
                                    <td><span class="stars">★★★★★</span></td>
                                    <td>服务非常专业，准时到达，态度很好</td>
                                    <td>2024-01-10 14:30</td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="action-btn">查看</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>PD20240101002</td>
                                    <td>赵女士</td>
                                    <td>刘强(司机)</td>
                                    <td><span class="stars">★★★★☆</span></td>
                                    <td>司机开车很稳，提前到达</td>
                                    <td>2024-01-10 10:20</td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="action-btn">查看</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 系统设置页面 -->
            <div class="page" id="page-settings">
<div class="page-header">
                    <h2>系统设置</h2>
                    <p>配置平台全局参数</p>
                </div>

                <div class="settings-group">
                    <h3>联系方式设置</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label>客服电话</label>
                            <input type="text" value="400-888-8888" placeholder="请输入客服电话">
                        </div>
                        <div class="form-group">
                            <label>工作时间</label>
                            <input type="text" value="周一至周日 08:00-22:00" placeholder="请输入工作时间">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>联系地址</label>
                        <input type="text" value="北京市朝阳区建国路88号" placeholder="请输入联系地址">
                    </div>
                </div>

                <div class="settings-group">
                    <h3>支付说明设置</h3>
                    <div class="form-group">
                        <label>线下支付说明</label>
                        <textarea rows="4" placeholder="请输入线下支付相关说明">用户可选择现金、刷卡、扫码等方式进行线下支付。如有任何支付问题，请联系客服。
编辑页面

订单详情

添加区域

添加陪诊师

添加司机
