diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index c594c92..8e01115 100755 --- a/app/components/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -11,7 +11,7 @@ import { CarouselPrevious, type CarouselApi, } from "@/ui/carousel"; -import FireNewsList from "./FireNewsList"; + export function CarouselDemo() { const [api, setApi] = React.useState(); @@ -68,7 +68,6 @@ export function CarouselDemo() { - {/* 分页指示器 - 右下角 */}
{Array.from({ length: count }).map((_, index) => ( diff --git a/app/components/FireNewsList.tsx b/app/components/FireNews/FireNewsList.tsx similarity index 88% rename from app/components/FireNewsList.tsx rename to app/components/FireNews/FireNewsList.tsx index a4712ca..77601c8 100644 --- a/app/components/FireNewsList.tsx +++ b/app/components/FireNews/FireNewsList.tsx @@ -4,7 +4,7 @@ interface NewsItem { content: string; } -const FireNewsList: React.FC = () => { +export function FireNewsList() { const newsItems: NewsItem[] = [ { content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...", @@ -21,11 +21,13 @@ const FireNewsList: React.FC = () => { { content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...", }, - + { + content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...", + }, ]; return ( -
+
{/* 标题栏 */}

烽火要闻

@@ -59,5 +61,3 @@ const FireNewsList: React.FC = () => {
); }; - -export default FireNewsList; \ No newline at end of file diff --git a/app/components/FireNews/fhjt.tsx b/app/components/FireNews/fhjt.tsx new file mode 100644 index 0000000..c728b79 --- /dev/null +++ b/app/components/FireNews/fhjt.tsx @@ -0,0 +1,38 @@ +import { CarouselDemo } from "../Carousel"; +import {FireNewsList} from "./FireNewsList"; + + +export function FhjtPage() { + return( +
+ {/* 轮播背景图 */} +
+ +
+ +
+ {/* 标题部分 */} +
+

烽火讲堂

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

烽火热线

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

烽火微视

+ {/* 蓝色装饰线 */} +
+
+ {/* 列表 */} +
+ +
+ 一 +
+ +
+ 二 +
+ +
+ 三 +
+
+
+ {/* 轮播背景图 */} +
+ +
+
+ ) +} \ No newline at end of file diff --git a/app/components/FireNews/fhyw.tsx b/app/components/FireNews/fhyw.tsx new file mode 100644 index 0000000..1bf6b02 --- /dev/null +++ b/app/components/FireNews/fhyw.tsx @@ -0,0 +1,19 @@ +import { CarouselDemo } from "../Carousel"; +import {FireNewsList} from "./FireNewsList"; + + +export function FhywPage() { + return( +
+ {/* 轮播背景图 */} +
+ +
+ + {/* 固定的烽火要闻 */} +
+ +
+
+ ) +} \ No newline at end of file diff --git a/app/components/body/GrassrootsDynamics.tsx b/app/components/body/GrassrootsDynamics.tsx index 3c64040..6ce395a 100644 --- a/app/components/body/GrassrootsDynamics.tsx +++ b/app/components/body/GrassrootsDynamics.tsx @@ -3,18 +3,21 @@ import List from '../list/List'; export default function GrassrootsDynamics() { return ( -
- {/* 左边图片 */} -
- 基层动态 -
- {/* 右边列表 */} -
- -
-
+
+
+
+ 基层动态 +
+
+ + {/* 右边列表 */} +
+ +
+
); } \ No newline at end of file diff --git a/app/components/list/List.tsx b/app/components/list/List.tsx index 0034864..c8c706d 100644 --- a/app/components/list/List.tsx +++ b/app/components/list/List.tsx @@ -29,9 +29,9 @@ const NewsItem: React.FC = ({ title = '', time = '', url = '' }) => { // 使用新闻数据渲染列表 const List: React.FC = () => { return ( -
-
-
+
+
+
    {mockNewsData.map((news) => ( diff --git a/app/components/list/NewsData.tsx b/app/components/list/NewsData.tsx index d1d6c17..8f2f92a 100644 --- a/app/components/list/NewsData.tsx +++ b/app/components/list/NewsData.tsx @@ -6,10 +6,7 @@ export interface News { url?: string; } -export interface NewsTitle { - id: string; - name: string; -} + // 导出生成的模拟新闻数据 export const NewsData = (): News[] => { return [ @@ -21,26 +18,20 @@ export const NewsData = (): News[] => { { id: "news-6", type: "科技", title: "数字货币监管政策逐步完善", time: "2023-11-06", url: "https://www.baidu.com" }, { id: "news-7", type: "科技", title: "5G网络覆盖范围进一步扩大", 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-9", type: "科技", title: "电影《星际穿越》重映引发热潮", time: "2023-11-09", url: "https://www.baidu.com" } - - - - + { id: "news-9", type: "科技", title: "电影《星际穿越》重映引发热潮", time: "2023-11-09", 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" }, + { id: "edu-3", type: "教育", title: "多地推进中小学编程教育普及", time: "2025-03-20", url: "https://www.example.com/edu-3" }, + { 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-22", 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-15", url: "https://www.example.com/edu-9" } ]; }; -export const NewsTitleData = (): NewsTitle[] => { - return [ - { id: "news-1", name: "科技" }, - { id: "news-2", name: "财经" }, - { id: "news-3", name: "娱乐" }, - { id: "news-4", name: "体育" }, - { id: "news-5", name: "教育" }, - { id: "news-6", name: "军事" }, - ] -} // 默认导出模拟新闻数据 export const mockNewsData = NewsData(); -export const mockNewsTitleData = NewsTitleData(); \ No newline at end of file diff --git a/app/components/list/NewsList.tsx b/app/components/list/NewsList.tsx index 34160e7..46b97e7 100644 --- a/app/components/list/NewsList.tsx +++ b/app/components/list/NewsList.tsx @@ -1,20 +1,12 @@ import React from 'react'; import { mockNewsData } from './NewsData'; // 导入新闻数据 -import { mockNewsTitleData } from './NewsData'; // 导入新闻标题数据 - interface NewsProps { title?: string; - description?: string; time?: string; - type?: string; url?: string; } -interface NewsTitle { - id: string; - name: string; -} const NewsItem: React.FC = ({ title = '', time = '', url = '' }) => { return (
    @@ -31,8 +23,12 @@ const NewsItem: React.FC = ({ title = '', time = '', url = '' }) => { // 使用新闻数据渲染列表 const NewsList: React.FC = () => { + // 按类型过滤新闻 + const techNews = mockNewsData.filter((news) => news.type === "科技"); + const educationNews = mockNewsData.filter((news) => news.type === "教育"); + return ( -
    +
    {/* 科技新闻 */}
    @@ -43,23 +39,23 @@ const NewsList: React.FC = () => {
      - {mockNewsData.map((news) => ( - + {techNews.map((news) => ( + ))}
    - {/* 社会新闻 */} + {/* 教育新闻 */}
    -

    社会新闻

    +

    教育新闻

      - {mockNewsData.map((news, index) => ( - + {educationNews.map((news) => ( + ))}
    diff --git a/app/routes/news.tsx b/app/routes/news.tsx index 4a3a154..3b38b40 100755 --- a/app/routes/news.tsx +++ b/app/routes/news.tsx @@ -6,9 +6,11 @@ import {Header} from "@/components/news/header/Header"; import {TopNav} from "@/components/news/header/TopNav"; import NewsList from "@/components/list/NewsList"; import ImageGridSection from "@/components/body/ImageGridSection"; -import { CarouselDemo } from "@/components/Carousel"; import GrassrootsDynamics from "@/components/body/GrassrootsDynamics"; -import { AutoCarouselDemo } from "@/components/AutoCarousel"; +import { FhywPage } from "@/components/FireNews/fhyw"; +import { FhjtPage } from "@/components/FireNews/fhjt"; +import { FhwsPage } from "@/components/FireNews/fhws"; +import { FhrxPage } from "@/components/FireNews/fhrx"; export function meta( ) { return [ { title: "New React Router App" }, @@ -22,10 +24,13 @@ export default function Home() {
    - + - + + + +