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

修改轮播图问题

This commit is contained in:
Li1304553726 2025-11-20 17:51:52 +08:00
parent 68f962b66c
commit 1c5428434d
4 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/news/body/FireNews/FireNewsList.tsx
View File

@ -69,7 +69,7 @@ export function FireNewsList() {
</div> </div>
{/* 文章列表 */} {/* 文章列表 */}
<div className="space-y-1 h-200 overflow-hidden hover:overflow-auto scroll-container"> <div className="space-y-5 h-200 overflow-hidden hover:overflow-auto scroll-container">
{articles.map((article, index) => ( {articles.map((article, index) => (
<div key={index} className="flex items-center space-x-3 pb-1"> <div key={index} className="flex items-center space-x-3 pb-1">
{/* 左侧竖线和日期 */} {/* 左侧竖线和日期 */}

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

@ -16,8 +16,8 @@ export function ImportantNews() {
"/images/carousel-9.jpg", "/images/carousel-9.jpg",
]; ];
// 转换为 slides 格式 // 转换为 slides 格式
const slides = carouselImages.map((imageUrl, index) => ({ const slides = carouselImages.map((imageUrl, index) => ({
key: `carousel-${index + 1}`, key: `carousel-${index + 1}`,
content: ( content: (
<div <div
@ -31,19 +31,21 @@ export function ImportantNews() {
})); }));
return( return(
<div className="relative w-5/6 h-220 mx-auto overflow-hidden "> <div className="relative w-5/6 mx-auto overflow-hidden">
{/* 轮播背景图 - 确保有明确尺寸 */} {/* 轮播背景图 - 使用 aspect-ratio 或固定高度 */}
<div className="absolute top-0 left-0 w-full h-full"> <div className="w-full relative" style={{ aspectRatio: '16/9' }}> {/* 或者设置固定高度 */}
<CarouselDemo <div className="absolute top-0 left-0 w-full h-full">
paginationPosition="left" <CarouselDemo
paginationStyle="dot" paginationPosition="left"
/> paginationStyle="dot"
</div> />
</div>
{/* 固定的烽火要闻 */} {/* 固定的烽火要闻 */}
<div className="absolute top-0 right-0 w-1/3 h-220 p-1"> <div className="absolute top-0 right-0 w-1/3 h-full p-1">
<FireNewsList /> <FireNewsList />
</div>
</div>
</div> </div>
</div>
) )
} }

4
app/components/news/body/ImageGridSection.tsx
View File

@ -65,11 +65,11 @@ const LearnPage = () => {
{/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */} {/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
<div className="w-70 h-20 bg-cover bg-no-repeat mb-5" style={{ backgroundImage: "url('images/learn.png')" }}></div> <div className="w-70 h-20 bg-cover bg-no-repeat mb-5" style={{ backgroundImage: "url('images/learn.png')" }}></div>
<div className="flex flex-col lg:flex-row h-[740px]"> <div className="flex flex-col lg:flex-row">
{/* 左侧图片区：占据屏幕3/5的宽度 */} {/* 左侧图片区：占据屏幕3/5的宽度 */}
<div className="lg:w-3/5 overflow-hidden"> <div className="lg:w-3/5 overflow-hidden">
{/* 使用grid布局来安排图片的位置 */} {/* 使用grid布局来安排图片的位置 */}
<div className="grid grid-cols-3 grid-rows-2 h-full w-full"> <div className="grid grid-cols-3 grid-rows-2 w-full">
{/* 上左第一张图 */} {/* 上左第一张图 */}
<div className="row-span-1 col-span-1 shadow-sm overflow-hidden"> <div className="row-span-1 col-span-1 shadow-sm overflow-hidden">
<img src="/images/carousel-1.jpg" alt="Image 1" className="w-full h-full object-cover" /> <img src="/images/carousel-1.jpg" alt="Image 1" className="w-full h-full object-cover" />

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

@ -59,7 +59,7 @@ export function TopNav({
return ( return (
// 将组件宽度调整为1514px，并保持居中 // 将组件宽度调整为1514px，并保持居中
<div className="h-full w-full mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]"> <div className="h-full w-full mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#176cad]">
{/* 搜索框与导航菜单组合 */} {/* 搜索框与导航菜单组合 */}
<div className="flex items-center justify-start gap-35 ml-45 "> <div className="flex items-center justify-start gap-35 ml-45 ">
{/* 导航菜单 */} {/* 导航菜单 */}