1

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) => (

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;

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>
+    )
+}

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>
+    )
+}

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>
+    )
+}

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>
+    )
+}

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>