72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import type { IconType } from 'react-icons';
|
|
import {
|
|
FaUserGraduate,
|
|
FaUserShield,
|
|
FaLaptopCode,
|
|
FaMicrophoneLines,
|
|
FaEnvelopeOpenText,
|
|
FaWrench,
|
|
FaRegFileLines,
|
|
FaSpellCheck,
|
|
FaChartPie,
|
|
FaGlobe,
|
|
FaBookOpenReader,
|
|
FaPenRuler,
|
|
} from 'react-icons/fa6';
|
|
|
|
type ServiceItem = {
|
|
icon: IconType;
|
|
label: string;
|
|
href: string;
|
|
};
|
|
|
|
const services: ServiceItem[] = [
|
|
{ icon: FaUserGraduate, label: '警队自考', href: '/study' },
|
|
{ icon: FaUserShield, label: '警队教育', href: '/scholarship' },
|
|
{ icon: FaLaptopCode, label: '常用软件', href: '/software' },
|
|
{ icon: FaMicrophoneLines, label: '智能语音', href: '/voice' },
|
|
{ icon: FaEnvelopeOpenText, label: '蓝天邮局', href: '/mail' },
|
|
{ icon: FaWrench, label: '策划工具', href: '/plan' },
|
|
{ icon: FaRegFileLines, label: '办公模板', href: '/office' },
|
|
{ icon: FaSpellCheck, label: '智能校对', href: '/ai-check' },
|
|
{ icon: FaChartPie, label: '警情调研', href: '/survey' },
|
|
{ icon: FaGlobe, label: '上网助手', href: '/net' },
|
|
{ icon: FaBookOpenReader, label: '考试平台', href: '/exam' },
|
|
{ icon: FaPenRuler, label: '学习平台', href: '/study' },
|
|
];
|
|
|
|
const columns = Array.from({ length: 3 }, (_, colIndex) =>
|
|
services.slice(colIndex * 4, colIndex * 4 + 4)
|
|
);
|
|
|
|
export default function Integrated() {
|
|
return (
|
|
<div className="w-[1514px] h-[573px] mx-auto ">
|
|
<div className="w-full h-[488px]">
|
|
<div className="w-full h-[82px] flex items-center pt-30 ml-10">
|
|
<div className="w-3 h-15 bg-[#005d93] mr-3" />
|
|
<h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
|
|
</div>
|
|
|
|
<div className="flex gap-45 h-full px-8 py-6 pb-20 pt-15">
|
|
{columns.map((group, colIdx) => (
|
|
<div key={colIdx} className="flex-1 grid grid-cols-2 gap-x-8 gap-y-6">
|
|
{group.map((service) => (
|
|
<a
|
|
key={service.label}
|
|
href={service.href}
|
|
className="flex flex-col items-center text-[#0f172a] transition hover:text-[#005d93]"
|
|
>
|
|
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-[#005d93]/10 text-[#005d93] mb-2">
|
|
<service.icon className="w-8 h-8" aria-hidden />
|
|
</div>
|
|
<span className="text-base font-semibold text-center">{service.label}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |