70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
|
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;
|