88 lines
5.0 KiB
TypeScript
88 lines
5.0 KiB
TypeScript
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
|
|
import { useNewsStore } from '@/store/newsStore';
|
|
import React from 'react';
|
|
|
|
|
|
|
|
// LearnPage 组件定义
|
|
const LearnPage = () => {
|
|
// 新闻列表数据，用于显示在右侧新闻列表区
|
|
const {newsList,booksList} = useNewsStore();
|
|
{/* 水平居中
|
|
使用背景图片方式展示logo 覆盖 只显示1 外边距
|
|
弹性 默认纵向 大屏子元素横向 */ }
|
|
return (
|
|
<div>
|
|
<div className="w-5/6 mx-auto ">
|
|
<div className="w-70 h-20 bg-cover bg-no-repeat mb-5" style={{ backgroundImage: "url('images/learn.png')" }}></div>
|
|
<div className="flex flex-col lg:flex-row">
|
|
<div className="lg:w-3/5 overflow-hidden">
|
|
{/* 使用grid布局来安排图片的位置 */}
|
|
<div className="grid grid-cols-3 grid-rows-2 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) => (
|
|
<li key={item.id} 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 onClick={() => window.open(item.url, '_blank')}>{item.content}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 底部两个特色区域，分别展示书籍信息 */}
|
|
<div className="w-[1500px] h-[285px] flex relative mb-10">
|
|
{/* 左边书籍区域 */}
|
|
<div className="w-[700px] 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-[150px] top-1/2 transform -translate-y-1/2 w-[520px]">
|
|
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight cursor-pointer hover:text-blue-700 transition-colors duration-200">
|
|
<span onClick={() => window.open('https://www.12371.cn/2025/01/10/ARTI1736473568068938.shtml', '_blank')}>
|
|
习近平新时代中国特色社会主义
|
|
<br/>思想专题数据库
|
|
</span>
|
|
</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 cursor-pointer hover:text-blue-700 transition-colors duration-200"
|
|
onClick={() => window.open('https://www.12371.cn/special/zzxd/', '_blank')}>习近平著作选读</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LearnPage;
|