89 lines
3.7 KiB
TypeScript
89 lines
3.7 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' },
|
||
];
|
||
|
||
// 将一维服务数组转换为三维数组，分为3列，每列4个服务项
|
||
// 结构: [[列1的4项], [列2的4项], [列3的4项]]
|
||
const columns = Array.from({ length: 3 }, (_, colIndex) =>
|
||
services.slice(colIndex * 4, colIndex * 4 + 4)
|
||
);
|
||
|
||
export default function Integrated() {
|
||
return (
|
||
// 主容器：固定宽度1514px，高度573px，水平居中
|
||
<div className="w-[1514px] h-[573px] mx-auto ">
|
||
{/* 内容容器：全宽，高度488px */}
|
||
<div className="w-full h-[488px]">
|
||
{/* 标题栏：全宽，高度82px，使用flex布局垂直居中内容 */}
|
||
<div className="w-full h-[82px] flex items-center pt-30 ml-10">
|
||
{/* 装饰性蓝色竖条 */}
|
||
<div className="w-3 h-15 bg-[#005d93] mr-3" />
|
||
{/* 标题文字：深蓝色，加粗，4xl字号 */}
|
||
<h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
|
||
</div>
|
||
|
||
{/* 服务项容器：使用flex布局排列三列，列间距45px，设置内边距 */}
|
||
<div className="flex gap-45 h-full px-8 py-6 pb-20 pt-15">
|
||
{/* 遍历三列数据 */}
|
||
{columns.map((group, colIdx) => (
|
||
// 每列容器：flex-1平均分配宽度，使用2列网格布局，设置网格间距
|
||
<div key={colIdx} className="flex-1 grid grid-cols-2 gap-x-8 gap-y-6">
|
||
{/* 遍历当前列中的服务项 */}
|
||
{group.map((service) => (
|
||
// 服务项链接：使用flex垂直排列内容，居中对齐，设置悬停效果
|
||
<a
|
||
key={service.label}
|
||
href={service.href}
|
||
className="flex flex-col items-center text-[#0f172a] transition hover:text-[#005d93]"
|
||
>
|
||
{/* 图标容器：固定尺寸16x16，圆形背景，flex居中图标，下边距2px */}
|
||
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-[#005d93]/10 text-[#005d93] mb-2">
|
||
{/* 图标：尺寸8x8，隐藏无障碍访问标签 */}
|
||
<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>
|
||
);
|
||
} |