add

apps/web/components/content/integ/Integrated.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+
+const services = [
+  {
+    icon: '/picture/1.jpg', // 这里可以替换为图片或SVG
+    label: '军队自考',
+    href: '/study',
+  },
+  {
+    icon: '/picture/2.jpg',
+    label: '军人',
+    href: '/scholarship',
+  },
+  {
+    icon: '/picture/3.jpg',
+    label: '蓝天邮局',
+    href: '/mail',
+  },
+  {
+    icon: '/picture/4.jpg',
+    label: '策划工具',
+    href: '/plan',
+  },
+  {
+    icon: '/picture/5.jpg',
+    label: '情调研',
+    href: '/survey',
+  },
+  {
+    icon: '/picture/6.jpg',
+    label: '上网助手',
+    href: '/net',
+  },
+  {
+    icon: '/picture/7.jpg',
+    label: '常用软件',
+    href: '/software',
+  },
+  {
+    icon: '/picture/8.jpg',
+    label: '智能语音',
+    href: '/voice',
+  },
+  {
+    icon: '/picture/9.jpg',
+    label: '办公模板',
+    href: '/office',
+  },
+  {
+    icon: '/picture/10.jpg',
+    label: '智能校对',
+    href: '/ai-check',
+  },
+  {
+    icon: '/picture/11.jpg',
+    label: '考试平台',
+    href: '/exam',
+  },
+  {
+    icon: '/picture/12.jpg',
+    label: '学习平台',
+    href: '/study',
+  },
+];
+
+const Integrated: React.FC = () => {
+  return (
+    <div className="w-[1514px] h-[573px] bg-[#000]">
+      <div className="w-[1514px] h-[573px] bg-white">
+        <div className="flex items-center mb-6 h-[77px]">
+          <span
+            className="text-3xl font-bold mr-3 border-l-[14px] pl-4 py-2"
+            style={{ color: '#165E97', borderLeftColor: '#165E97' }}
+          >
+            综合服务
+          </span>
+        </div>
+
+
+
+
+        <div className="h-[479px] grid grid-cols-6 grid-rows-2">
+          {services.map((service, index) => {
+            // 计算实际显示位置
+            const row = Math.floor(index / 6);
+            const col = index % 6;
+
+            // 根据行数调整列的顺序
+            let displayCol = col;
+            // if (row === 0) {
+            //   // 第一行：右下、左下顺序
+            //   displayCol = col < 3 ? col + 3 : col - 3;
+            // } else {
+            //   // 第二行：右上、左上顺序
+            //   displayCol = col < 3 ? col + 3 : col - 3;
+            // }
+
+            // 确定内容在网格中的位置
+            const positionClass = row === 0
+              ? (col % 2 === 0 ? 'bottom-0 right-0' : 'bottom-0 left-0')  // 第一行：右下、左下
+              : (col % 2 === 0 ? 'top-0 right-0' : 'top-0 left-0');      // 第二行：右上、左上
+
+            return (
+              // 外部 div：负责网格布局和白色背景，本身不可点击
+              <div
+                key={index}
+                className={`relative w-full h-full bg-white`}
+                style={{ gridColumn: displayCol + 1, gridRow: row + 1 }}
+              >
+                {/* 这个 div 是 104x108 的容器，绝对定位在单元格内，并负责对齐其内部的可点击链接 */}
+                <div className={`absolute p-4 w-[104px] h-[108px] flex flex-col ${positionClass} ${col % 2 === 0 ? 'items-end' : 'items-start'}`}>
+                  {/* 这个 <a> 标签是可点击的区域，它将包裹图标和标签，并作为 Flex 容器垂直排列它们 */}
+                  <a href={service.href} className="flex flex-col w-[72px] h-[84px]">
+                    {/* 为图标创建一个圆形背景的 div */}
+                    <div className={`rounded-full w-12 h-12 flex items-center justify-center mb-2 `}>
+                      {/* 图标：应用文本颜色 */}
+                      <img src={service.icon} alt={service.label} className="w-full h-full object-contain" />
+                    </div>
+                    {/* 标签：没有额外颜色类，使用默认文本颜色 */}
+                    <span className="text-lg font-medium text-black">{service.label}</span>
+                  </a>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Integrated;