news/app/components/news/body/Integrated.tsx

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>
  );
}