qiuchenfan
/
news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news

This commit is contained in:
qiuchenfan 2025-11-20 10:54:59 +08:00
parent a585b3bd46 496b7fc8d7
commit bf86d2df95
3 changed files with 32 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/Carousel.tsx
View File

@ -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>

4
app/components/news/body/FireNews/ImportantNews.tsx
View File

@ -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>

7
app/components/news/header/TopNav.tsx
View File

@ -1,5 +1,5 @@
import { Search } from 'lucide-react'; import { Search } from 'lucide-react';
import React, { useState,useEffect} from 'react'; import React, { useState, useEffect } from 'react';
import { Button } from '@/ui/button'; import { Button } from '@/ui/button';
interface MenuItem { interface MenuItem {
label: string; label: string;
@ -25,7 +25,7 @@ export function TopNav({
activeKey: externalActiveKey, activeKey: externalActiveKey,
onSearch, onSearch,
onItemClick, onItemClick,
}: TopNavProps){ }: TopNavProps) {
const [internalActiveKey, setInternalActiveKey] = useState('home'); const [internalActiveKey, setInternalActiveKey] = useState('home');
const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey; const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
const [searchKeyword, setSearchKeyword] = useState(''); const [searchKeyword, setSearchKeyword] = useState('');
@ -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'
}`} }`}
> >
{/* 激活状态背景层 */} {/* 激活状态背景层 */}