diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index 8e01115..ee00eb0 100755 --- a/app/components/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -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(); 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 ( -
+
- + {Array.from({ length: totalSlides }).map((_, index) => ( - -
- - + +
+ +
- +
))} @@ -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}`} /> ))}
diff --git a/app/components/body/AutoCarousel.tsx b/app/components/body/AutoCarousel.tsx new file mode 100644 index 0000000..01a32b1 --- /dev/null +++ b/app/components/body/AutoCarousel.tsx @@ -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 ( +
+ {/* 相对定位 宽度100% 水平居中 隐藏溢出 */} +
+
+ {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */} + + + {imageUrls.map((src, index) => ( + + {/* 基宽 中屏 大屏 防止收缩 相对定位 + 内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型 + 隐藏溢出 移除边框 中等阴影 + 弹性布局 正方形 垂直居中 水平居中 内边距0 相对 + */} +
+ + + {`Slide + + +
+ + ))} + + + {/* 左右箭头控制 */} + + + +
+ ); +} \ No newline at end of file diff --git a/app/components/body/FireNews/FireNewsList.tsx b/app/components/body/FireNews/FireNewsList.tsx new file mode 100644 index 0000000..77601c8 --- /dev/null +++ b/app/components/body/FireNews/FireNewsList.tsx @@ -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 ( +
+ {/* 标题栏 */} +
+

烽火要闻

+ + 查看更多 {'>'} + +
+ + {/* 新闻列表 */} +
+ {newsItems.map((item, index) => ( +
+ + {/* 内容部分 */} +
+

+ {item.content} + + [MORE] + +

+
+
+ ))} +
+
+ ); +}; diff --git a/app/components/body/FireNews/fhjt.tsx b/app/components/body/FireNews/fhjt.tsx new file mode 100644 index 0000000..6ab127b --- /dev/null +++ b/app/components/body/FireNews/fhjt.tsx @@ -0,0 +1,39 @@ + +import { CarouselDemo } from "@/components/Carousel"; +import {FireNewsList} from "./FireNewsList"; + + +export function FhjtPage() { + return( +
+ {/* 轮播背景图 */} +
+ +
+ +
+ {/* 标题部分 */} +
+

烽火讲堂

+ {/* 蓝色装饰线 */} +
+
+ {/* 列表 */} +
+ +
+ 一等奖 +
+ +
+ 二等奖 +
+ +
+ 三等奖 +
+
+
+
+ ) +} \ No newline at end of file diff --git a/app/components/body/FireNews/fhrx.tsx b/app/components/body/FireNews/fhrx.tsx new file mode 100644 index 0000000..a9f9f4f --- /dev/null +++ b/app/components/body/FireNews/fhrx.tsx @@ -0,0 +1,39 @@ + +import { CarouselDemo } from "@/components/Carousel"; +import {FireNewsList} from "./FireNewsList"; + + +export function FhrxPage() { + return( +
+ {/* 轮播背景图 */} +
+ +
+ +
+ {/* 标题部分 */} +
+

烽火热线

+ {/* 蓝色装饰线 */} +
+
+ {/* 列表 */} +
+ +
+ 信箱 +
+ +
+ 问答 +
+ +
+ 心灵 +
+
+
+
+ ) +} \ No newline at end of file diff --git a/app/components/body/FireNews/fhws.tsx b/app/components/body/FireNews/fhws.tsx new file mode 100644 index 0000000..14f0832 --- /dev/null +++ b/app/components/body/FireNews/fhws.tsx @@ -0,0 +1,38 @@ + +import { CarouselDemo } from "@/components/Carousel"; +import {FireNewsList} from "./FireNewsList"; + + +export function FhwsPage() { + return( +
+
+ {/* 标题部分 */} +
+

烽火微视

+ {/* 蓝色装饰线 */} +
+
+ {/* 列表 */} +
+ +
+ 一 +
+ +
+ 二 +
+ +
+ 三 +
+
+
+ {/* 轮播背景图 */} +
+ +
+
+ ) +} \ No newline at end of file diff --git a/app/components/body/FireNews/fhyw.tsx b/app/components/body/FireNews/fhyw.tsx new file mode 100644 index 0000000..a160ee1 --- /dev/null +++ b/app/components/body/FireNews/fhyw.tsx @@ -0,0 +1,21 @@ + + +import { CarouselDemo } from "@/components/Carousel"; +import {FireNewsList} from "./FireNewsList"; + + +export function FhywPage() { + return( +
+ {/* 轮播背景图 */} +
+ +
+ + {/* 固定的烽火要闻 */} +
+ +
+
+ ) +} \ No newline at end of file diff --git a/app/components/list/List.tsx b/app/components/list/List.tsx index c8c706d..ae0b0ff 100644 --- a/app/components/list/List.tsx +++ b/app/components/list/List.tsx @@ -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 = ({ title = '', time = '', url = '' }) => { return (
@@ -19,22 +16,31 @@ const NewsItem: React.FC = ({ 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" > -

{title}

-

{time}

+ {/* 标题部分：左侧 */} +
+
+

{title}

+
+ + {/* 时间部分：右侧 */} +

{time}

); }; -// 使用新闻数据渲染列表 +// 使用基层新闻数据渲染列表 const List: React.FC = () => { + // 调用 grassNewsData 函数获取基层新闻数据 + const baseNews = grassNewsData(); + return ( -
-
-
+
+
+
    - {mockNewsData.map((news) => ( - + {baseNews.map((news) => ( + ))}
diff --git a/app/components/list/NewsData.tsx b/app/components/list/NewsData.tsx index 6d3f24a..0fb8ae8 100644 --- a/app/components/list/NewsData.tsx +++ b/app/components/list/NewsData.tsx @@ -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(); diff --git a/app/components/list/NewsList.tsx b/app/components/list/NewsList.tsx index 46b97e7..dd9a476 100644 --- a/app/components/list/NewsList.tsx +++ b/app/components/list/NewsList.tsx @@ -11,10 +11,10 @@ const NewsItem: React.FC = ({ title = '', time = '', url = '' }) => { return (
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" > -

{title}

+

{title}

{time}

@@ -28,34 +28,55 @@ const NewsList: React.FC = () => { const educationNews = mockNewsData.filter((news) => news.type === "教育"); return ( -
-
+
+ {/* 使用 Flexbox 将两个列表放在一行 */} +
{/* 科技新闻 */} -
-
-

科技新闻

-
-
    + + {/* 新闻列表 */} +
      {techNews.map((news) => ( - + ))}
{/* 教育新闻 */} -
-
-

教育新闻

-
-
    + + {/* 新闻列表 */} +
      {educationNews.map((news) => ( - + ))}
diff --git a/app/components/news/body/FireNews/FireNewsList.tsx b/app/components/news/body/FireNews/FireNewsList.tsx index 77601c8..5c29c71 100644 --- a/app/components/news/body/FireNews/FireNewsList.tsx +++ b/app/components/news/body/FireNews/FireNewsList.tsx @@ -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 ( -
- {/* 标题栏 */} -
-

烽火要闻

- - 查看更多 {'>'} - -
+
+ {/* 文章列表 */} +
+ {/* 标题栏 */} +
+

烽火要闻

+ +
- {/* 新闻列表 */} -
- {newsItems.map((item, index) => ( -
- - {/* 内容部分 */} -
-

- {item.content} - - [MORE] - -

-
-
- ))} -
-
+ {/* 文章列表 */} +
+ {articles.map((article, index) => ( +
+ {/* 左侧竖线和日期 */} +
+
+
+
{article.date.month}
+
{article.date.day}
+
+
+ {/* 右侧文章内容 */} +
+

+ {article.title} + + 【MORE】 + +

+
+
+ ))} +
+
+
); }; diff --git a/app/components/news/body/FireNews/fhjt.tsx b/app/components/news/body/FireNews/fhjt.tsx index 241360e..943221a 100644 --- a/app/components/news/body/FireNews/fhjt.tsx +++ b/app/components/news/body/FireNews/fhjt.tsx @@ -4,13 +4,15 @@ import {FireNewsList} from "./FireNewsList"; export function FhjtPage() { return( -
- {/* 轮播背景图 */} -
- -
- -
+
+
+ {/* 轮播背景图 */} +
+ +
+
+
+
{/* 标题部分 */}

烽火讲堂

diff --git a/app/components/news/body/FireNews/fhrx.tsx b/app/components/news/body/FireNews/fhrx.tsx index b9dce29..6192610 100644 --- a/app/components/news/body/FireNews/fhrx.tsx +++ b/app/components/news/body/FireNews/fhrx.tsx @@ -4,13 +4,16 @@ import {FireNewsList} from "./FireNewsList"; export function FhrxPage() { return( -
- {/* 轮播背景图 */} -
- -
+
+
+ {/* 轮播背景图 */} +
+ +
+
+
-
+
{/* 标题部分 */}

烽火热线

diff --git a/app/components/news/body/FireNews/fhws.tsx b/app/components/news/body/FireNews/fhws.tsx index 506ca77..7c04f18 100644 --- a/app/components/news/body/FireNews/fhws.tsx +++ b/app/components/news/body/FireNews/fhws.tsx @@ -4,16 +4,16 @@ import {FireNewsList} from "./FireNewsList"; export function FhwsPage() { return( -
-
+
+
{/* 标题部分 */} -
+

烽火微视

{/* 蓝色装饰线 */}
{/* 列表 */} -
+
一 @@ -28,10 +28,13 @@ export function FhwsPage() {
- {/* 轮播背景图 */} -
- -
+
+ {/* 轮播背景图 */} +
+ +
+
+
) } \ No newline at end of file diff --git a/app/components/news/body/GrassrootsDynamics.tsx b/app/components/news/body/GrassrootsDynamics.tsx index d8ceb34..3c69570 100644 --- a/app/components/news/body/GrassrootsDynamics.tsx +++ b/app/components/news/body/GrassrootsDynamics.tsx @@ -3,7 +3,7 @@ import List from '@/components/list/List'; export default function GrassrootsDynamics() { return ( -
+
{/* 右边列表 */} -
+
diff --git a/app/components/news/body/ImageGridSection.tsx b/app/components/news/body/ImageGridSection.tsx index c71f167..8b92687 100644 --- a/app/components/news/body/ImageGridSection.tsx +++ b/app/components/news/body/ImageGridSection.tsx @@ -1,109 +1,102 @@ -import { CarouselDemo } from "@/components/Carousel"; -const ImageGridSection = () => { - - const elements = [ - "/images/carousel-1.jpg", - , - "/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 ( -
- - {/* 左侧：3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满 - 保持比例填充 消除底部空白*/} -
+
+ {/* 顶部 Logo */} +
+

学习进行时

+
- {elements.map((element, index) => ( -
- {typeof element === 'string' ? ( + {/* 主内容区：固定高度，紧凑布局 */} +
+ {/* 左侧图片区 */} +
+
+ {/* 上左：第一张图 */} +
{`图片 - ) : ( - element // 占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布 - // 背景色、圆角、阴影、内边距 防撑大 - )} +
+ + {/* 上右：轮播图 */} +
+ +
+ + {/* 下三图 */} + {[3, 4, 5].map((i) => ( +
+ {`Image +
+ ))}
- ))} -
-
-
    - {listItems.map((item, index) => ( -
  • - • - {item} -
    • - ))} -
-
+
+ + + {/* 右侧新闻列表 */} +
+
    + {newsList.map((item, index) => ( +
  • + • + {item} +
    • + ))} +
+
+
+
+
+
+ {/* 左边容器内容 */} +
+

+ 习近平新时代中国特色社会 +
+ 主义思想专题数据库 +

+
+
+
+
+ {/* 右边容器内容 */} +
+

习近平著作选读

+
+
+
); }; -export default ImageGridSection; \ No newline at end of file + +export default LearnPage; \ No newline at end of file diff --git a/app/components/news/header/Header.tsx b/app/components/news/header/Header.tsx index 96d3624..c0af4ae 100644 --- a/app/components/news/header/Header.tsx +++ b/app/components/news/header/Header.tsx @@ -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 (
{/* 时间显示 只显示日期: "2025/3/15"*/}
diff --git a/app/components/news/header/TopNav.tsx b/app/components/news/header/TopNav.tsx index d9247a3..d52002f 100644 --- a/app/components/news/header/TopNav.tsx +++ b/app/components/news/header/TopNav.tsx @@ -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 ( diff --git a/app/routes/news.tsx b/app/routes/news.tsx index dd4aa14..6daf3fb 100755 --- a/app/routes/news.tsx +++ b/app/routes/news.tsx @@ -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() { - - - - - - - +
+ + + + + + + +
); } diff --git a/public/images/book1.png b/public/images/book1.png new file mode 100644 index 0000000..c74ffd8 Binary files /dev/null and b/public/images/book1.png differ diff --git a/public/images/book2.png b/public/images/book2.png new file mode 100644 index 0000000..4e6ea37 Binary files /dev/null and b/public/images/book2.png differ diff --git a/app/images/header.png b/public/images/header.png similarity index 100% rename from app/images/header.png rename to public/images/header.png diff --git a/public/images/jcdt.png b/public/images/jcdt.png new file mode 100644 index 0000000..529c734 Binary files /dev/null and b/public/images/jcdt.png differ