This commit is contained in:
parent
a13fa8e6bd
commit
e82570dcb2
|
|
@ -53,7 +53,7 @@ export function CarouselDemo() {
|
|||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
backgroundImage: "url('/app/images/header.png')",//背景图片可修改
|
||||
backgroundImage: "url('/public/images/header.png')",//背景图片可修改
|
||||
backgroundSize: '100% 100%',
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,99 @@
|
|||
import React from 'react';
|
||||
|
||||
interface NewsItem {
|
||||
content: string;
|
||||
}
|
||||
|
||||
export function FireNewsList() {
|
||||
const newsItems: NewsItem[] = [
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
},
|
||||
{
|
||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
||||
},
|
||||
];
|
||||
const articles = [
|
||||
{
|
||||
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,
|
||||
},
|
||||
{
|
||||
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: 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 (
|
||||
<div className="bg-gray-200 p-4 rounded-lg h-full">
|
||||
{/* 标题栏 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold text-gray-800">烽火要闻</h2>
|
||||
<a className="text-blue-600 hover:text-blue-800 font-medium">
|
||||
查看更多 {'>'}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
{/* 文章列表 */}
|
||||
<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-6 border-b-3 border-white">
|
||||
<h2 className="text-white text-3xl font-extrabold ml-6 mt-2 mb-2">烽火要闻</h2>
|
||||
<button className="">
|
||||
<a href="#" className="text-white text-sm flex items-center mt-2 hover:text-blue-500">
|
||||
查看更多
|
||||
<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-4">
|
||||
{newsItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex p-3 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow duration-200"
|
||||
>
|
||||
|
||||
{/* 内容部分 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-gray-700 text-sm ">
|
||||
{item.content}
|
||||
<a
|
||||
className="text-red-600 ml-1 font-medium hover:text-red-800"
|
||||
>
|
||||
[MORE]
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* 文章列表 */}
|
||||
<div className="space-y-1 h-[750px] overflow-hidden hover:overflow-auto scroll-container">
|
||||
{articles.map((article, index) => (
|
||||
<div key={index} className="flex items-center space-x-3 pb-4">
|
||||
{/* 左侧竖线和日期 */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<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>
|
||||
</div>
|
||||
{/* 右侧文章内容 */}
|
||||
<div className="flex-1">
|
||||
<p className="text-[13px] text-white ">
|
||||
{article.title}
|
||||
<a href="#" className="text-red-600 text-sm hover:font-bold">
|
||||
【MORE】
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
import { CarouselDemo } from "../Carousel";
|
||||
import {FireNewsList} from "./FireNewsList";
|
||||
|
||||
|
||||
|
||||
export function FhjtPage() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center">
|
||||
<div className=" w-full overflow-hidden flex justify-center h-200">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<CarouselDemo />
|
||||
</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">
|
||||
<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火讲堂</h2>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {FireNewsList} from "./FireNewsList";
|
|||
|
||||
export function FhrxPage() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center">
|
||||
<div className=" w-full overflow-hidden flex justify-center h-200">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<CarouselDemo />
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@ import {FireNewsList} from "./FireNewsList";
|
|||
|
||||
export function FhwsPage() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center">
|
||||
<div className=" w-full overflow-hidden flex justify-center h-200">
|
||||
<div className="w-100 h-full bg-white relative" >
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<div className="relative pt-6 pl-8">
|
||||
<h2 className=" text-4xl font-bold text-[#005d93] mb-2">烽火微视</h2>
|
||||
{/* 蓝色装饰线 */}
|
||||
<div className="h-3 bg-[#005d93]"></div>
|
||||
</div>
|
||||
{/* 列表 */}
|
||||
<div className="mt-4 pr-8 ">
|
||||
<div className="mt-4 pl-8 ">
|
||||
|
||||
<div className="mb-5 justify-start flex">
|
||||
一
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export function Header(){
|
|||
// setInterval是 JavaScript 中的一个全局函数，用于重复执行代码
|
||||
const timer = setInterval(() => {
|
||||
setCurrentTime(new Date());
|
||||
}, 1000); // 每秒更新一次
|
||||
}, 24*60*1000); // 每天更新一次
|
||||
|
||||
// 清理定时器
|
||||
return () => clearInterval(timer);// 只在组件卸载时清理定时器
|
||||
|
|
@ -15,8 +15,8 @@ export function Header(){
|
|||
|
||||
return (
|
||||
<div
|
||||
className="relative w-full h-180 bg-cover bg-center left-1/2 transform -translate-x-1/2"
|
||||
style={{ backgroundImage: "url('/app/images/header.png')" }}
|
||||
className="relative w-full h-180 bg-cover bg-center"
|
||||
style={{ backgroundImage: "url('/public/images/header.png')" }}
|
||||
>
|
||||
{/* 时间显示 只显示日期: "2025/3/15"*/}
|
||||
<div className="absolute top-4 right-4 mr-40">
|
||||
|
|
|
|||
|
|
@ -28,13 +28,17 @@ export default function Home() {
|
|||
<FhywPage />
|
||||
<NewsList />
|
||||
<ImageGridSection />
|
||||
<GrassrootsDynamics />
|
||||
<FhjtPage/>
|
||||
<FhwsPage/>
|
||||
<FhrxPage />
|
||||
<AutoCarouselDemo />
|
||||
<CultureBgPage />
|
||||
<Integrated />
|
||||
<div
|
||||
style={{backgroundImage: "url('/public/images/jcdt.png')"}}
|
||||
>
|
||||
<GrassrootsDynamics />
|
||||
<FhjtPage/>
|
||||
<FhwsPage/>
|
||||
<FhrxPage />
|
||||
<AutoCarouselDemo />
|
||||
<CultureBgPage />
|
||||
<Integrated />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 471 KiB After Width: | Height: | Size: 471 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 MiB |
Loading…
Reference in New Issue