143 lines
6.1 KiB
TypeScript
143 lines
6.1 KiB
TypeScript
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
|
||
import React from 'react';
|
||
|
||
|
||
interface NewsItem {
|
||
id: string;
|
||
content: string;
|
||
url: string;
|
||
}
|
||
|
||
|
||
|
||
// LearnPage 组件定义
|
||
const Train = () => {
|
||
// 新闻列表数据，用于显示在右侧新闻列表区
|
||
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',
|
||
},
|
||
];
|
||
const gridItems = [
|
||
{ src: '/logo/logo1.png', colSpan: 1, link: '' },
|
||
{ 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: '/logo/logo2.png', colSpan: 1, link: '' },
|
||
{ src: '/images/carousel-5.jpg', colSpan: 2, link: 'https://www.baidu.com' },
|
||
{ src: '/images/carousel-7.jpg', colSpan: 3, link: 'https://www.baidu.com' },
|
||
];
|
||
{/* 弹性 默认纵向 大屏横向 */ }
|
||
return (
|
||
<div>
|
||
{/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
|
||
<div className="w-5/6 mx-auto">
|
||
{/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
|
||
<div className="w-70 h-20 bg-cover bg-no-repeat mb-5 mt-20" style={{ backgroundImage: "url('images/learn.png')" }}></div>
|
||
|
||
<div className="flex flex-col lg:flex-row">
|
||
{/* 使用grid布局来安排图片的位置 */}
|
||
<div className="grid grid-cols-12 grid-rows-2 w-full h-130 ">
|
||
{/* 上左轮播图 */}
|
||
<div className="col-span-4 shadow-sm overflow-hidden ">
|
||
<CarouselDemo paginationPosition="right" paginationStyle="bar" />
|
||
</div>
|
||
{/* 上中轮播图 */}
|
||
<div className="col-span-4 shadow-sm overflow-hidden">
|
||
<CarouselDemo paginationPosition="right" paginationStyle="bar" />
|
||
</div>
|
||
{/* 上右侧新闻列表*/}
|
||
<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">
|
||
<span className="text-red-500 mr-2 ">•</span>
|
||
<span onClick={() => window.open(item.url, '_blank')}>{item.content}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</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-opacity-75 text-center text-white p-2"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
window.open(item.link, '_blank');
|
||
}}
|
||
>
|
||
了解更多
|
||
</a>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</div >
|
||
);
|
||
};
|
||
|
||
export default Train;
|