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;
|