编辑页面

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, "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; background: #f0f2f5; min-height: 100vh; }
        
        .header { height: 60px; background: linear-gradient(135deg, #2E7D32, #388E3C); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .header-left { display: flex; align-items: center; gap: 12px; }
        .logo { width: 36px; height: 36px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .header-title { color: white; font-size: 18px; font-weight: 600; }
        .header-right { display: flex; align-items: center; gap: 16px; color: white; font-size: 13px; }
        .admin-info { display: flex; align-items: center; gap: 8px; }
        .admin-avatar { width: 32px; height: 32px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #2E7D32; font-weight: bold; }
        
        .layout { display: flex; padding-top: 60px; min-height: 100vh; }
        .sidebar { width: 200px; background: white; position: fixed; top: 60px; bottom: 0; left: 0; box-shadow: 2px 0 8px rgba(0,0,0,0.05); overflow-y: auto; }
        .nav-item { padding: 14px 20px; display: flex; align-items: center; gap: 10px; cursor: pointer; border-left: 3px solid transparent; color: #666; font-size: 14px; transition: all 0.2s; }
        .nav-item:hover { background: #f5f5f5; }
        .nav-item.active { background: #E8F5E9; color: #2E7D32; border-left-color: #2E7D32; font-weight: 600; }
        .nav-icon { font-size: 18px; }
        
        .main { flex: 1; margin-left: 200px; padding: 20px; }
        
        .page { display: none; }
        .page.active { display: block; }
        
        .page-title { font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #333; }
        
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
        .stat-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .stat-icon { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; }
        .stat-value { font-size: 28px; font-weight: 700; color: #333; }
        .stat-label { font-size: 13px; color: #999; margin-top: 4px; }
        .stat-change { font-size: 12px; margin-top: 6px; }
        .stat-change.up { color: #52c41a; }
        .stat-change.down { color: #ff4d4f; }
        
        .card { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 20px; }
        .card-header { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
        .card-title { font-size: 15px; font-weight: 600; color: #333; }
        .card-body { padding: 20px; }
        
        .chart-container { height: 300px; display: flex; align-items: flex-end; justify-content: space-around; padding: 20px 0; }
        .chart-bar { width: 40px; background: linear-gradient(180deg, #52c41a, #2E7D32); border-radius: 4px 4px 0 0; transition: height 0.3s; }
        .chart-label { text-align: center; font-size: 12px; color: #666; margin-top: 8px; }
        
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
        .table th { background: #fafafa; font-weight: 600; color: #666; }
        .table tr:hover { background: #fafafa; }
        .table img { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; }
        .badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; }
        .badge-success { background: #e6f7ff; color: #1890ff; }
        .badge-warning { background: #fff7e6; color: #faad14; }
        .badge-danger { background: #fff1f0; color: #ff4d4f; }
        .badge-green { background: #e8f5e9; color: #2e7d32; }
        
        .btn { padding: 6px 14px; border-radius: 4px; border: none; font-size: 12px; cursor: pointer; transition: all 0.2s; }
        .btn-primary { background: #2E7D32; color: white; }
        .btn-primary:hover { background: #388E3C; }
        .btn-default { background: #f5f5f5; color: #666; }
        .btn-default:hover { background: #e8e8e8; }
        .btn-danger { background: #ff4d4f; color: white; }
        .btn-danger:hover { background: #ff7875; }
        
        .form-group { margin-bottom: 16px; }
        .form-label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
        .form-input { width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; }
        .form-input:focus { outline: none; border-color: #2E7D32; }
        .form-textarea { width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; resize: vertical; min-height: 80px; }
        
        .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 2000; }
        .modal.show { display: flex; }
        .modal-content { background: white; border-radius: 8px; width: 500px; max-width: 90%; max-height: 90vh; overflow: auto; }
        .modal-header { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
        .modal-title { font-size: 16px; font-weight: 600; }
        .modal-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #999; font-size: 18px; }
        .modal-close:hover { color: #333; }
        .modal-body { padding: 20px; }
        .modal-footer { padding: 16px 20px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; gap: 8px; }
        
        .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; }
        .page-btn { min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 4px; background: white; cursor: pointer; font-size: 13px; }
        .page-btn:hover { border-color: #2E7D32; color: #2E7D32; }
        .page-btn.active { background: #2E7D32; color: white; border-color: #2E7D32; }
        
        .upload-box { border: 2px dashed #d9d9d9; border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; }
        .upload-box:hover { border-color: #2E7D32; }
        .upload-icon { font-size: 36px; color: #999; margin-bottom: 10px; }
        .upload-text { font-size: 13px; color: #666; }
        
        .filter-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
        .filter-item { display: flex; align-items: center; gap: 8px; }
        .filter-item select { padding: 6px 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; }
        
        .tab-nav { display: flex; border-bottom: 1px solid #f0f0f0; margin-bottom: 16px; }
        .tab-item { padding: 10px 20px; cursor: pointer; border-bottom: 2px solid transparent; font-size: 14px; color: #666; }
        .tab-item:hover { color: #2E7D32; }
        .tab-item.active { color: #2E7D32; border-bottom-color: #2E7D32; font-weight: 600; }
        
        .file-upload { display: none; }
        
        .recent-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
        .recent-item:last-child { border-bottom: none; }
        .recent-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #e8e8e8; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .recent-info { flex: 1; }
        .recent-name { font-size: 13px; font-weight: 600; color: #333; }
        .recent-time { font-size: 11px; color: #999; margin-top: 2px; }
        .recent-action { font-size: 12px; color: #2E7D32; }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-left">
            <div class="logo">景</div>
            <div class="header-title">景区导览后台管理系统</div>
        </div>
        <div class="header-right">
            <div class="admin-info">
                <div class="admin-avatar">管</div>
                <span>管理员</span>
            </div>
            <span>|</span>
            <span style="cursor:pointer;">退出</span>
        </div>
    </div>
    
    <div class="layout">
        <div class="sidebar">
            <div class="nav-item active" onclick="switchPage('dashboard')">
                <span>数据概览</span>
            </div>
            <div class="nav-item" onclick="switchPage('poi')">
                <span>景点管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('route')">
                <span>路线管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('users')">
                <span>用户管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('checkin')">
                <span>打卡记录</span>
            </div>
            <div class="nav-item" onclick="switchPage('audio')">
                <span>语音管理</span>
            </div>
            <div class="nav-item" onclick="switchPage('settings')">
                <span>系统设置</span>
            </div>
        </div>
        
        <div class="main">
            <!-- 数据概览 -->
            <div id="page-dashboard" class="page active">
                <div class="page-title">数据概览</div>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value">1,258</div>
                        <div class="stat-label">今日游览人数</div>
                        <div class="stat-change up">较昨日 +12.5%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">3,642</div>
                        <div class="stat-label">累计打卡次数</div>
                        <div class="stat-change up">较昨日 +8.3%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">856</div>
                        <div class="stat-label">收藏数量</div>
                        <div class="stat-change up">较昨日 +5.2%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">2,180</div>
                        <div class="stat-label">语音播放次数</div>
                        <div class="stat-change up">较昨日 +15.7%</div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">近7日游览趋势</div>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <div>
                                <div class="chart-bar" style="height: 120px;"></div>
                                <div class="chart-label">周一</div>
                            </div>
                            <div>
                                <div class="chart-bar" style="height: 100px;"></div>
                                <div class="chart-label">周二</div>
                            </div>
                            <div>
                                <div class="chart-bar" style="height: 140px;"></div>
                                <div class="chart-label">周三</div>
                            </div>
                            <div>
                                <div class="chart-bar" style="height: 110px;"></div>
                                <div class="chart-label">周四</div>
                            </div>
                            <div>
                                <div class="chart-bar" style="height: 160px;"></div>
                                <div class="chart-label">周五</div>
                            </div>
                            <div>
                                <div class="chart-bar" style="height: 200px;"></div>
                                <div class="chart-label">周六</div>
                            </div>
                            <div>
                                <div class="chart-bar" style="height: 180px;"></div>
                                <div class="chart-label">周日</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">热门景点 TOP5</div>
                        </div>
                        <div class="card-body">
                            <table class="table">
                                <thead><tr><th>排名</th><th>景点名称</th><th>游览次数</th><th>热度</th></tr></thead>
                                <tbody>
                                    <tr><td>1</td><td>万寿山</td><td>892</td><td><span class="badge badge-danger">爆火</span></td></tr>
                                    <tr><td>2</td><td>昆明湖</td><td>756</td><td><span class="badge badge-warning">热</span></td></tr>
                                    <tr><td>3</td><td>长廊</td><td>623</td><td><span class="badge badge-success">上升</span></td></tr>
                                    <tr><td>4</td><td>佛香阁</td><td>445</td><td><span class="badge badge-green">稳定</span></td></tr>
                                    <tr><td>5</td><td>排云殿</td><td>312</td><td><span class="badge badge-green">稳定</span></td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">最近打卡</div>
                        </div>
                        <div class="card-body">
                            <div class="recent-item">
                                <div class="recent-avatar">游</div>
                                <div class="recent-info"><div class="recent-name">微信用户_7823</div><div class="recent-time">2分钟前 · 万寿山</div></div>
                                <div class="recent-action">打卡</div>
                            </div>
                            <div class="recent-item">
                                <div class="recent-avatar">游</div>
                                <div class="recent-info"><div class="recent-name">微信用户_4512</div><div class="recent-time">5分钟前 · 昆明湖</div></div>
                                <div class="recent-action">打卡</div>
                            </div>
                            <div class="recent-item">
                                <div class="recent-avatar">游</div>
                                <div class="recent-info"><div class="recent-name">微信用户_9034</div><div class="recent-time">8分钟前 · 长廊</div></div>
                                <div class="recent-action">收藏</div>
                            </div>
                            <div class="recent-item">
                                <div class="recent-avatar">游</div>
                                <div class="recent-info"><div class="recent-name">微信用户_2256</div><div class="recent-time">12分钟前 · 佛香阁</div></div>
                                <div class="recent-action">打卡</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 景点管理 -->
            <div id="page-poi" class="page">
                <div class="page-title">景点管理</div>
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">景点列表</div>
                        <button class="btn btn-primary" onclick="showModal('poi-modal')">+ 添加景点</button>
                    </div>
                    <div class="card-body">
                        <div class="filter-bar">
                            <div class="filter-item">
                                <select><option>全部状态</option><option>已启用</option><option>已禁用</option></select>
                            </div>
                            <div class="filter-item">
                                <input type="text" class="form-input" placeholder="搜索景点名称" style="width: 200px;">
                            </div>
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <table class="table">
                            <thead><tr><th>景点图片</th><th>景点名称</th><th>景点描述</th><th>坐标</th><th>语音讲解</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr>
                                    <td><img src="https://picsum.photos/seed/mountain/50/50" alt=""></td>
                                    <td>万寿山</td>
                                    <td>景区最高峰，海拔60米</td>
                                    <td>39.9990, 116.2780</td>
                                    <td><span class="badge badge-success">已配置</span></td>
                                    <td><span class="badge badge-success">已启用</span></td>
                                    <td>
                                        <button class="btn btn-default" style="margin-right:4px;">编辑</button>
                                        <button class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><img src="https://picsum.photos/seed/lake/50/50" alt=""></td>
                                    <td>昆明湖</td>
                                    <td>皇家园林湖泊</td>
                                    <td>39.9960, 116.2740</td>
                                    <td><span class="badge badge-success">已配置</span></td>
                                    <td><span class="badge badge-success">已启用</span></td>
                                    <td>
                                        <button class="btn btn-default" style="margin-right:4px;">编辑</button>
                                        <button class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><img src="https://picsum.photos/seed/pavilion/50/50" alt=""></td>
                                    <td>长廊</td>
                                    <td>彩画长廊世界最长</td>
                                    <td>39.9975, 116.2720</td>
                                    <td><span class="badge badge-success">已配置</span></td>
                                    <td><span class="badge badge-success">已启用</span></td>
                                    <td>
                                        <button class="btn btn-default" style="margin-right:4px;">编辑</button>
                                        <button class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><img src="https://picsum.photos/seed/gate/50/50" alt=""></td>
                                    <td>景区入口</td>
                                    <td>游览起点</td>
                                    <td>39.9998, 116.2736</td>
                                    <td><span class="badge badge-warning">待配置</span></td>
                                    <td><span class="badge badge-success">已启用</span></td>
                                    <td>
                                        <button class="btn btn-default" style="margin-right:4px;">编辑</button>
                                        <button class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pagination">
                            <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 id="page-route" class="page">
                <div class="page-title">路线管理</div>
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">游览路线列表</div>
                        <button class="btn btn-primary">+ 添加路线</button>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead><tr><th>路线名称</th><th>途经景点</th><th>预计时长</th><th>路线长度</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr>
                                    <td>精华游览路线</td>
                                    <td>入口→万寿山→昆明湖→长廊</td>
                                    <td>约2小时</td>
                                    <td>3.5公里</td>
                                    <td><span class="badge badge-success">推荐中</span></td>
                                    <td>
                                        <button class="btn btn-default" style="margin-right:4px;">编辑</button>
                                        <button class="btn btn-default">详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>深度体验路线</td>
                                    <td>入口→长廊→排云殿→佛香阁→万寿山→昆明湖</td>
                                    <td>约3小时</td>
                                    <td>5.2公里</td>
                                    <td><span class="badge badge-success">启用</span></td>
                                    <td>
                                        <button class="btn btn-default" style="margin-right:4px;">编辑</button>
                                        <button class="btn btn-default">详情</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 用户管理 -->
            <div id="page-users" class="page">
                <div class="page-title">用户管理</div>
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">用户列表</div>
                    </div>
                    <div class="card-body">
                        <div class="filter-bar">
                            <div class="filter-item">
                                <input type="text" class="form-input" placeholder="搜索用户ID/昵称" style="width: 200px;">
                            </div>
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <table class="table">
                            <thead><tr><th>用户ID</th><th>昵称</th><th>游览次数</th><th>打卡数</th><th>收藏数</th><th>注册时间</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr>
                                    <td>888888</td>
                                    <td>微信用户_888888</td>
                                    <td>3</td>
                                    <td>5</td>
                                    <td>3</td>
                                    <td>2024-01-15</td>
                                    <td><button class="btn btn-default">详情</button></td>
                                </tr>
                                <tr>
                                    <td>123456</td>
                                    <td>微信用户_123456</td>
                                    <td>8</td>
                                    <td>12</td>
                                    <td>6</td>
                                    <td>2024-02-20</td>
                                    <td><button class="btn btn-default">详情</button></td>
                                </tr>
                                <tr>
                                    <td>654321</td>
                                    <td>微信用户_654321</td>
                                    <td>2</td>
                                    <td>3</td>
                                    <td>1</td>
                                    <td>2024-03-10</td>
                                    <td><button class="btn btn-default">详情</button></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pagination">
                            <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 id="page-checkin" class="page">
                <div class="page-title">打卡记录</div>
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">打卡记录列表</div>
                        <button class="btn btn-default">导出数据</button>
                    </div>
                    <div class="card-body">
                        <div class="filter-bar">
                            <div class="filter-item">
                                <select><option>全部景点</option><option>万寿山</option><option>昆明湖</option><option>长廊</option></select>
                            </div>
                            <div class="filter-item">
                                <input type="date" class="form-input" style="width: 150px;">
                            </div>
                            <span>至</span>
                            <div class="filter-item">
                                <input type="date" class="form-input" style="width: 150px;">
                            </div>
                            <button class="btn btn-default">搜索</button>
                        </div>
                        <table class="table">
                            <thead><tr><th>用户ID</th><th>景点名称</th><th>打卡时间</th><th>获得经验</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr>
                                    <td>888888</td>
                                    <td>万寿山</td>
                                    <td>2024-05-11 14:32</td>
                                    <td>+10</td>
                                    <td><button class="btn btn-default">详情</button></td>
                                </tr>
                                <tr>
                                    <td>123456</td>
                                    <td>昆明湖</td>
                                    <td>2024-05-11 15:18</td>
                                    <td>+10</td>
                                    <td><button class="btn btn-default">详情</button></td>
                                </tr>
                                <tr>
                                    <td>654321</td>
                                    <td>长廊</td>
                                    <td>2024-05-11 16:05</td>
                                    <td>+10</td>
                                    <td><button class="btn btn-default">详情</button></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pagination">
                            <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 id="page-audio" class="page">
                <div class="page-title">语音管理</div>
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">语音讲解列表</div>
                        <button class="btn btn-primary">+ 上传语音</button>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead><tr><th>语音名称</th><th>关联景点</th><th>时长</th><th>文件大小</th><th>播放次数</th><th>上传时间</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr>
                                    <td>万寿山语音讲解</td>
                                    <td>万寿山</td>
                                    <td>3:45</td>
                                    <td>2.3MB</td>
                                    <td>1,256</td>
                                    <td>2024-01-10</td>
                                    <td>
                                        <button class="btn btn-default" style="margin-right:4px;">播放</button>
                                        <button class="btn btn-default" style="margin-right:4px;">编辑</button>
                                        <button class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>昆明湖语音讲解</td>
                                    <td>昆明湖</td>
                                    <td>2:30</td>
                                    <td>1.8MB</td>
                                    <td>892</td>
                                    <td>2024-01-10</td>
                                    <td>
                                        <button class="btn btn-default" style="margin-right:4px;">播放</button>
                                        <button class="btn btn-default" style="margin-right:4px;">编辑</button>
                                        <button class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>长廊语音讲解</td>
                                    <td>长廊</td>
                                    <td>4:15</td>
                                    <td>2.8MB</td>
                                    <td>756</td>
                                    <td>2024-01-10</td>
                                    <td>
                                        <button class="btn btn-default" style="margin-right:4px;">播放</button>
                                        <button class="btn btn-default" style="margin-right:4px;">编辑</button>
                                        <button class="btn btn-danger">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置 -->
            <div id="page-settings" class="page">
                <div class="page-title">系统设置</div>
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">基本设置</div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label class="form-label">景区名称</label>
                            <input type="text" class="form-input" value="景区导览" style="width: 300px;">
                        </div>
                        <div class="form-group">
                            <label class="form-label">开放时间</label>
                            <input type="text" class="form-input" value="06:30 - 19:00" style="width: 300px;">
                        </div>
                        <div class="form-group">
                            <label class="form-label">门票价格（淡季）</label>
                            <input type="text" class="form-input" value="30" style="width: 150px;"> 元
                        </div>
                        <div class="form-group">
                            <label class="form-label">门票价格（旺季）</label>
                            <input type="text" class="form-input" value="60" style="width: 150px;"> 元
                        </div>
                        <div class="form-group">
                            <label class="form-label">景区电话</label>
                            <input type="text" class="form-input" value="010-62881144" style="width: 200px;">
                        </div>
                        <div class="form-group">
                            <label class="form-label">语音自动播放</label>
                            <input type="checkbox" checked> 开启
                        </div>
                        <div class="form-group">
                            <label class="form-label">到达提醒</label>
                            <input type="checkbox" checked> 开启
                        </div>
                        <button class="btn btn-primary">保存设置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 添加景点弹窗 -->
    <div id="poi-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">添加景点</div>
                <div class="modal-close" onclick="hideModal('poi-modal')">×</div>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">景点图片</label>
                    <div class="upload-box">
                        <div class="upload-icon">+</div>
                        <div class="upload-text">点击上传图片</div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">景点名称</label>
                    <input type="text" class="form-input" placeholder="请输入景点名称">
                </div>
                <div class="form-group">
                    <label class="form-label">景点描述</label>
                    <textarea class="form-textarea" placeholder="请输入景点描述">