71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
const LearnPage = () => {
|
||
const newsList = [
|
||
{ title: '中华人民共和国监察法', id: 1 },
|
||
{ title: '2024年国办印发意见部门工作人员党听全国两...', id: 2 },
|
||
{ title: '十四届全国人大二次会议闭幕贺词', id: 3 },
|
||
{ title: '7天人代会："小片段"折射民主"大全景"', id: 4 },
|
||
{ title: '全国政协十四届二次会议共收到提案5800多件', id: 5 },
|
||
{ title: '两会观察丨从两会八个高频词看中国', id: 6 },
|
||
{ title: '两会"清单"上新这些民生发展温度', id: 7 },
|
||
{ title: '"选择中国"——世界从中国两会读出心动机号', id: 8 },
|
||
{ title: '中国经济信心说丨新玛合信心从哪里来', id: 9 },
|
||
];
|
||
|
||
return (
|
||
<div className="w-[1514px] h-[1086px] bg-white mt-10 mb-10">
|
||
{/* 学习进行时图片 */}
|
||
<div className="w-[282px] h-[80px] bg-cover bg-center" style={{ backgroundImage: 'url(/learn.png)' }}></div>
|
||
{/* 轮播图 */}
|
||
<div className="w-[1514px] h-[700px] bg-black mt-5 flex ">
|
||
{/* 左边容器 */}
|
||
<div className="w-[1000px] h-[647px] bg-blue-500 ml-20">{/* 左边容器内容 */}</div>
|
||
{/* 新闻容器 */}
|
||
<div className="w-[483px] h-[647px] px-6 py-8" style={{ backgroundColor: '#F8F8F6' }}>
|
||
{/* 新闻列表 */}
|
||
<div className="space-y-10 mt-5">
|
||
{newsList.map((news, index) => (
|
||
<div key={news.id} className="flex items-start">
|
||
{/* 圆点 */}
|
||
<div className="w-1 h-1 bg-black rounded-full mt-2 mr-3 flex-shrink-0 "></div>
|
||
{/* 新闻标题 */}
|
||
<p className="text-[16px] text-[#7e2f2a] leading-relaxed hover:text-red-500 cursor-pointer">
|
||
{news.title}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* 图书容器 */}
|
||
<div className="w-[1514px] h-[285px] flex relative">
|
||
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||
<div
|
||
className="w-[169px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center"
|
||
style={{ backgroundImage: 'url(/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-[700px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||
<div
|
||
className="w-[140px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
|
||
style={{ backgroundImage: 'url(/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">习近平著作选读</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LearnPage;
|