Compare commits
2 Commits
5dbde23e31
...
f57f678034
| Author | SHA1 | Date |
|---|---|---|
 qiuchenfan
|
f57f678034 | |
|
qiuchenfan
|
dd9d0a12a6 |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Reference in New Issue