79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import React from 'react';
|
||
|
||
const CultureBgPage: React.FC = () => {
|
||
// 定义logo数据
|
||
const logos = [
|
||
{ id: 1, src: '/logo/1.png', alt: 'Logo 1' },
|
||
{ id: 2, src: '/logo/2.png', alt: 'Logo 2' },
|
||
{ id: 3, src: '/logo/3.png', alt: 'Logo 3' },
|
||
{ id: 4, src: '/logo/4.png', alt: 'Logo 4' },
|
||
{ id: 5, src: '/logo/5.png', alt: 'Logo 5' },
|
||
{ id: 6, src: '/logo/6.png', alt: 'Logo 6' },
|
||
{ id: 7, src: '/logo/7.png', alt: 'Logo 7' },
|
||
{ id: 8, src: '/logo/8.png', alt: 'Logo 8' },
|
||
{ id: 9, src: '/logo/9.png', alt: 'Logo 9' },
|
||
{ id: 10, src: '/logo/10.png', alt: 'Logo 10' },
|
||
{ id: 11, src: '/logo/11.png', alt: 'Logo 11' },
|
||
{ id: 12, src: '/logo/12.png', alt: 'Logo 12' },
|
||
{ id: 13, src: '/logo/13.png', alt: 'Logo 13' },
|
||
{ id: 14, src: '/logo/14.png', alt: 'Logo 14' },
|
||
{ id: 15, src: '/logo/15.png', alt: 'Logo 15' },
|
||
{ id: 16, src: '/logo/16.png', alt: 'Logo 16' },
|
||
];
|
||
|
||
// 分组：上排8个，下排8个
|
||
const topRowLogos = logos.slice(0, 8);
|
||
const bottomRowLogos = logos.slice(8, 16);
|
||
|
||
return (
|
||
<div className="h-[700px] w-[1550px] mx-auto relative">
|
||
<div
|
||
className="h-[200px] w-full bg-cover"
|
||
style={{
|
||
backgroundImage: 'url(/culture.png)',
|
||
backgroundSize: '100% 100%',
|
||
backgroundRepeat: 'no-repeat',
|
||
backgroundPosition: 'center',
|
||
}}
|
||
></div>
|
||
|
||
<div className="h-[500px] w-full absolute top-30 flex items-center justify-center p-8">
|
||
<div className="w-full h-full flex flex-col justify-center space-y-16 mb-10">
|
||
|
||
{/* 上排logo */}
|
||
<div className="flex justify-center items-center space-x-15">
|
||
{topRowLogos.map((logo) => (
|
||
<img
|
||
key={logo.id}
|
||
src={logo.src}
|
||
alt={logo.alt}
|
||
className="w-[130px] h-[130px] object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
|
||
style={{
|
||
transformOrigin: 'center'
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{/* 下排logo */}
|
||
<div className="flex justify-center items-center space-x-15">
|
||
{bottomRowLogos.map((logo) => (
|
||
<img
|
||
key={logo.id}
|
||
src={logo.src}
|
||
alt={logo.alt}
|
||
className="w-[130px] h-[130px] object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
|
||
style={{
|
||
transformOrigin: 'center'
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default CultureBgPage; |