qiuchenfan
/
news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改训练页面grid布局问题

This commit is contained in:
qiuchenfan 2025-11-21 16:16:00 +08:00
parent b670bbe5e4
commit 8592458ce0
1 changed files with 45 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
app/components/news/body/Train.tsx
View File

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