From 5fe4fa35897843519ed72dcf8445bdaa615d97e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8yuuula?=
 <15122962+rain-yuuula@user.noreply.gitee.com>
Date: Fri, 11 Jul 2025 13:34:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B7=AF=E7=BA=BF=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=92=8C=E8=BF=90=E8=B4=B9=E7=AE=A1=E7=90=86=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/service/route-management.html       | 778 ++++++++++++++++++
 .../service/transport-fee-management.html     | 645 +++++++++++++++
 2 files changed, 1423 insertions(+)
 create mode 100644 src/views/service/route-management.html
 create mode 100644 src/views/service/transport-fee-management.html
diff --git a/src/views/service/route-management.html b/src/views/service/route-management.html
new file mode 100644
index 0000000..355710c
--- /dev/null
+++ b/src/views/service/route-management.html
@@ -0,0 +1,778 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>飞行器管理系统 - 路线管理</title>
+    <!-- 引入Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- 引入Font Awesome -->
+    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    
+    <!-- Tailwind配置 -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#0f172a',
+                        secondary: '#334155',
+                        success: '#047857',
+                        danger: '#b91c1c',
+                        warning: '#b45309',
+                        info: '#0e7490',
+                        light: '#f8fafc',
+                        dark: '#020617',
+                        gray: {
+                            50: '#f8fafc',
+                            100: '#f1f5f9',
+                            200: '#e2e8f0',
+                            300: '#cbd5e1',
+                            400: '#94a3b8',
+                            500: '#64748b',
+                            600: '#475569',
+                            700: '#334155',
+                            800: '#1e293b',
+                            900: '#0f172a',
+                        }
+                    },
+                    fontFamily: {
+                        inter: ['Inter', 'system-ui', 'sans-serif'],
+                    },
+                    boxShadow: {
+                        'card': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                        'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+                        'elegant': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                    }
+                },
+            }
+        }
+    </script>
+    
+    <!-- 自定义工具类 -->
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .content-auto {
+                content-visibility: auto;
+            }
+            .transition-custom {
+                transition: all 0.2s ease;
+            }
+            .btn-hover {
+                @apply hover:scale-[1.02] transition-all duration-200;
+            }
+            .input-focus {
+                @apply focus:ring-2 focus:ring-primary/20 focus:border-primary;
+            }
+            .table-row-hover {
+                @apply hover:bg-gray-50/80 transition-all duration-200;
+            }
+            .gradient-bg {
+                background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            }
+        }
+    </style>
+</head>
+<body class="gradient-bg font-inter text-gray-900 min-h-screen flex flex-col">
+    <!-- 顶部导航 -->
+    <header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
+        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+                <i class="fa fa-paper-plane text-primary text-xl"></i>
+                <h1 class="text-lg font-semibold text-gray-900 hidden sm:block">飞行器管理系统</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="relative hidden md:block">
+                    <input type="text" placeholder="全局搜索..." class="pl-9 pr-4 py-2 rounded-lg bg-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 w-64">
+                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                </div>
+                <div class="flex items-center space-x-3">
+                    <button class="p-2 rounded-full hover:bg-gray-100 relative">
+                        <i class="fa fa-bell-o text-gray-600"></i>
+                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
+                    </button>
+                    <div class="flex items-center space-x-2">
+                        <div class="w-8 h-8 rounded-full bg-gray-200 overflow-hidden">
+                            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover">
+                        </div>
+                        <span class="text-sm font-medium hidden sm:block">管理员</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="flex flex-1 overflow-hidden">
+        <!-- 侧边导航 -->
+        <aside class="w-16 sm:w-56 bg-white shadow-sm border-r border-gray-200 h-[calc(100vh-56px)] sticky top-[56px] transition-all duration-300 ease-in-out z-40">
+            <nav class="h-full flex flex-col">
+                <div class="px-4 py-3 border-b border-gray-200 hidden sm:block">
+                    <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">主导航</h2>
+                </div>
+                <ul class="flex-1 overflow-y-auto py-2">
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-home text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">首页</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-cog text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">系统管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-building-o text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">平台管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-plane text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">飞行器管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 bg-primary/5 text-primary border-l-4 border-primary">
+                            <i class="fa fa-map-o text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">路线管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-list-alt text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">订单管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-money text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">运输金额管理</span>
+                        </a>
+                    </li>
+                </ul>
+                <div class="p-4 border-t border-gray-200 hidden sm:block">
+                    <div class="flex items-center space-x-3">
+                        <div class="w-8 h-8 rounded-full bg-gray-200 overflow-hidden">
+                            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover">
+                        </div>
+                        <div>
+                            <p class="text-sm font-medium">管理员</p>
+                            <p class="text-xs text-gray-500">admin@example.com</p>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- 主内容区 -->
+        <main class="flex-1 overflow-y-auto bg-gray-50 p-3 sm:p-4 lg:p-6">
+            <div class="max-w-7xl mx-auto">
+
+                <!-- 搜索区域 -->
+                <div class="bg-white rounded-xl shadow-elegant p-3 sm:p-4 mb-6 border border-gray-100">
+                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+                        <div class="w-full sm:w-auto flex-1 max-w-md">
+                            <div class="relative">
+                                <input type="text" id="routeName" placeholder="请输入路线名称" class="w-full px-3 py-1.5 sm:py-2 pl-10 border border-gray-200 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-gray-50/50 text-sm">
+                                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
+                            </div>
+                        </div>
+                        <div class="flex gap-2">
+                            <button id="searchBtn" class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 hover:shadow-lg flex items-center justify-center">
+                                <i class="fa fa-search mr-1 text-xs"></i>查询
+                            </button>
+                            <button id="resetBtn" class="bg-white border border-gray-200 text-gray-700 px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-sm font-medium hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 flex items-center justify-center">
+                                <i class="fa fa-refresh mr-1 text-xs"></i>重置
+                            </button>
+                            <button id="addRouteBtn" class="bg-success hover:bg-success/90 text-white px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 hover:shadow-lg flex items-center justify-center">
+                                <i class="fa fa-plus mr-1 text-xs"></i>新增路线
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
+
+                <!-- 表格区域 -->
+                <div class="bg-white rounded-xl shadow-elegant overflow-hidden border border-gray-100">
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-100">
+                            <thead class="bg-gradient-to-r from-gray-50 to-gray-100/50">
+                                <tr>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">城市名称</th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">景区名称</th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">路线名称</th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">创建时间</th>
+                                    <th scope="col" class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">操作</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-100" id="routeTableBody">
+                                <!-- 表格数据由JavaScript动态生成 -->
+                            </tbody>
+                        </table>
+                    </div>
+                    
+                    <!-- 分页 -->
+                    <div class="px-6 py-3 border-t border-gray-200 flex items-center justify-between">
+                        <div class="flex-1 flex justify-between sm:hidden">
+                            <button class="relative inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                                上一页
+                            </button>
+                            <button class="ml-2 relative inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                                下一页
+                            </button>
+                        </div>
+                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                            <div>
+                                <p class="text-xs text-gray-700">
+                                    显示第 <span class="font-medium" id="currentPageStart">1</span> 到 <span class="font-medium" id="currentPageEnd">10</span> 条，共 <span class="font-medium" id="totalCount">10</span> 条记录
+                                </p>
+                            </div>
+                            <div>
+                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                    <button class="pagination-btn relative inline-flex items-center px-2 py-1 border border-gray-300 text-xs font-medium rounded-l-md text-gray-500 bg-white hover:bg-gray-50" data-page="prev">
+                                        <span class="sr-only">上一页</span>
+                                        <i class="fa fa-chevron-left"></i>
+                                    </button>
+                                    <button class="pagination-btn relative inline-flex items-center px-3 py-1 border border-primary bg-primary text-white text-xs font-medium" data-page="1">
+                                        1
+                                    </button>
+                                    <button class="pagination-btn relative inline-flex items-center px-3 py-1 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 text-xs font-medium" data-page="2">
+                                        2
+                                    </button>
+                                    <span class="relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white text-xs font-medium text-gray-700">
+                                        ...
+                                    </span>
+                                    <button class="pagination-btn relative inline-flex items-center px-3 py-1 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 text-xs font-medium" data-page="5">
+                                        5
+                                    </button>
+                                    <button class="pagination-btn relative inline-flex items-center px-2 py-1 border border-gray-300 text-xs font-medium rounded-r-md text-gray-500 bg-white hover:bg-gray-50" data-page="next">
+                                        <span class="sr-only">下一页</span>
+                                        <i class="fa fa-chevron-right"></i>
+                                    </button>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- 新增/修改路线模态框 -->
+    <div id="routeModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
+        <div class="bg-white rounded-lg shadow-lg w-full max-w-md mx-4 transform transition-all duration-300 opacity-0 scale-95" id="modalContent">
+            <div class="p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-900" id="modalTitle">新增路线</h3>
+                    <button id="closeModalBtn" class="text-gray-400 hover:text-gray-500 focus:outline-none">
+                        <i class="fa fa-times text-xl"></i>
+                    </button>
+                </div>
+                <form id="routeForm">
+                    <div class="space-y-4">
+                        <div>
+                            <label for="routeNameInput" class="block text-sm font-medium text-gray-700">
+                                <span class="text-danger">*</span> 路线名称
+                            </label>
+                            <input type="text" id="routeNameInput" name="routeName" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none input-focus" placeholder="请输入路线名称">
+                            <p class="mt-1 text-sm text-danger hidden" id="routeNameError">请输入路线名称</p>
+                        </div>
+                        <div>
+                            <label for="scenicAreaInput" class="block text-sm font-medium text-gray-700">
+                                <span class="text-danger">*</span> 景区名称
+                            </label>
+                            <select id="scenicAreaInput" name="scenicArea" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none input-focus">
+                                <option value="">请选择景区</option>
+                                <option value="白云山">白云山</option>
+                                <option value="丹霞山">丹霞山</option>
+                                <option value="西樵山">西樵山</option>
+                                <option value="罗浮山">罗浮山</option>
+                                <option value="鼎湖山">鼎湖山</option>
+                            </select>
+                            <p class="mt-1 text-sm text-danger hidden" id="scenicAreaError">请选择景区</p>
+                        </div>
+                        <div>
+                            <label for="takeoffPointInput" class="block text-sm font-medium text-gray-700">
+                                <span class="text-danger">*</span> 起飞点
+                            </label>
+                            <input type="text" id="takeoffPointInput" name="takeoffPoint" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none input-focus" placeholder="请输入起飞点">
+                            <p class="mt-1 text-sm text-danger hidden" id="takeoffPointError">请输入起飞点</p>
+                        </div>
+                        <div>
+                            <label for="landingPointInput" class="block text-sm font-medium text-gray-700">
+                                <span class="text-danger">*</span> 降落点
+                            </label>
+                            <input type="text" id="landingPointInput" name="landingPoint" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none input-focus" placeholder="请输入降落点">
+                            <p class="mt-1 text-sm text-danger hidden" id="landingPointError">请输入降落点</p>
+                        </div>
+                        <div>
+                            <label for="descriptionInput" class="block text-sm font-medium text-gray-700">路线描述</label>
+                            <textarea id="descriptionInput" name="description" rows="3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none input-focus" placeholder="请输入路线描述（选填）"></textarea>
+                        </div>
+                    </div>
+
+                    <div class="mt-6 flex justify-end space-x-3">
+                        <button type="button" id="cancelModalBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                            取消
+                        </button>
+                        <button type="submit" id="submitRouteBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                            保存
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- 删除确认模态框 -->
+    <div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
+        <div class="bg-white rounded-lg shadow-lg w-full max-w-md mx-4 transform transition-all duration-300 opacity-0 scale-95" id="deleteModalContent">
+            <div class="p-6">
+                <div class="text-center mb-4">
+                    <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-danger/10 mb-4">
+                        <i class="fa fa-exclamation-triangle text-danger text-xl"></i>
+                    </div>
+                    <h3 class="text-lg font-semibold text-gray-900">确认删除</h3>
+                    <p class="text-gray-500 mt-2" id="deleteMessage">此操作将永久删除路线"白云山-山顶路线"，是否继续？</p>
+                </div>
+                <div class="flex justify-center space-x-3">
+                    <button id="cancelDeleteBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                        取消
+                    </button>
+                    <button id="confirmDeleteBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-danger hover:bg-danger/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-danger">
+                        确认删除
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 成功提示消息 -->
+    <div id="successToast" class="fixed top-4 right-4 bg-success text-white px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-y-[-200%] opacity-0 z-50 flex items-center">
+        <i class="fa fa-check-circle mr-2"></i>
+        <span id="successMessage">操作成功</span>
+    </div>
+
+    <script>
+        // 示例数据
+        const routes = [
+            { id: 1, city: '广州', scenicArea: '白云山', routeName: '山脚到山顶', createTime: '2023-05-10 09:30:00' },
+            { id: 2, city: '广州', scenicArea: '白云山', routeName: '南门到西门', createTime: '2023-06-15 14:15:00' },
+            { id: 3, city: '韶关', scenicArea: '丹霞山', routeName: '长老峰环线', createTime: '2023-07-20 10:45:00' },
+            { id: 4, city: '佛山', scenicArea: '西樵山', routeName: '天湖到南海观音', createTime: '2023-08-05 16:20:00' },
+            { id: 5, city: '惠州', scenicArea: '罗浮山', routeName: '朱明洞到飞云顶', createTime: '2023-09-12 11:10:00' },
+            { id: 6, city: '肇庆', scenicArea: '鼎湖山', routeName: '宝鼎园到飞水潭', createTime: '2023-10-18 13:30:00' },
+            { id: 7, city: '广州', scenicArea: '白云山', routeName: '梅花园到明珠楼', createTime: '2023-11-25 08:45:00' },
+            { id: 8, city: '韶关', scenicArea: '丹霞山', routeName: '阳元石到阴元石', createTime: '2023-12-05 15:20:00' },
+            { id: 9, city: '佛山', scenicArea: '西樵山', routeName: '碧玉洞到翠岩', createTime: '2024-01-15 10:10:00' },
+            { id: 10, city: '惠州', scenicArea: '罗浮山', routeName: '黄龙观到华首台', createTime: '2024-02-20 14:00:00' },
+            { id: 11, city: '广州', scenicArea: '白云山', routeName: '摩星岭路线', createTime: '2024-03-05 09:45:00' },
+            { id: 12, city: '韶关', scenicArea: '丹霞山', routeName: '锦江游船路线', createTime: '2024-03-18 15:30:00' },
+            { id: 13, city: '佛山', scenicArea: '西樵山', routeName: '碧玉洞瀑布路线', createTime: '2024-04-02 11:20:00' },
+            { id: 14, city: '惠州', scenicArea: '罗浮山', routeName: '九天观路线', createTime: '2024-04-15 14:10:00' },
+            { id: 15, city: '肇庆', scenicArea: '鼎湖山', routeName: '庆云寺路线', createTime: '2024-04-28 10:30:00' },
+            { id: 16, city: '广州', scenicArea: '白云山', routeName: '白云索道路线', createTime: '2024-05-10 16:20:00' },
+            { id: 17, city: '韶关', scenicArea: '丹霞山', routeName: '巴寨路线', createTime: '2024-05-22 09:15:00' },
+            { id: 18, city: '佛山', scenicArea: '西樵山', routeName: '四方竹园路线', createTime: '2024-06-05 13:40:00' },
+            { id: 19, city: '惠州', scenicArea: '罗浮山', routeName: '酥醪观路线', createTime: '2024-06-18 11:50:00' },
+            { id: 20, city: '肇庆', scenicArea: '鼎湖山', routeName: '蝴蝶谷路线', createTime: '2024-06-30 14:25:00' },
+        ];
+
+        // 当前编辑的路线ID
+        let currentRouteId = null;
+        // 当前页码
+        let currentPage = 1;
+        // 每页显示数量
+        const pageSize = 10;
+        // 当前筛选数据
+        let filteredRoutes = [...routes];
+
+        // DOM元素
+        const routeTableBody = document.getElementById('routeTableBody');
+        const addRouteBtn = document.getElementById('addRouteBtn');
+        const routeModal = document.getElementById('routeModal');
+        const modalContent = document.getElementById('modalContent');
+        const closeModalBtn = document.getElementById('closeModalBtn');
+        const cancelModalBtn = document.getElementById('cancelModalBtn');
+        const routeForm = document.getElementById('routeForm');
+        const modalTitle = document.getElementById('modalTitle');
+        const submitRouteBtn = document.getElementById('submitRouteBtn');
+        const deleteModal = document.getElementById('deleteModal');
+        const deleteModalContent = document.getElementById('deleteModalContent');
+        const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
+        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
+        const deleteMessage = document.getElementById('deleteMessage');
+        const searchBtn = document.getElementById('searchBtn');
+        const resetBtn = document.getElementById('resetBtn');
+        const successToast = document.getElementById('successToast');
+        const successMessage = document.getElementById('successMessage');
+        const currentPageStart = document.getElementById('currentPageStart');
+        const currentPageEnd = document.getElementById('currentPageEnd');
+        const totalCount = document.getElementById('totalCount');
+
+        // 获取当前页数据
+        function getCurrentPageData() {
+            const startIndex = (currentPage - 1) * pageSize;
+            const endIndex = Math.min(startIndex + pageSize, filteredRoutes.length);
+            return filteredRoutes.slice(startIndex, endIndex);
+        }
+
+        // 更新分页信息
+        function updatePaginationInfo() {
+            const total = filteredRoutes.length;
+            const start = Math.min((currentPage - 1) * pageSize + 1, total);
+            const end = Math.min(currentPage * pageSize, total);
+            
+            currentPageStart.textContent = start;
+            currentPageEnd.textContent = end;
+            totalCount.textContent = total;
+        }
+
+        // 初始化表格数据
+        function initTableData() {
+            const currentData = getCurrentPageData();
+            routeTableBody.innerHTML = '';
+            
+            if (currentData.length === 0) {
+                routeTableBody.innerHTML = `
+                    <tr>
+                        <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+                            <div class="flex flex-col items-center">
+                                <i class="fa fa-inbox text-3xl mb-2 text-gray-300"></i>
+                                <p class="text-sm">暂无路线数据</p>
+                                <p class="text-xs text-gray-400 mt-1">点击"新增路线"按钮开始添加</p>
+                            </div>
+                        </td>
+                    </tr>
+                `;
+                return;
+            }
+            
+            currentData.forEach(route => {
+                const row = document.createElement('tr');
+                row.className = 'table-row-hover';
+                row.innerHTML = `
+                    <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500">${route.city}</td>
+                    <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500">${route.scenicArea}</td>
+                    <td class="px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900">${route.routeName}</td>
+                    <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500">${route.createTime}</td>
+                    <td class="px-6 py-3 whitespace-nowrap text-right text-sm font-medium">
+                        <button class="text-primary hover:text-primary/80 mr-3 edit-btn" data-id="${route.id}">
+                            <i class="fa fa-pencil mr-1"></i>修改
+                        </button>
+                        <button class="text-danger hover:text-danger/80 delete-btn" data-id="${route.id}" data-name="${route.routeName}">
+                            <i class="fa fa-trash mr-1"></i>删除
+                        </button>
+                    </td>
+                `;
+                routeTableBody.appendChild(row);
+            });
+            
+            // 添加编辑和删除事件监听
+            document.querySelectorAll('.edit-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const id = parseInt(btn.getAttribute('data-id'));
+                    openEditModal(id);
+                });
+            });
+            
+            document.querySelectorAll('.delete-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const id = parseInt(btn.getAttribute('data-id'));
+                    const name = btn.getAttribute('data-name');
+                    openDeleteModal(id, name);
+                });
+            });
+            
+            // 更新分页信息
+            updatePaginationInfo();
+        }
+
+        // 打开新增模态框
+        function openAddModal() {
+            currentRouteId = null;
+            modalTitle.textContent = '新增路线';
+            submitRouteBtn.textContent = '保存';
+            routeForm.reset();
+            hideAllErrors();
+            
+            // 显示模态框并添加动画
+            routeModal.classList.remove('hidden');
+            setTimeout(() => {
+                modalContent.classList.remove('opacity-0', 'scale-95');
+                modalContent.classList.add('opacity-100', 'scale-100');
+            }, 10);
+        }
+
+        // 打开编辑模态框
+        function openEditModal(id) {
+            const route = routes.find(r => r.id === id);
+            if (!route) return;
+            
+            currentRouteId = id;
+            modalTitle.textContent = '修改路线';
+            submitRouteBtn.textContent = '修改';
+            
+            // 填充表单数据
+            document.getElementById('routeNameInput').value = route.routeName;
+            document.getElementById('scenicAreaInput').value = route.scenicArea;
+            document.getElementById('takeoffPointInput').value = `起飞点-${route.routeName}`; // 示例数据
+            document.getElementById('landingPointInput').value = `降落点-${route.routeName}`; // 示例数据
+            document.getElementById('descriptionInput').value = `这是一条从${route.scenicArea}的${route.routeName}的运输路线`; // 示例数据
+            
+            hideAllErrors();
+            
+            // 显示模态框并添加动画
+            routeModal.classList.remove('hidden');
+            setTimeout(() => {
+                modalContent.classList.remove('opacity-0', 'scale-95');
+                modalContent.classList.add('opacity-100', 'scale-100');
+            }, 10);
+        }
+
+        // 关闭模态框
+        function closeModal() {
+            modalContent.classList.remove('opacity-100', 'scale-100');
+            modalContent.classList.add('opacity-0', 'scale-95');
+            setTimeout(() => {
+                routeModal.classList.add('hidden');
+            }, 300);
+        }
+
+        // 打开删除确认模态框
+        function openDeleteModal(id, name) {
+            currentRouteId = id;
+            deleteMessage.textContent = `此操作将永久删除路线"${name}"，是否继续？`;
+            
+            // 显示模态框并添加动画
+            deleteModal.classList.remove('hidden');
+            setTimeout(() => {
+                deleteModalContent.classList.remove('opacity-0', 'scale-95');
+                deleteModalContent.classList.add('opacity-100', 'scale-100');
+            }, 10);
+        }
+
+        // 关闭删除确认模态框
+        function closeDeleteModal() {
+            deleteModalContent.classList.remove('opacity-100', 'scale-100');
+            deleteModalContent.classList.add('opacity-0', 'scale-95');
+            setTimeout(() => {
+                deleteModal.classList.add('hidden');
+            }, 300);
+        }
+
+        // 隐藏所有错误提示
+        function hideAllErrors() {
+            document.getElementById('routeNameError').classList.add('hidden');
+            document.getElementById('scenicAreaError').classList.add('hidden');
+            document.getElementById('takeoffPointError').classList.add('hidden');
+            document.getElementById('landingPointError').classList.add('hidden');
+        }
+
+        // 验证表单
+        function validateForm() {
+            let isValid = true;
+            hideAllErrors();
+            
+            const routeName = document.getElementById('routeNameInput').value.trim();
+            const scenicArea = document.getElementById('scenicAreaInput').value;
+            const takeoffPoint = document.getElementById('takeoffPointInput').value.trim();
+            const landingPoint = document.getElementById('landingPointInput').value.trim();
+            
+            if (!routeName) {
+                document.getElementById('routeNameError').classList.remove('hidden');
+                isValid = false;
+            }
+            
+            if (!scenicArea) {
+                document.getElementById('scenicAreaError').classList.remove('hidden');
+                isValid = false;
+            }
+            
+            if (!takeoffPoint) {
+                document.getElementById('takeoffPointError').classList.remove('hidden');
+                isValid = false;
+            }
+            
+            if (!landingPoint) {
+                document.getElementById('landingPointError').classList.remove('hidden');
+                isValid = false;
+            }
+            
+            return isValid;
+        }
+
+        // 显示成功提示
+        function showSuccess(message) {
+            successMessage.textContent = message;
+            successToast.classList.remove('translate-y-[-200%]', 'opacity-0');
+            successToast.classList.add('translate-y-0', 'opacity-100');
+            
+            setTimeout(() => {
+                successToast.classList.remove('translate-y-0', 'opacity-100');
+                successToast.classList.add('translate-y-[-200%]', 'opacity-0');
+            }, 3000);
+        }
+
+        // 处理表单提交
+        function handleFormSubmit(e) {
+            e.preventDefault();
+            
+            if (!validateForm()) return;
+            
+            const routeName = document.getElementById('routeNameInput').value.trim();
+            const scenicArea = document.getElementById('scenicAreaInput').value;
+            const takeoffPoint = document.getElementById('takeoffPointInput').value.trim();
+            const landingPoint = document.getElementById('landingPointInput').value.trim();
+            const description = document.getElementById('descriptionInput').value.trim();
+            
+            if (currentRouteId === null) {
+                // 新增路线
+                const newId = Math.max(...routes.map(r => r.id)) + 1;
+                const newRoute = {
+                    id: newId,
+                    city: scenicArea === '白云山' || scenicArea === '西樵山' ? '广州' : 
+                          scenicArea === '丹霞山' ? '韶关' : 
+                          scenicArea === '罗浮山' ? '惠州' : '肇庆',
+                    scenicArea,
+                    routeName,
+                    createTime: new Date().toISOString().slice(0, 19).replace('T', ' ')
+                };
+                routes.unshift(newRoute);
+                filteredRoutes = [...routes];
+                currentPage = 1;
+                showSuccess('路线添加成功');
+            } else {
+                // 修改路线
+                const index = routes.findIndex(r => r.id === currentRouteId);
+                if (index !== -1) {
+                    routes[index].routeName = routeName;
+                    routes[index].scenicArea = scenicArea;
+                    routes[index].city = scenicArea === '白云山' || scenicArea === '西樵山' ? '广州' : 
+                                         scenicArea === '丹霞山' ? '韶关' : 
+                                         scenicArea === '罗浮山' ? '惠州' : '肇庆';
+                    // 更新筛选数据中的对应项
+                    const filteredIndex = filteredRoutes.findIndex(r => r.id === currentRouteId);
+                    if (filteredIndex !== -1) {
+                        filteredRoutes[filteredIndex] = routes[index];
+                    }
+                    showSuccess('路线修改成功');
+                }
+            }
+            
+            initTableData();
+            closeModal();
+        }
+
+        // 处理删除确认
+        function handleDeleteConfirm() {
+            if (currentRouteId !== null) {
+                const index = routes.findIndex(r => r.id === currentRouteId);
+                if (index !== -1) {
+                    routes.splice(index, 1);
+                    filteredRoutes = filteredRoutes.filter(r => r.id !== currentRouteId);
+                    // 如果删除后当前页没有数据了，跳转到上一页
+                    if ((currentPage - 1) * pageSize >= filteredRoutes.length && currentPage > 1) {
+                        currentPage--;
+                    }
+                    showSuccess('路线删除成功');
+                    initTableData();
+                }
+            }
+            closeDeleteModal();
+        }
+
+        // 处理搜索
+        function handleSearch() {
+            const routeName = document.getElementById('routeName').value.trim().toLowerCase();
+            
+            filteredRoutes = routes.filter(route => {
+                return route.routeName.toLowerCase().includes(routeName);
+            });
+            
+            currentPage = 1;
+            initTableData();
+        }
+
+        // 处理重置
+        function handleReset() {
+            document.getElementById('routeName').value = '';
+            filteredRoutes = [...routes];
+            currentPage = 1;
+            initTableData();
+        }
+
+        // 处理分页
+        function handlePagination(e) {
+            const page = e.target.getAttribute('data-page');
+            
+            if (page === 'prev') {
+                if (currentPage > 1) {
+                    currentPage--;
+                    initTableData();
+                }
+            } else if (page === 'next') {
+                if (currentPage < Math.ceil(filteredRoutes.length / pageSize)) {
+                    currentPage++;
+                    initTableData();
+                }
+            } else {
+                currentPage = parseInt(page);
+                initTableData();
+            }
+        }
+
+        // 初始化事件监听
+        function initEventListeners() {
+            // 添加路线按钮
+            addRouteBtn.addEventListener('click', openAddModal);
+            
+            // 关闭模态框按钮
+            closeModalBtn.addEventListener('click', closeModal);
+            cancelModalBtn.addEventListener('click', closeModal);
+            
+            // 表单提交
+            routeForm.addEventListener('submit', handleFormSubmit);
+            
+            // 删除确认
+            cancelDeleteBtn.addEventListener('click', closeDeleteModal);
+            confirmDeleteBtn.addEventListener('click', handleDeleteConfirm);
+            
+            // 搜索和重置
+            searchBtn.addEventListener('click', handleSearch);
+            resetBtn.addEventListener('click', handleReset);
+            
+            // 分页按钮
+            document.querySelectorAll('.pagination-btn').forEach(btn => {
+                btn.addEventListener('click', handlePagination);
+            });
+            
+            // 点击模态框外部关闭
+            routeModal.addEventListener('click', (e) => {
+                if (e.target === routeModal) {
+                    closeModal();
+                }
+            });
+            
+            deleteModal.addEventListener('click', (e) => {
+                if (e.target === deleteModal) {
+                    closeDeleteModal();
+                }
+            });
+        }
+
+        // 初始化页面
+        function initPage() {
+            initTableData();
+            initEventListeners();
+        }
+
+        // 页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', initPage);
+    </script>
+</body>
+</html>
+    
\ No newline at end of file
diff --git a/src/views/service/transport-fee-management.html b/src/views/service/transport-fee-management.html
new file mode 100644
index 0000000..f363620
--- /dev/null
+++ b/src/views/service/transport-fee-management.html
@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>飞行器管理系统 - 运输金额管理</title>
+    <!-- 引入Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- 引入Font Awesome -->
+    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    
+    <!-- Tailwind配置 -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#0f172a',
+                        secondary: '#334155',
+                        success: '#047857',
+                        danger: '#b91c1c',
+                        warning: '#b45309',
+                        info: '#0e7490',
+                        light: '#f8fafc',
+                        dark: '#020617',
+                        gray: {
+                            50: '#f8fafc',
+                            100: '#f1f5f9',
+                            200: '#e2e8f0',
+                            300: '#cbd5e1',
+                            400: '#94a3b8',
+                            500: '#64748b',
+                            600: '#475569',
+                            700: '#334155',
+                            800: '#1e293b',
+                            900: '#0f172a',
+                        }
+                    },
+                    fontFamily: {
+                        inter: ['Inter', 'system-ui', 'sans-serif'],
+                    },
+                    boxShadow: {
+                        'card': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                        'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+                        'elegant': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                    }
+                },
+            }
+        }
+    </script>
+    
+    <!-- 自定义工具类 -->
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .content-auto {
+                content-visibility: auto;
+            }
+            .transition-custom {
+                transition: all 0.2s ease;
+            }
+            .btn-hover {
+                @apply hover:scale-[1.02] transition-all duration-200;
+            }
+            .input-focus {
+                @apply focus:ring-2 focus:ring-primary/20 focus:border-primary;
+            }
+            .table-row-hover {
+                @apply hover:bg-gray-50/80 transition-all duration-200;
+            }
+            .gradient-bg {
+                background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            }
+        }
+    </style>
+</head>
+<body class="gradient-bg font-inter text-gray-900 min-h-screen flex flex-col">
+    <!-- 顶部导航 -->
+    <header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
+        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+                <i class="fa fa-paper-plane text-primary text-xl"></i>
+                <h1 class="text-lg font-semibold text-gray-900 hidden sm:block">飞行器管理系统</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="relative hidden md:block">
+                    <input type="text" placeholder="全局搜索..." class="pl-9 pr-4 py-2 rounded-lg bg-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 w-64">
+                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                </div>
+                <div class="flex items-center space-x-3">
+                    <button class="p-2 rounded-full hover:bg-gray-100 relative">
+                        <i class="fa fa-bell-o text-gray-600"></i>
+                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
+                    </button>
+                    <div class="flex items-center space-x-2">
+                        <div class="w-8 h-8 rounded-full bg-gray-200 overflow-hidden">
+                            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover">
+                        </div>
+                        <span class="text-sm font-medium hidden sm:block">管理员</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="flex flex-1 overflow-hidden">
+        <!-- 侧边导航 -->
+        <aside class="w-16 sm:w-56 bg-white shadow-sm border-r border-gray-200 h-[calc(100vh-56px)] sticky top-[56px] transition-all duration-300 ease-in-out z-40">
+            <nav class="h-full flex flex-col">
+                <div class="px-4 py-3 border-b border-gray-200 hidden sm:block">
+                    <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">主导航</h2>
+                </div>
+                <ul class="flex-1 overflow-y-auto py-2">
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-home text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">首页</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-cog text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">系统管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-building-o text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">平台管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-plane text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">飞行器管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-map-o text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">路线管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-custom">
+                            <i class="fa fa-list-alt text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">订单管理</span>
+                        </a>
+                    </li>
+                    <li class="mb-1">
+                        <a href="#" class="flex items-center px-4 py-3 bg-primary/5 text-primary border-l-4 border-primary">
+                            <i class="fa fa-money text-lg w-6"></i>
+                            <span class="ml-3 hidden sm:block">运输金额管理</span>
+                        </a>
+                    </li>
+                </ul>
+                <div class="p-4 border-t border-gray-200 hidden sm:block">
+                    <div class="flex items-center space-x-3">
+                        <div class="w-8 h-8 rounded-full bg-gray-200 overflow-hidden">
+                            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover">
+                        </div>
+                        <div>
+                            <p class="text-sm font-medium">管理员</p>
+                            <p class="text-xs text-gray-500">admin@example.com</p>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- 主内容区 -->
+        <main class="flex-1 overflow-y-auto bg-gray-50 p-3 sm:p-4 lg:p-6">
+            <div class="max-w-7xl mx-auto">
+
+                <!-- 搜索区域 -->
+                <div class="bg-white rounded-xl shadow-elegant p-3 sm:p-4 mb-6 border border-gray-100">
+                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+                        <div class="w-full sm:w-auto flex-1 max-w-md">
+                            <div class="relative">
+                                <input type="text" id="scenicName" placeholder="请输入景区名称" class="w-full px-3 py-1.5 sm:py-2 pl-10 border border-gray-200 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-gray-50/50 text-sm">
+                                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
+                            </div>
+                        </div>
+                        <div class="flex gap-2">
+                            <button id="searchBtn" class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-all duration-200 hover:shadow-lg flex items-center justify-center">
+                                <i class="fa fa-search mr-1 text-xs"></i>查询
+                            </button>
+                            <button id="resetBtn" class="bg-white border border-gray-200 text-gray-700 px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-sm font-medium hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 flex items-center justify-center">
+                                <i class="fa fa-refresh mr-1 text-xs"></i>重置
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 表格区域 -->
+                <div class="bg-white rounded-xl shadow-elegant overflow-hidden border border-gray-100">
+                    <div class="overflow-x-auto">
+                        <table class="min-w-full divide-y divide-gray-100">
+                            <thead class="bg-gradient-to-r from-gray-50 to-gray-100/50">
+                                <tr>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">区域名称</th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">景区名称</th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">金额/KG</th>
+                                    <th scope="col" class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">操作</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-100" id="transportFeeTableBody">
+                                <!-- 表格数据由JavaScript动态生成 -->
+                            </tbody>
+                        </table>
+                    </div>
+                    
+                    <!-- 分页 -->
+                    <div class="px-6 py-3 border-t border-gray-200 flex items-center justify-between">
+                        <div class="flex-1 flex justify-between sm:hidden">
+                            <button class="relative inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                                上一页
+                            </button>
+                            <button class="ml-2 relative inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                                下一页
+                            </button>
+                        </div>
+                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                            <div>
+                                <p class="text-xs text-gray-700">
+                                    显示第 <span class="font-medium" id="currentPageStart">1</span> 到 <span class="font-medium" id="currentPageEnd">10</span> 条，共 <span class="font-medium" id="totalCount">57</span> 条记录
+                                </p>
+                            </div>
+                            <div>
+                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                                    <button class="pagination-btn relative inline-flex items-center px-2 py-1 border border-gray-300 text-xs font-medium rounded-l-md text-gray-500 bg-white hover:bg-gray-50" data-page="prev">
+                                        <span class="sr-only">上一页</span>
+                                        <i class="fa fa-chevron-left"></i>
+                                    </button>
+                                    <button class="pagination-btn relative inline-flex items-center px-3 py-1 border border-primary bg-primary text-white text-xs font-medium" data-page="1">
+                                        1
+                                    </button>
+                                    <button class="pagination-btn relative inline-flex items-center px-3 py-1 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 text-xs font-medium" data-page="2">
+                                        2
+                                    </button>
+                                    <button class="pagination-btn relative inline-flex items-center px-3 py-1 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 text-xs font-medium" data-page="3">
+                                        3
+                                    </button>
+                                    <span class="relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white text-xs font-medium text-gray-700">
+                                        ...
+                                    </span>
+                                    <button class="pagination-btn relative inline-flex items-center px-3 py-1 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 text-xs font-medium" data-page="6">
+                                        6
+                                    </button>
+                                    <button class="pagination-btn relative inline-flex items-center px-2 py-1 border border-gray-300 text-xs font-medium rounded-r-md text-gray-500 bg-white hover:bg-gray-50" data-page="next">
+                                        <span class="sr-only">下一页</span>
+                                        <i class="fa fa-chevron-right"></i>
+                                    </button>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- 设置金额模态框 -->
+    <div id="setFeeModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
+        <div class="bg-white rounded-lg shadow-lg w-full max-w-md mx-4 transform transition-all duration-300 opacity-0 scale-95" id="modalContent">
+            <div class="p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-gray-900" id="modalTitle">设置金额</h3>
+                    <button id="closeModalBtn" class="text-gray-400 hover:text-gray-500 focus:outline-none">
+                        <i class="fa fa-times text-xl"></i>
+                    </button>
+                </div>
+                <form id="setFeeForm">
+                    <div class="space-y-4">
+                        <div>
+                            <label for="scenicNameDisplay" class="block text-sm font-medium text-gray-700">景区名称</label>
+                            <input type="text" id="scenicNameDisplay" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none bg-gray-50 text-gray-700 text-sm" readonly>
+                        </div>
+                        <div>
+                            <label for="feeInput" class="block text-sm font-medium text-gray-700">
+                                <span class="text-danger">*</span> 金额(KG)
+                            </label>
+                            <div class="relative">
+                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">¥</span>
+                                <input type="number" id="feeInput" name="fee" min="0" step="0.01" class="mt-1 block w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none input-focus text-sm" placeholder="请输入金额">
+                            </div>
+                            <p class="mt-1 text-sm text-danger hidden" id="feeError">请输入有效金额</p>
+                        </div>
+                    </div>
+
+                    <div class="mt-6 flex justify-end space-x-3">
+                        <button type="button" id="cancelSetFeeBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                            取消
+                        </button>
+                        <button type="submit" id="submitSetFeeBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                            保存
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- 成功提示消息 -->
+    <div id="successToast" class="fixed top-4 right-4 bg-success text-white px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-y-[-200%] opacity-0 z-50 flex items-center">
+        <i class="fa fa-check-circle mr-2"></i>
+        <span id="successMessage">操作成功</span>
+    </div>
+
+    <script>
+        // 示例数据 - 景区数据（从景区管理获取）
+        const scenicAreas = [
+            { id: 1, region: '北京区域', name: '故宫', feePerKg: 2.5 },
+            { id: 2, region: '北京区域', name: '八达岭长城', feePerKg: 2.8 },
+            { id: 3, region: '北京区域', name: '颐和园', feePerKg: 2.3 },
+            { id: 4, region: '北京区域', name: '天坛', feePerKg: 2.6 },
+            { id: 5, region: '北京区域', name: '鸟巢', feePerKg: 2.2 },
+            { id: 6, region: '广州区域', name: '白云山', feePerKg: 2.0 },
+            { id: 7, region: '广州区域', name: '陈家祠', feePerKg: 1.9 },
+            { id: 8, region: '广州区域', name: '越秀公园', feePerKg: 2.1 },
+            { id: 9, region: '广州区域', name: '沙面', feePerKg: 1.8 },
+            { id: 10, region: '广州区域', name: '长隆旅游度假区', feePerKg: 2.4 },
+            { id: 11, region: '上海区域', name: '外滩', feePerKg: 3.0 },
+            { id: 12, region: '上海区域', name: '上海迪士尼乐园', feePerKg: 3.2 },
+            { id: 13, region: '上海区域', name: '豫园', feePerKg: 2.7 },
+            { id: 14, region: '上海区域', name: '上海科技馆', feePerKg: 2.9 },
+            { id: 15, region: '上海区域', name: '东方明珠', feePerKg: 3.1 },
+            { id: 16, region: '深圳区域', name: '世界之窗', feePerKg: 2.6 },
+            { id: 17, region: '深圳区域', name: '欢乐谷', feePerKg: 2.8 },
+            { id: 18, region: '深圳区域', name: '深圳湾公园', feePerKg: 2.3 },
+            { id: 19, region: '深圳区域', name: '大梅沙', feePerKg: 2.5 },
+            { id: 20, region: '深圳区域', name: '锦绣中华', feePerKg: 2.4 },
+            { id: 21, region: '杭州区域', name: '西湖', feePerKg: 2.2 },
+            { id: 22, region: '杭州区域', name: '灵隐寺', feePerKg: 2.5 },
+            { id: 23, region: '杭州区域', name: '千岛湖', feePerKg: 2.7 },
+            { id: 24, region: '杭州区域', name: '宋城', feePerKg: 2.6 },
+            { id: 25, region: '杭州区域', name: '西溪国家湿地公园', feePerKg: 2.3 },
+            { id: 26, region: '成都区域', name: '大熊猫繁育研究基地', feePerKg: 2.9 },
+            { id: 27, region: '成都区域', name: '锦里', feePerKg: 2.4 },
+            { id: 28, region: '成都区域', name: '宽窄巷子', feePerKg: 2.5 },
+            { id: 29, region: '成都区域', name: '青城山', feePerKg: 2.8 },
+            { id: 30, region: '成都区域', name: '都江堰', feePerKg: 2.7 },
+            { id: 31, region: '南京区域', name: '中山陵', feePerKg: 2.3 },
+            { id: 32, region: '南京区域', name: '夫子庙', feePerKg: 2.2 },
+            { id: 33, region: '南京区域', name: '明孝陵', feePerKg: 2.4 },
+            { id: 34, region: '南京区域', name: '玄武湖', feePerKg: 2.1 },
+            { id: 35, region: '南京区域', name: '总统府', feePerKg: 2.5 },
+            { id: 36, region: '西安区域', name: '兵马俑', feePerKg: 3.0 },
+            { id: 37, region: '西安区域', name: '华清池', feePerKg: 2.8 },
+            { id: 38, region: '西安区域', name: '大雁塔', feePerKg: 2.6 },
+            { id: 39, region: '西安区域', name: '古城墙', feePerKg: 2.4 },
+            { id: 40, region: '西安区域', name: '陕西历史博物馆', feePerKg: 2.7 },
+            { id: 41, region: '武汉区域', name: '黄鹤楼', feePerKg: 2.5 },
+            { id: 42, region: '武汉区域', name: '东湖', feePerKg: 2.3 },
+            { id: 43, region: '武汉区域', name: '武汉大学', feePerKg: 2.2 },
+            { id: 44, region: '武汉区域', name: '归元寺', feePerKg: 2.4 },
+            { id: 45, region: '武汉区域', name: '户部巷', feePerKg: 2.1 },
+            { id: 46, region: '重庆区域', name: '洪崖洞', feePerKg: 2.8 },
+            { id: 47, region: '重庆区域', name: '解放碑', feePerKg: 2.6 },
+            { id: 48, region: '重庆区域', name: '磁器口古镇', feePerKg: 2.5 },
+            { id: 49, region: '重庆区域', name: '长江索道', feePerKg: 3.0 },
+            { id: 50, region: '重庆区域', name: '李子坝轻轨站', feePerKg: 2.7 },
+            { id: 51, region: '苏州区域', name: '拙政园', feePerKg: 2.4 },
+            { id: 52, region: '苏州区域', name: '虎丘', feePerKg: 2.3 },
+            { id: 53, region: '苏州区域', name: '寒山寺', feePerKg: 2.2 },
+            { id: 54, region: '苏州区域', name: '周庄古镇', feePerKg: 2.6 },
+            { id: 55, region: '苏州区域', name: '狮子林', feePerKg: 2.5 },
+            { id: 56, region: '长沙区域', name: '橘子洲头', feePerKg: 2.3 },
+            { id: 57, region: '长沙区域', name: '岳麓山', feePerKg: 2.4 },
+        ];
+
+        // 当前操作的景区ID
+        let currentScenicId = null;
+        // 当前页码
+        let currentPage = 1;
+        // 每页显示数量
+        const pageSize = 10;
+        // 当前筛选数据
+        let filteredScenicAreas = [...scenicAreas];
+
+        // DOM元素
+        const transportFeeTableBody = document.getElementById('transportFeeTableBody');
+        const searchBtn = document.getElementById('searchBtn');
+        const scenicNameInput = document.getElementById('scenicName');
+        const resetBtn = document.getElementById('resetBtn');
+        const setFeeModal = document.getElementById('setFeeModal');
+        const modalContent = document.getElementById('modalContent');
+        const closeModalBtn = document.getElementById('closeModalBtn');
+        const cancelSetFeeBtn = document.getElementById('cancelSetFeeBtn');
+        const setFeeForm = document.getElementById('setFeeForm');
+        const modalTitle = document.getElementById('modalTitle');
+        const scenicNameDisplay = document.getElementById('scenicNameDisplay');
+        const feeInput = document.getElementById('feeInput');
+        const feeError = document.getElementById('feeError');
+        const submitSetFeeBtn = document.getElementById('submitSetFeeBtn');
+        const successToast = document.getElementById('successToast');
+        const successMessage = document.getElementById('successMessage');
+        const currentPageStart = document.getElementById('currentPageStart');
+        const currentPageEnd = document.getElementById('currentPageEnd');
+        const totalCount = document.getElementById('totalCount');
+
+        // 获取当前页数据
+        function getCurrentPageData() {
+            const startIndex = (currentPage - 1) * pageSize;
+            const endIndex = Math.min(startIndex + pageSize, filteredScenicAreas.length);
+            return filteredScenicAreas.slice(startIndex, endIndex);
+        }
+
+        // 更新分页信息
+        function updatePaginationInfo() {
+            const total = filteredScenicAreas.length;
+            const start = Math.min((currentPage - 1) * pageSize + 1, total);
+            const end = Math.min(currentPage * pageSize, total);
+            
+            currentPageStart.textContent = start;
+            currentPageEnd.textContent = end;
+            totalCount.textContent = total;
+        }
+
+        // 初始化表格数据
+        function initTableData() {
+            const currentData = getCurrentPageData();
+            transportFeeTableBody.innerHTML = '';
+            
+            if (currentData.length === 0) {
+                transportFeeTableBody.innerHTML = `
+                    <tr>
+                        <td colspan="4" class="px-6 py-10 text-center text-gray-500">
+                            <div class="flex flex-col items-center">
+                                <i class="fa fa-inbox text-4xl mb-3 text-gray-300"></i>
+                                <p>暂无景区数据</p>
+                            </div>
+                        </td>
+                    </tr>
+                `;
+                return;
+            }
+            
+            currentData.forEach(scenic => {
+                const row = document.createElement('tr');
+                row.className = 'table-row-hover';
+                row.innerHTML = `
+                    <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500">${scenic.region}</td>
+                    <td class="px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900">${scenic.name}</td>
+                    <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
+                        <span class="font-medium">¥${scenic.feePerKg.toFixed(2)}</span>/KG
+                    </td>
+                    <td class="px-6 py-3 whitespace-nowrap text-right text-sm font-medium">
+                        <button class="text-primary hover:text-primary/80 set-fee-btn" data-id="${scenic.id}" data-name="${scenic.name}" data-fee="${scenic.feePerKg}">
+                            <i class="fa fa-cog mr-1"></i>设置金额
+                        </button>
+                    </td>
+                `;
+                transportFeeTableBody.appendChild(row);
+            });
+            
+            // 添加设置金额按钮事件监听
+            document.querySelectorAll('.set-fee-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const id = parseInt(btn.getAttribute('data-id'));
+                    const name = btn.getAttribute('data-name');
+                    const fee = parseFloat(btn.getAttribute('data-fee'));
+                    openSetFeeModal(id, name, fee);
+                });
+            });
+            
+            // 更新分页信息
+            updatePaginationInfo();
+        }
+
+        // 打开设置金额模态框
+        function openSetFeeModal(id, name, fee) {
+            currentScenicId = id;
+            scenicNameDisplay.value = name;
+            feeInput.value = fee;
+            hideFeeError();
+            
+            // 显示模态框并添加动画
+            setFeeModal.classList.remove('hidden');
+            setTimeout(() => {
+                modalContent.classList.remove('opacity-0', 'scale-95');
+                modalContent.classList.add('opacity-100', 'scale-100');
+            }, 10);
+        }
+
+        // 关闭模态框
+        function closeModal() {
+            modalContent.classList.remove('opacity-100', 'scale-100');
+            modalContent.classList.add('opacity-0', 'scale-95');
+            setTimeout(() => {
+                setFeeModal.classList.add('hidden');
+            }, 300);
+        }
+
+        // 隐藏金额错误提示
+        function hideFeeError() {
+            feeError.classList.add('hidden');
+        }
+
+        // 显示金额错误提示
+        function showFeeError() {
+            feeError.classList.remove('hidden');
+        }
+
+        // 显示成功提示
+        function showSuccess(message) {
+            successMessage.textContent = message;
+            successToast.classList.remove('translate-y-[-200%]', 'opacity-0');
+            successToast.classList.add('translate-y-0', 'opacity-100');
+            
+            setTimeout(() => {
+                successToast.classList.remove('translate-y-0', 'opacity-100');
+                successToast.classList.add('translate-y-[-200%]', 'opacity-0');
+            }, 3000);
+        }
+
+        // 处理设置金额表单提交
+        function handleSetFeeSubmit(e) {
+            e.preventDefault();
+            
+            const fee = parseFloat(feeInput.value);
+            
+            if (isNaN(fee) || fee <= 0) {
+                showFeeError();
+                return;
+            }
+            
+            // 更新景区数据
+            const index = scenicAreas.findIndex(s => s.id === currentScenicId);
+            if (index !== -1) {
+                scenicAreas[index].feePerKg = fee;
+                // 更新筛选数据中的对应项
+                const filteredIndex = filteredScenicAreas.findIndex(s => s.id === currentScenicId);
+                if (filteredIndex !== -1) {
+                    filteredScenicAreas[filteredIndex].feePerKg = fee;
+                }
+                showSuccess('金额设置成功');
+                initTableData();
+            }
+            
+            closeModal();
+        }
+
+        // 处理搜索
+        function handleSearch() {
+            const searchTerm = scenicNameInput.value.trim().toLowerCase();
+            
+            if (!searchTerm) {
+                filteredScenicAreas = [...scenicAreas];
+                currentPage = 1;
+                initTableData();
+                return;
+            }
+            
+            filteredScenicAreas = scenicAreas.filter(scenic => 
+                scenic.name.toLowerCase().includes(searchTerm) || 
+                scenic.region.toLowerCase().includes(searchTerm)
+            );
+            
+            currentPage = 1;
+            initTableData();
+        }
+
+        // 处理重置搜索
+        function handleReset() {
+            scenicNameInput.value = '';
+            filteredScenicAreas = [...scenicAreas];
+            currentPage = 1;
+            initTableData();
+        }
+
+        // 处理分页按钮点击
+        function handlePaginationClick(e) {
+            const page = e.target.closest('.pagination-btn').getAttribute('data-page');
+            const totalPages = Math.ceil(filteredScenicAreas.length / pageSize);
+            
+            if (page === 'prev') {
+                if (currentPage > 1) {
+                    currentPage--;
+                    initTableData();
+                }
+            } else if (page === 'next') {
+                if (currentPage < totalPages) {
+                    currentPage++;
+                    initTableData();
+                }
+            } else {
+                const pageNum = parseInt(page);
+                if (pageNum >= 1 && pageNum <= totalPages) {
+                    currentPage = pageNum;
+                    initTableData();
+                }
+            }
+        }
+
+        // 添加事件监听器
+        function initEventListeners() {
+            // 搜索按钮点击事件
+            searchBtn.addEventListener('click', handleSearch);
+            
+            // 重置按钮点击事件
+            resetBtn.addEventListener('click', handleReset);
+            
+            // 输入框回车键搜索
+            scenicNameInput.addEventListener('keyup', (e) => {
+                if (e.key === 'Enter') {
+                    handleSearch();
+                }
+            });
+            
+            // 关闭模态框按钮点击事件
+            closeModalBtn.addEventListener('click', closeModal);
+            
+            // 取消设置金额按钮点击事件
+            cancelSetFeeBtn.addEventListener('click', closeModal);
+            
+            // 设置金额表单提交事件
+            setFeeForm.addEventListener('submit', handleSetFeeSubmit);
+            
+            // 金额输入框聚焦时隐藏错误提示
+            feeInput.addEventListener('focus', hideFeeError);
+            
+            // 分页按钮点击事件
+            document.querySelectorAll('.pagination-btn').forEach(btn => {
+                btn.addEventListener('click', handlePaginationClick);
+            });
+            
+            // 点击模态框外部关闭模态框
+            setFeeModal.addEventListener('click', (e) => {
+                if (e.target === setFeeModal) {
+                    closeModal();
+                }
+            });
+        }
+
+        // 初始化页面
+        function init() {
+            initTableData();
+            initEventListeners();
+        }
+
+        // 页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
+</body>
+</html>
\ No newline at end of file
