83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import WsCarousel from './WsCarousel';
|
|
const FhwsPage = () => {
|
|
const carouselData = [
|
|
{
|
|
id: 1,
|
|
image: '/header.png',
|
|
title: '军事风云第一期',
|
|
},
|
|
{
|
|
id: 2,
|
|
image: '/header.png',
|
|
title: '军事风云第一期',
|
|
},
|
|
{
|
|
id: 3,
|
|
image: '/header.png',
|
|
title: '军事风云第一期',
|
|
},
|
|
|
|
];
|
|
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-l-8 border-l-yellow-500 border-t-8 border-t-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-l-8 border-l-yellow-500 border-t-8 border-t-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-l-8 border-l-yellow-500 border-t-8 border-t-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-l-8 border-l-yellow-500 border-t-8 border-t-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-cover bg-center relative"
|
|
style={{
|
|
clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)',
|
|
}}
|
|
>
|
|
{/* 右下角圆点指示器 */}
|
|
<WsCarousel carouselData={carouselData} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FhwsPage;
|