更改logo
This commit is contained in:
parent
bf86d2df95
commit
41c7036c7e
|
|
@ -1,7 +1,9 @@
|
|||
import { CarouselDemo } from '@/components/Carousel';
|
||||
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
|
||||
import React from 'react';
|
||||
|
||||
// LearnPage 组件定义
|
||||
const LearnPage = () => {
|
||||
// 新闻列表数据，用于显示在右侧新闻列表区
|
||||
const newsList = [
|
||||
'中华人民共和国监察法',
|
||||
'2024年国办印发意见部门工作人员党听全国两...',
|
||||
|
|
@ -13,101 +15,82 @@ const LearnPage = () => {
|
|||
'"选择中国"——世界从中国两会读出心动机号',
|
||||
'中国经济信心说丨新玛合信心从哪里来',
|
||||
];
|
||||
|
||||
{/* 弹性 默认纵向 大屏横向 */}
|
||||
return (
|
||||
<div>
|
||||
{/* 页面主容器，宽度为页面的5/6，并且水平居中 */}
|
||||
<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"
|
||||
/>
|
||||
{/* 顶部Logo区：使用背景图片方式展示logo，宽70高20 */}
|
||||
<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 h-[740px]">
|
||||
{/* 左侧图片区：占据屏幕3/5的宽度 */}
|
||||
<div className="lg:w-3/5 overflow-hidden">
|
||||
{/* 使用grid布局来安排图片的位置 */}
|
||||
<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>
|
||||
|
||||
{/* 右侧新闻列表：占据屏幕剩余2/5的宽度 */}
|
||||
<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="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 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">
|
||||
习近平新时代中国特色社会主义思想专题数据库
|
||||
</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>
|
||||
<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>
|
||||
|
||||
{/* 烽火动态部分，使用特殊clip-path样式实现独特形状 */}
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LearnPage;
|
||||
export default LearnPage;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Loading…
Reference in New Issue