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
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;
}
}