diff --git a/app/components/news/body/ImageGridSection.tsx b/app/components/news/body/ImageGridSection.tsx
index 3279d8f..85d8d87 100644
--- a/app/components/news/body/ImageGridSection.tsx
+++ b/app/components/news/body/ImageGridSection.tsx
@@ -1,7 +1,9 @@
-import { CarouselDemo } from '@/components/Carousel';
+import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
 import React from 'react';
 
+// LearnPage 组件定义
 const LearnPage = () => {
+    // 新闻列表数据，用于显示在右侧新闻列表区
     const newsList = [
         '中华人民共和国监察法',
         '2024年国办印发意见部门工作人员党听全国两...',
@@ -13,101 +15,82 @@ const LearnPage = () => {
         '"选择中国"——世界从中国两会读出心动机号',
         '中国经济信心说丨新玛合信心从哪里来',
     ];
-
+    {/* 弹性 默认纵向 大屏横向  */}
     return (
         <div>
+            {/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
             <div className="w-5/6 mx-auto ">
-            {/* 顶部 Logo */}
-            <div className="flex justify-start mb-4">
-                <h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
-            </div>
-
-            {/* 主内容区：固定高度，紧凑布局 */}
-            <div className="flex flex-col lg:flex-row  h-[740px]">
-                {/* 左侧图片区 */}
-                <div className="lg:w-3/5  overflow-hidden">
-                    <div className="grid grid-cols-3 grid-rows-2  h-full w-full">
-                        {/* 上左：第一张图 */}
-                        <div className="row-span-1 col-span-1  shadow-sm overflow-hidden">
-                            <img
-                                src="/images/carousel-1.jpg"
-                                alt="Image 1"
-                                className="w-full h-full object-cover"
-                            />
-                        </div>
-
-                        {/* 上右：轮播图 */}
-                        <div className="col-span-2 row-span-1  shadow-sm overflow-hidden">
-                            <CarouselDemo 
-                                paginationPosition="right"
-                                paginationStyle="bar"
-                            />
-                        </div>
-
-                        {/* 下三图 */}
-                        {[3, 4, 6].map((i) => (
-                            <div key={i} className=" shadow-sm overflow-hidden">
-                                <img
-                                    src={`/images/carousel-${i}.jpg`}
-                                    alt={`Image ${i}`}
-                                    className="w-full h-full object-cover"
-                                />
+                {/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
+                <div className="w-70 h-20 bg-cover bg-no-repeat mb-5" style={{ backgroundImage: "url('images/learn.png')" }}></div>
+                
+                <div className="flex flex-col lg:flex-row h-[740px]">
+                    {/* 左侧图片区：占据屏幕3/5的宽度 */}
+                    <div className="lg:w-3/5 overflow-hidden">
+                        {/* 使用grid布局来安排图片的位置 */}
+                        <div className="grid grid-cols-3 grid-rows-2 h-full w-full">
+                            {/* 上左第一张图 */}
+                            <div className="row-span-1 col-span-1 shadow-sm overflow-hidden">
+                                <img src="/images/carousel-1.jpg" alt="Image 1" className="w-full h-full object-cover" />
                             </div>
-                        ))}
+
+                            {/* 上右轮播图 */}
+                            <div className="col-span-2 row-span-1 shadow-sm overflow-hidden">
+                                <CarouselDemo paginationPosition="right" paginationStyle="bar" />
+                            </div>
+
+                            {/* 下三图：动态渲染 */}
+                            {[3, 4, 6].map((i) => (
+                                <div key={i} className="shadow-sm overflow-hidden">
+                                    <img src={`/images/carousel-${i}.jpg`} alt={`Image ${i}`} className="w-full h-full object-cover" />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* 右侧新闻列表：占据屏幕剩余2/5的宽度 */}
+                    <div className="lg:w-2/5 bg-white border border-gray-200 shadow-sm p-8 flex items-center">
+                        <ul className="space-y-8 w-full">
+                            {newsList.map((item, index) => (
+                                <li key={index} className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group">
+                                    <span className="text-red-500 mr-2 mt-0.5">•</span>
+                                    <span>{item}</span>
+                                </li>
+                            ))}
+                        </ul>
                     </div>
                 </div>
-            
 
-                {/* 右侧新闻列表 */}
-                <div className="lg:w-2/5 bg-white border border-gray-200  shadow-sm p-8 flex items-center">
-                    <ul className="space-y-8 w-full">
-                        {newsList.map((item, index) => (
-                            <li
-                                key={index}
-                                className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600  cursor-pointer group"
-                            >
-                                <span className="text-red-500 mr-2 mt-0.5">•</span>
-                                <span >{item}</span>
-                            </li>
-                        ))}
-                    </ul>
+                {/* 底部两个特色区域，分别展示书籍信息 */}
+                <div className="w-[1590px] h-[285px] flex relative mb-10">
+                    {/* 左边书籍区域 */}
+                    <div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
+                        <div className="w-[140px] h-[220px] absolute left-4 bottom-3 bg-cover bg-center" style={{ backgroundImage: "url('/public/images/book1.png')" }}></div>
+                        {/* 左边容器内的文本内容 */}
+                        <div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
+                            <p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
+                                习近平新时代中国特色社会主义思想专题数据库
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* 右边书籍区域 */}
+                    <div className="w-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
+                        <div className="w-[150px] h-[240px] absolute left-5 bottom-0 bg-cover bg-center" style={{ backgroundImage: "url('/public/images/book2.png')" }}></div>
+                        {/* 右边容器内的文本内容 */}
+                        <div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
+                            <p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
+                        </div>
+                    </div>
                 </div>
-                </div>
-            <div className="w-[1590px] h-[285px]    flex relative mb-10">
-				<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
-					<div
-						className="w-[140px] h-[220px]  absolute left-4 bottom-3 bg-cover bg-center "
-						style={{ backgroundImage: "url('/public/images/book1.png')"}}
-					></div>
-					{/* 左边容器内容 */}
-					<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
-						<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
-							习近平新时代中国特色社会
-							<br />
-							主义思想专题数据库
-						</p>
-					</div>
-				</div>
-				<div className="w-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
-					<div
-						className="w-[150px] h-[240px]  absolute left-5 bottom-0 bg-cover bg-center "
-						style={{ backgroundImage: "url('/public/images/book2.png')"}}
-					></div>
-					{/* 右边容器内容 */}
-					<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] ">
-						<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
-					</div>
-				</div>			                        
-          </div>  
+            </div>
+
+            {/* 烽火动态部分，使用特殊clip-path样式实现独特形状 */}
+            <div className='flex'>
+                <div className='w-4/5 bg-[#0082e9] h-20' style={{ clipPath: 'polygon(0 0, calc(100% - 150px) 0%, calc(100% - 20px) 100%, 0% 100%)' }}></div>
+                <div className='items-center justify-center flex font-bold text-sky-900 text-5xl'>烽火动态</div>
+            </div>
         </div>
-        <div className='flex'>
-            <div className='w-4/5 bg-[#0082e9] h-20' 
-                style={{clipPath: 'polygon(0 0, calc(100% - 150px) 0%, calc(100% - 20px) 100%, 0% 100%)'}}
-            ></div>
-            <div className='items-center justify-center flex font-bold text-sky-900 text-5xl'>烽火动态</div>
-        </div>
-    </div>
     );
 };
 
-export default LearnPage;
\ No newline at end of file
+export default LearnPage; 
\ No newline at end of file
diff --git a/public/images/learn.png b/public/images/learn.png
new file mode 100644
index 0000000..db05395
Binary files /dev/null and b/public/images/learn.png differ