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

Compare commits

base: qiuchenfan:94da72d1c0760c0e02400c2d40f4ab8c320c05cc
Branches Tags
qiuchenfan:main
..
compare: qiuchenfan:3d40e0842bfbc0f98f28bff855cbd548b078cc8f
Branches Tags
qiuchenfan:main

No commits in common. "94da72d1c0760c0e02400c2d40f4ab8c320c05cc" and "3d40e0842bfbc0f98f28bff855cbd548b078cc8f" have entirely different histories.
94da72d1c0 ... 3d40e0842b

9 changed files with 73 additions and 119 deletions
Show Stats Expand all files Collapse all files

2
app/components/Carousel.tsx
View File

@ -53,7 +53,7 @@ export function CarouselDemo() {
<div <div
className="w-full h-full" className="w-full h-full"
style={{ style={{
backgroundImage: "url('/public/images/header.png')",//背景图片可修改 backgroundImage: "url('/app/images/header.png')",//背景图片可修改
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
}} }}
> >

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

@ -1,99 +1,63 @@
import React from 'react'; import React from 'react';
interface NewsItem {
content: string;
}
export function FireNewsList() { export function FireNewsList() {
const articles = [ const newsItems: NewsItem[] = [
{ {
date: { month: '11', day: '2025-02' }, content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...', },
isHighlighted: false, {
}, content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
{ },
date: { month: '11', day: '2025-02' }, {
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...', content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
isHighlighted: false, },
}, {
{ content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
date: { month: '11', day: '2025-02' }, },
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...', {
isHighlighted: false, content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
}, },
{ {
date: { month: '11', day: '2025-02' }, content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...', },
isHighlighted: true, ];
},
{
date: { month: '11', day: '2025-02' },
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
isHighlighted: true,
},
{
date: { month: '11', day: '2025-02' },
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
isHighlighted: false,
},
{
date: { month: '11', day: '2025-02' },
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
isHighlighted: true,
},
{
date: { month: '11', day: '2025-02' },
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
isHighlighted: false,
},
{
date: { month: '11', day: '2025-02' },
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
isHighlighted: false,
},
{
date: { month: '11', day: '2025-02' },
title: '记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262人次，支出达399.7亿元...',
isHighlighted: false,
},
];
return ( return (
<div> <div className="bg-gray-200 p-4 rounded-lg h-full">
{/* 文章列表 */} {/* 标题栏 */}
<div className=" bg-[rgba(0,0,0,0.5)] shadow-lg ml-4 mr-2 p-1 absolute right-0 "> <div className="flex justify-between items-center mb-4">
{/* 标题栏 */} <h2 className="text-xl font-bold text-gray-800">烽火要闻</h2>
<div className="flex justify-between items-center mb-6 border-b-3 border-white"> <a className="text-blue-600 hover:text-blue-800 font-medium">
<h2 className="text-white text-3xl font-extrabold ml-6 mt-2 mb-2">烽火要闻</h2> 查看更多 {'>'}
<button className=""> </a>
<a href="#" className="text-white text-sm flex items-center mt-2 hover:text-blue-500"> </div>
查看更多
<span className="ml-1 w-0 h-0 border-l-6 border-l-red-500 border-t-6 border-t-transparent border-r-6 border-r-transparent border-b-6 border-b-transparent"></span>
</a>
</button>
</div>
{/* 文章列表 */} {/* 新闻列表 */}
<div className="space-y-1 h-[750px] overflow-hidden hover:overflow-auto scroll-container"> <div className="space-y-4">
{articles.map((article, index) => ( {newsItems.map((item, index) => (
<div key={index} className="flex items-center space-x-3 pb-4"> <div
{/* 左侧竖线和日期 */} key={index}
<div className="flex items-center space-x-3"> className="flex p-3 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow duration-200"
<div className="w-[0.7px] h-13 bg-white ml-3"></div> >
<div className="text-center">
<div className="text-white text-3xl font-bold">{article.date.month}</div> {/* 内容部分 */}
<div className="text-gray-300 text-sm">{article.date.day}</div> <div className="flex-1 min-w-0">
</div> <p className="text-gray-700 text-sm ">
</div> {item.content}
{/* 右侧文章内容 */} <a
<div className="flex-1"> className="text-red-600 ml-1 font-medium hover:text-red-800"
<p className="text-[13px] text-white "> >
{article.title} [MORE]
<a href="#" className="text-red-600 text-sm hover:font-bold"> </a>
【MORE】 </p>
</a> </div>
</p> </div>
</div> ))}
</div> </div>
))} </div>
</div>
</div>
</div>
); );
}; };

12
app/components/news/body/FireNews/fhjt.tsx
View File

@ -1,22 +1,16 @@
<<<<<<< HEAD:app/components/FireNews/fhjt.tsx
import { CarouselDemo } from "../Carousel";
=======
import { CarouselDemo } from "@/components/Carousel"; import { CarouselDemo } from "@/components/Carousel";
import {FireNewsList} from "./FireNewsList"; import {FireNewsList} from "./FireNewsList";
>>>>>>> 3d40e0842bfbc0f98f28bff855cbd548b078cc8f:app/components/news/body/FireNews/fhjt.tsx
export function FhjtPage() { export function FhjtPage() {
return( return(
<div className=" w-full overflow-hidden flex justify-center h-200"> <div className=" w-full overflow-hidden flex justify-center">
{/* 轮播背景图 */} {/* 轮播背景图 */}
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}> <div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
<CarouselDemo /> <CarouselDemo />
</div> </div>
{/* 白色遮罩层 - 覆盖被裁剪的部分 */}
<div className="w-100 h-full bg-white relative">
<div className="w-100 h-full bg-white relative" style={{}}>
{/* 标题部分 */} {/* 标题部分 */}
<div className="relative pt-6 pr-8"> <div className="relative pt-6 pr-8">
<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火讲堂</h2> <h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火讲堂</h2>

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

@ -4,7 +4,7 @@ import {FireNewsList} from "./FireNewsList";
export function FhrxPage() { export function FhrxPage() {
return( return(
<div className=" w-full overflow-hidden flex justify-center h-200"> <div className=" w-full overflow-hidden flex justify-center">
{/* 轮播背景图 */} {/* 轮播背景图 */}
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}> <div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
<CarouselDemo /> <CarouselDemo />

6
app/components/news/body/FireNews/fhws.tsx
View File

@ -4,16 +4,16 @@ import {FireNewsList} from "./FireNewsList";
export function FhwsPage() { export function FhwsPage() {
return( return(
<div className=" w-full overflow-hidden flex justify-center h-200"> <div className=" w-full overflow-hidden flex justify-center">
<div className="w-100 h-full bg-white relative" > <div className="w-100 h-full bg-white relative" >
{/* 标题部分 */} {/* 标题部分 */}
<div className="relative pt-6 pl-8"> <div className="relative pt-6 pr-8">
<h2 className=" text-4xl font-bold text-[#005d93] mb-2">烽火微视</h2> <h2 className=" text-4xl font-bold text-[#005d93] mb-2">烽火微视</h2>
{/* 蓝色装饰线 */} {/* 蓝色装饰线 */}
<div className="h-3 bg-[#005d93]"></div> <div className="h-3 bg-[#005d93]"></div>
</div> </div>
{/* 列表 */} {/* 列表 */}
<div className="mt-4 pl-8 "> <div className="mt-4 pr-8 ">
<div className="mb-5 justify-start flex"> <div className="mb-5 justify-start flex">
一 一

6
app/components/news/header/Header.tsx
View File

@ -7,7 +7,7 @@ export function Header(){
// setInterval是 JavaScript 中的一个全局函数，用于重复执行代码 // setInterval是 JavaScript 中的一个全局函数，用于重复执行代码
const timer = setInterval(() => { const timer = setInterval(() => {
setCurrentTime(new Date()); setCurrentTime(new Date());
}, 24*60*1000); // 每天更新一次 }, 1000); // 每秒更新一次
// 清理定时器 // 清理定时器
return () => clearInterval(timer);// 只在组件卸载时清理定时器 return () => clearInterval(timer);// 只在组件卸载时清理定时器
@ -15,8 +15,8 @@ export function Header(){
return ( return (
<div <div
className="relative w-full h-180 bg-cover bg-center" className="relative w-full h-180 bg-cover bg-center left-1/2 transform -translate-x-1/2"
style={{ backgroundImage: "url('/public/images/header.png')" }} style={{ backgroundImage: "url('/app/images/header.png')" }}
> >
{/* 时间显示 只显示日期: "2025/3/15"*/} {/* 时间显示 只显示日期: "2025/3/15"*/}
<div className="absolute top-4 right-4 mr-40"> <div className="absolute top-4 right-4 mr-40">

0
public/images/header.png → app/images/header.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 471 KiB

After

Width:  |  Height:  |  Size: 471 KiB

18
app/routes/news.tsx
View File

@ -28,17 +28,13 @@ export default function Home() {
<FhywPage /> <FhywPage />
<NewsList /> <NewsList />
<ImageGridSection /> <ImageGridSection />
<div <GrassrootsDynamics />
style={{backgroundImage: "url('/public/images/jcdt.png')"}} <FhjtPage/>
> <FhwsPage/>
<GrassrootsDynamics /> <FhrxPage />
<FhjtPage/> <AutoCarouselDemo />
<FhwsPage/> <CultureBgPage />
<FhrxPage /> <Integrated />
<AutoCarouselDemo />
<CultureBgPage />
<Integrated />
</div>
</div> </div>
); );
} }

BIN
public/images/jcdt.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 MiB