app/components/body/GrassrootsDynamics.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import List from '../list/List';
-
-export default function GrassrootsDynamics() {
-  return (
- <div className="grid grid-cols-2 gap-6 bg-gray-50 p-6 rounded-2xl shadow-xl">
-  {/* 左边图片 */}
-  <div className="w-full h-auto rounded-lg shadow-md">
-    <img
-      src="/images/carousel-1.jpg"
-      alt="基层动态"
-    />
-  </div>
-  {/* 右边列表 */}
-  <div>
-    <List />
-  </div>
-</div>
-  );
-}

app/components/list/List.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { mockNewsData } from './NewsData'; // 导入新闻数据
-
-
-
-interface NewsProps {
-  title?: string;
-  description?: string;
-  time?: string;
-  type?: string;
-  url?: string;
-}
-
-
-const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
-  return (
-    <div className="mb-4">
-      <div
-        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>
-    </div>
-  );
-};
-
-// 使用新闻数据渲染列表
-const List: React.FC = () => {
-  return (
-    <div className=" ">
-      <div className="grid grid-cols-1 md:grid-cols-2 ">
-        <div className=" p-6 rounded-lg ">
-          <ul className="space-y-4">
-            {mockNewsData.map((news) => (
-              <NewsItem  title={news.title} time={news.time} url={news.url} />
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default List;

app/components/list/NewsData.tsx

@@ -6,10 +6,6 @@ export interface News {
   url?: string;
 }  
 
-export interface NewsTitle {
-   id: string;
-   name: string;
-}
 // 导出生成的模拟新闻数据
 export const NewsData = (): News[] => {
   return [
@@ -29,18 +25,5 @@ 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();
+export const mockNewsData = NewsData();
-export const mockNewsTitleData = NewsTitleData();

app/components/list/NewsList.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { mockNewsData } from './NewsData'; // 导入新闻数据
-import { mockNewsTitleData } from './NewsData'; // 导入新闻标题数据
-
 
 interface NewsProps {
   title?: string;
@@ -11,10 +9,6 @@ interface NewsProps {
   url?: string;
 }
 
-interface NewsTitle {
-  id: string;
-  name: string;
-}
 const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
   return (
     <div className="mb-4">
@@ -43,8 +37,8 @@ const NewsList: React.FC = () => {
             </button>
           </div>
           <ul className="space-y-4">
-            {mockNewsData.map((news) => (
+            {mockNewsData.map((news, index) => (
-              <NewsItem  title={news.title} time={news.time} url={news.url} />
+              <NewsItem key={index} title={news.title} time={news.time} url={news.url} />
             ))}
           </ul>
         </div>

app/routes/news.tsx

@@ -5,7 +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";
-import GrassrootsDynamics from "@/components/body/GrassrootsDynamics";
+import ImageGridSection from "@/components/body/ImageGridSection";
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -19,8 +19,11 @@ export default function Home() {
     <div>
       <Header />
       <TopNav />
-      <CarouselDemo />
       <NewsList />
+      <ImageGridSection />
+      <CultureBgPage />
+      <Integrated />
+      
     </div>
   );
 }