1

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() {
         <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-10" />
       </Carousel>
 
-      {/* 要闻列表 - 右上角 */}
-      <div className="absolute top-0 right-0 w-1/3 h-full">
-        <Card className="h-full">
-          <CardContent className="h-full p-0">
-            <FireNewsList />
-          </CardContent>
-        </Card>
-      </div>
-
       {/* 分页指示器 - 右下角 */}
       <div className="absolute bottom-4 right-4 flex gap-2 z-10">
         {Array.from({ length: count }).map((_, index) => (

app/components/body/GrassrootsDynamics.tsx

@@ -0,0 +1,20 @@
+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

@@ -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<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,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();
+export const mockNewsData = NewsData();
+export const mockNewsTitleData = NewsTitleData();

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<NewsProps> = ({ title = '', time = '', url = '' }) => {
   return (
     <div className="mb-4">
@@ -37,8 +43,8 @@ const NewsList: React.FC = () => {
             </button>
           </div>
           <ul className="space-y-4">
-            {mockNewsData.map((news, index) => (
+            {mockNewsData.map((news) => (
-              <NewsItem key={index} title={news.title} time={news.time} url={news.url} />
+              <NewsItem  title={news.title} time={news.time} url={news.url} />
             ))}
           </ul>
         </div>

app/components/news/body/Culturebg.tsx

@@ -22,7 +22,7 @@ export default function CultureBgPage() {
   ];
 
   return (
-    <div className="h-[700px] w-[1550px] mx-auto relative mb-40">
+    <div className="h-[700px] w-[1550px] mx-auto relative ">
       <div
         className="h-[200px] w-full bg-cover"
         style={{

app/components/news/body/Integrated.tsx

@@ -41,7 +41,7 @@ const columns = Array.from({ length: 3 }, (_, colIndex) =>
 
 export default function Integrated() {
   return (
-    <div className="w-[1514px] h-[573px] mx-auto absolute bottom-0 left-1/2 -translate-x-1/2">
+    <div className="w-[1514px] h-[573px] mx-auto ">
       <div className="w-full h-[488px]">
         <div className="w-full h-[82px] flex items-center pt-30 ml-10">
           <div className="w-3 h-15 bg-[#005d93] mr-3" />

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() {
       <TopNav />
       <CarouselDemo />
       <NewsList />
+<<<<<<< HEAD
       <ImageGridSection />
       {/* <Integrated /> */}
       <CultureBgPage />
+=======
+>>>>>>> 858176d3dcd4442d093f13eeca279711b756adb8
     </div>
   );
 }