115 lines
5.0 KiB
TypeScript
115 lines
5.0 KiB
TypeScript
import { CarouselDemo } from '@/components/Carousel';
|
||
import React from 'react';
|
||
|
||
const LearnPage = () => {
|
||
const newsList = [
|
||
'中华人民共和国监察法',
|
||
'2024年国办印发意见部门工作人员党听全国两...',
|
||
'十四届全国人大二次会议闭幕贺词',
|
||
'7天人代会："小片段"折射民主"大全景"',
|
||
'全国政协十四届二次会议共收到提案5800多件',
|
||
'两会观察丨从两会八个高频词看中国',
|
||
'两会"清单"上新这些民生发展温度',
|
||
'"选择中国"——世界从中国两会读出心动机号',
|
||
'中国经济信心说丨新玛合信心从哪里来',
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<div className="w-5/6 mx-auto ">
|
||
{/* 顶部 Logo */}
|
||
<div className="flex justify-start mb-4">
|
||
<h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
|
||
</div>
|
||
|
||
{/* 主内容区：固定高度，紧凑布局 */}
|
||
<div className="flex flex-col lg:flex-row h-[740px]">
|
||
{/* 左侧图片区 */}
|
||
<div className="lg:w-3/5 overflow-hidden">
|
||
<div className="grid grid-cols-3 grid-rows-2 h-full w-full">
|
||
{/* 上左：第一张图 */}
|
||
<div className="row-span-1 col-span-1 shadow-sm overflow-hidden">
|
||
<img
|
||
src="/images/carousel-1.jpg"
|
||
alt="Image 1"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
|
||
{/* 上右：轮播图 */}
|
||
<div className="col-span-2 row-span-1 shadow-sm overflow-hidden">
|
||
<CarouselDemo
|
||
paginationPosition="right"
|
||
paginationStyle="bar"
|
||
/>
|
||
</div>
|
||
|
||
{/* 下三图 */}
|
||
{[3, 4, 6].map((i) => (
|
||
<div key={i} className=" shadow-sm overflow-hidden">
|
||
<img
|
||
src={`/images/carousel-${i}.jpg`}
|
||
alt={`Image ${i}`}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{/* 右侧新闻列表 */}
|
||
<div className="lg:w-2/5 bg-white border border-gray-200 shadow-sm p-8 flex items-center">
|
||
<ul className="space-y-8 w-full">
|
||
{newsList.map((item, index) => (
|
||
<li
|
||
key={index}
|
||
className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group"
|
||
>
|
||
<span className="text-red-500 mr-2 mt-0.5">•</span>
|
||
<span >{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="w-[1590px] h-[285px] flex relative mb-10">
|
||
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||
<div
|
||
className="w-[140px] h-[220px] absolute left-4 bottom-3 bg-cover bg-center "
|
||
style={{ backgroundImage: "url('/public/images/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-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||
<div
|
||
className="w-[150px] h-[240px] absolute left-5 bottom-0 bg-cover bg-center "
|
||
style={{ backgroundImage: "url('/public/images/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 mr-25">习近平著作选读</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<section id="fireNews">
|
||
<div className='flex'>
|
||
<div className='w-4/5 bg-[#0082e9] h-20'
|
||
style={{clipPath: 'polygon(0 0, calc(100% - 150px) 0%, calc(100% - 20px) 100%, 0% 100%)'}}
|
||
></div>
|
||
<div className='items-center justify-center flex font-bold text-sky-900 text-5xl'>烽火动态</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LearnPage; |