From 2c5ac2b9437f9a45e0a5b354ac7a71ab5bbc189a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=B1=95=E9=B9=8F?= <wsh5485@163.com>
Date: Fri, 12 Dec 2025 03:53:53 +0800
Subject: [PATCH] =?UTF-8?q?style(UI):=20=E7=BB=9F=E4=B8=80=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F=E5=B9=B6=E5=A2=9E=E5=BC=BA=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为所有页面卡片添加 enhanced-card 类，实现统一视觉风格
添加卡片悬停动画、顶部装饰条和状态变化效果
优化状态标签、按钮和详情布局的样式
---
 announcement.php     |  28 +++----
 bookings.php         |   6 +-
 index.php            |   8 +-
 pending_bookings.php |   8 +-
 style.css            | 189 +++++++++++++++++++++++++++++++++++++++++++
 vip.php              |  10 +--
 6 files changed, 219 insertions(+), 30 deletions(-)

diff --git a/announcement.php b/announcement.php
index 75337d7..72e6443 100644
--- a/announcement.php
+++ b/announcement.php
@@ -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>
diff --git a/bookings.php b/bookings.php
index 78a3c7c..8db6a62 100644
--- a/bookings.php
+++ b/bookings.php
@@ -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">
diff --git a/index.php b/index.php
index 705a616..fb6f20b 100644
--- a/index.php
+++ b/index.php
@@ -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">
diff --git a/pending_bookings.php b/pending_bookings.php
index 5da4fcc..dba1029 100644
--- a/pending_bookings.php
+++ b/pending_bookings.php
@@ -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">
diff --git a/style.css b/style.css
index 3981737..a1c9bc1 100644
--- a/style.css
+++ b/style.css
@@ -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;
diff --git a/vip.php b/vip.php
index 92f3b40..840cbb3 100644
--- a/vip.php
+++ b/vip.php
@@ -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>