jcdt板块三个轮播图布局
This commit is contained in:
parent
1fdcc1f72c
commit
f0583929fe
|
|
@ -8,9 +8,11 @@ import Header from "@/components/header/header";
|
|||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div className="w-[1920px] h-[1080px] mx-auto">
|
||||
<Header />
|
||||
<Content />
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
import React from 'react';
|
||||
|
||||
const BqrxPage = () => {
|
||||
return (
|
||||
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||
{/* 左侧图片容器 */}
|
||||
<div
|
||||
className="w-[1043px] h-full bg-cover bg-center relative"
|
||||
style={{
|
||||
clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',
|
||||
backgroundImage: 'url(/header.png)',
|
||||
}}
|
||||
>
|
||||
<div className="absolute bottom-6 left-6 flex space-x-2">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧烽火讲堂容器 */}
|
||||
<div className="w-[471px] h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<h2 className="text-right text-[32px] font-bold text-[#005d93] mb-2">兵情热线</h2>
|
||||
{/* 蓝色装饰线 */}
|
||||
<div className="h-3 bg-[#005d93]"></div>
|
||||
</div>
|
||||
|
||||
{/* 奖项列表 */}
|
||||
<div className="mt-4 pr-8 space-y-10">
|
||||
{/* 奖项1 */}
|
||||
<div className="mt-15">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-4xl font-bold ">首长信箱</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 奖项2 */}
|
||||
<div className="">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-4xl font-bold ">有问必答</span>
|
||||
<span className="w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 奖项3 */}
|
||||
<div className="">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-4xl font-bold">心灵树洞</span>
|
||||
<span className="w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 更多授课按钮
|
||||
<div className="absolute bottom-8 right-0 mr-10">
|
||||
<button className="bg-gradient-to-b from-[#053E69] to-[#257BB6] text-white px-15 py-3 rounded-full text-lg font-medium hover:bg-[#357ABD] transition-colors">
|
||||
更多授课
|
||||
</button>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BqrxPage;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import React from 'react';
|
||||
|
||||
const FhjtPage = () => {
|
||||
return (
|
||||
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||
{/* 左侧图片容器 */}
|
||||
<div
|
||||
className="w-[1043px] h-full bg-red-500 bg-cover bg-center relative"
|
||||
style={{
|
||||
clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',
|
||||
backgroundImage: 'url(/header.png)',
|
||||
}}
|
||||
>
|
||||
<div className="absolute bottom-6 left-6 flex space-x-2">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧烽火讲堂容器 */}
|
||||
<div className="w-[471px] h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pr-8">
|
||||
<h2 className="text-right text-[32px] font-bold text-[#005d93] mb-2">烽火讲堂</h2>
|
||||
{/* 蓝色装饰线 */}
|
||||
<div className="h-3 bg-[#005d93]"></div>
|
||||
</div>
|
||||
|
||||
{/* 奖项列表 */}
|
||||
<div className="mt-4 pr-8">
|
||||
{/* 奖项1 */}
|
||||
<div className="mb-5">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
<p className="text-right text-lg leading-relaxed mr-5">
|
||||
高级软件开发工程师王老八
|
||||
<br />
|
||||
王老八
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 奖项2 */}
|
||||
<div className="mb-5">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-3xl font-bold ">一等奖</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
<p className="text-right text-lg leading-relaxed mr-5">
|
||||
高级软件开发工程师王老八
|
||||
<br />
|
||||
王老八
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 奖项3 */}
|
||||
<div className="mb-1">
|
||||
<div className="flex items-center justify-end mb-1">
|
||||
<span className=" px-1 py-1 text-3xl font-bold">一等奖</span>
|
||||
<span className=" w-0 h-0 border-r-10 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent"></span>
|
||||
</div>
|
||||
<p className="text-right text-lg leading-relaxed mr-5">
|
||||
高级软件开发工程师王老八
|
||||
<br />
|
||||
王老八
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 更多授课按钮 */}
|
||||
<div className="absolute bottom-8 right-0 mr-10">
|
||||
<button className="bg-gradient-to-b from-[#053E69] to-[#257BB6] text-white px-15 py-3 rounded-full text-2xl font-bold hover:bg-[#357ABD] transition-colors">
|
||||
更多授课
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FhjtPage;
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import React from 'react';
|
||||
|
||||
const FhwsPage = () => {
|
||||
return (
|
||||
<div className="w-[1514px] h-[573px] bg-white mx-auto mt-10 flex">
|
||||
{/* 右侧烽火微视容器 */}
|
||||
<div className="w-[471px] h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pl-8">
|
||||
<h2 className="text-left text-[32px] font-bold text-[#005d93] mb-2">烽火微视</h2>
|
||||
{/* 蓝色装饰线 */}
|
||||
<div className="h-3 bg-[#005d93] w-full"></div>
|
||||
</div>
|
||||
|
||||
{/* 视频列表 */}
|
||||
<div className="mt-8 pl-8 ">
|
||||
{/* 视频项1 */}
|
||||
<div className="mb-6 flex items-center mt-10">
|
||||
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<p className="text-left text-3xl font-bold ">岗位尖兵比武视频</p>
|
||||
</div>
|
||||
|
||||
{/* 视频项2 */}
|
||||
<div className="mb-6 flex items-center mt-10">
|
||||
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<p className="text-left text-3xl font-bold ">晚会视频</p>
|
||||
</div>
|
||||
|
||||
{/* 视频项3 */}
|
||||
<div className="mb-6 flex items-center mt-10">
|
||||
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<p className="text-left text-3xl font-bold ">退伍视频</p>
|
||||
</div>
|
||||
|
||||
{/* 视频项4 */}
|
||||
<div className="mb-6 flex items-center mt-10">
|
||||
<span className="w-0 h-0 border-r-8 border-r-yellow-500 border-t-8 border-t-transparent border-l-8 border-l-transparent border-b-8 border-b-transparent mr-3"></span>
|
||||
<p className="text-left text-3xl font-bold ">共同科目尖兵比武视频</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 更多精彩按钮 */}
|
||||
<div className="absolute bottom-10 left-15">
|
||||
<button className="bg-gradient-to-b from-[#053E69] to-[#257BB6] text-white px-15 py-3 rounded-full text-2xl font-bold hover:bg-[#357ABD] transition-colors">
|
||||
更多精彩
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 左侧图片/视频容器 */}
|
||||
<div
|
||||
className="w-[1043px] h-full bg-red-500 bg-cover bg-center relative"
|
||||
style={{
|
||||
clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)',
|
||||
backgroundImage: 'url(/header.png)',
|
||||
}}
|
||||
>
|
||||
{/* 右下角圆点指示器 */}
|
||||
<div className="absolute bottom-6 right-6 flex space-x-2">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-white rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FhwsPage;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// apps/web/components/content/jcdt/jcdt/jcdtlist.tsx
|
||||
import React from 'react';
|
||||
|
||||
const JcdtList: React.FC = () => {
|
||||
const publicNews = [
|
||||
{ title: '国务院办公厅印发《关于完善仲', date: '2018.06.21' },
|
||||
{ title: '国务院办公厅关于推进养老服务', date: '2016.11.03' },
|
||||
{ title: '《关于统筹推进自然资源资产产', date: '2018.11.27' },
|
||||
{ title: '中共中央印发《中国共产党党组工作条例》', date: '2018.01.31' },
|
||||
{ title: '国务院关于修改部分行政法规的决定', date: '2018.01.31' },
|
||||
{ title: '国务院关于落实《政府工作报告》', date: '2018.01.31' },
|
||||
{ title: '关于同意建立自然灾', date: '2018.01.31' },
|
||||
{ title: '国务院办公厅印发', date: '2018.01.31' },
|
||||
{ title: '国务院关于落实《政府工作报告》', date: '2018.01.31' },
|
||||
{ title: '关于同意建立自然灾', date: '2018.01.31' },
|
||||
];
|
||||
return (
|
||||
<div className="w-[1514px] h-[464px] mx-auto flex">
|
||||
{/* 这里可以添加内容 */}
|
||||
<div
|
||||
className="w-[640px] h-[464px] mr-5 bg-cover bg-center"
|
||||
style={{ backgroundImage: 'url(/header.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
|
||||
></div>
|
||||
<div className="w-[854px] h-[464px] bg-[#0e93df] pt-8">
|
||||
{publicNews.map((item, index) => (
|
||||
<div key={index} className="flex items-center justify-between px-15 space-y-3">
|
||||
{/* 左侧圆点和标题 */}
|
||||
<div className="flex items-center flex-1">
|
||||
<div
|
||||
className="w-3 h-3 bg-white mr-1 flex-shrink-0"
|
||||
style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}
|
||||
></div>
|
||||
<p className="text-[20px] text-white flex-1">{item.title}</p>
|
||||
</div>
|
||||
{/* 右侧日期 */}
|
||||
<span className="text-[18px] text-white mr-5">{item.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JcdtList;
|
||||
|
|
@ -1,18 +1,33 @@
|
|||
import JcdtList from './jcdtlist';
|
||||
import FhjtPage from './fhjt';
|
||||
import FhwsPage from './fhws';
|
||||
import BqrxPage from './bqrx';
|
||||
const JcdtContainer = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="bg-[#0082e9] w-[1514px] h-[60px] ml-1 "
|
||||
style={{
|
||||
clipPath: 'polygon(0 0, calc(100% - 150px)1%, calc(100% - 30px) 100%, 0 100%)',
|
||||
}}
|
||||
>
|
||||
{/* 内容 */}
|
||||
<div className="w-full h-[60px] ml-1 relative">
|
||||
<p
|
||||
className="text-center absolute right-0 "
|
||||
style={{ color: '#005d93', fontSize: '32px', fontWeight: 'bold', marginRight: '255px' }}
|
||||
>
|
||||
基层动态
|
||||
</p>
|
||||
<div
|
||||
className="bg-[#0082e9] w-[1514px] h-[60px] flex justify-center items-center"
|
||||
style={{
|
||||
clipPath: 'polygon(0 0, calc(100% - 150px)1%, calc(100% - 30px) 100%, 0 100%)',
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
className="bg-cover bg-center w-[1920px] h-[7250px] ml-1"
|
||||
style={{ backgroundImage: 'url(/jcdt.png)' }}
|
||||
></div>
|
||||
className="bg-cover bg-center w-[1920px] h-[6000px] ml-1 pt-10"
|
||||
style={{ backgroundImage: 'url(/jcdt.png)' ,backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}}
|
||||
>
|
||||
<JcdtList />
|
||||
<FhjtPage />
|
||||
<FhwsPage />
|
||||
<BqrxPage />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const Content: React.FC = () => {
|
|||
className="w-[1920px] min-h-[calc(100vh-704px-758px)] relative left-1/2 transform -translate-x-1/2 bg-center flex justify-center items-center"
|
||||
|
||||
>
|
||||
<div className="w-[1514px] h-[10000px]">
|
||||
<div className="w-[1514px] h-full">
|
||||
<Navbar />
|
||||
<NewPage />
|
||||
<LearnPage />
|
||||
|
|
|
|||
|
|
@ -23,16 +23,12 @@ const CarouselDemo: React.FC = () => {
|
|||
];
|
||||
|
||||
return (
|
||||
<div >
|
||||
<Carousel
|
||||
autoplay
|
||||
style={{ height: '100%' }}
|
||||
className="h-full"
|
||||
>
|
||||
<div>
|
||||
<Carousel autoplay style={{ height: '100%' }} className="h-full">
|
||||
{slides.map((slide) => (
|
||||
<div key={slide.id} >
|
||||
<div key={slide.id}>
|
||||
<img
|
||||
className='bg-cover bg-center'
|
||||
className="bg-cover bg-center"
|
||||
src={slide.image}
|
||||
alt={slide.content}
|
||||
style={{ height: '540px', width: '100%', objectFit: 'fill' }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||
const Footer: React.FC = () => {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center relative bottom-0 overflow-y-auto overflow-x-auto left-1/2 transform -translate-x-1/2 w-[1920px] h-[758px] bg-cover bg-center"
|
||||
className=" flex flex-col items-center justify-center relative bottom-0 overflow-y-auto overflow-x-auto left-1/2 transform -translate-x-1/2 w-[1920px] h-[758px] bg-cover bg-center"
|
||||
style={{ backgroundImage: `url('/footer.png')` }}
|
||||
>
|
||||
{/* 主标题 */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue