diff --git a/announcement.php b/announcement.php
index b67aa05..75337d7 100644
--- a/announcement.php
+++ b/announcement.php
@@ -60,6 +60,7 @@ try {
     <meta name="keywords" content="公告,今日待办,预约列表,洗车管理">
     <title>张老师撸车（私家车库）工作室</title>
     <link rel="stylesheet" href="style.css">
+    <script src="mobile-nav.js" defer></script>
     <style>
         /* 公告页面特有样式 */
         .announcement-container {
@@ -297,6 +298,11 @@ try {
 <body>
     <div class="container">
         <header class="header">
+            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
             <h1>🚗 张老师撸车工作室 - 今日待办</h1>
             <nav class="nav">
                 <a href="index.php" class="nav-link">预约洗车</a>
@@ -307,6 +313,17 @@ try {
                 <a href="announcement.php" class="nav-link active">今日待办</a>
             </nav>
         </header>
+        
+        <!-- 移动端导航菜单 -->
+        <div class="mobile-nav-overlay" onclick="closeMobileMenu()"></div>
+        <nav class="mobile-nav">
+            <a href="index.php" class="nav-link">预约洗车</a>
+            <a href="bookings.php" class="nav-link">预约管理</a>
+            <a href="pending_bookings.php" class="nav-link">待处理预约</a>
+            <a href="packages.php" class="nav-link">套餐管理</a>
+            <a href="vip.php" class="nav-link">VIP管理</a>
+            <a href="announcement.php" class="nav-link active">今日待办</a>
+        </nav>
 
         <div class="announcement-container">
             <!-- 页面标题区 -->
diff --git a/bookings.php b/bookings.php
index 63b726b..78a3c7c 100644
--- a/bookings.php
+++ b/bookings.php
@@ -84,6 +84,7 @@ try {
     <title>张老师撸车（私家车库）工作室</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="mobile-nav.js" defer></script>
     
     <!-- Favicon for mobile devices -->
     <link rel="apple-touch-icon" sizes="180x180" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚗</text></svg>">
@@ -91,6 +92,11 @@ try {
 <body>
     <div class="container">
         <header class="header">
+            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="菜单">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
             <h1>🚗 张老师撸车工作室 - 预约管理</h1>
             <nav class="nav">
                 <a href="index.php" class="nav-link">预约洗车</a>
@@ -101,6 +107,17 @@ try {
                 <a href="announcement.php" class="nav-link">今日待办</a>
             </nav>
         </header>
+        
+        <!-- 移动端导航菜单 -->
+        <div class="mobile-nav-overlay" onclick="closeMobileMenu()"></div>
+        <nav class="mobile-nav">
+            <a href="index.php" class="nav-link">预约洗车</a>
+            <a href="bookings.php" class="nav-link active">预约管理</a>
+            <a href="pending_bookings.php" class="nav-link">待处理预约</a>
+            <a href="packages.php" class="nav-link">套餐管理</a>
+            <a href="vip.php" class="nav-link">VIP管理</a>
+            <a href="announcement.php" class="nav-link">今日待办</a>
+        </nav>
 
         <?php if (isset($success_message)): ?>
             <div class="success-message"><?php echo $success_message; ?></div>
diff --git a/get_daily_booking_duration.php b/get_daily_booking_duration.php
index b4b8d52..3d64353 100644
--- a/get_daily_booking_duration.php
+++ b/get_daily_booking_duration.php
@@ -12,8 +12,8 @@ if (!preg_match('/^\d{4}-\d{2}-\d{2}$/', $date)) {
 }
 
 try {
-    // 查询指定日期的总预约时长
-    $sql = "SELECT SUM(duration) as total_duration FROM bookings WHERE DATE(start_time) = ?";
+    // 查询指定日期的总预约时长，只计算有效预约
+    $sql = "SELECT SUM(duration) as total_duration FROM bookings WHERE DATE(start_time) = ? AND status NOT IN ('已完成', '已取消')";
     $stmt = $pdo->prepare($sql);
     $stmt->execute([$date]);
     $row = $stmt->fetch();
diff --git a/index.php b/index.php
index 16f3696..705a616 100644
--- a/index.php
+++ b/index.php
@@ -271,6 +271,7 @@ $packages_json = json_encode(array_map(function($package) {
     <link rel="apple-touch-icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE5MiIgdmlld0JveD0iMCAwIDE5MiAxOTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxOTIiIGhlaWdodD0iMTkyIiByeD0iMjQiIGZpbGw9IiMzMDk1RjQiLz4KPHN2ZyB4PSI0OCIgeT0iNDgiIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+CjxwYXRoIGQ9Ik0yMS4yIDQuNEMyMS42IDMuNiAyMi4xIDMuMSAyMi41IDIuN0MyMy40IDIuMSAyNC41IDIuMSAyNS4yIDIuN0MyNS44IDMuMSAyNi4zIDMuNiAyNi43IDQuNEMyNy4xIDUuMSAyNy4xIDYuMiAyNi43IDcuMUMyNi4zIDcuOCAyNS44IDguMyAyNS4yIDguN0MyNC43IDkuMSAyMy42IDkuMSAyMi45IDguN0MyMi4zIDguMyAyMS44IDcuOCAyMS40IDcuMUMyMS4wIDYuMiAyMS4wIDUuMSAyMS4yIDQuNFoiLz4KPHN2ZyB4PSIyMCIgeT0iMTIiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+CjxwYXRoIGQ9Ik0yMSAyMy41QzIwLjUgMjMuNSAyMCAyMyAyMCAyMi41VjEyQzIwIDExLjUgMjAuNSAxMSAyMSAxMUg5QzguNSAxMSAxMi41IDEwLjUgMTIgMTBIMjBWMTBCMjAgMTAuNSAyMC41IDExIDIxIDExVjIzLjVaIi8+CjxwYXRoIGQ9Ik0xOCAyMFYxN0gxNFY4SDVWMTNIMTlWMTVIMTlWMjBaIi8+CjxwYXRoIGQ9Ik04IDEwSDVWN0g4VjEwWiIvPgo8L3N2Zz4KPC9zdmc+">
     <title>张老师撸车（私家车库）工作室</title>
     <link rel="stylesheet" href="style.css">
+    <script src="mobile-nav.js" defer></script>
     
     <style>
         /* VIP搜索结果样式 */
@@ -381,6 +382,11 @@ $packages_json = json_encode(array_map(function($package) {
 <body>
     <div class="container">
         <header class="header">
+            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="菜单">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
             <h1>🚗 张老师撸车工作室</h1>
             <nav class="nav">
                 <a href="index.php" class="nav-link active">预约洗车</a>
@@ -391,6 +397,17 @@ $packages_json = json_encode(array_map(function($package) {
                 <a href="announcement.php" class="nav-link">今日待办</a>
             </nav>
         </header>
+        
+        <!-- 移动端导航菜单 -->
+        <div class="mobile-nav-overlay" onclick="closeMobileMenu()"></div>
+        <nav class="mobile-nav">
+            <a href="index.php" class="nav-link active">预约洗车</a>
+            <a href="bookings.php" class="nav-link">预约管理</a>
+            <a href="pending_bookings.php" class="nav-link">待处理预约</a>
+            <a href="packages.php" class="nav-link">套餐管理</a>
+            <a href="vip.php" class="nav-link">VIP管理</a>
+            <a href="announcement.php" class="nav-link">今日待办</a>
+        </nav>
 
         <?php if ($message): ?>
             <div class="message error-message" style="background-color: #fee; color: #c33; border-color: #fcc;">
diff --git a/mobile-nav.js b/mobile-nav.js
new file mode 100644
index 0000000..5dc55a1
--- /dev/null
+++ b/mobile-nav.js
@@ -0,0 +1,83 @@
+// 移动端导航菜单控制
+function toggleMobileMenu() {
+    const toggle = document.querySelector('.mobile-menu-toggle');
+    const overlay = document.querySelector('.mobile-nav-overlay');
+    const nav = document.querySelector('.mobile-nav');
+    
+    if (!toggle || !overlay || !nav) return;
+    
+    toggle.classList.toggle('active');
+    overlay.classList.toggle('active');
+    nav.classList.toggle('active');
+    document.body.style.overflow = nav.classList.contains('active') ? 'hidden' : '';
+}
+
+function closeMobileMenu() {
+    const toggle = document.querySelector('.mobile-menu-toggle');
+    const overlay = document.querySelector('.mobile-nav-overlay');
+    const nav = document.querySelector('.mobile-nav');
+    
+    if (!toggle || !overlay || !nav) return;
+    
+    toggle.classList.remove('active');
+    overlay.classList.remove('active');
+    nav.classList.remove('active');
+    document.body.style.overflow = '';
+}
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+    // 点击导航链接后关闭菜单
+    const mobileNavLinks = document.querySelectorAll('.mobile-nav .nav-link');
+    mobileNavLinks.forEach(link => {
+        link.addEventListener('click', closeMobileMenu);
+    });
+    
+    // 点击遮罩层关闭菜单
+    const overlay = document.querySelector('.mobile-nav-overlay');
+    if (overlay) {
+        overlay.addEventListener('click', closeMobileMenu);
+    }
+    
+    // ESC键关闭菜单
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            closeMobileMenu();
+        }
+    });
+    
+    // 防止双击缩放（iOS Safari）
+    let lastTouchEnd = 0;
+    document.addEventListener('touchend', function(event) {
+        const now = Date.now();
+        if (now - lastTouchEnd <= 300) {
+            event.preventDefault();
+        }
+        lastTouchEnd = now;
+    }, false);
+    
+    // 优化触摸反馈
+    document.addEventListener('touchstart', function(e) {
+        const target = e.target;
+        if (target.classList.contains('btn') || 
+            target.classList.contains('time-slot') ||
+            target.classList.contains('calendar-day') ||
+            target.classList.contains('nav-link')) {
+            target.style.transition = 'transform 0.1s';
+            target.style.transform = 'scale(0.97)';
+        }
+    }, { passive: true });
+    
+    document.addEventListener('touchend', function(e) {
+        const target = e.target;
+        if (target.classList.contains('btn') || 
+            target.classList.contains('time-slot') ||
+            target.classList.contains('calendar-day') ||
+            target.classList.contains('nav-link')) {
+            setTimeout(() => {
+                target.style.transform = '';
+            }, 100);
+        }
+    }, { passive: true });
+});
+
diff --git a/packages.php b/packages.php
index 5967a2d..211ea3f 100644
--- a/packages.php
+++ b/packages.php
@@ -816,10 +816,16 @@ $total_bookings = array_sum(array_column($packages, 'booking_count'));
             animation: slideDown 0.3s ease;
         }
     </style>
+    <script src="mobile-nav.js" defer></script>
 </head>
 <body>
     <div class="packages-container">
         <header class="header">
+            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="菜单">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
             <h1>🚗 张老师撸车工作室 - 套餐管理</h1>
             <nav class="nav">
                 <a href="index.php" class="nav-link">预约洗车</a>
@@ -830,6 +836,17 @@ $total_bookings = array_sum(array_column($packages, 'booking_count'));
                 <a href="announcement.php" class="nav-link">今日待办</a>
             </nav>
         </header>
+        
+        <!-- 移动端导航菜单 -->
+        <div class="mobile-nav-overlay" onclick="closeMobileMenu()"></div>
+        <nav class="mobile-nav">
+            <a href="index.php" class="nav-link">预约洗车</a>
+            <a href="bookings.php" class="nav-link">预约管理</a>
+            <a href="pending_bookings.php" class="nav-link">待处理预约</a>
+            <a href="packages.php" class="nav-link active">套餐管理</a>
+            <a href="vip.php" class="nav-link">VIP管理</a>
+            <a href="announcement.php" class="nav-link">今日待办</a>
+        </nav>
 
         <?php if ($message): ?>
             <div class="message error-message" style="background-color: #fee; color: #c33; border-color: #fcc; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px;">
diff --git a/pending_bookings.php b/pending_bookings.php
index bd825f5..5da4fcc 100644
--- a/pending_bookings.php
+++ b/pending_bookings.php
@@ -186,9 +186,18 @@ try {
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="description" content="待处理预约页面，处理WPS表单数据">
+    <meta name="keywords" content="待处理预约,预约管理,洗车预约">
     <title>张老师撸车（私家车库）工作室</title>
     <link rel="stylesheet" href="style.css">
+    <script src="mobile-nav.js" defer></script>
+    
+    <!-- Favicon for mobile devices -->
+    <link rel="apple-touch-icon" sizes="180x180" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚗</text></svg>">
     <style>
         /* 待预约页面特定样式 */
         .pending-bookings-container {
@@ -435,30 +444,7 @@ try {
         }
         
         /* 预约时长提示样式 */
-        .duration-alert {
-            margin: 15px 0;
-            padding: 15px;
-            border-radius: 4px;
-            font-weight: bold;
-        }
-        
-        .duration-alert .alert {
-            padding: 12px;
-            border-radius: 4px;
-            margin-bottom: 0;
-        }
-        
-        .duration-alert .alert-warning {
-            background-color: #fff3cd;
-            border-color: #ffeaa7;
-            color: #856404;
-        }
-        
-        .duration-alert .alert-info {
-            background-color: #d1ecf1;
-            border-color: #bee5eb;
-            color: #0c5460;
-        }
+
         
         /* 套餐信息样式 */
         .package-info {
@@ -577,6 +563,11 @@ try {
 <body>
     <div class="pending-bookings-container">
         <header class="header">
+            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="菜单">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
             <h1>🚗 张老师撸车工作室 - 待处理预约</h1>
             <nav class="nav">
                 <a href="index.php" class="nav-link">预约洗车</a>
@@ -588,6 +579,17 @@ try {
             </nav>
         </header>
         
+        <!-- 移动端导航菜单 -->
+        <div class="mobile-nav-overlay" onclick="closeMobileMenu()"></div>
+        <nav class="mobile-nav">
+            <a href="index.php" class="nav-link">预约洗车</a>
+            <a href="bookings.php" class="nav-link">预约管理</a>
+            <a href="pending_bookings.php" class="nav-link active">待处理预约</a>
+            <a href="packages.php" class="nav-link">套餐管理</a>
+            <a href="vip.php" class="nav-link">VIP管理</a>
+            <a href="announcement.php" class="nav-link">今日待办</a>
+        </nav>
+        
         <?php if (isset($success_message)): ?>
             <div class="success-message"><?php echo $success_message; ?></div>
         <?php endif; ?>
@@ -754,8 +756,7 @@ try {
                                 </div>
                                 
                                 <!-- 预约时长提示区域 -->
-                                <div class="duration-alert" id="durationAlert_<?php echo $submission['id']; ?>">
-                                    <!-- 提示信息将通过JavaScript动态生成 -->
+                                            <!-- 提示信息将通过JavaScript动态生成 -->
                                 </div>
                                 
                                 <div class="form-row">
@@ -887,9 +888,6 @@ try {
             
             // 生成时间段
             generateTimeSlots(submissionId, date);
-            
-            // 显示时长提示
-            showDurationAlert(submissionId);
         }
         
         // 生成时间段
@@ -972,9 +970,6 @@ try {
             if (slotElement) {
                 slotElement.classList.add('selected');
             }
-            
-            // 显示时长提示
-            showDurationAlert(submissionId);
         }
         
         // 更新套餐信息
@@ -1178,9 +1173,6 @@ try {
             if (!buttonFound) {
                 console.warn('⚠️ No matching duration button found for:', minutes, 'minutes');
             }
-            
-            // 显示时长提示
-            showDurationAlert(submissionId);
         }
         
         // 应用自定义时长
@@ -1203,58 +1195,9 @@ try {
                 customDurationInput.value = roundedDuration;
                 selectDuration(submissionId, roundedDuration);
             }
-            
-            // 显示时长提示
-            showDurationAlert(submissionId);
         }
         
-        // 计算当天总预约时长（异步函数）
-        async function calculateDailyTotalDuration(submissionId) {
-            const selectedDate = document.getElementById('selected_date_' + submissionId).value;
-            const currentDuration = parseInt(document.getElementById('customDuration_' + submissionId).value);
-            
-            try {
-                // 通过AJAX请求获取当天已有的预约时长
-                const response = await fetch(`get_daily_booking_duration.php?date=${selectedDate}`);
-                const data = await response.json();
-                
-                if (data.error) {
-                    console.error('获取当天预约时长失败:', data.error);
-                    return currentDuration; // 如果获取失败，只返回当前预约时长
-                }
-                
-                const existingDuration = data.total_duration || 0;
-                return existingDuration + currentDuration;
-            } catch (error) {
-                console.error('获取当天预约时长出错:', error);
-                return currentDuration; // 如果出错，只返回当前预约时长
-            }
-        }
-        
-        // 显示时长提示
-        async function showDurationAlert(submissionId) {
-            const alertContainer = document.getElementById('durationAlert_' + submissionId);
-            
-            // 清空现有提示
-            alertContainer.innerHTML = '<div class="alert alert-info">加载中...</div>';
-            
-            try {
-                const totalDuration = await calculateDailyTotalDuration(submissionId);
-                
-                // 清空现有提示
-                alertContainer.innerHTML = '';
-                
-                // 根据总时长显示不同的提示
-                if (totalDuration >= 720) { // 大于等于12小时
-                    alertContainer.innerHTML = '<div class="alert alert-warning">⚠️ 当天总预约时长已达到12小时，你要当超人啊，别约了！</div>';
-                } else if (totalDuration >= 360) { // 大于等于6小时
-                    alertContainer.innerHTML = '<div class="alert alert-info">💡 当天总预约时长已达到6小时，注意休息！</div>';
-                }
-            } catch (error) {
-                console.error('计算总预约时长出错:', error);
-                alertContainer.innerHTML = '';
-            }
-        }
+
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 918f69e..3981737 100644
--- a/style.css
+++ b/style.css
@@ -752,6 +752,98 @@ body {
     font-size: var(--el-font-size-base);
 }
 
+/* 移动端导航菜单（汉堡菜单） */
+.mobile-menu-toggle {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    padding: 8px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    z-index: 1001;
+}
+
+.mobile-menu-toggle span {
+    display: block;
+    width: 25px;
+    height: 3px;
+    background: var(--el-text-primary);
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.mobile-menu-toggle.active span:nth-child(1) {
+    transform: rotate(45deg) translate(8px, 8px);
+}
+
+.mobile-menu-toggle.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.mobile-menu-toggle.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -7px);
+}
+
+.mobile-nav-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.mobile-nav-overlay.active {
+    display: block;
+    opacity: 1;
+}
+
+.mobile-nav {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: -100%;
+    width: 280px;
+    max-width: 85vw;
+    height: 100vh;
+    background: white;
+    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+    z-index: 1000;
+    overflow-y: auto;
+    transition: left 0.3s ease;
+    padding-top: 60px;
+}
+
+.mobile-nav.active {
+    left: 0;
+}
+
+.mobile-nav .nav-link {
+    display: block;
+    padding: 16px 20px;
+    border: none;
+    border-bottom: 1px solid #f0f0f0;
+    border-radius: 0;
+    text-align: left;
+    font-size: 16px;
+    min-height: 52px;
+}
+
+.mobile-nav .nav-link:first-child {
+    border-top: 1px solid #f0f0f0;
+}
+
+.mobile-nav .nav-link.active {
+    background: rgba(64, 158, 255, 0.1);
+    border-left: 4px solid var(--el-primary-color);
+    font-weight: 600;
+}
+
 /* 响应式设计 */
 
 /* 平板设备 */
@@ -760,10 +852,36 @@ body {
         --el-spacing-base: 12px;
         --el-spacing-large: 16px;
         --el-spacing-extra-large: 24px;
+        --el-font-size-base: 15px;
     }
     
     .container {
         padding: var(--el-spacing-base);
+        max-width: 100%;
+    }
+    
+    .header {
+        position: relative;
+        padding: 12px 16px;
+        justify-content: flex-start;
+        gap: 16px;
+    }
+    
+    .header h1 {
+        font-size: 18px;
+        margin: 0 auto;
+    }
+    
+    .mobile-menu-toggle {
+        display: flex;
+    }
+    
+    .nav {
+        display: none;
+    }
+    
+    .mobile-nav {
+        display: block;
     }
     
     .booking-container {
@@ -771,16 +889,6 @@ body {
         gap: var(--el-spacing-base);
     }
     
-    .header {
-        flex-direction: column;
-        align-items: stretch;
-        text-align: center;
-    }
-    
-    .nav {
-        justify-content: center;
-    }
-    
     .form-row {
         flex-direction: column;
         gap: var(--el-spacing-base);
@@ -788,6 +896,7 @@ body {
     
     .form-row .form-group {
         flex: none;
+        min-width: auto;
     }
     
     .calendar {
@@ -798,6 +907,13 @@ body {
     .quick-duration {
         justify-content: center;
         flex-wrap: wrap;
+        gap: 8px;
+    }
+    
+    .duration-btn {
+        min-width: 60px;
+        padding: 10px 12px;
+        font-size: 13px;
     }
     
     .time-grid {
@@ -805,25 +921,84 @@ body {
         gap: var(--el-spacing-small);
     }
     
+    .time-slot {
+        padding: 12px 8px;
+        font-size: 13px;
+        min-height: 44px;
+    }
+    
     .package-meta {
         justify-content: center;
+        flex-wrap: wrap;
+    }
+    
+    /* 卡片优化 */
+    .card {
+        padding: var(--el-spacing-base);
+        margin-bottom: var(--el-spacing-base);
+    }
+    
+    /* 表格优化 */
+    .table {
+        font-size: 13px;
+    }
+    
+    .table th,
+    .table td {
+        padding: 8px 6px;
+    }
+    
+    /* VIP搜索优化 */
+    .vip-search-results {
+        max-height: 300px;
+        font-size: 14px;
+    }
+    
+    .vip-search-item {
+        padding: 14px 16px;
+        min-height: 60px;
+    }
+    
+    /* 统计卡片 */
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+    }
+    
+    .stat-card {
+        padding: 16px;
+    }
+    
+    .stat-card .stat-value {
+        font-size: 24px;
     }
 }
 
 /* 手机设备 */
 @media (max-width: 480px) {
+    :root {
+        --el-font-size-base: 14px;
+        --el-font-size-small: 13px;
+        --el-font-size-large: 16px;
+    }
+    
     .container {
-        padding: var(--el-spacing-small);
+        padding: 8px;
     }
     
     .header {
-        padding: var(--el-spacing-base);
+        padding: 10px 12px;
         border-radius: 0;
-        margin-bottom: var(--el-spacing-base);
+        margin-bottom: 12px;
+        position: sticky;
+        top: 0;
+        z-index: 100;
+        background: white;
     }
     
     .header h1 {
-        font-size: var(--el-font-size-large);
+        font-size: 16px;
+        line-height: 1.4;
     }
     
     .section {
@@ -831,52 +1006,277 @@ body {
         border-radius: 0;
         box-shadow: none;
         border-bottom: 1px solid var(--el-border-lighter);
+        margin-bottom: 12px;
     }
     
     .calendar {
         grid-template-columns: repeat(2, 1fr);
+        gap: 6px;
     }
     
     .calendar-day {
-        padding: var(--el-spacing-small);
+        padding: 10px 6px;
+        min-height: 60px;
     }
     
     .day-number {
-        font-size: var(--el-font-size-base);
-    }
-    
-    .nav {
-        flex-direction: column;
-        gap: var(--el-spacing-small);
-    }
-    
-    .nav-link {
-        text-align: center;
-        justify-content: center;
+        font-size: 16px;
+        font-weight: 600;
     }
     
     .form-actions {
         flex-direction: column;
-        gap: var(--el-spacing-small);
+        gap: 10px;
+        position: sticky;
+        bottom: 0;
+        background: white;
+        padding: 12px;
+        margin: 0 -12px -12px;
+        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
     }
     
     .btn {
         width: 100%;
         justify-content: center;
+        min-height: 48px;
+        font-size: 16px;
+        padding: 14px 20px;
+    }
+    
+    .btn-sm {
+        min-height: 44px;
+        padding: 10px 16px;
+        font-size: 14px;
     }
     
     .package-meta {
         flex-direction: column;
         align-items: stretch;
+        gap: 10px;
     }
     
     .modal {
-        padding: var(--el-spacing-small);
+        padding: 0;
     }
     
     .modal-content {
         margin: 0;
-        max-height: calc(100vh - 20px);
+        max-height: 100vh;
+        border-radius: 0;
+        padding: 20px 16px;
+        overflow-y: auto;
+    }
+    
+    /* 表单优化 */
+    .form-group {
+        margin-bottom: 16px;
+    }
+    
+    .form-group label {
+        font-size: 14px;
+        margin-bottom: 8px;
+    }
+    
+    .form-group input,
+    .form-group select,
+    .form-group textarea {
+        font-size: 16px; /* 防止iOS自动缩放 */
+        padding: 12px 14px;
+        min-height: 48px;
+        -webkit-appearance: none;
+        appearance: none;
+    }
+    
+    /* 输入组优化 */
+    .input-group {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .input-group .form-control {
+        border-radius: var(--el-border-radius-base);
+        width: 100%;
+    }
+    
+    .input-group-addon {
+        border-radius: var(--el-border-radius-base);
+        text-align: center;
+        padding: 12px;
+    }
+    
+    /* 卡片优化 */
+    .card {
+        padding: 16px;
+        margin-bottom: 12px;
+        border-radius: 8px;
+    }
+    
+    /* 表格优化 - 移动端横向滚动 */
+    .table-wrapper {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    
+    .table {
+        min-width: 600px;
+        font-size: 13px;
+    }
+    
+    .table th,
+    .table td {
+        padding: 10px 8px;
+        white-space: nowrap;
+    }
+    
+    /* VIP卡片优化 */
+    .vip-grid {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+    
+    .vip-card {
+        padding: 16px;
+    }
+    
+    .vip-actions {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .vip-actions .btn {
+        width: 100%;
+    }
+    
+    /* 套餐卡片优化 */
+    .packages-grid {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+    
+    .package-card {
+        padding: 16px;
+    }
+    
+    .package-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+    
+    .package-title {
+        font-size: 18px;
+    }
+    
+    .package-details {
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+    
+    .package-actions {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .package-actions button,
+    .package-actions form {
+        width: 100%;
+    }
+    
+    /* 搜索框优化 */
+    .search-box input {
+        font-size: 16px;
+        padding: 12px 16px 12px 40px;
+    }
+    
+    /* 筛选区域优化 */
+    .filter-section {
+        padding: 16px;
+    }
+    
+    .filter-row {
+        flex-direction: column;
+        gap: 12px;
+    }
+    
+    .filter-group {
+        width: 100%;
+    }
+    
+    .filter-group select {
+        width: 100%;
+        padding: 12px 16px;
+        font-size: 16px;
+        min-height: 48px;
+    }
+    
+    /* 统计卡片优化 */
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+    }
+    
+    .stat-card {
+        padding: 14px;
+    }
+    
+    .stat-card .stat-value {
+        font-size: 22px;
+    }
+    
+    .stat-card .stat-label {
+        font-size: 12px;
+    }
+    
+    /* 时间选择优化 */
+    .time-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+    }
+    
+    .time-slot {
+        padding: 14px 8px;
+        font-size: 14px;
+        min-height: 48px;
+    }
+    
+    /* 快速时长按钮优化 */
+    .quick-duration {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+    
+    .duration-btn {
+        flex: 1;
+        min-width: calc(50% - 4px);
+        padding: 12px;
+        font-size: 14px;
+        min-height: 48px;
+    }
+    
+    /* 消息提示优化 */
+    .message {
+        padding: 12px 16px;
+        font-size: 14px;
+        margin-bottom: 12px;
+        border-radius: 8px;
+    }
+    
+    /* 空状态优化 */
+    .empty-state {
+        padding: 40px 20px;
+    }
+    
+    .empty-icon {
+        font-size: 48px;
+    }
+    
+    .empty-message {
+        font-size: 16px;
+    }
+    
+    .empty-submessage {
+        font-size: 13px;
     }
     
     /* 套餐管理页面移动端优化 */
@@ -961,8 +1361,12 @@ body {
 
 /* 小屏幕手机 */
 @media (max-width: 360px) {
+    .header h1 {
+        font-size: 15px;
+    }
+    
     .calendar {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(2, 1fr);
     }
     
     .time-grid {
@@ -974,27 +1378,99 @@ body {
         align-items: stretch;
     }
     
+    .duration-btn {
+        width: 100%;
+    }
+    
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+    
     .form-group input,
     .form-group select,
     .form-group textarea {
         font-size: 16px; /* 防止iOS缩放 */
     }
+    
+    .mobile-nav {
+        width: 260px;
+    }
 }
 
 /* 触摸设备优化 */
 @media (hover: none) and (pointer: coarse) {
+    /* 增加触摸目标大小 */
     .btn {
         min-height: 44px;
+        padding: 12px 20px;
+        -webkit-tap-highlight-color: rgba(64, 158, 255, 0.2);
+        tap-highlight-color: rgba(64, 158, 255, 0.2);
+    }
+    
+    .btn:active {
+        transform: scale(0.98);
+        opacity: 0.9;
     }
     
     .form-group input,
     .form-group select,
     .form-group textarea {
         min-height: 44px;
+        -webkit-tap-highlight-color: rgba(64, 158, 255, 0.1);
+        tap-highlight-color: rgba(64, 158, 255, 0.1);
     }
     
     .nav-link {
         min-height: 44px;
+        padding: 12px 16px;
+        -webkit-tap-highlight-color: rgba(64, 158, 255, 0.2);
+        tap-highlight-color: rgba(64, 158, 255, 0.2);
+    }
+    
+    .mobile-nav .nav-link {
+        min-height: 52px;
+    }
+    
+    .time-slot {
+        min-height: 44px;
+        -webkit-tap-highlight-color: rgba(64, 158, 255, 0.2);
+        tap-highlight-color: rgba(64, 158, 255, 0.2);
+    }
+    
+    .time-slot:active {
+        transform: scale(0.95);
+    }
+    
+    .calendar-day {
+        min-height: 60px;
+        -webkit-tap-highlight-color: rgba(64, 158, 255, 0.2);
+        tap-highlight-color: rgba(64, 158, 255, 0.2);
+    }
+    
+    /* 禁用hover效果 */
+    .btn:hover:not(:disabled) {
+        transform: none;
+    }
+    
+    .nav-link:hover {
+        transform: none;
+    }
+    
+    /* 优化滚动 */
+    * {
+        -webkit-overflow-scrolling: touch;
+    }
+    
+    /* 优化文本选择 */
+    body {
+        -webkit-user-select: none;
+        user-select: none;
+    }
+    
+    input,
+    textarea {
+        -webkit-user-select: text;
+        user-select: text;
     }
 }
 
diff --git a/vip.php b/vip.php
index 984635f..92f3b40 100644
--- a/vip.php
+++ b/vip.php
@@ -193,10 +193,16 @@ try {
     <meta name="keywords" content="VIP管理,客户管理,会员管理">
     <title>张老师撸车（私家车库）工作室</title>
     <link rel="stylesheet" href="style.css">
+    <script src="mobile-nav.js" defer></script>
 </head>
 <body>
     <div class="container">
         <header class="header">
+            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="菜单">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
             <h1>🚗 张老师撸车工作室 - VIP管理</h1>
             <nav class="nav">
                 <a href="index.php" class="nav-link">预约洗车</a>
@@ -207,6 +213,17 @@ try {
                 <a href="announcement.php" class="nav-link">今日待办</a>
             </nav>
         </header>
+        
+        <!-- 移动端导航菜单 -->
+        <div class="mobile-nav-overlay" onclick="closeMobileMenu()"></div>
+        <nav class="mobile-nav">
+            <a href="index.php" class="nav-link">预约洗车</a>
+            <a href="bookings.php" class="nav-link">预约管理</a>
+            <a href="pending_bookings.php" class="nav-link">待处理预约</a>
+            <a href="packages.php" class="nav-link">套餐管理</a>
+            <a href="vip.php" class="nav-link active">VIP管理</a>
+            <a href="announcement.php" class="nav-link">今日待办</a>
+        </nav>
 
         <?php if (isset($success_message)): ?>
             <div class="success-message"><?php echo $success_message; ?></div>
