feat: 重构洗车预约系统，新增套餐管理和时间段选择功能
- 新增套餐管理模块，支持套餐的增删改查 - 重构预约表结构，支持时间段选择和套餐关联 - 实现日历视图和时间段网格选择界面 - 更新数据库结构，添加套餐表和相关字段 - 优化移动端体验，增强触摸交互 - 更新文档和样式，匹配新功能
This commit is contained in:
@@ -158,15 +158,375 @@ nav a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 新增：预约页面布局 */
|
||||
.booking-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.calendar-section, .booking-form-section {
|
||||
background: var(--card-background);
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
/* 日历样式 */
|
||||
.calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-day::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.calendar-day:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.calendar-day.today {
|
||||
box-shadow: 0 0 0 3px var(--primary-color);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.calendar-day.selected {
|
||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.calendar-day.available {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.calendar-day.busy {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
|
||||
.calendar-day.full {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
||||
.day-number {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.day-week {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.day-status {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.booking-count {
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 时间段选择 */
|
||||
.time-slots {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.quick-duration {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.quick-duration span {
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.duration-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid var(--primary-color);
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.duration-btn:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.duration-btn.selected {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(52, 144, 220, 0.3);
|
||||
}
|
||||
|
||||
.time-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.time-slot {
|
||||
padding: 1rem 0.5rem;
|
||||
text-align: center;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.time-slot.available:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(52, 144, 220, 0.2);
|
||||
}
|
||||
|
||||
.time-slot.selected {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 4px 12px rgba(52, 144, 220, 0.3);
|
||||
}
|
||||
|
||||
.time-slot.booked {
|
||||
background: #f8f9fa;
|
||||
color: #6c757d;
|
||||
border-color: #dee2e6;
|
||||
cursor: not-allowed;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.time-slot.past {
|
||||
background: #f8f9fa;
|
||||
color: #adb5bd;
|
||||
border-color: #e9ecef;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 套餐信息展示 */
|
||||
.package-info {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
margin-top: 1rem;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.package-details h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--text-color);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.package-details p {
|
||||
margin: 0 0 1rem 0;
|
||||
color: #666;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.package-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.package-meta span {
|
||||
background: white;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
#packageServices {
|
||||
font-size: 0.9rem;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 模态框 */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* 表单操作按钮 */
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(52, 144, 220, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 移动端响应式设计 */
|
||||
|
||||
/* 平板设备优化 */
|
||||
@media (max-width: 768px) {
|
||||
body { font-size: 14px; }
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.booking-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.day-number {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.quick-duration {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.time-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.time-slot {
|
||||
padding: 0.8rem 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.package-meta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 1.5rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -191,6 +551,21 @@ nav a:hover {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
padding: 12px;
|
||||
font-size: 16px; /* 防止iOS缩放 */
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 15px 25px;
|
||||
min-height: 48px; /* 触摸友好的最小尺寸 */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
@@ -221,6 +596,28 @@ nav a:hover {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-row .form-group {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.duration-btn {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -292,6 +689,28 @@ nav a:hover {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quick-duration {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
.time-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
|
||||
Reference in New Issue
Block a user