diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx
index bc6b333..02dff13 100755
--- a/app/components/Carousel.tsx
+++ b/app/components/Carousel.tsx
@@ -1,4 +1,3 @@
-// src/components/CarouselDemo.tsx
import * as React from "react";
import Autoplay from "embla-carousel-autoplay";
@@ -69,15 +68,6 @@ export function CarouselDemo() {
- {/* 要闻列表 - 右上角 */}
-
-
-
-
-
-
-
-
{/* 分页指示器 - 右下角 */}
{Array.from({ length: count }).map((_, index) => (
diff --git a/app/components/body/GrassrootsDynamics.tsx b/app/components/body/GrassrootsDynamics.tsx
new file mode 100644
index 0000000..3c64040
--- /dev/null
+++ b/app/components/body/GrassrootsDynamics.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+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
new file mode 100644
index 0000000..0034864
--- /dev/null
+++ b/app/components/list/List.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { mockNewsData } from './NewsData'; // 导入新闻数据
+
+
+
+interface NewsProps {
+ title?: string;
+ description?: string;
+ time?: string;
+ type?: string;
+ url?: string;
+}
+
+
+const NewsItem: React.FC
= ({ title = '', time = '', url = '' }) => {
+ return (
+
+
url && window.open(url)}
+ className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
+ >
+
{title}
+
{time}
+
+
+ );
+};
+
+// 使用新闻数据渲染列表
+const List: React.FC = () => {
+ return (
+
+
+
+
+ {mockNewsData.map((news) => (
+
+ ))}
+
+
+
+
+ );
+};
+
+export default List;
\ No newline at end of file
diff --git a/app/components/list/NewsData.tsx b/app/components/list/NewsData.tsx
index 4d22885..d1d6c17 100644
--- a/app/components/list/NewsData.tsx
+++ b/app/components/list/NewsData.tsx
@@ -6,6 +6,10 @@ export interface News {
url?: string;
}
+export interface NewsTitle {
+ id: string;
+ name: string;
+}
// 导出生成的模拟新闻数据
export const NewsData = (): News[] => {
return [
@@ -25,5 +29,18 @@ export const NewsData = (): News[] => {
];
};
+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();
\ No newline at end of file
+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 bdc5959..34160e7 100644
--- a/app/components/list/NewsList.tsx
+++ b/app/components/list/NewsList.tsx
@@ -1,5 +1,7 @@
import React from 'react';
import { mockNewsData } from './NewsData'; // 导入新闻数据
+import { mockNewsTitleData } from './NewsData'; // 导入新闻标题数据
+
interface NewsProps {
title?: string;
@@ -9,6 +11,10 @@ interface NewsProps {
url?: string;
}
+interface NewsTitle {
+ id: string;
+ name: string;
+}
const NewsItem: React.FC = ({ title = '', time = '', url = '' }) => {
return (
@@ -37,8 +43,8 @@ const NewsList: React.FC = () => {
- {mockNewsData.map((news, index) => (
-
+ {mockNewsData.map((news) => (
+
))}
diff --git a/app/components/news/body/Culturebg.tsx b/app/components/news/body/Culturebg.tsx
index cd5f0c4..25a08c5 100644
--- a/app/components/news/body/Culturebg.tsx
+++ b/app/components/news/body/Culturebg.tsx
@@ -22,7 +22,7 @@ export default function CultureBgPage() {
];
return (
-
+
export default function Integrated() {
return (
-
+
diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index f24288c..bcddb69 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -5,8 +5,12 @@ 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" },
@@ -22,9 +26,12 @@ export default function Home() {
+<<<<<<< HEAD
{/*
*/}
+=======
+>>>>>>> 858176d3dcd4442d093f13eeca279711b756adb8
);
}