From 1201c37eaf7e3bcc79b5f5027c934bd5241f3eb1 Mon Sep 17 00:00:00 2001
From: jinsir <874871581@qq.com>
Date: Tue, 18 Nov 2025 17:36:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/body/GrassrootsDynamics.tsx | 20 ++++++++++
 app/components/list/List.tsx               | 46 ++++++++++++++++++++++
 app/components/list/NewsData.tsx           | 19 ++++++++-
 app/components/list/NewsList.tsx           | 10 ++++-
 app/routes/news.tsx                        |  4 ++
 5 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 app/components/body/GrassrootsDynamics.tsx
 create mode 100644 app/components/list/List.tsx

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 (
+ <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>
+  );
+}
\ 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<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;
\ 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<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) => (
-              <NewsItem key={index} title={news.title} time={news.time} url={news.url} />
+            {mockNewsData.map((news) => (
+              <NewsItem  title={news.title} time={news.time} url={news.url} />
             ))}
           </ul>
         </div>
diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index eaba461..ce5816f 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -3,6 +3,7 @@ import type { Route } from "./+types/news";
 import {Header} from "@/components/header/Header";
 import {TopNav} from "@/components/header/TopNav";
 import NewsList from "@/components/list/NewsList";
+import GrassrootsDynamics from "@/components/body/GrassrootsDynamics";
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -13,8 +14,11 @@ export function meta( ) {
 export default function Home() {
   return (
     <div>
+      <Header />
+      <TopNav />
       <CarouselDemo />
       <NewsList />
+      <GrassrootsDynamics />
     </div>
   );
 }

From 9b6da3fd289d90a35dd490ddd2484ea69b2f53a5 Mon Sep 17 00:00:00 2001
From: Li1304553726 <1304553726@qq.com>
Date: Tue, 18 Nov 2025 17:40:37 +0800
Subject: [PATCH 2/2] 1

---
 app/components/Carousel.tsx      | 34 +++++++++++++-------------------
 app/components/header/Header.tsx |  2 +-
 app/routes/news.tsx              |  7 ++++---
 3 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx
index cd314d8..bc6b333 100755
--- a/app/components/Carousel.tsx
+++ b/app/components/Carousel.tsx
@@ -12,21 +12,13 @@ import {
   type CarouselApi,
 } from "@/ui/carousel";
 import FireNewsList from "./FireNewsList";
-  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 CarouselDemo() {
   const [api, setApi] = React.useState<CarouselApi>();
   const [current, setCurrent] = React.useState(0);
   const [count, setCount] = React.useState(0);
 
-  const totalSlides = imageUrls.length; 
+  const totalSlides = 6; 
 
   React.useEffect(() => {
     if (!api) return;
@@ -40,7 +32,7 @@ export function CarouselDemo() {
   }, [api]);
 
   return (
-    <div className="relative w-full max-w-xs">
+    <div className="relative w-full max-w-4xl mx-auto">
       <Carousel
         opts={{
           loop: true,
@@ -52,19 +44,21 @@ export function CarouselDemo() {
           }),
         ]}
         setApi={setApi}
-        className="w-full"
       >
-        <CarouselContent>
-          {imageUrls.map((src, index) => (
-            <CarouselItem key={index}>
+        <CarouselContent className="h-full w-full">
+          {Array.from({ length: totalSlides }).map((_, index) => (
+            <CarouselItem key={index} className="w-full h-full">
               <div className="p-1">
                 <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                     <img
-                      src={src}
-                      alt={`Slide ${index + 1}`}
-                      className="w-full h-full object-cover"
-                    />
+                  <CardContent className="flex aspect-square items-center justify-center ">
+                    <div 
+                    className="w-full h-full"
+                    style={{
+                      backgroundImage: "url('/app/images/header.png')",
+                      backgroundSize: '100% 100%',
+                    }}
+                    >
+                    </div>
                   </CardContent>
                 </Card>
               </div>
diff --git a/app/components/header/Header.tsx b/app/components/header/Header.tsx
index 1714f94..96d3624 100644
--- a/app/components/header/Header.tsx
+++ b/app/components/header/Header.tsx
@@ -15,7 +15,7 @@ export function Header(){
 
     return (
         <div 
-            className="relative w-[1280px] h-[704px] bg-cover bg-center left-1/2 transform -translate-x-1/2"
+            className="relative w-full h-180 bg-cover bg-center left-1/2 transform -translate-x-1/2"
             style={{ backgroundImage: "url('/app/images/header.png')" }} 
         >
             {/* 时间显示  只显示日期: "2025/3/15"*/}
diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index 7a8f095..f24288c 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -1,4 +1,4 @@
-import { CarouselDemo } from "@/components/Carousel";
+
 import type { Route } from "./+types/news";
 import Integrated from "@/components/news/body/Integrated";
 import CultureBgPage from "@/components/news/body/Culturebg";
@@ -6,6 +6,7 @@ import {Header} from "@/components/header/Header";
 import {TopNav} from "@/components/header/TopNav";
 import NewsList from "@/components/list/NewsList";
 import ImageGridSection from "@/components/body/ImageGridSection";
+import { CarouselDemo } from "@/components/Carousel";
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -19,10 +20,10 @@ export default function Home() {
     <div>
       <Header />
       <TopNav />
-      
+      <CarouselDemo />
       <NewsList />
       <ImageGridSection />
-      <Integrated />
+      {/* <Integrated /> */}
       <CultureBgPage />
     </div>
   );