From 77ae32095e84f4d78a593d6101cdd3af7eb3d631 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=B1=95=E9=B9=8F?= <wsh5485@163.com>
Date: Sat, 6 Dec 2025 01:45:39 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=97=B6=E9=97=B4=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=A0=B7=E5=BC=8F=EF=BC=9A=E5=B0=86index.php=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9=E6=A0=B7=E5=BC=8F=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E4=B8=BApending=5Fbookings.php=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.php | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/index.php b/index.php
index 85e7a4a..4809e97 100644
--- a/index.php
+++ b/index.php
@@ -507,6 +507,71 @@ $packages_json = json_encode(array_map(function($package) {
                     });
                 </script>
                 
+                <style>
+                    /* 统一时间选择样式为pending_bookings.php的样式 */
+                    .calendar-day {
+                        padding: 15px;
+                        background: #f5f5f5;
+                        border-radius: 4px;
+                        text-align: center;
+                        cursor: pointer;
+                        transition: all 0.3s ease;
+                    }
+                    
+                    .calendar-day:hover {
+                        background: #e9ecef;
+                    }
+                    
+                    .calendar-day.selected {
+                        background: #007bff;
+                        color: white;
+                    }
+                    
+                    .time-slots-container {
+                        margin-bottom: 20px;
+                    }
+                    
+                    .time-grid {
+                        display: grid;
+                        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+                        gap: 10px;
+                    }
+                    
+                    .time-slot {
+                        padding: 10px;
+                        border-radius: 4px;
+                        text-align: center;
+                        cursor: pointer;
+                        transition: all 0.3s ease;
+                    }
+                    
+                    .time-slot.available {
+                        background: #d4edda;
+                        color: #155724;
+                    }
+                    
+                    .time-slot.booked {
+                        background: #f8d7da;
+                        color: #721c24;
+                        cursor: not-allowed;
+                    }
+                    
+                    .time-slot.past {
+                        background: #e9ecef;
+                        color: #6c757d;
+                        cursor: not-allowed;
+                    }
+                    
+                    .time-slot.selected {
+                        background: #007bff;
+                        color: white;
+                    }
+                    
+                    .time-slot:hover.available {
+                        background: #c3e6cb;
+                    }
+                </style>
+                
                 <div class="time-slots" id="timeSlots" style="display: none;">
                     <h3>🕐 选择时间段</h3>
                     <div class="quick-duration">
@@ -1806,6 +1871,7 @@ $packages_json = json_encode(array_map(function($package) {
                     const slotDiv = document.createElement('div');
                     slotDiv.className = `time-slot ${isPast ? 'past' : ''} ${isBooked ? 'booked' : 'available'}`;
                     slotDiv.textContent = timeString;
+                    slotDiv.dataset.time = timeString; // 添加数据属性，与pending_bookings.php保持一致
                     slotDiv.onclick = () => selectTimeSlot(timeString);
                     
                     timeGrid.appendChild(slotDiv);
@@ -1886,7 +1952,8 @@ $packages_json = json_encode(array_map(function($package) {
                 slot.classList.remove('selected');
             });
             
-            const slotElement = document.querySelector(`[onclick="selectTimeSlot('${time}')"]`);
+            // 使用data-time属性查找元素，与pending_bookings.php保持一致
+            const slotElement = document.querySelector(`[data-time="${time}"]`);
             if (slotElement) {
                 slotElement.classList.add('selected');
             }