62 lines
3.3 KiB
TypeScript
62 lines
3.3 KiB
TypeScript
import React from 'react';
|
||
|
||
export default function CultureBgPage() {
|
||
// 定义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' },
|
||
{ id: 3, src: '/public/logo/1.png', alt: 'Logo 3' },
|
||
{ id: 4, src: '/public/logo/1.png', alt: 'Logo 4' },
|
||
{ id: 5, src: '/public/logo/1.png', alt: 'Logo 5' },
|
||
{ id: 6, src: '/public/logo/1.png', alt: 'Logo 6' },
|
||
{ id: 7, src: '/public/logo/1.png', alt: 'Logo 7' },
|
||
{ id: 8, src: '/public/logo/1.png', alt: 'Logo 8' },
|
||
{ id: 9, src: '/public/logo/1.png', alt: 'Logo 9' },
|
||
{ id: 10, src: '/public/logo/1.png', alt: 'Logo 10' },
|
||
{ id: 11, src: '/public/logo/1.png', alt: 'Logo 11' },
|
||
{ id: 12, src: '/public/logo/1.png', alt: 'Logo 12' },
|
||
{ id: 13, src: '/public/logo/1.png', alt: 'Logo 13' },
|
||
{ id: 14, src: '/public/logo/1.png', alt: 'Logo 14' },
|
||
{ id: 15, src: '/public/logo/1.png', alt: 'Logo 15' },
|
||
{ id: 16, src: '/public/logo/1.png', alt: 'Logo 16' },
|
||
];
|
||
|
||
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', // 背景图片居中显示
|
||
}}
|
||
/>
|
||
|
||
{/* 内容区域容器：高度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">
|
||
{/* 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} // 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' }} // 设置变换原点为中心点
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |