From dd9d0a12a6d0a48ebbdb6c701f86a04e93cdfe51 Mon Sep 17 00:00:00 2001
From: qiuchenfan <2035024011@qq.com>
Date: Wed, 19 Nov 2025 08:13:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BE=BD=E7=AB=A0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/news/body/Culturebg.tsx  | 28 ++++++++++++++++---------
 app/components/news/body/Integrated.tsx | 23 +++++++++++++++++---
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/app/components/news/body/Culturebg.tsx b/app/components/news/body/Culturebg.tsx
index 25a08c5..f87bb55 100644
--- a/app/components/news/body/Culturebg.tsx
+++ b/app/components/news/body/Culturebg.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default function CultureBgPage() {
-  // 定义logo数据
+  // 定义logo数据数组，包含16个logo信息
   const logos = [
     { id: 1, src: '/public/logo/1.png', alt: 'Logo 1' },
     { id: 2, src: '/public/logo/1.png', alt: 'Logo 2' },
@@ -22,28 +22,36 @@ export default function CultureBgPage() {
   ];
 
   return (
+    // 主容器：固定高度700px，宽度1550px，水平居中，相对定位
     <div className="h-[700px] w-[1550px] mx-auto relative ">
+      {/* 背景图片容器：高度200px，全宽，背景图片覆盖整个容器 */}
       <div
         className="h-[200px] w-full bg-cover"
         style={{
-          backgroundImage: 'url(/culture.png)',
-          backgroundSize: '100% 100%',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center',
+          backgroundImage: 'url(/culture.png)',     // 设置背景图片路径
+          backgroundSize: '100% 100%',             // 背景图片拉伸至容器大小
+          backgroundRepeat: 'no-repeat',           // 背景图片不重复
+          backgroundPosition: 'center',            // 背景图片居中显示
         }}
       />
 
+      {/* 内容区域容器：高度500px，全宽，绝对定位距离顶部30px，使用flex布局居中内容，设置内边距 */}
       <div className="h-[500px] w-full absolute top-30 flex items-center justify-center p-8">
+        {/* 内部容器：全宽全高，使用flex布局居中内容，下边距10px */}
         <div className="w-full h-full flex items-center justify-center mb-10">
-          {/* 两行八列：flex + wrap */}
+          {/* Logo网格容器：使用flex布局并允许换行，内容居中，设置水平和垂直间距 */}
+          {/* 注释说明：通过flex-wrap实现每行8个logo后自动换行形成两行布局 */}
           <div className="flex flex-wrap justify-center gap-x-15 gap-y-16">
+            {/* 遍历logo数组，渲染每个logo图片 */}
             {logos.map((logo) => (
               <img
-                key={logo.id}
-                src={logo.src}
-                alt={logo.alt}
+                key={logo.id}                     // React key属性，用于优化渲染
+                src={logo.src}                    // 图片源路径
+                alt={logo.alt}                    // 图片替代文本，用于无障碍访问
+                // 图片样式：固定尺寸130x130px，圆形，保持图片比例完整显示，
+                // 鼠标悬停时放大1.85倍，添加变换过渡效果，鼠标悬停显示手型光标
                 className="w-[130px] h-[130px] rounded-full object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
-                style={{ transformOrigin: 'center' }}
+                style={{ transformOrigin: 'center' }}  // 设置变换原点为中心点
               />
             ))}
           </div>
diff --git a/app/components/news/body/Integrated.tsx b/app/components/news/body/Integrated.tsx
index 96817c3..1d292ca 100644
--- a/app/components/news/body/Integrated.tsx
+++ b/app/components/news/body/Integrated.tsx
@@ -14,12 +14,14 @@ import {
   FaPenRuler,
 } from 'react-icons/fa6';
 
+// 定义服务项的类型接口
 type ServiceItem = {
-  icon: IconType;
-  label: string;
-  href: string;
+  icon: IconType;  // 图标组件
+  label: string;   // 显示标签
+  href: string;    // 链接地址
 };
 
+// 服务项数据数组
 const services: ServiceItem[] = [
   { icon: FaUserGraduate, label: '警队自考', href: '/study' },
   { icon: FaUserShield, label: '警队教育', href: '/scholarship' },
@@ -35,31 +37,46 @@ const services: ServiceItem[] = [
   { 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>
               ))}

From c9555f73b611772d90b74ebc319aefb921b29915 Mon Sep 17 00:00:00 2001
From: Li1304553726 <1304553726@qq.com>
Date: Wed, 19 Nov 2025 08:13:47 +0800
Subject: [PATCH 2/2] 1

---
 app/routes/news.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index 0a0b524..4788494 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -27,11 +27,13 @@ export default function Home() {
       <FhywPage />
       <NewsList />
       <ImageGridSection />
+      <GrassrootsDynamics />
       <FhjtPage/>
       <FhwsPage/>
       <FhrxPage />  
-      <Integrated />
+      
       <CultureBgPage />
+      <Integrated />
     </div>
   );
 }