From 4914ff3572d87b6da8bc3948192de2bf2984436f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=B1=95=E9=B9=8F?= <wsh5485@163.com>
Date: Wed, 19 Nov 2025 01:29:16 +0800
Subject: [PATCH] =?UTF-8?q?style(bookings):=20=E6=94=B9=E8=BF=9B=E9=A2=84?=
 =?UTF-8?q?=E7=BA=A6=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构导航栏布局，添加active状态样式
- 使用CSS类替代内联样式
- 重新设计预约卡片布局和状态显示
- 统一按钮样式和间距
---
 bookings.php | 89 ++++++++++++++++++++++++++++------------------------
 1 file changed, 48 insertions(+), 41 deletions(-)
diff --git a/bookings.php b/bookings.php
index 074d43f..783b8a4 100644
--- a/bookings.php
+++ b/bookings.php
@@ -45,83 +45,90 @@ try {
 </head>
 <body>
     <div class="container">
-        <header>
+        <header class="header">
             <h1>📋 预约列表</h1>
-            <p>管理所有洗车预约</p>
+            <nav class="nav">
+                <a href="index.php" class="nav-link">预约洗车</a>
+                <a href="bookings.php" class="nav-link active">预约管理</a>
+            </nav>
         </header>
 
-        <nav>
-            <a href="index.php">预约洗车</a>
-            <a href="bookings.php">查看预约</a>
-        </nav>
-
         <?php if (isset($success_message)): ?>
             <div class="success-message"><?php echo $success_message; ?></div>
         <?php endif; ?>
 
         <?php if (isset($error_message)): ?>
-            <div style="background: #f8d7da; color: #721c24; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid #f5c6cb;">
+            <div class="error-message">
                 <?php echo $error_message; ?>
             </div>
         <?php endif; ?>
 
-        <div class="bookings-list">
+        <div class="card">
             <h2>所有预约 (共 <?php echo count($bookings); ?> 条)</h2>
             
             <?php if (empty($bookings)): ?>
-                <p style="text-align: center; color: #666; padding: 2rem;">暂无预约记录</p>
+                <div class="empty-message">暂无预约记录</div>
             <?php else: ?>
                 <?php foreach ($bookings as $booking): ?>
-                    <div class="booking-item">
-                        <div class="booking-header">
+                    <div class="package-card">
+                        <div class="package-header">
                             <h3><?php echo htmlspecialchars($booking['customer_name']); ?> 的预约</h3>
-                            <span class="status <?php 
-                                echo $booking['status'] === '待确认' ? 'pending' : 
-                                    ($booking['status'] === '已确认' ? 'confirmed' : 
-                                    ($booking['status'] === '已完成' ? 'completed' : 'cancelled')); 
-                            ?>">
-                                <?php echo $booking['status']; ?>
-                            </span>
+                            <div class="package-status">
+                                <span class="status-badge <?php 
+                                    echo $booking['status'] === '待确认' ? 'pending' : 
+                                        ($booking['status'] === '已确认' ? 'active' : 
+                                        ($booking['status'] === '已完成' ? 'active' : 'inactive')); 
+                                ?>">
+                                    <?php echo $booking['status']; ?>
+                                </span>
+                            </div>
                         </div>
                         
-                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
-                            <div>
-                                <strong>联系方式：</strong><?php echo htmlspecialchars($booking['phone']); ?>
+                        <div class="package-details">
+                            <div class="detail-item">
+                                <span class="detail-label">联系方式：</span>
+                                <span class="detail-value"><?php echo htmlspecialchars($booking['phone']); ?></span>
                             </div>
-                            <div>
-                                <strong>车型：</strong><?php echo htmlspecialchars($booking['car_model']); ?>
+                            <div class="detail-item">
+                                <span class="detail-label">车型：</span>
+                                <span class="detail-value"><?php echo htmlspecialchars($booking['car_model']); ?></span>
                             </div>
-                            <div>
-                                <strong>车牌号：</strong><?php echo htmlspecialchars($booking['car_number']); ?>
+                            <div class="detail-item">
+                                <span class="detail-label">车牌号：</span>
+                                <span class="detail-value"><?php echo htmlspecialchars($booking['car_number']); ?></span>
                             </div>
-                            <div>
-                                <strong>服务套餐：</strong><?php echo htmlspecialchars($booking['package_name'] ?? '未选择套餐'); ?>
+                            <div class="detail-item">
+                                <span class="detail-label">服务套餐：</span>
+                                <span class="detail-value"><?php echo htmlspecialchars($booking['package_name'] ?? '未选择套餐'); ?></span>
                             </div>
-                            <div>
-                                <strong>预约日期：</strong><?php echo date('Y-m-d', strtotime($booking['start_time'])); ?>
+                            <div class="detail-item">
+                                <span class="detail-label">预约日期：</span>
+                                <span class="detail-value"><?php echo date('Y-m-d', strtotime($booking['start_time'])); ?></span>
                             </div>
-                            <div>
-                                <strong>预约时间：</strong><?php echo date('H:i', strtotime($booking['start_time'])); ?> - <?php echo date('H:i', strtotime($booking['end_time'])); ?>
+                            <div class="detail-item">
+                                <span class="detail-label">预约时间：</span>
+                                <span class="detail-value"><?php echo date('H:i', strtotime($booking['start_time'])); ?> - <?php echo date('H:i', strtotime($booking['end_time'])); ?></span>
                             </div>
                         </div>
 
                         <?php if ($booking['notes']): ?>
-                            <div style="margin-bottom: 1rem;">
-                                <strong>备注：</strong><?php echo htmlspecialchars($booking['notes']); ?>
+                            <div class="package-description">
+                                <span class="detail-label">备注：</span>
+                                <span><?php echo htmlspecialchars($booking['notes']); ?></span>
                             </div>
                         <?php endif; ?>
 
-                        <div style="font-size: 0.9rem; color: #666;">
-                            预约时间：<?php echo $booking['created_at']; ?>
+                        <div class="package-meta">
+                            <span>预约时间：<?php echo $booking['created_at']; ?></span>
                         </div>
 
                         <?php if ($booking['status'] !== '已完成' && $booking['status'] !== '已取消'): ?>
-                            <div style="margin-top: 1rem;">
-                                <form method="POST" style="display: inline;">
+                            <div class="package-actions">
+                                <form method="POST">
                                     <input type="hidden" name="booking_id" value="<?php echo $booking['id']; ?>">
-                                    <button type="submit" name="action" value="已确认" class="btn" style="margin-right: 0.5rem;">确认</button>
-                                    <button type="submit" name="action" value="已完成" class="btn" style="margin-right: 0.5rem;">完成</button>
-                                    <button type="submit" name="action" value="已取消" class="btn" style="background: #dc3545;">取消</button>
+                                    <button type="submit" name="action" value="已确认" class="btn btn-sm btn-success">确认</button>
+                                    <button type="submit" name="action" value="已完成" class="btn btn-sm btn-primary">完成</button>
+                                    <button type="submit" name="action" value="已取消" class="btn btn-sm btn-danger">取消</button>
                                 </form>
                             </div>
                         <?php endif; ?>
