feat(移动端): 添加移动端导航菜单并优化响应式设计
refactor(预约统计): 修改查询逻辑只计算有效预约
This commit is contained in:
@@ -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>
|
||||
@@ -308,6 +314,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">待处理预约</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">
|
||||
<!-- 页面标题区 -->
|
||||
<div class="page-header">
|
||||
|
||||
@@ -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>
|
||||
@@ -102,6 +108,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 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>
|
||||
<?php endif; ?>
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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>
|
||||
@@ -392,6 +398,17 @@ $packages_json = json_encode(array_map(function($package) {
|
||||
</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;">
|
||||
<?= htmlspecialchars($message) ?>
|
||||
|
||||
@@ -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 });
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
@@ -831,6 +837,17 @@ $total_bookings = array_sum(array_column($packages, 'booking_count'));
|
||||
</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;">
|
||||
<?= htmlspecialchars($message) ?>
|
||||
|
||||
+26
-83
@@ -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,7 +756,6 @@ try {
|
||||
</div>
|
||||
|
||||
<!-- 预约时长提示区域 -->
|
||||
<div class="duration-alert" id="durationAlert_<?php echo $submission['id']; ?>">
|
||||
<!-- 提示信息将通过JavaScript动态生成 -->
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -208,6 +214,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">待处理预约</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>
|
||||
<?php endif; ?>
|
||||
|
||||
Reference in New Issue
Block a user