Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news
This commit is contained in:
commit
2a41465de0
|
|
@ -1,65 +1,70 @@
|
|||
// src/components/CarouselDemo.tsx
|
||||
import * as React from "react";
|
||||
import Autoplay from "embla-carousel-autoplay";//实现轮播图的自动播放功能
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
|
||||
import { Card, CardContent } from "@/ui/card";
|
||||
import {
|
||||
Carousel,//主体
|
||||
CarouselContent,//内容容器
|
||||
CarouselItem,//单个轮播项
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
type CarouselApi,
|
||||
} from "@/ui/carousel";
|
||||
|
||||
const imageUrls = [
|
||||
"/images/carousel-1.jpg",
|
||||
"/images/carousel-2.jpg",
|
||||
"/images/carousel-3.jpg",
|
||||
"/images/carousel-4.jpg",
|
||||
"/images/carousel-5.jpg",
|
||||
"/images/carousel-6.jpg",
|
||||
];
|
||||
|
||||
export function CarouselDemo() {
|
||||
const [api, setApi] = React.useState<CarouselApi>();
|
||||
const [current, setCurrent] = React.useState(0);
|
||||
const [count, setCount] = React.useState(0);
|
||||
|
||||
const totalSlides = 6;
|
||||
|
||||
const totalSlides = imageUrls.length;
|
||||
React.useEffect(() => {
|
||||
if (!api) return;
|
||||
|
||||
setCount(api.scrollSnapList().length);
|
||||
setCurrent(api.selectedScrollSnap());//获取当前选中的轮播项的索引
|
||||
setCurrent(api.selectedScrollSnap());
|
||||
|
||||
api.on("select", () => {
|
||||
setCurrent(api.selectedScrollSnap());
|
||||
});
|
||||
}, [api]);//当api改变时，执行此函数 水平居中 循环 自动播放 回传状态
|
||||
}, [api]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-4xl mx-auto">
|
||||
<div className="relative w-full h-full">
|
||||
<Carousel
|
||||
opts={{
|
||||
loop: true,
|
||||
}}
|
||||
opts={{ loop: true }}
|
||||
plugins={[
|
||||
Autoplay({
|
||||
delay: 3000,
|
||||
stopOnInteraction: false,
|
||||
stopOnInteraction: false,
|
||||
}),
|
||||
]}
|
||||
setApi={setApi}
|
||||
className="w-full h-full"
|
||||
>
|
||||
<CarouselContent className="h-full w-full">
|
||||
<CarouselContent className="h-full w-full -ml-0">
|
||||
{Array.from({ length: totalSlides }).map((_, index) => (
|
||||
<CarouselItem key={index} className="w-full h-full">
|
||||
<div className="p-1">
|
||||
<Card>
|
||||
<CardContent className="flex aspect-square items-center justify-center ">
|
||||
<CarouselItem key={index} className="w-full h-full pl-0">
|
||||
<div className="p-0 w-full h-full">
|
||||
|
||||
<CardContent className="flex aspect-square items-center justify-center p-0 w-full h-full m-0">
|
||||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
backgroundImage: "url('/app/images/header.png')",//背景图片可修改
|
||||
backgroundImage: "url('/public/images/header.png')",//背景图片可修改
|
||||
backgroundSize: '100% 100%',
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
|
|
@ -75,8 +80,9 @@ export function CarouselDemo() {
|
|||
key={index}
|
||||
onClick={() => api?.scrollTo(index)}
|
||||
className={`h-2 w-2 rounded-full transition-colors ${
|
||||
index === current ? "bg-black" : "bg-black/50"
|
||||
index === current ? "bg-white" : "bg-white/50"
|
||||
}`}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
// src/components/CarouselDemo.tsx
|
||||
import * as React from "react";
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
|
||||
import { Card, CardContent } from "@/ui/card";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from "@/ui/carousel";
|
||||
|
||||
const imageUrls = [
|
||||
"/images/carousel-1.jpg",
|
||||
"/images/carousel-2.jpg",
|
||||
"/images/carousel-3.jpg",
|
||||
"/images/carousel-4.jpg",
|
||||
"/images/carousel-5.jpg",
|
||||
"/images/carousel-6.jpg",
|
||||
];
|
||||
|
||||
export function AutoCarouselDemo() {
|
||||
return (
|
||||
<div className="relative w-full mx-auto overflow-hidden">
|
||||
{/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
|
||||
<div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
|
||||
<div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
|
||||
{/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
|
||||
<Carousel
|
||||
opts={{
|
||||
loop: true,//循环
|
||||
align: "start",
|
||||
}}
|
||||
plugins={[
|
||||
Autoplay({
|
||||
delay: 3000, // 自动播放
|
||||
stopOnInteraction: false,//不因为鼠标交互停止
|
||||
}),
|
||||
]}
|
||||
className="w-full"
|
||||
>
|
||||
<CarouselContent className="flex gap-4">
|
||||
{imageUrls.map((src, index) => (
|
||||
<CarouselItem
|
||||
key={index}
|
||||
className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
|
||||
>
|
||||
{/* 基宽 中屏 大屏 防止收缩 相对定位
|
||||
内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
|
||||
隐藏溢出 移除边框 中等阴影
|
||||
弹性布局 正方形 垂直居中 水平居中 内边距0 相对
|
||||
*/}
|
||||
<div
|
||||
className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
|
||||
style={{
|
||||
transform: 'scale(1)',
|
||||
transition: 'all 0.5s ease',
|
||||
}}
|
||||
>
|
||||
<Card className="overflow-hidden border-none shadow-lg">
|
||||
<CardContent className="flex aspect-square items-center justify-center p-0 relative">
|
||||
<img
|
||||
src={src}
|
||||
alt={`Slide ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy" // 启用懒加载
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
|
||||
{/* 左右箭头控制 */}
|
||||
<CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-20" />
|
||||
<CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-20" />
|
||||
</Carousel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
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亿元...",
|
||||
},
|
||||
];
|
||||
|
||||
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 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>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
import { CarouselDemo } from "@/components/Carousel";
|
||||
import {FireNewsList} from "./FireNewsList";
|
||||
|
||||
|
||||
export function FhjtPage() {
|
||||
return(
|
||||
<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%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
|
||||
<div className="w-100 h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<h2 className="text-right 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="mb-5 justify-end flex">
|
||||
一等奖
|
||||
</div>
|
||||
|
||||
<div className="mb-5 justify-end flex">
|
||||
二等奖
|
||||
</div>
|
||||
|
||||
<div className="mb-5 justify-end flex">
|
||||
三等奖
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
import { CarouselDemo } from "@/components/Carousel";
|
||||
import {FireNewsList} from "./FireNewsList";
|
||||
|
||||
|
||||
export function FhrxPage() {
|
||||
return(
|
||||
<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%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
|
||||
<div className="w-100 h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<h2 className="text-right 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="mb-5 justify-end flex">
|
||||
信箱
|
||||
</div>
|
||||
|
||||
<div className="mb-5 justify-end flex">
|
||||
问答
|
||||
</div>
|
||||
|
||||
<div className="mb-5 justify-end flex">
|
||||
心灵
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
|
||||
import { CarouselDemo } from "@/components/Carousel";
|
||||
import {FireNewsList} from "./FireNewsList";
|
||||
|
||||
|
||||
export function FhwsPage() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center">
|
||||
<div className="w-100 h-full bg-white relative" >
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-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="mb-5 justify-start flex">
|
||||
一
|
||||
</div>
|
||||
|
||||
<div className="mb-5 justify-start flex">
|
||||
二
|
||||
</div>
|
||||
|
||||
<div className="mb-5 justify-start flex">
|
||||
三
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
|
||||
import { CarouselDemo } from "@/components/Carousel";
|
||||
import {FireNewsList} from "./FireNewsList";
|
||||
|
||||
|
||||
export function FhywPage() {
|
||||
return(
|
||||
<div className="relative w-full max-w-4xl mx-auto overflow-hidden aspect-square">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
|
||||
{/* 固定的烽火要闻 */}
|
||||
<div className="absolute top-0 right-0 w-1/3 h-full p-1">
|
||||
<FireNewsList />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
import React from 'react';
|
||||
import { mockNewsData } from './NewsData'; // 导入新闻数据
|
||||
|
||||
|
||||
import { grassNewsData } from './NewsData'; // 引入基层新闻数据
|
||||
|
||||
interface NewsProps {
|
||||
title?: string;
|
||||
|
|
@ -11,7 +9,6 @@ interface NewsProps {
|
|||
url?: string;
|
||||
}
|
||||
|
||||
|
||||
const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
|
||||
return (
|
||||
<div className="mb-4">
|
||||
|
|
@ -19,22 +16,31 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
|
|||
onClick={() => url && window.open(url)}
|
||||
className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-800">{title}</h3>
|
||||
<p className="text-sm text-gray-500">{time}</p>
|
||||
{/* 标题部分：左侧 */}
|
||||
<div className="flex items-center">
|
||||
<div className="w-2 h-2 bg-white rounded-full mr-2"></div>
|
||||
<h3 className="text-lg font-semibold text-white hover:text-blue-600">{title}</h3>
|
||||
</div>
|
||||
|
||||
{/* 时间部分：右侧 */}
|
||||
<p className="text-sm text-white hover:text-blue-600 text-right">{time}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 使用新闻数据渲染列表
|
||||
// 使用基层新闻数据渲染列表
|
||||
const List: React.FC = () => {
|
||||
// 调用 grassNewsData 函数获取基层新闻数据
|
||||
const baseNews = grassNewsData();
|
||||
|
||||
return (
|
||||
<div >
|
||||
<div >
|
||||
<div className=" p-6 ">
|
||||
<div>
|
||||
<div>
|
||||
<div className="p-6">
|
||||
<ul className="space-y-4">
|
||||
{mockNewsData.map((news) => (
|
||||
<NewsItem title={news.title} time={news.time} url={news.url} />
|
||||
{baseNews.map((news) => (
|
||||
<NewsItem key={news.id} title={news.title} time={news.time} url={news.url} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ export const NewsData = (): News[] => {
|
|||
{ id: "news-4", type: "科技", title: "量子计算研究取得突破性进展", time: "2023-11-04", url: "https://www.baidu.com" },
|
||||
{ id: "news-5", type: "科技", title: "国际空间站完成新一轮科学实验", time: "2023-11-05", url: "https://www.baidu.com" },
|
||||
{ id: "news-6", type: "科技", title: "数字货币监管政策逐步完善", time: "2023-11-06", url: "https://www.baidu.com" },
|
||||
{ id: "news-7", type: "科技", title: "区块链技术在金融领域应用前景广阔", time: "2023-11-07", url: "https://www.baidu.com" },
|
||||
{ id: "news-8", type: "科技", title: "物联网技术在工业自动化领域应用广泛", time: "2023-11-08", url: "https://www.baidu.com" },
|
||||
{ id: "news-8", type: "科技", title: "物联网技术在工业自动化领域应用广泛", time: "2023-11-08", url: "https://www.baidu.com" },
|
||||
|
||||
|
||||
{ id: "edu-1", type: "教育", title: "在线教育平台助力偏远地区学生学习", time: "2025-01-10", url: "https://www.example.com/edu-1" },
|
||||
{ id: "edu-2", type: "教育", title: "人工智能技术推动个性化教学发展", time: "2025-02-15", url: "https://www.example.com/edu-2" },
|
||||
|
|
@ -23,11 +27,27 @@ export const NewsData = (): News[] => {
|
|||
{ id: "edu-4", type: "教育", title: "高校联合企业开展产学研合作新模式", time: "2025-04-05", url: "https://www.example.com/edu-4" },
|
||||
{ id: "edu-5", type: "教育", title: "教育部发布新政策支持职业教育发展", time: "2025-05-12", url: "https://www.example.com/edu-5" },
|
||||
{ id: "edu-6", type: "教育", title: "全球教育公平问题引发广泛讨论", time: "2025-06-18", url: "https://www.example.com/edu-6" },
|
||||
{ id: "edu-7", type: "教育", title: "国际教育标准制定与落地", time: "2025-07-25", url: "https://www.example.com/edu-7" },
|
||||
{ id: "edu-8", type: "教育", title: "在线教育平台助力偏远地区学生学习", time: "2025-08-30", url: "https://www.example.com/edu-8" },
|
||||
{ id: "edu-9", type: "教育", title: "人工智能技术推动个性化教学发展", time: "2025-09-04", url: "https://www.example.com/edu-9" },
|
||||
|
||||
];
|
||||
};
|
||||
export const grassNewsData = (): News[] => {
|
||||
return [
|
||||
{ id: "grass-1", type: "基层", title: "社区志愿者服务队开展环保活动", time: "2025-01-10", url: "https://www.example.com/grass-1" },
|
||||
{ id: "grass-2", type: "基层", title: "乡镇企业助力乡村振兴计划", time: "2025-01-15", url: "https://www.example.com/grass-2" },
|
||||
{ id: "grass-3", type: "基层", title: "村级文化活动中心正式开放", time: "2025-02-01", url: "https://www.example.com/grass-3" },
|
||||
{ id: "grass-4", type: "基层", title: "基层医疗站新增远程诊疗服务", time: "2025-02-18", url: "https://www.example.com/grass-4" },
|
||||
{ id: "grass-5", type: "基层", title: "农村电商培训帮助农民增收", time: "2025-03-05", url: "https://www.example.com/grass-5" },
|
||||
{ id: "grass-6", type: "基层", title: "社区图书馆举办亲子阅读活动", time: "2025-03-22", url: "https://www.example.com/grass-6" },
|
||||
{ id: "grass-7", type: "基层", title: "街道办组织居民参与垃圾分类宣传", time: "2025-04-10", url: "https://www.example.com/grass-7" },
|
||||
{ id: "grass-8", type: "基层", title: "乡村小学引入智能教学设备", time: "2025-04-25", url: "https://www.example.com/grass-8" },
|
||||
{ id: "grass-9", type: "基层", title: "基层干部走访调研解决民生问题", time: "2025-05-12", url: "https://www.example.com/grass-9" }
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 默认导出模拟新闻数据
|
||||
export const mockNewsData = NewsData();
|
||||
export const mockGrassNewsData = grassNewsData();
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
|
|||
return (
|
||||
<div className="mb-4">
|
||||
<div
|
||||
onClick={() => url && window.open(url)}
|
||||
onClick={() => url && window.open(url)} // 点击时打开链接
|
||||
className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-800">{title}</h3>
|
||||
<h3 className="text-lg font-semibold text-gray-800 hover:text-blue-600 transition duration-300 ease-in-out">{title}</h3>
|
||||
<p className="text-sm text-gray-500">{time}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -28,34 +28,55 @@ const NewsList: React.FC = () => {
|
|||
const educationNews = mockNewsData.filter((news) => news.type === "教育");
|
||||
|
||||
return (
|
||||
<div className="bg-gray-100 p-6 rounded-lg shadow-md w-4/5 mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="bg-gray-50 p-8 rounded-2xl shadow-xl w-4/5 mx-auto">
|
||||
{/* 使用 Flexbox 将两个列表放在一行 */}
|
||||
<div className="flex gap-8">
|
||||
{/* 科技新闻 */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="text-xl font-bold text-gray-900">科技新闻</p>
|
||||
<button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
|
||||
更多科技新闻
|
||||
<div className="flex-1 bg-white rounded-lg shadow-md">
|
||||
{/* 标题栏：独立于列表之外 */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
|
||||
科技新闻
|
||||
</div>
|
||||
<button className="text-base text-blue-200 hover:text-blue-400 transition duration-200 pl-6 pr-6">
|
||||
【查看更多】
|
||||
</button>
|
||||
</div>
|
||||
<ul className="space-y-4">
|
||||
|
||||
{/* 新闻列表 */}
|
||||
<ul className="space-y-4 pl-6 pr-6 pb-6">
|
||||
{techNews.map((news) => (
|
||||
<NewsItem key={news.id} title={news.title} time={news.time} url={news.url} />
|
||||
<NewsItem
|
||||
key={news.id}
|
||||
title={news.title}
|
||||
time={news.time}
|
||||
url={news.url} // 确保 mockNewsData 中有 url 字段
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 教育新闻 */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="text-xl font-bold text-gray-900">教育新闻</p>
|
||||
<button className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
|
||||
更多教育新闻
|
||||
<div className="flex-1 bg-white rounded-lg shadow-md">
|
||||
{/* 标题栏：独立于列表之外 */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
|
||||
教育新闻
|
||||
</div>
|
||||
<button className="text-base text-blue-200 hover:text-blue-400 transition duration-200 pl-6 pr-6">
|
||||
【查看更多】
|
||||
</button>
|
||||
</div>
|
||||
<ul className="space-y-4">
|
||||
|
||||
{/* 新闻列表 */}
|
||||
<ul className="space-y-4 pl-6 pr-6 pb-6">
|
||||
{educationNews.map((news) => (
|
||||
<NewsItem key={news.id} title={news.title} time={news.time} url={news.url} />
|
||||
<NewsItem
|
||||
key={news.id}
|
||||
title={news.title}
|
||||
time={news.time}
|
||||
url={news.url} // 确保 mockNewsData 中有 url 字段
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,98 @@
|
|||
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.51)] 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-bold 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">
|
||||
查看更多
|
||||
</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-200 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-1 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-white ">
|
||||
{article.title}
|
||||
<a href="#" className="text-red-600 text-sm hover:font-bold">
|
||||
【MORE】
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,13 +4,15 @@ import {FireNewsList} from "./FireNewsList";
|
|||
|
||||
export function FhjtPage() {
|
||||
return(
|
||||
<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%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
|
||||
<div className="w-100 h-full bg-white relative">
|
||||
<div className=" w-full overflow-hidden flex justify-center h-200 mb-10">
|
||||
<div className="relative">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200 absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className='w-200 bg-white h-full'></div>
|
||||
</div>
|
||||
<div className="w-120 h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火讲堂</h2>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,16 @@ import {FireNewsList} from "./FireNewsList";
|
|||
|
||||
export function FhrxPage() {
|
||||
return(
|
||||
<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%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className=" w-full overflow-hidden flex justify-center h-200 mb-10">
|
||||
<div className="relative">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200 absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className='w-200 bg-white h-full'></div>
|
||||
</div>
|
||||
|
||||
<div className="w-100 h-full bg-white relative">
|
||||
<div className="w-120 h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火热线</h2>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@ import {FireNewsList} from "./FireNewsList";
|
|||
|
||||
export function FhwsPage() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center">
|
||||
<div className="w-100 h-full bg-white relative" >
|
||||
<div className=" w-full overflow-hidden flex justify-center h-200 mb-10">
|
||||
<div className="w-120 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">
|
||||
一
|
||||
|
|
@ -28,10 +28,13 @@ export function FhwsPage() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className="relative">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200 absolute" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className='w-200 bg-white h-full'></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import List from '@/components/list/List';
|
|||
|
||||
export default function GrassrootsDynamics() {
|
||||
return (
|
||||
<div className="flex bg-white rounded-2xl mx-auto w-4/5">
|
||||
<div className="flex rounded-2xl mx-auto w-4/5 h-140 mt-10 p-10">
|
||||
<div className="w-2/5 p-6 flex flex-col items-center justify-center relative">
|
||||
<div >
|
||||
<img
|
||||
|
|
@ -15,7 +15,7 @@ export default function GrassrootsDynamics() {
|
|||
</div>
|
||||
|
||||
{/* 右边列表 */}
|
||||
<div className="w-3/5 text-white p-6">
|
||||
<div className="w-3/5 p-6 flex flex-col bg-[#0e93df] text-white">
|
||||
<List />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,109 +1,102 @@
|
|||
import { CarouselDemo } from "@/components/Carousel";
|
||||
const ImageGridSection = () => {
|
||||
|
||||
const elements = [
|
||||
"/images/carousel-1.jpg",
|
||||
<CarouselDemo />,
|
||||
"/images/carousel-2.jpg",
|
||||
"/images/carousel-3.jpg"
|
||||
];
|
||||
{/* 最外 左右两列间 内边 内容最大宽 水平居 微软雅黑
|
||||
2 列+ 2 行 格子间距 固定宽高
|
||||
*/}
|
||||
import { CarouselDemo } from '@/components/Carousel';
|
||||
import React from 'react';
|
||||
|
||||
const listItems = [
|
||||
'新闻标题一：重要政策发布',
|
||||
'新闻标题二：经济数据稳步回升',
|
||||
'新闻标题三：科技创新成果显著',
|
||||
'新闻标题四：民生工程持续推进',
|
||||
'新闻标题五：国际交流合作深化'
|
||||
const LearnPage = () => {
|
||||
const newsList = [
|
||||
'中华人民共和国监察法',
|
||||
'2024年国办印发意见部门工作人员党听全国两...',
|
||||
'十四届全国人大二次会议闭幕贺词',
|
||||
'7天人代会："小片段"折射民主"大全景"',
|
||||
'全国政协十四届二次会议共收到提案5800多件',
|
||||
'两会观察丨从两会八个高频词看中国',
|
||||
'两会"清单"上新这些民生发展温度',
|
||||
'"选择中国"——世界从中国两会读出心动机号',
|
||||
'中国经济信心说丨新玛合信心从哪里来',
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
gap: '24px',
|
||||
padding: '20px',
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
fontFamily: 'Microsoft YaHei, sans-serif'
|
||||
}}>
|
||||
|
||||
{/* 左侧：3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满
|
||||
保持比例填充 消除底部空白*/}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gridTemplateRows: '1fr 1fr',
|
||||
gap: '16px',
|
||||
width: '600px',
|
||||
height: '450px',
|
||||
boxSizing: 'border-box' // 确保padding和border不会增加元素的实际宽度和高度
|
||||
}}>
|
||||
<div className="w-4/5 mx-auto px-4 py-6">
|
||||
{/* 顶部 Logo */}
|
||||
<div className="flex justify-start mb-4">
|
||||
<h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
|
||||
</div>
|
||||
|
||||
{elements.map((element, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
borderRadius: '8px',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'stretch'
|
||||
}}
|
||||
>
|
||||
{typeof element === 'string' ? (
|
||||
{/* 主内容区：固定高度，紧凑布局 */}
|
||||
<div className="flex flex-col lg:flex-row gap-4 h-[740px]">
|
||||
{/* 左侧图片区 */}
|
||||
<div className="lg:w-3/5 rounded-lg overflow-hidden">
|
||||
<div className="grid grid-cols-3 grid-rows-2 gap-3 h-full w-full">
|
||||
{/* 上左：第一张图 */}
|
||||
<div className="row-span-1 col-span-1 rounded-lg shadow-sm overflow-hidden">
|
||||
<img
|
||||
src={element}
|
||||
alt={`图片 ${index + 1}`}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
display: 'block'
|
||||
}}
|
||||
src="/images/carousel-1.jpg"
|
||||
alt="Image 1"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
element // 占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
|
||||
// 背景色、圆角、阴影、内边距 防撑大
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 上右：轮播图 */}
|
||||
<div className="col-span-2 row-span-1 rounded-lg shadow-sm overflow-hidden">
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
|
||||
{/* 下三图 */}
|
||||
{[3, 4, 5].map((i) => (
|
||||
<div key={i} className="rounded-lg shadow-sm overflow-hidden">
|
||||
<img
|
||||
src={`/images/carousel-${i}.jpg`}
|
||||
alt={`Image ${i}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{
|
||||
flex: 1,
|
||||
minWidth: '300px',
|
||||
height: '450px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
background: '#f9f9f9',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
||||
padding: '16px',
|
||||
boxSizing: 'border-box'
|
||||
}}>
|
||||
<ul style={{
|
||||
listStyle: 'none',
|
||||
padding: 0,
|
||||
flexGrow: 1,
|
||||
overflowY: 'auto' // 当 内 容超出时启用滚动条 填满剩余 文间
|
||||
}}>
|
||||
{listItems.map((item, index) => (
|
||||
<li
|
||||
key={index}
|
||||
style={{
|
||||
marginBottom: '12px',
|
||||
color: '#333',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
<span style={{ color: '#c00', marginRight: '8px' }}>•</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 右侧新闻列表 */}
|
||||
<div className="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex items-center">
|
||||
<ul className="space-y-8 w-full">
|
||||
{newsList.map((item, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-start text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group"
|
||||
>
|
||||
<span className="text-red-500 mr-2 mt-0.5">•</span>
|
||||
<span className="group-hover:underline">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[1514px] h-[285px] flex relative">
|
||||
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||||
<div
|
||||
className="w-[169px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: "url('/public/images/book1.png')"}}
|
||||
></div>
|
||||
{/* 左边容器内容 */}
|
||||
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
|
||||
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
|
||||
习近平新时代中国特色社会
|
||||
<br />
|
||||
主义思想专题数据库
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[700px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||||
<div
|
||||
className="w-[140px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
|
||||
style={{ backgroundImage: "url('/public/images/book2.png')"}}
|
||||
></div>
|
||||
{/* 右边容器内容 */}
|
||||
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] ">
|
||||
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ImageGridSection;
|
||||
|
||||
export default LearnPage;
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,11 @@
|
|||
import { Search } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState,useEffect} from 'react';
|
||||
import { Button } from '@/ui/button';
|
||||
interface MenuItem {
|
||||
label: string;
|
||||
key: string;
|
||||
}
|
||||
|
||||
// 定义 TopNavProps 接口，描述组件的 props 类型
|
||||
// menuItems? 菜单项数组
|
||||
// activeKey: 当前激活的菜单项
|
||||
// onSearch: 搜索回调函数
|
||||
// onItemClick: 菜单点击回调函数
|
||||
interface TopNavProps {
|
||||
menuItems?: MenuItem[];
|
||||
activeKey?: string;
|
||||
|
|
@ -18,11 +13,6 @@ interface TopNavProps {
|
|||
onItemClick?: (key: string) => void;
|
||||
}
|
||||
|
||||
//定义 TopNav 组件，类型为 React 函数组件，接收 TopNavProps 类型的 props
|
||||
//解构并设置 menuItems 默认值，如果父组件没有传入则使用默认的6个菜单项
|
||||
// activeKey: 当前激活的菜单项
|
||||
// onSearch: 搜索回调函数
|
||||
// onItemClick: 菜单点击回调函数
|
||||
export function TopNav({
|
||||
menuItems = [
|
||||
{ label: '首页', key: 'home' },
|
||||
|
|
@ -32,31 +22,33 @@ export function TopNav({
|
|||
{ label: '联系热线', key: 'hotline' },
|
||||
{ label: '综合服务', key: 'service' },
|
||||
],
|
||||
activeKey: externalActiveKey, // 从外部传入的 activeKey
|
||||
activeKey: externalActiveKey,
|
||||
onSearch,
|
||||
onItemClick,
|
||||
}: TopNavProps){
|
||||
// 使用外部传入的 activeKey，如果没有则使用内部状态
|
||||
// 创建内部状态 internalActiveKey，默认值为 'home'，用于内部管理激活状态
|
||||
const [internalActiveKey, setInternalActiveKey] = useState('home');
|
||||
// 如果外部传入了 activeKey 则使用外部的，否则使用内部状态（支持受控和非受控模式）
|
||||
const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
|
||||
// 创建搜索关键词状态，初始为空字符串
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
// 处理搜索提交事件, 阻止默认表单提交行为，调用搜索回调函数
|
||||
// const [activeIndex, setActiveIndex] = useState(0);
|
||||
// const [prevIndex, setPrevIndex] = useState(0);
|
||||
|
||||
// 监听激活项变化，更新索引和动画方向
|
||||
// useEffect(() => {
|
||||
// const currentIndex = menuItems.findIndex(item => item.key === currentActiveKey);
|
||||
// setPrevIndex(activeIndex);
|
||||
// setActiveIndex(currentIndex);
|
||||
// }, [currentActiveKey, menuItems, activeIndex]);
|
||||
|
||||
const handleSearchSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSearch?.(searchKeyword); // .? 可选链操作符，确保 onSearch 存在时才调用
|
||||
onSearch?.(searchKeyword);
|
||||
};
|
||||
|
||||
// 定义菜单项点击处理函数，如果外部没有传入 activeKey 则更新内部状态，调用点击回调函数
|
||||
const handleItemClick = (item: MenuItem) => {
|
||||
// 更新内部状态（如果使用内部状态）
|
||||
if (externalActiveKey === undefined) {
|
||||
setInternalActiveKey(item.key);
|
||||
}
|
||||
// 调用外部回调函数
|
||||
onItemClick?.(item.key); // .? 可选链操作符，确保 onItemClick 存在时才调用
|
||||
onItemClick?.(item.key);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { FhjtPage } from "@/components/news/body/FireNews/fhjt";
|
|||
import { FhwsPage } from "@/components/news/body/FireNews/fhws";
|
||||
import { FhrxPage } from "@/components/news/body/FireNews/fhrx";
|
||||
import { AutoCarouselDemo } from "@/components/AutoCarousel";
|
||||
|
||||
export function meta( ) {
|
||||
return [
|
||||
{ title: "New React Router App" },
|
||||
|
|
@ -28,13 +29,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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
|
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