修改训练页面grid布局问题
This commit is contained in:
parent
b670bbe5e4
commit
8592458ce0
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue