From aa03951e71264de942e0475ac23fec6078e6fc07 Mon Sep 17 00:00:00 2001
From: Li1304553726 <1304553726@qq.com>
Date: Wed, 11 Jun 2025 13:19:09 +0800
Subject: [PATCH] zhfw

---
 .../components/content/integ/Integrated.tsx   | 175 ++++++++++--------
 apps/web/components/content/jcdt/page.tsx     |   2 +
 2 files changed, 99 insertions(+), 78 deletions(-)

diff --git a/apps/web/components/content/integ/Integrated.tsx b/apps/web/components/content/integ/Integrated.tsx
index cec8bb4..e921f3e 100644
--- a/apps/web/components/content/integ/Integrated.tsx
+++ b/apps/web/components/content/integ/Integrated.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-const services = [
+// 将服务分成三组
+const serviceGroup1 = [
   {
-    icon: '/picture/1.jpg', // 这里可以替换为图片或SVG
+    icon: '/picture/1.jpg',
     label: '军队自考',
     href: '/study',
   },
@@ -11,26 +12,6 @@ const services = [
     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: '常用软件',
@@ -41,6 +22,19 @@ const services = [
     label: '智能语音',
     href: '/voice',
   },
+];
+
+const serviceGroup2 = [
+  {
+    icon: '/picture/3.jpg',
+    label: '蓝天邮局',
+    href: '/mail',
+  },
+  {
+    icon: '/picture/4.jpg',
+    label: '策划工具',
+    href: '/plan',
+  },
   {
     icon: '/picture/9.jpg',
     label: '办公模板',
@@ -51,6 +45,19 @@ const services = [
     label: '智能校对',
     href: '/ai-check',
   },
+];
+
+const serviceGroup3 = [
+  {
+    icon: '/picture/5.jpg',
+    label: '情调研',
+    href: '/survey',
+  },
+  {
+    icon: '/picture/6.jpg',
+    label: '上网助手',
+    href: '/net',
+  },
   {
     icon: '/picture/11.jpg',
     label: '考试平台',
@@ -65,67 +72,79 @@ const services = [
 
 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 className="w-[1514px] h-[573px] mx-auto absolute bottom-0 left-1/2 transform -translate-x-1/2">
+     
+        <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"></div>
+          <h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
         </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" />
+          {/* 三等分flex布局 */}
+          <div className="flex justify-between h-full px-8 py-6 pb-20">
+            {/* 第一组 */}
+            <div className="flex-1  flex flex-wrap justify-center content-center">
+              <div className="w-full flex flex-wrap mb-0 mr-50">
+                {serviceGroup1.map((service, index) => (
+                  <div key={index} className="w-1/2  flex flex-col items-center mb-2">
+                    <div className="w-30 h-30 flex items-center justify-center">
+                      <img
+                        src={service.icon}
+                        alt={service.label}
+                        style={{ backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
+                      />
                     </div>
-                    {/* 标签：没有额外颜色类，使用默认文本颜色 */}
-                    <span className="text-lg font-medium text-black">{service.label}</span>
-                  </a>
-                </div>
+                    <span className="text-lg  text-center font-medium">
+                      {service.label}
+                    </span>
+                  </div>
+                ))}
               </div>
-            );
-          })}
+            </div>
+            
+            {/* 第二组 */}
+            <div className="flex-1 flex flex-wrap justify-center content-center">
+              <div className="w-full flex flex-wrap mb-0 ml-25 mr-10">
+                {serviceGroup2.map((service, index) => (
+                  <div key={index} className="w-1/2  flex flex-col items-center mb-2">
+                    <div className="w-30 h-30 flex items-center justify-center">
+                      <img
+                        src={service.icon}
+                        alt={service.label}
+                        style={{ backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
+                      />
+                    </div>
+                    <span className="text-lg  text-center font-medium">
+                      {service.label}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            {/* 第三组 */}
+            <div className="flex-1  flex flex-wrap justify-center content-center">
+              <div className="w-full flex flex-wrap mb-0 ml-50">
+                {serviceGroup3.map((service, index) => (
+                  <div key={index} className="w-1/2  flex flex-col items-center mb-2">
+                    <div className="w-30 h-30 flex items-center justify-center">
+                      <img
+                        src={service.icon}
+                        alt={service.label}
+                        style={{ backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}
+                      />
+                    </div>
+                    <span className="text-lg  text-center font-medium">
+                      {service.label}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/apps/web/components/content/jcdt/page.tsx b/apps/web/components/content/jcdt/page.tsx
index 2181437..810b9cf 100644
--- a/apps/web/components/content/jcdt/page.tsx
+++ b/apps/web/components/content/jcdt/page.tsx
@@ -2,6 +2,7 @@ import JcdtList from './jcdtlist';
 import FhjtPage from './fhjt';
 import FhwsPage from './fhws';
 import BqrxPage from './bqrx';
+import Integrated from '../integ/Integrated';
 const JcdtContainer = () => {
 	return (
 		<>
@@ -27,6 +28,7 @@ const JcdtContainer = () => {
 				<FhjtPage />
 				<FhwsPage />
 				<BqrxPage />
+				<Integrated />
 			</div>
 		</>
 	);