wsh5485/carwash_order
Archived
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases 8 Wiki Activity

feat(移动端): 添加移动端导航菜单并优化响应式设计

Browse Source 
refactor(预约统计): 修改查询逻辑只计算有效预约
This commit is contained in:
吴展鹏
2025-12-12 03:39:01 +08:00
parent 9cd2b31648
commit c64651d6c7
9 changed files with 705 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
announcement.php
+17
View File
@@ -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">
<!-- 页面标题区 -->
bookings.php
+17
View File
@@ -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>
get_daily_booking_duration.php
+2 -2
View File
@@ -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();
index.php
+17
View File
@@ -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;">
mobile-nav.js
+83
View File
@@ -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 });
});
packages.php
+17
View File
@@ -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;">
pending_bookings.php
+29 -86
View File
@@ -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>
style.css
+506 -30
View File
@@ -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;
}
}
vip.php
+17
View File
@@ -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>