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

style(UI): 统一卡片样式并增强视觉效果

Browse Source 
为所有页面卡片添加 enhanced-card 类，实现统一视觉风格
添加卡片悬停动画、顶部装饰条和状态变化效果
优化状态标签、按钮和详情布局的样式
This commit is contained in:
吴展鹏
2025-12-12 03:53:53 +08:00
parent c64651d6c7
commit 2c5ac2b943
6 changed files with 219 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
announcement.php
+14 -14
View File
@@ -327,13 +327,13 @@ try {
<div class="announcement-container">
<!-- 页面标题区 -->
<div class="page-header">
<div class="page-header enhanced-card">
<h1>📋 待办列表</h1>
<div class="subtitle"><?php echo date('Y年m月d日', strtotime($selected_date)); ?> - <?php echo date('l', strtotime($selected_date)); ?></div>
</div>
<!-- 日期选择器 -->
<div style="background: white; border-radius: 10px; padding: 20px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: center;">
<div class="enhanced-card" style="text-align: center; padding: 20px; margin-bottom: 30px;">
<form method="GET" style="display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap;">
<label for="selected_date" style="font-weight: 600; color: #333;">选择日期：</label>
<input type="date" id="selected_date" name="selected_date" value="<?php echo $selected_date; ?>" style="padding: 10px 15px; border: 2px solid #e0e0e0; border-radius: 5px; font-size: 1rem; width: 200px; transition: border-color 0.3s ease;">
@@ -342,7 +342,7 @@ try {
</div>
<!-- 统计信息卡片 -->
<div class="stats-card">
<div class="stats-card enhanced-card">
<div class="stat-item stat-pending">
<div class="stat-label">待处理</div>
<div class="stat-number"><?php echo $pending_count; ?></div>
@@ -394,44 +394,44 @@ try {
$services = explode(',', $booking['services']);
}
?>
<div class="booking-card <?php echo $card_class; ?>">
<div class="enhanced-card booking-card <?php echo $card_class; ?>">
<div class="booking-time">
🕒 <?php echo date('H:i', strtotime($booking['start_time'])); ?> - <?php echo date('H:i', strtotime($booking['end_time'])); ?>
<span class="booking-status status-<?php echo strtolower($booking['status']); ?>">
<span class="status-badge status-<?php echo strtolower($booking['status']); ?>">
<?php echo $booking['status']; ?>
</span>
</div>
<div class="booking-details">
<div class="detail-row">
<div class="booking-details details-grid">
<div class="detail-item">
<span class="detail-label">客户姓名</span>
<span class="detail-value"><?php echo htmlspecialchars($booking['customer_name']); ?></span>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">联系电话</span>
<span class="detail-value"><?php echo htmlspecialchars($booking['phone']); ?></span>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">车型</span>
<span class="detail-value"><?php echo htmlspecialchars($booking['car_model']); ?></span>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">车牌号</span>
<span class="detail-value"><?php echo htmlspecialchars($booking['car_number']); ?></span>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">套餐</span>
<span class="detail-value"><?php echo htmlspecialchars($booking['package_name'] ?: '自定义套餐'); ?></span>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">时长</span>
<span class="detail-value"><?php echo $booking['duration']; ?> 分钟</span>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">价格</span>
<span class="detail-value">¥<?php echo $booking['total_price']; ?></span>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">会员类型</span>
<span class="detail-value"><?php echo $booking['member_type']; ?></span>
</div>
bookings.php
+3 -3
View File
@@ -129,11 +129,11 @@ try {
</div>
<?php endif; ?>
<div class="card">
<div class="card enhanced-card">
<h2>所有预约 (共 <?php echo count($bookings); ?> 条)</h2>
<!-- 筛选和搜索区域 -->
<div class="filter-search-area">
<div class="filter-search-area enhanced-card">
<form method="GET" class="filter-form">
<div class="filter-group">
<label for="status_filter">状态筛选：</label>
@@ -161,7 +161,7 @@ try {
<div class="empty-message">暂无预约记录</div>
<?php else: ?>
<?php foreach ($bookings as $booking): ?>
<div class="package-card">
<div class="package-card enhanced-card">
<div class="package-header">
<h3><?php echo htmlspecialchars($booking['customer_name']); ?> 的预约</h3>
<div class="package-status">
index.php
+4 -4
View File
@@ -487,7 +487,7 @@ $packages_json = json_encode(array_map(function($package) {
}
</style>
<div class="calendar" id="calendarContainer">
<div class="calendar enhanced-card" id="calendarContainer">
<!-- 日期将通过JavaScript动态生成 -->
</div>
@@ -667,7 +667,7 @@ $packages_json = json_encode(array_map(function($package) {
}
</style>
<div class="time-slots" id="timeSlots" style="display: none;">
<div class="time-slots enhanced-card" id="timeSlots" style="display: none;">
<h3>🕐 选择时间段</h3>
<div class="quick-duration">
<span>快捷时长：</span>
@@ -688,13 +688,13 @@ $packages_json = json_encode(array_map(function($package) {
</div>
<!-- 预约详情显示区域 -->
<div id="bookingDetails" class="booking-details" style="display: none;">
<div id="bookingDetails" class="booking-details enhanced-card" style="display: none;">
<h3 id="detailsDateTitle"></h3>
<div id="bookingDetailsContent"></div>
</div>
</div>
<div class="booking-form-section">
<div class="booking-form-section enhanced-card">
<h2>📋 预约信息</h2>
<form method="POST" class="form" id="bookingForm">
<div class="form-row">
pending_bookings.php
+4 -4
View File
@@ -602,7 +602,7 @@ try {
<div class="card">
<div class="card enhanced-card">
<h2>待处理预约 (共 <?php echo count($pending_submissions); ?> 条)</h2>
<?php if (empty($pending_submissions)): ?>
@@ -610,7 +610,7 @@ try {
<?php else: ?>
<!-- 无论记录数量多少，都显示选择列表 -->
<?php if (true): ?>
<div class="submission-selector">
<div class="submission-selector enhanced-card">
<h3>选择要处理的预约记录</h3>
<div class="submission-list">
<?php foreach ($pending_submissions as $submission): ?>
@@ -632,7 +632,7 @@ try {
<!-- 显示选中的预约记录的处理表单 -->
<?php foreach ($pending_submissions as $submission): ?>
<div class="pending-card" id="submission_<?php echo $submission['id']; ?>" style="display: none;">
<div class="pending-card enhanced-card" id="submission_<?php echo $submission['id']; ?>" style="display: none;">
<div class="pending-header">
<h3><?php echo htmlspecialchars($submission['name']); ?> 的预约请求</h3>
<span class="status-badge status-pending">待处理</span>
@@ -711,7 +711,7 @@ try {
</select>
</div>
<div class="package-info" id="packageInfo_<?php echo $submission['id']; ?>">
<div class="package-info enhanced-card" id="packageInfo_<?php echo $submission['id']; ?>">
<div class="package-details">
<h4 id="packageName_<?php echo $submission['id']; ?>"></h4>
<div class="package-meta">
style.css
+189
View File
@@ -132,6 +132,47 @@ body {
margin-bottom: var(--el-spacing-large);
}
/* 增强型卡片样式（参考套餐管理页面） */
.enhanced-card {
background: var(--el-bg-color);
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.enhanced-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--el-primary-color), var(--el-success-color));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.enhanced-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.enhanced-card:hover::before {
transform: scaleX(1);
}
.enhanced-card.inactive {
opacity: 0.7;
background: var(--el-bg-color-page);
}
.enhanced-card.inactive::before {
background: linear-gradient(90deg, var(--el-info-color), var(--el-border-color));
}
/* 表单样式 */
.form-group {
margin-bottom: var(--el-spacing-large);
@@ -280,6 +321,32 @@ body {
font-size: var(--el-font-size-large);
}
/* 切换状态按钮（参考套餐管理页面） */
.btn-toggle-status {
padding: 8px 16px;
border: none;
border-radius: var(--el-border-radius-base);
font-size: var(--el-font-size-small);
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn-toggle-status.active {
background: var(--el-success-color);
color: white;
}
.btn-toggle-status.inactive {
background: var(--el-danger-color);
color: white;
}
.btn-toggle-status:hover {
opacity: 0.9;
transform: scale(1.05);
}
/* 消息提示样式 */
.message {
padding: var(--el-spacing-base);
@@ -345,6 +412,35 @@ body {
color: var(--el-danger-color);
}
/* 增强型状态标签（参考套餐管理页面） */
.status-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: var(--el-font-size-extra-small);
font-weight: 600;
white-space: nowrap;
}
.status-badge.active {
background: rgba(103, 194, 58, 0.1);
color: var(--el-success-color);
}
.status-badge.inactive {
background: rgba(245, 108, 108, 0.1);
color: var(--el-danger-color);
}
.status-badge.info {
background: rgba(64, 158, 255, 0.1);
color: var(--el-primary-color);
}
.status-badge.warning {
background: rgba(230, 162, 60, 0.1);
color: var(--el-warning-color);
}
/* 布局样式 */
.booking-container {
display: grid;
@@ -369,6 +465,99 @@ body {
border-bottom: 1px solid var(--el-border-lighter);
}
/* 详情项布局（参考套餐管理页面） */
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-bottom: var(--el-spacing-large);
}
.detail-item {
display: flex;
flex-direction: column;
padding: 12px;
background: var(--el-bg-color-light);
border-radius: var(--el-border-radius-base);
}
.detail-label {
font-size: var(--el-font-size-extra-small);
color: var(--el-text-secondary);
margin-bottom: 4px;
}
.detail-value {
font-size: var(--el-font-size-large);
font-weight: bold;
color: var(--el-text-primary);
}
.detail-value.price {
color: var(--el-danger-color);
}
/* 标签样式（参考套餐管理页面） */
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.tag {
display: inline-block;
padding: 6px 12px;
background: rgba(64, 158, 255, 0.1);
color: var(--el-primary-color);
border-radius: 16px;
font-size: var(--el-font-size-extra-small);
font-weight: 500;
}
/* 提醒框样式（参考套餐管理页面） */
.reminder-box {
margin-top: var(--el-spacing-base);
padding: var(--el-spacing-base);
background: var(--el-bg-color-light);
border-radius: var(--el-border-radius-base);
border-left: 4px solid var(--el-primary-color);
}
.reminder-editor {
width: 100%;
padding: 12px;
background: var(--el-bg-color);
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-small);
font-size: var(--el-font-size-base);
line-height: 1.5;
min-height: 80px;
resize: vertical;
font-family: inherit;
}
.reminder-actions {
margin-top: 12px;
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* 操作按钮组样式（参考套餐管理页面） */
.action-buttons {
display: flex;
gap: 8px;
margin-top: var(--el-spacing-base);
padding-top: var(--el-spacing-base);
border-top: 1px solid var(--el-border-lighter);
}
.action-buttons button,
.action-buttons form {
flex: 1;
}
/* 日历样式 */
.calendar {
display: grid;
vip.php
+5 -5
View File
@@ -241,7 +241,7 @@ try {
<div class="vip-management">
<!-- VIP搜索表单 -->
<div class="card search-container">
<div class="card search-container enhanced-card">
<h2>🔍 VIP客户搜索</h2>
<form method="GET" class="form search-form">
<div class="form-row">
@@ -262,7 +262,7 @@ try {
</div>
<!-- VIP录入表单 -->
<div class="card">
<div class="card enhanced-card">
<h2>➕ 录入新VIP客户</h2>
<form method="POST" class="form">
<input type="hidden" name="action" value="add_vip">
@@ -316,7 +316,7 @@ try {
</div>
<!-- 从预约转换为VIP -->
<div class="card">
<div class="card enhanced-card">
<h2>📋 从预约记录转换为VIP客户</h2>
<p style="color: #666; margin-bottom: 15px;">选择预约记录，快速将普通客户转换为VIP客户</p>
<?php
@@ -374,7 +374,7 @@ try {
</div>
<!-- VIP客户列表 -->
<div class="card">
<div class="card enhanced-card">
<h2>👑 VIP客户列表 (共 <?php echo count($vip_customers); ?> 位)</h2>
<?php if (empty($vip_customers)): ?>
@@ -382,7 +382,7 @@ try {
<?php else: ?>
<div class="vip-grid">
<?php foreach ($vip_customers as $vip): ?>
<div class="vip-card">
<div class="vip-card enhanced-card">
<div class="vip-header">
<h3><?php echo htmlspecialchars($vip['customer_name']); ?></h3>
<div class="vip-status">👑 VIP</div>