优化样式

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

src/components/ui/Card.tsx

@@ -11,11 +11,11 @@ export const Card = ({ className = '', children }: CardProps) => (
 );
 
 export const CardHeader = ({ children }: PropsWithChildren) => (
-  <div className='px-5 pt-4 pb-2 font-medium flex items-center justify-between'>{children}</div>
+  <div className='px-5 p-4 font-medium flex items-center justify-between'>{children}</div>
 );
 
 export const CardContent = ({ children }: PropsWithChildren) => (
-  <div className='px-5 pb-5'>{children}</div>
+  <div className='px-5 p-3'>{children}</div>
 );
 
 

src/index.css

@@ -15,3 +15,21 @@ body {
   min-height: 100vh;
   background-color: #f8fafc;
 }
+
+/* 优化下拉选项样式 */
+select option {
+  padding: 8px 12px;
+  background-color: white;
+  color: #374151;
+  font-size: 0.75rem;
+}
+
+select option:hover {
+  background-color: #3b82f6;
+  color: white;
+}
+
+select option:checked {
+  background-color: #3b82f6;
+  color: white;
+}