From 8592458ce0f0a6d82a9b08fb6673f560877ccb3f Mon Sep 17 00:00:00 2001
From: qiuchenfan <2035024011@qq.com>
Date: Fri, 21 Nov 2025 16:16:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AE=AD=E7=BB=83=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2grid=E5=B8=83=E5=B1=80=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/news/body/Train.tsx | 74 ++++++++++++++++++------------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/app/components/news/body/Train.tsx b/app/components/news/body/Train.tsx
index 092cdc7..75588d9 100644
--- a/app/components/news/body/Train.tsx
+++ b/app/components/news/body/Train.tsx
@@ -49,11 +49,11 @@ const Train = () => {
     ];
     const gridItems = [
         { src: '/logo/logo1.png', colSpan: 1, link: '' },
-        { src: '/images/carousel-3.jpg', colSpan: 1, link: 'https://www.baidu.com' },
-        { src: '/images/carousel-4.jpg', colSpan: 3, link: 'https://www.baidu.com' },
+        { src: '/images/carousel-3.jpg', colSpan: 2, link: 'https://www.baidu.com' },
+        { src: '/images/carousel-4.jpg', colSpan: 2, link: 'https://www.baidu.com' },
         { src: '/logo/logo2.png', colSpan: 1, link: '' },
         { src: '/images/carousel-5.jpg', colSpan: 1, link: 'https://www.baidu.com' },
-        { src: '/images/carousel-7.jpg', colSpan: 1, link: 'https://www.baidu.com' },
+        { src: '/images/carousel-7.jpg', colSpan: 5, link: 'https://www.baidu.com' },
     ];
     {/* 弹性 默认纵向 大屏横向  */ }
     return (
@@ -66,15 +66,15 @@ const Train = () => {
                     {/* 使用grid布局来安排图片的位置 */}
                     <div className="grid grid-cols-12 grid-rows-2 w-full h-130 ">
                         {/* 上左轮播图 */}
-                        <div className="col-span-4 row-span-1 shadow-sm overflow-hidden ">
+                        <div className="col-span-4  shadow-sm overflow-hidden ">
                             <CarouselDemo paginationPosition="right" paginationStyle="bar" />
                         </div>
                         {/* 上中轮播图 */}
-                        <div className="col-span-4 row-span-1 shadow-sm overflow-hidden">
+                        <div className="col-span-4  shadow-sm overflow-hidden">
                             <CarouselDemo paginationPosition="right" paginationStyle="bar" />
                         </div>
                         {/* 上右侧新闻列表*/}
-                        <div className="col-span-4 row-span-1 bg-white border border-gray-200 shadow-sm p-8 flex items-center">
+                        <div className="col-span-4  bg-white border border-gray-200 shadow-sm p-8 flex items-center">
                             <ul className="space-y-3 w-full">
                                 {newsList.map((item) => (
                                     <li key={item.id} className="flex items-center text-sm text-[#7e2f2a] hover:text-red-600 cursor-pointer group">
@@ -86,29 +86,45 @@ const Train = () => {
                         </div>
 
                         {/* 下四图：动态渲染 */}
-                        {gridItems.map((item, index) => (
-                            <div key={index} className={`relative shadow-sm overflow-hidden col-span-${item.colSpan} `}>
-                                <img
-                                    src={item.src}
-                                    alt={`Image ${index + 1}`}
-                                    className="w-full h-full object-cover"
-                                    loading="lazy"
-                                />
-                                {/* 如果 colSpan 大于 1 并且存在 link，则显示链接 */}
-                                {item.colSpan > 1 && item.link && (
-                                    <a
-                                        href={item.link}
-                                        className="absolute bottom-0 left-0 right-0 bg-white bg-opacity-75 text-center text-blue-600 underline p-2"
-                                        onClick={(e) => {
-                                            e.preventDefault(); 
-                                            window.open(item.link, '_blank');
-                                        }}
-                                    >
-                                        了解更多
-                                    </a>
-                                )}
-                            </div>
-                        ))}
+                        {gridItems.map((item, index) => {
+                            // 使用映射对象来获取正确的 Tailwind 类名
+                            const colSpanClass = {
+                                1: 'col-span-1',
+                                2: 'col-span-2',
+                                3: 'col-span-3',
+                                4: 'col-span-4',
+                                5: 'col-span-5',
+                                6: 'col-span-6',
+                                7: 'col-span-7',
+                                8: 'col-span-8',
+                                9: 'col-span-9',
+                                
+                            }[item.colSpan] || 'col-span-1';
+
+                            return (
+                                <div key={index} className={`relative shadow-sm overflow-hidden ${colSpanClass}`}>
+                                    <img
+                                        src={item.src}
+                                        alt={`Image ${index + 1}`}
+                                        className="w-full h-full object-cover"
+                                        loading="lazy"
+                                    />
+                                    {/* 如果 colSpan 大于 1 并且存在 link，则显示链接 */}
+                                    {item.colSpan > 1 && item.link && (
+                                        <a
+                                            href={item.link}
+                                            className="absolute bottom-0 left-0 right-0 bg-white bg-opacity-75 text-center text-blue-600 underline p-2"
+                                            onClick={(e) => {
+                                                e.preventDefault(); 
+                                                window.open(item.link, '_blank');
+                                            }}
+                                        >
+                                            了解更多
+                                        </a>
+                                    )}
+                                </div>
+                            );
+                        })}
                     </div>
                 </div>
             </div>