From baaf5959eb788d4a0158970ca655b8624c52825a Mon Sep 17 00:00:00 2001 From: Li1304553726 <1304553726@qq.com> Date: Tue, 18 Nov 2025 17:42:33 +0800 Subject: [PATCH 1/8] 1 --- app/components/Carousel.tsx | 10 ++++++++++ app/routes/news.tsx | 11 ----------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index 02dff13..bc6b333 100755 --- a/app/components/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -1,3 +1,4 @@ +// src/components/CarouselDemo.tsx import * as React from "react"; import Autoplay from "embla-carousel-autoplay"; @@ -68,6 +69,15 @@ export function CarouselDemo() { + {/* 要闻列表 - 右上角 */} +
+ + + + + +
+ {/* 分页指示器 - 右下角 */}
{Array.from({ length: count }).map((_, index) => ( diff --git a/app/routes/news.tsx b/app/routes/news.tsx index bcddb69..1e35ecd 100755 --- a/app/routes/news.tsx +++ b/app/routes/news.tsx @@ -5,12 +5,7 @@ import CultureBgPage from "@/components/news/body/Culturebg"; import {Header} from "@/components/header/Header"; import {TopNav} from "@/components/header/TopNav"; import NewsList from "@/components/list/NewsList"; -<<<<<<< HEAD -import ImageGridSection from "@/components/body/ImageGridSection"; -import { CarouselDemo } from "@/components/Carousel"; -======= import GrassrootsDynamics from "@/components/body/GrassrootsDynamics"; ->>>>>>> 858176d3dcd4442d093f13eeca279711b756adb8 export function meta( ) { return [ { title: "New React Router App" }, @@ -26,12 +21,6 @@ export default function Home() { -<<<<<<< HEAD - - {/* */} - -======= ->>>>>>> 858176d3dcd4442d093f13eeca279711b756adb8
); } From 7d272b7ec27c6b0b10fb3227e2227488b1d59991 Mon Sep 17 00:00:00 2001 From: Li1304553726 <1304553726@qq.com> Date: Tue, 18 Nov 2025 17:47:00 +0800 Subject: [PATCH 2/8] 1 --- app/components/Carousel.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index bc6b333..0baf57b 100755 --- a/app/components/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -69,14 +69,6 @@ export function CarouselDemo() { - {/* 要闻列表 - 右上角 */} -
- - - - - -
{/* 分页指示器 - 右下角 */}
From 827b356b4878a35d5aedc9b6237284353d222b9d Mon Sep 17 00:00:00 2001 From: qiuchenfan <2035024011@qq.com> Date: Tue, 18 Nov 2025 19:45:46 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E5=A4=A7=E8=BD=AE=E6=92=AD=E6=98=BE?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/AutoCarousel.tsx | 78 +++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 app/components/AutoCarousel.tsx diff --git a/app/components/AutoCarousel.tsx b/app/components/AutoCarousel.tsx new file mode 100644 index 0000000..8403c76 --- /dev/null +++ b/app/components/AutoCarousel.tsx @@ -0,0 +1,78 @@ +// 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 ( +
+ {/* 左右渐隐遮罩 */} +
+
+ + + + {imageUrls.map((src, index) => ( + + {/* 悬停放大容器 */} +
+ + + {`Slide + + +
+ + ))} + + + {/* 左右箭头控制 */} + + + +
+ ); +} \ No newline at end of file From 31ac0d8cf53818b17fa470727d66438f7ae8dfa5 Mon Sep 17 00:00:00 2001 From: Li1304553726 <1304553726@qq.com> Date: Tue, 18 Nov 2025 19:47:03 +0800 Subject: [PATCH 4/8] 1 --- app/components/Carousel.tsx | 3 +-- .../{ => FireNews}/FireNewsList.tsx | 10 +++++----- app/components/FireNews/fhjt.tsx | 19 +++++++++++++++++++ app/components/FireNews/fhrx.tsx | 19 +++++++++++++++++++ app/components/FireNews/fhws.tsx | 19 +++++++++++++++++++ app/components/FireNews/fhyw.tsx | 19 +++++++++++++++++++ app/routes/news.tsx | 10 ++++++++-- 7 files changed, 90 insertions(+), 9 deletions(-) rename app/components/{ => FireNews}/FireNewsList.tsx (88%) create mode 100644 app/components/FireNews/fhjt.tsx create mode 100644 app/components/FireNews/fhrx.tsx create mode 100644 app/components/FireNews/fhws.tsx create mode 100644 app/components/FireNews/fhyw.tsx diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index 0baf57b..2c0c642 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(); @@ -69,7 +69,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..7519c62 --- /dev/null +++ b/app/components/FireNews/fhjt.tsx @@ -0,0 +1,19 @@ +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..c859bac --- /dev/null +++ b/app/components/FireNews/fhrx.tsx @@ -0,0 +1,19 @@ +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..5523c6c --- /dev/null +++ b/app/components/FireNews/fhws.tsx @@ -0,0 +1,19 @@ +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/routes/news.tsx b/app/routes/news.tsx index c7e1696..0a0b524 100755 --- a/app/routes/news.tsx +++ b/app/routes/news.tsx @@ -6,8 +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 { 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" }, @@ -21,9 +24,12 @@ export default function Home() {
- + + + +
From 1b9f1884b863cf7f2a11dd6bfa674abef94dfe26 Mon Sep 17 00:00:00 2001 From: jinsir <874871581@qq.com> Date: Tue, 18 Nov 2025 21:01:42 +0800 Subject: [PATCH 5/8] =?UTF-8?q?list=20=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/body/GrassrootsDynamics.tsx | 35 ++++++++++++++-------- app/components/list/List.tsx | 6 ++-- 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/app/components/body/GrassrootsDynamics.tsx b/app/components/body/GrassrootsDynamics.tsx index 3c64040..3a67208 100644 --- a/app/components/body/GrassrootsDynamics.tsx +++ b/app/components/body/GrassrootsDynamics.tsx @@ -3,18 +3,27 @@ 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) => ( From b5e0ebeb3aab946b0b7367023df87d0d7c2e4453 Mon Sep 17 00:00:00 2001 From: jinsir <874871581@qq.com> Date: Tue, 18 Nov 2025 21:11:12 +0800 Subject: [PATCH 6/8] grassroots dynamics --- app/components/body/GrassrootsDynamics.tsx | 10 ++-------- app/components/list/NewsList.tsx | 2 +- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/app/components/body/GrassrootsDynamics.tsx b/app/components/body/GrassrootsDynamics.tsx index 3a67208..f98351b 100644 --- a/app/components/body/GrassrootsDynamics.tsx +++ b/app/components/body/GrassrootsDynamics.tsx @@ -3,14 +3,8 @@ import List from '../list/List'; export default function GrassrootsDynamics() { return ( -
    - {/* 左边图片 */} +
    - {/* 装饰图形 */} -
    -
    - - {/* 图片 */}
    {/* 右边列表 */} -
    +
    diff --git a/app/components/list/NewsList.tsx b/app/components/list/NewsList.tsx index 34160e7..01766a0 100644 --- a/app/components/list/NewsList.tsx +++ b/app/components/list/NewsList.tsx @@ -32,7 +32,7 @@ const NewsItem: React.FC = ({ title = '', time = '', url = '' }) => { // 使用新闻数据渲染列表 const NewsList: React.FC = () => { return ( -
    +
    {/* 科技新闻 */}
    From 2bf9b6cae6b874feff56281361ef0c874cc31962 Mon Sep 17 00:00:00 2001 From: Li1304553726 <1304553726@qq.com> Date: Tue, 18 Nov 2025 21:20:42 +0800 Subject: [PATCH 7/8] 1 --- app/components/FireNews/fhjt.tsx | 31 +++++++++++++++++++++++++------ app/components/FireNews/fhrx.tsx | 31 +++++++++++++++++++++++++------ app/components/FireNews/fhws.tsx | 32 +++++++++++++++++++++++++------- 3 files changed, 75 insertions(+), 19 deletions(-) diff --git a/app/components/FireNews/fhjt.tsx b/app/components/FireNews/fhjt.tsx index 7519c62..c728b79 100644 --- a/app/components/FireNews/fhjt.tsx +++ b/app/components/FireNews/fhjt.tsx @@ -4,16 +4,35 @@ 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 index c859bac..bc0b108 100644 --- a/app/components/FireNews/fhrx.tsx +++ b/app/components/FireNews/fhrx.tsx @@ -4,16 +4,35 @@ 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 index 5523c6c..4d2d440 100644 --- a/app/components/FireNews/fhws.tsx +++ b/app/components/FireNews/fhws.tsx @@ -4,16 +4,34 @@ import {FireNewsList} from "./FireNewsList"; export function FhwsPage() { return( -
    +
    +
    + {/* 标题部分 */} +
    +

    烽火微视

    + {/* 蓝色装饰线 */} +
    +
    + {/* 列表 */} +
    + +
    + 一 +
    + +
    + 二 +
    + +
    + 三 +
    +
    +
    {/* 轮播背景图 */} -
    +
    - - {/* 固定的烽火要闻 */} -
    - -
    ) } \ No newline at end of file From 5dbde23e312f77d7c3243b6ca833f80a91b43ca5 Mon Sep 17 00:00:00 2001 From: jinsir <874871581@qq.com> Date: Wed, 19 Nov 2025 08:10:19 +0800 Subject: [PATCH 8/8] =?UTF-8?q?list=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/body/GrassrootsDynamics.tsx | 10 +++---- app/components/list/NewsData.tsx | 31 ++++++++-------------- app/components/list/NewsList.tsx | 26 ++++++++---------- 3 files changed, 27 insertions(+), 40 deletions(-) diff --git a/app/components/body/GrassrootsDynamics.tsx b/app/components/body/GrassrootsDynamics.tsx index f98351b..6ce395a 100644 --- a/app/components/body/GrassrootsDynamics.tsx +++ b/app/components/body/GrassrootsDynamics.tsx @@ -3,19 +3,19 @@ import List from '../list/List'; export default function GrassrootsDynamics() { return ( -
    -
    -
    +
    +
    +
    基层动态
    {/* 右边列表 */} -
    +
    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 01766a0..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,6 +23,10 @@ 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) => ( + ))}