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
diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx
index 02dff13..2c0c642 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";
 
@@ -10,7 +11,7 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } from "@/ui/carousel";
-import FireNewsList from "./FireNewsList";
+
 
 export function CarouselDemo() {
   const [api, setApi] = React.useState<CarouselApi>();
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..c728b79
--- /dev/null
+++ b/app/components/FireNews/fhjt.tsx
@@ -0,0 +1,38 @@
+import { CarouselDemo } from "../Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhjtPage() {
+    return(
+    <div className=" w-full overflow-hidden flex justify-center">
+        {/* 轮播背景图 */}
+        <div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
+            <CarouselDemo />
+        </div>
+        
+        <div className="w-100 h-full bg-white relative">
+			{/* 标题部分 */}
+			<div className="relative pt-6 pr-8">
+				<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火讲堂</h2>
+				{/* 蓝色装饰线 */}
+				<div className="h-3 bg-[#005d93]"></div>
+			</div>
+			{/* 列表 */}
+			<div className="mt-4 pr-8">
+
+				<div className="mb-5 justify-end flex">
+                        一等奖
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        二等奖
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        三等奖
+				</div>
+			</div>
+		</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..bc0b108
--- /dev/null
+++ b/app/components/FireNews/fhrx.tsx
@@ -0,0 +1,38 @@
+import { CarouselDemo } from "../Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhrxPage() {
+    return(
+    <div className=" w-full overflow-hidden flex justify-center">
+        {/* 轮播背景图 */}
+        <div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
+            <CarouselDemo />
+        </div>
+        
+        <div className="w-100 h-full bg-white relative">
+			{/* 标题部分 */}
+			<div className="relative pt-6 pr-8">
+				<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火热线</h2>
+				{/* 蓝色装饰线 */}
+				<div className="h-3 bg-[#005d93]"></div>
+			</div>
+			{/* 列表 */}
+			<div className="mt-4 pr-8">
+
+				<div className="mb-5 justify-end flex">
+                        信箱
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        问答
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        心灵
+				</div>
+			</div>
+		</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..4d2d440
--- /dev/null
+++ b/app/components/FireNews/fhws.tsx
@@ -0,0 +1,37 @@
+import { CarouselDemo } from "../Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhwsPage() {
+    return(
+    <div className=" w-full overflow-hidden flex justify-center">
+        <div className="w-100 h-full bg-white relative" >
+			{/* 标题部分 */}
+			<div className="relative pt-6 pr-8">
+				<h2 className=" text-4xl font-bold text-[#005d93] mb-2">烽火微视</h2>
+				{/* 蓝色装饰线 */}
+				<div className="h-3 bg-[#005d93]"></div>
+			</div>
+			{/* 列表 */}
+			<div className="mt-4 pr-8 ">
+
+				<div className="mb-5 justify-start flex">
+                        一
+				</div>
+
+				<div className="mb-5 justify-start flex">
+                        二
+				</div>
+
+				<div className="mb-5 justify-start flex">
+                        三
+				</div>
+			</div>
+		</div>
+        {/* 轮播背景图 */}
+        <div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
+            <CarouselDemo />
+        </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/components/body/GrassrootsDynamics.tsx b/app/components/body/GrassrootsDynamics.tsx
index 3c64040..6ce395a 100644
--- a/app/components/body/GrassrootsDynamics.tsx
+++ b/app/components/body/GrassrootsDynamics.tsx
@@ -3,18 +3,21 @@ 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>
+    <div className="flex bg-white rounded-2xl  mx-auto w-4/5">
+      <div className="w-2/5 p-6 flex flex-col items-center justify-center relative">
+        <div >
+          <img
+            src="/images/carousel-1.jpg"
+            alt="基层动态"
+            className="w-full h-full "
+          />
+        </div>
+      </div>
+
+      {/* 右边列表 */}
+      <div className="w-3/5  text-white p-6">
+        <List />
+      </div>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/app/components/list/List.tsx b/app/components/list/List.tsx
index 0034864..c8c706d 100644
--- a/app/components/list/List.tsx
+++ b/app/components/list/List.tsx
@@ -29,9 +29,9 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
 // 使用新闻数据渲染列表
 const List: React.FC = () => {
   return (
-    <div className=" ">
-      <div className="grid grid-cols-1 md:grid-cols-2 ">
-        <div className=" p-6 rounded-lg ">
+    <div >
+      <div >
+        <div className=" p-6 ">
           <ul className="space-y-4">
             {mockNewsData.map((news) => (
               <NewsItem  title={news.title} time={news.time} url={news.url} />
diff --git a/app/components/list/NewsData.tsx b/app/components/list/NewsData.tsx
index d1d6c17..8f2f92a 100644
--- a/app/components/list/NewsData.tsx
+++ b/app/components/list/NewsData.tsx
@@ -6,10 +6,7 @@ export interface News {
   url?: string;
 }  
 
-export interface NewsTitle {
-   id: string;
-   name: string;
-}
+
 // 导出生成的模拟新闻数据
 export const NewsData = (): News[] => {
   return [
@@ -21,26 +18,20 @@ export const NewsData = (): News[] => {
     { id: "news-6", type: "科技", title: "数字货币监管政策逐步完善", time: "2023-11-06", url: "https://www.baidu.com" },
     { id: "news-7", type: "科技", title: "5G网络覆盖范围进一步扩大", time: "2023-11-07", url: "https://www.baidu.com" },  
     { id: "news-8", type: "科技", title: "教育公平问题引发社会关注", time: "2023-11-08", url: "https://www.baidu.com" },
-    { id: "news-9", type: "科技", title: "电影《星际穿越》重映引发热潮", time: "2023-11-09", url: "https://www.baidu.com" }
-
-
-
-    
+    { id: "news-9", type: "科技", title: "电影《星际穿越》重映引发热潮", time: "2023-11-09", url: "https://www.baidu.com" },
+    { id: "edu-1", type: "教育", title: "在线教育平台助力偏远地区学生学习", time: "2025-01-10", url: "https://www.example.com/edu-1" },
+  { id: "edu-2", type: "教育", title: "人工智能技术推动个性化教学发展", time: "2025-02-15", url: "https://www.example.com/edu-2" },
+  { id: "edu-3", type: "教育", title: "多地推进中小学编程教育普及", time: "2025-03-20", url: "https://www.example.com/edu-3" },
+  { id: "edu-4", type: "教育", title: "高校联合企业开展产学研合作新模式", time: "2025-04-05", url: "https://www.example.com/edu-4" },
+  { id: "edu-5", type: "教育", title: "教育部发布新政策支持职业教育发展", time: "2025-05-12", url: "https://www.example.com/edu-5" },
+  { id: "edu-6", type: "教育", title: "全球教育公平问题引发广泛讨论", time: "2025-06-18", url: "https://www.example.com/edu-6" },
+  { id: "edu-7", type: "教育", title: "虚拟现实技术应用于课堂教学实践", time: "2025-07-22", url: "https://www.example.com/edu-7" },
+  { id: "edu-8", type: "教育", title: "高考改革试点省份取得显著成效", time: "2025-08-30", url: "https://www.example.com/edu-8" },
+  { id: "edu-9", type: "教育", title: "国际教育交流项目促进文化融合", time: "2025-09-15", url: "https://www.example.com/edu-9" }
   ];
 };
 
-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 mockNewsTitleData = NewsTitleData();
\ No newline at end of file
diff --git a/app/components/list/NewsList.tsx b/app/components/list/NewsList.tsx
index 34160e7..46b97e7 100644
--- a/app/components/list/NewsList.tsx
+++ b/app/components/list/NewsList.tsx
@@ -1,20 +1,12 @@
 import React from 'react';
 import { mockNewsData } from './NewsData'; // 导入新闻数据
-import { mockNewsTitleData } from './NewsData'; // 导入新闻标题数据
-
 
 interface NewsProps {
   title?: string;
-  description?: string;
   time?: string;
-  type?: string;
   url?: string;
 }
 
-interface NewsTitle {
-  id: string;
-  name: string;
-}
 const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
   return (
     <div className="mb-4">
@@ -31,8 +23,12 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
 
 // 使用新闻数据渲染列表
 const NewsList: React.FC = () => {
+  // 按类型过滤新闻
+  const techNews = mockNewsData.filter((news) => news.type === "科技");
+  const educationNews = mockNewsData.filter((news) => news.type === "教育");
+
   return (
-    <div className="bg-gray-100 p-6 rounded-lg shadow-md">
+    <div className="bg-gray-100 p-6 rounded-lg shadow-md w-4/5 mx-auto">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         {/* 科技新闻 */}
         <div className="bg-white p-6 rounded-lg shadow-sm">
@@ -43,23 +39,23 @@ const NewsList: React.FC = () => {
             </button>
           </div>
           <ul className="space-y-4">
-            {mockNewsData.map((news) => (
-              <NewsItem  title={news.title} time={news.time} url={news.url} />
+            {techNews.map((news) => (
+              <NewsItem key={news.id} title={news.title} time={news.time} url={news.url} />
             ))}
           </ul>
         </div>
 
-        {/* 社会新闻 */}
+        {/* 教育新闻 */}
         <div className="bg-white p-6 rounded-lg shadow-sm">
           <div className="flex items-center justify-between mb-4">
-            <p className="text-xl font-bold text-gray-900">社会新闻</p>
+            <p className="text-xl font-bold text-gray-900">教育新闻</p>
             <button className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
-              更多社会新闻
+              更多教育新闻
             </button>
           </div>
           <ul className="space-y-4">
-            {mockNewsData.map((news, index) => (
-              <NewsItem key={index} title={news.title} time={news.time} url={news.url} />
+            {educationNews.map((news) => (
+              <NewsItem key={news.id} title={news.title} time={news.time} url={news.url} />
             ))}
           </ul>
         </div>
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>