优化样式

src/components/booking/BookingSection.tsx

@@ -56,11 +56,18 @@ export const BookingSection = ({
           <span>预约医生 · {selectedDay} 日</span>
           <div className='flex items-center gap-2 text-xs'>
             <span className='text-gray-500'>按科室筛选</span>
-            <select className='border rounded-2xl px-3 py-1 bg-white outline-none text-xs'>
-              <option>全部科室</option>
-              <option>内科</option>
-              <option>外科</option>
-            </select>
+            <div className='relative inline-block'>
+              <select className='border border-gray-200 rounded-2xl px-4 py-1.5 pr-8 bg-white outline-none text-xs text-gray-700 hover:border-gray-300 focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10 transition-all cursor-pointer appearance-none shadow-sm'>
+                <option value='all'>全部科室</option>
+                <option value='internal'>内科</option>
+                <option value='surgery'>外科</option>
+              </select>
+              <div className='absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none'>
+                <svg className='w-4 h-4 text-gray-500' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                  <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />
+                </svg>
+              </div>
+            </div>
           </div>
         </CardHeader>
       </Card>
@@ -98,7 +105,7 @@ export const BookingSection = ({
     </div>
 
     {bookingDoctor && <BookingModal doctor={bookingDoctor} onClose={onCloseModal} />}
-  </div>
+  </div >
 );