zhfw
This commit is contained in:
parent
c5b63f3b2c
commit
aa03951e71
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue