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 1/7] 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>
   );

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

From aa72ef0c709ea6f7196403a58a42f6de090beb3e Mon Sep 17 00:00:00 2001
From: qiuchenfan <2035024011@qq.com>
Date: Tue, 18 Nov 2025 17:44:27 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=E5=B0=86header=E7=BB=84=E4=BB=B6=E7=A7=BB?=
 =?UTF-8?q?=E5=88=B0news/header=E4=B8=8B=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/{ => news}/header/Header.tsx | 0
 app/components/{ => news}/header/TopNav.tsx | 0
 app/routes/news.tsx                         | 4 ++--
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename app/components/{ => news}/header/Header.tsx (100%)
 rename app/components/{ => news}/header/TopNav.tsx (100%)

diff --git a/app/components/header/Header.tsx b/app/components/news/header/Header.tsx
similarity index 100%
rename from app/components/header/Header.tsx
rename to app/components/news/header/Header.tsx
diff --git a/app/components/header/TopNav.tsx b/app/components/news/header/TopNav.tsx
similarity index 100%
rename from app/components/header/TopNav.tsx
rename to app/components/news/header/TopNav.tsx
diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index 60a2a4a..b8d524d 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -2,8 +2,8 @@ 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";
-import {Header} from "@/components/header/Header";
-import {TopNav} from "@/components/header/TopNav";
+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";
 export function meta( ) {

From 132d005bb1b76ac9dcda95c56560920fba0d0e8c Mon Sep 17 00:00:00 2001
From: qiuchenfan <2035024011@qq.com>
Date: Tue, 18 Nov 2025 17:46:13 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E4=BF=AE=E8=AF=A5=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/routes/news.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index 6d132a5..c7e1696 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -5,12 +5,9 @@ import CultureBgPage from "@/components/news/body/Culturebg";
 import {Header} from "@/components/news/header/Header";
 import {TopNav} from "@/components/news/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 +23,9 @@ export default function Home() {
       <TopNav />
       <CarouselDemo />
       <NewsList />
-<<<<<<< HEAD
       <ImageGridSection />
-      {/* <Integrated /> */}
+      <Integrated />
       <CultureBgPage />
-=======
->>>>>>> 858176d3dcd4442d093f13eeca279711b756adb8
     </div>
   );
 }

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 5/7] 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() {
         <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">

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 6/7] =?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 (
+    <div className="relative w-full  mx-auto overflow-hidden">
+      {/* 左右渐隐遮罩 */}
+      <div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
+      <div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
+
+      <Carousel
+        opts={{
+          loop: true,
+          align: "start",
+        }}
+        plugins={[
+          Autoplay({
+            delay: 3000,
+            stopOnInteraction: false,
+          }),
+        ]}
+        className="w-full"
+      >
+        <CarouselContent className="flex gap-4">
+          {imageUrls.map((src, index) => (
+            <CarouselItem
+              key={index}
+              className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
+            >
+              {/* 悬停放大容器 */}
+              <div
+                className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
+                style={{
+                  transform: 'scale(1)',
+                  transition: 'all 0.5s ease',
+                }}
+              >
+                <Card className="overflow-hidden border-none shadow-lg">
+                  <CardContent className="flex aspect-square items-center justify-center p-0 relative">
+                    <img
+                      src={src}
+                      alt={`Slide ${index + 1}`}
+                      className="w-full h-full object-cover"
+                      loading="lazy" // 启用懒加载
+                    />
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+
+        {/* 左右箭头控制 */}
+        <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-20" />
+        <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-20" />
+      </Carousel>
+    </div>
+  );
+}
\ 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 7/7] 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<CarouselApi>();
@@ -69,7 +69,6 @@ export function CarouselDemo() {
         <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-10" />
       </Carousel>
 
-
       {/* 分页指示器 - 右下角 */}
       <div className="absolute bottom-4 right-4 flex gap-2 z-10">
         {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 (
-    <div className="bg-gray-200 p-4 rounded-lg">
+    <div className="bg-gray-200 p-4 rounded-lg h-full">
       {/* 标题栏 */}
       <div className="flex justify-between items-center mb-4">
         <h2 className="text-xl font-bold text-gray-800">烽火要闻</h2>
@@ -59,5 +61,3 @@ const FireNewsList: React.FC = () => {
     </div>
   );
 };
-
-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(
+    <div className="relative w-full max-w-4xl mx-auto overflow-hidden aspect-square">
+        {/* 轮播背景图 */}
+        <div className="absolute inset-0 z-0">
+            <CarouselDemo />
+        </div>
+        
+        {/* 固定的烽火要闻 */}
+        <div className="absolute top-0 right-0 w-1/3 h-full p-1">
+            <FireNewsList />
+        </div>
+    </div>
+    )
+}
\ 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(
+    <div className="relative w-full max-w-4xl mx-auto overflow-hidden aspect-square">
+        {/* 轮播背景图 */}
+        <div className="absolute inset-0 z-0">
+            <CarouselDemo />
+        </div>
+        
+        {/* 固定的烽火要闻 */}
+        <div className="absolute top-0 right-0 w-1/3 h-full p-1">
+            <FireNewsList />
+        </div>
+    </div>
+    )
+}
\ 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(
+    <div className="relative w-full max-w-4xl mx-auto overflow-hidden aspect-square">
+        {/* 轮播背景图 */}
+        <div className="absolute inset-0 z-0">
+            <CarouselDemo />
+        </div>
+        
+        {/* 固定的烽火要闻 */}
+        <div className="absolute top-0 left-0 w-1/3 h-full p-1">
+            <FireNewsList />
+        </div>
+    </div>
+    )
+}
\ 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(
+    <div className="relative w-full max-w-4xl mx-auto overflow-hidden aspect-square">
+        {/* 轮播背景图 */}
+        <div className="absolute inset-0 z-0">
+            <CarouselDemo />
+        </div>
+        
+        {/* 固定的烽火要闻 */}
+        <div className="absolute top-0 right-0 w-1/3 h-full p-1">
+            <FireNewsList />
+        </div>
+    </div>
+    )
+}
\ 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() {
     <div>
       <Header />
       <TopNav />
-      <CarouselDemo />
+      <FhywPage />
       <NewsList />
       <ImageGridSection />
+      <FhjtPage/>
+      <FhwsPage/>
+      <FhrxPage />  
       <Integrated />
       <CultureBgPage />
     </div>