Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news
This commit is contained in:
commit
bf86d2df95
|
|
@ -87,27 +87,29 @@ export function CarouselDemo({
|
||||||
}),
|
}),
|
||||||
]}
|
]}
|
||||||
setApi={setApi} // 将 Embla 实例保存到 state 中
|
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) => (
|
{imageUrls.map((src, index) => (
|
||||||
<CarouselItem
|
<CarouselItem
|
||||||
key={index}
|
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 包裹图片,移除默认间距 */}
|
||||||
<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
|
<img
|
||||||
src={src}
|
src={src}
|
||||||
alt={`Slide ${index + 1}`} // 无障碍访问描述
|
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" // 懒加载优化性能
|
loading="lazy" // 懒加载优化性能
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</div>
|
</div>
|
||||||
</CarouselItem>
|
</CarouselItem>
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ export function ImportantNews() {
|
||||||
}));
|
}));
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
|
<div className="relative w-5/6 h-220 mx-auto overflow-hidden ">
|
||||||
{/* 轮播背景图 - 确保有明确尺寸 */}
|
{/* 轮播背景图 - 确保有明确尺寸 */}
|
||||||
<div className="absolute top-0 left-0 w-full h-full">
|
<div className="absolute top-0 left-0 w-full h-full">
|
||||||
<CarouselDemo
|
<CarouselDemo
|
||||||
|
|
@ -41,7 +41,7 @@ export function ImportantNews() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 固定的烽火要闻 */}
|
{/* 固定的烽火要闻 */}
|
||||||
<div className="absolute top-0 right-0 w-1/3 h-225 p-1">
|
<div className="absolute top-0 right-0 w-1/3 h-220 p-1">
|
||||||
<FireNewsList />
|
<FireNewsList />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -74,8 +74,7 @@ export function TopNav({
|
||||||
<li key={item.key} className="relative">
|
<li key={item.key} className="relative">
|
||||||
<button
|
<button
|
||||||
onClick={() => handleItemClick(item)}
|
onClick={() => handleItemClick(item)}
|
||||||
className={`px-4 py-2 text-2xl font-extralight transition-all duration-500 relative z-10 ${
|
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'
|
||||||
isActive ? 'text-white' : 'text-gray-600 hover:font-bold'
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{/* 激活状态背景层 */}
|
{/* 激活状态背景层 */}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue