轮播图图片自适应

app/components/Carousel.tsx

@@ -87,27 +87,29 @@ export function CarouselDemo({
           }),
         ]}
         setApi={setApi} // 将 Embla 实例保存到 state 中
-        className="w-full h-full" // 占满容器
+        className="w-full" // 占满容器
       >
         {/* 轮播内容区域 */}
-        <CarouselContent className="h-full w-full -ml-0">
+        <CarouselContent className=" w-full -ml-0">
           {/* 遍历图片数组，为每张图创建一个轮播项 */}
           {imageUrls.map((src, index) => (
             <CarouselItem
               key={index}
-              className="w-full h-full pl-0" // 移除默认内边距
+              className="w-full  pl-0" // 移除默认内边距
             >
               {/* 内部包裹层：无内边距，占满 */}
-              <div className="p-0 w-full h-full">
+              <div className="p-0 w-full">
                 {/* 使用 CardContent 包裹图片，移除默认间距 */}
-                <CardContent className="flex items-center justify-center p-0 w-full h-full m-0">
+                <CardContent className=" p-0 w-full  m-0">
                   {/* 图片元素：自动填充容器，保持比例裁剪 */}
+                  <div className="relative w-full aspect-video"> {/* 可选：设置固定宽高比 */}
                     <img
                       src={src}
                       alt={`Slide ${index + 1}`} // 无障碍访问描述
-                    className="w-full h-full object-fill" // 关键：使图片覆盖整个区域
+                      className="absolute inset-0 w-full h-full object-fill" // 使用 object-fill 拉伸填充
                       loading="lazy" // 懒加载优化性能
                     />
+                  </div>
                 </CardContent>
               </div>
             </CarouselItem>

app/components/news/header/TopNav.tsx

@@ -1,5 +1,5 @@
 import { Search } from 'lucide-react';
-import React, { useState,useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from '@/ui/button';
 interface MenuItem {
   label: string;
@@ -25,7 +25,7 @@ export function TopNav({
   activeKey: externalActiveKey,
   onSearch,
   onItemClick,
-}: TopNavProps){
+}: TopNavProps) {
   const [internalActiveKey, setInternalActiveKey] = useState('home');
   const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
   const [searchKeyword, setSearchKeyword] = useState('');
@@ -74,8 +74,7 @@ export function TopNav({
               <li key={item.key} className="relative">
                 <button
                   onClick={() => handleItemClick(item)}
-                  className={`px-4 py-2 text-2xl font-extralight transition-all duration-500 relative z-10 ${
-                    isActive ? 'text-white' : 'text-gray-600 hover:font-bold'
+                  className={`px-4 py-2 text-2xl transition-all duration-500 relative z-10 ${isActive ? 'text-white font-bold' : 'text-gray-600 hover:font-bold cursor-pointer'
                     }`}
                 >
                   {/* 激活状态背景层 */}