统一时间选择样式：将index.php的时间选择样式更新为pending_bookings.php的样式

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