Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news

app/components/Carousel.tsx

@@ -87,27 +87,29 @@ export function CarouselDemo({
           }),
         ]}
         setApi={setApi} // 将 Embla 实例保存到 state 中
-        className="w-full h-full" // 占满容器
+        className="w-full" // 占满容器
       >
         {/* 轮播内容区域 */}
-        <CarouselContent className="h-full w-full -ml-0">
+        <CarouselContent className=" w-full -ml-0">
           {/* 遍历图片数组，为每张图创建一个轮播项 */}
           {imageUrls.map((src, index) => (
             <CarouselItem
               key={index}
-              className="w-full h-full pl-0" // 移除默认内边距
+              className="w-full  pl-0" // 移除默认内边距
             >
               {/* 内部包裹层：无内边距，占满 */}
-              <div className="p-0 w-full h-full">
+              <div className="p-0 w-full">
                 {/* 使用 CardContent 包裹图片，移除默认间距 */}
-                <CardContent className="flex items-center justify-center p-0 w-full h-full m-0">
+                <CardContent className=" p-0 w-full  m-0">
                   {/* 图片元素：自动填充容器，保持比例裁剪 */}
+                  <div className="relative w-full aspect-video"> {/* 可选：设置固定宽高比 */}
                     <img
                       src={src}
                       alt={`Slide ${index + 1}`} // 无障碍访问描述
-                    className="w-full h-full object-fill" // 关键：使图片覆盖整个区域
+                      className="absolute inset-0 w-full h-full object-fill" // 使用 object-fill 拉伸填充
                       loading="lazy" // 懒加载优化性能
                     />
+                  </div>
                 </CardContent>
               </div>
             </CarouselItem>
@@ -123,8 +125,7 @@ export function CarouselDemo({
 
       {/* 分页指示器容器：绝对定位在底部 */}
       <div
-        className={`absolute bottom-4 ${
+        className={`absolute bottom-4 ${paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
-          paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
           } flex gap-2 z-10`} // 水平排列，间距 0.5rem，置于轮播图上方
       >
         {/* 动态生成指示器按钮 */}
@@ -136,9 +137,8 @@ export function CarouselDemo({
               // 根据 paginationStyle 决定形状
               paginationStyle === 'dot'
                 ? 'h-2 w-2 rounded-full'   // 圆形：宽高相等 + 全圆角
-                : 'h-2 w-8 rounded'         // 块状：宽 2rem，高 0.5rem，带圆角
+                : 'h-1 w-6 rounded'         // 块状
-            } ${
+              } ${index === current
-              index === current 
                 ? 'bg-white'       // 当前项为纯白色
                 : 'bg-white/50'    // 非当前项为半透明白色
               }`}

app/components/news/body/FireNews/ImportantNews.tsx

@@ -31,7 +31,7 @@ export function ImportantNews() {
     }));
 
     return(
-    <div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
+    <div className="relative w-5/6 h-220 mx-auto overflow-hidden ">
         {/* 轮播背景图 - 确保有明确尺寸 */}
         <div className="absolute top-0 left-0 w-full h-full">
             <CarouselDemo 
@@ -41,7 +41,7 @@ export function ImportantNews() {
         </div>
         
         {/* 固定的烽火要闻 */}
-        <div className="absolute top-0 right-0 w-1/3 h-225 p-1">
+        <div className="absolute top-0 right-0 w-1/3 h-220 p-1">
             <FireNewsList />
         </div>
     </div>

app/components/news/body/ImageGridSection.tsx

@@ -1,111 +1,141 @@
-import { CarouselDemo } from '@/components/Carousel';
+import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
 import React from 'react';
 
-const LearnPage = () => {
+interface NewsItem {
-    const newsList = [
+    id:string;
-        '中华人民共和国监察法',
+    content:string;
-        '2024年国办印发意见部门工作人员党听全国两...',
+    url:string;
-        '十四届全国人大二次会议闭幕贺词',
+}
-        '7天人代会："小片段"折射民主"大全景"',
-        '全国政协十四届二次会议共收到提案5800多件',
-        '两会观察丨从两会八个高频词看中国',
-        '两会"清单"上新这些民生发展温度',
-        '"选择中国"——世界从中国两会读出心动机号',
-        '中国经济信心说丨新玛合信心从哪里来',
-    ];
 
+// LearnPage 组件定义
+const LearnPage = () => {
+    // 新闻列表数据，用于显示在右侧新闻列表区
+    const newsList:NewsItem[] = [
+        {
+            id:'1',
+            content:'中华人民共和国监察法',
+            url:'https://www.baidu.com',
+        },
+        {
+            id:'2',
+            content:'2024年国办印发意见部门工作人员党听全国两...',
+            url:'https://www.baidu.com',
+        },
+        {
+            id:'3',
+            content:'十四届全国人大二次会议闭幕贺词',
+            url:'https://www.baidu.com',
+        },
+        {
+            id:'4',
+            content:'7天人代会："小片段"折射民主"大全景"',
+            url:'https://www.baidu.com',
+        },
+        {
+            id:'5',
+            content:'全国政协十四届二次会议共收到提案5800多件',
+            url:'https://www.baidu.com',    
+        },
+        {
+            id:'6',
+            content:'两会观察丨从两会八个高频词看中国',
+            url:'https://www.baidu.com',    
+        },
+        {
+            id:'7',
+            content:'两会"清单"上新这些民生发展温度',
+            url:'https://www.baidu.com',
+        },
+        {
+            id:'8',
+            content:'"选择中国"——世界从中国两会读出心动机号',
+            url:'https://www.baidu.com',
+        },
+        {
+            id:'9',
+            content:'中国经济信心说丨新玛合信心从哪里来',
+            url:'https://www.baidu.com',
+        },
+    ];
+    {/* 弹性 默认纵向 大屏横向  */}
     return (
         <div>
+            {/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
             <div className="w-5/6 mx-auto ">
-            {/* 顶部 Logo */}
+                {/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
-            <div className="flex justify-start mb-4">
+                <div className="w-70 h-20 bg-cover bg-no-repeat mb-5" style={{ backgroundImage: "url('images/learn.png')" }}></div>
-                <h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
+                
+                <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="flex flex-col lg:flex-row gap-4 h-[740px]">
+                            <div className="col-span-2 row-span-1 shadow-sm overflow-hidden">
-                {/* 左侧图片区 */}
+                                <CarouselDemo paginationPosition="right" paginationStyle="bar" />
-                <div className="lg:w-3/5 rounded-lg overflow-hidden">
-                    <div className="grid grid-cols-3 grid-rows-2 gap-3 h-full w-full">
-                        {/* 上左：第一张图 */}
-                        <div className="row-span-1 col-span-1 rounded-lg 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 rounded-lg shadow-sm overflow-hidden">
+                            {[3, 4, 6].map((i) => (
-                            <CarouselDemo 
+                                <div key={i} className="shadow-sm overflow-hidden">
-                                paginationPosition="right"
+                                    <img src={`/images/carousel-${i}.jpg`} alt={`Image ${i}`} className="w-full h-full object-cover" />
-                                paginationStyle="bar"
-                            />
-                        </div>
-
-                        {/* 下三图 */}
-                        {[3, 4, 5].map((i) => (
-                            <div key={i} className="rounded-lg 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">
-                <div className="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex items-center">
                         <ul className="space-y-8 w-full">
-                        {newsList.map((item, index) => (
+                            {newsList.map((item) => (
-                            <li
+                                <li key={item.id} className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group">
-                                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>
+                                    <span onClick={()=>window.open(item.url, '_blank')}>{item.content}</span>
                                 </li>
                             ))}
                         </ul>
                     </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
+                        <div className="w-[140px] h-[220px] absolute left-4 bottom-3 bg-cover bg-center" style={{ backgroundImage: "url('/public/images/book1.png')" }}></div>
-						className="w-[169px] h-[240px]  absolute left-0 bottom-0 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
+                        <div className="w-[150px] h-[240px] absolute left-5 bottom-0 bg-cover bg-center" style={{ backgroundImage: "url('/public/images/book2.png')" }}></div>
-						className="w-[169px] h-[240px] absolute left-0 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>
+
+         
+        
+        <section id="fireNews">
             <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>
+        </section>
     </div>
     );
 };

app/components/news/body/Integrated.tsx

@@ -54,7 +54,9 @@ export default function Integrated() {
           {/* 装饰性蓝色竖条 */}
           <div className="w-3 h-15 bg-[#005d93] mr-3" />
           {/* 标题文字：深蓝色，加粗，4xl字号 */}
+          <section id="service">
             <h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
+          </section>
         </div>
 
         {/* 服务项容器：使用flex布局排列三列，列间距45px，设置内边距 */}

app/components/news/header/TopNav.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/ui/button';
 interface MenuItem {
   label: string;
   key: string;
+  sectionId:string;
 }
 
 interface TopNavProps {
@@ -15,12 +16,12 @@ interface TopNavProps {
 
 export function TopNav({
   menuItems = [
-    { label: '首页', key: 'home' },
+    { label: '首页', key: 'home', sectionId:'home' },
-    { label: '烽火动态', key: 'news' },
+    { label: '烽火动态', key: 'news', sectionId:'fireNews' },
-    { label: '烽火铸魂', key: 'soul' },
+    { label: '烽火铸魂', key: 'soul', sectionId:'soul' },
-    { label: '烽火训练', key: 'training' },
+    { label: '烽火训练', key: 'training', sectionId:'training' },
-    { label: '联系热线', key: 'hotline' },
+    { label: '联系热线', key: 'hotline', sectionId:'hotline' },
-    { label: '综合服务', key: 'service' },
+    { label: '综合服务', key: 'service', sectionId:'service' },
   ],
   activeKey: externalActiveKey,
   onSearch,
@@ -34,12 +35,25 @@ export function TopNav({
   const handleSearchSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     onSearch?.(searchKeyword);
+    
   };
 
   const handleItemClick = (item: MenuItem) => {
     if (externalActiveKey === undefined) {
       setInternalActiveKey(item.key);
     }
+
+        // 如果有对应的 sectionId，则滚动到该区域
+    // if (item.sectionId) {
+    //   const element = document.getElementById(item.sectionId);
+    //   if (element) {
+    //     element.scrollIntoView({ 
+    //       behavior: 'smooth', // 平滑滚动
+    //       block: 'start'      // 滚动到顶部对齐
+    //     });
+    //   }
+    // }
+
     onItemClick?.(item.key);
   };
 
@@ -74,8 +88,7 @@ export function TopNav({
               <li key={item.key} className="relative">
                 <button
                   onClick={() => handleItemClick(item)}
-                  className={`px-4 py-2 text-2xl font-extralight transition-all duration-500 relative z-10 ${
+                  className={`px-4 py-2 text-2xl transition-all duration-500 relative z-10 ${isActive ? 'text-white font-bold' : 'text-gray-600 hover:font-bold cursor-pointer'
-                    isActive ? 'text-white' : 'text-gray-600 hover:font-bold'
                     }`}
                 >
                   {/* 激活状态背景层 */}

app/components/news/list/NewsList.tsx

@@ -32,7 +32,7 @@ const NewsList: React.FC = () => {
       {/* 使用 Flexbox 将两个列表放在一行 */}
       <div className="flex gap-8">
         {/* 科技新闻 */}
-        <div className="flex-1 bg-white rounded-lg shadow-md">
+        <div className="flex-1 bg-white  shadow-md">
           {/* 标题栏：独立于列表之外 */}
           <div className="flex items-center justify-between mb-6">
             <div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
@@ -57,7 +57,7 @@ const NewsList: React.FC = () => {
         </div>
 
         {/* 教育新闻 */}
-        <div className="flex-1 bg-white rounded-lg shadow-md">
+        <div className="flex-1 bg-white  shadow-md">
           {/* 标题栏：独立于列表之外 */}
           <div className="flex items-center justify-between mb-6">
             <div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">