Add the scrolling area for "Home"
parent
1cbac9ca2f
commit
c61da9b738
|
|
@ -27,17 +27,11 @@ const stats = [
|
||||||
{ value: "5亿+", label: "直播与短视频数据" },
|
{ value: "5亿+", label: "直播与短视频数据" },
|
||||||
{ value: "1000天", label: "历史数据" }
|
{ value: "1000天", label: "历史数据" }
|
||||||
];
|
];
|
||||||
const logos = [
|
const logos = Array.from({ length: 20 }, (_, index) => ({
|
||||||
"Jet Commerce",
|
id: `logo-${index + 1}`,
|
||||||
"eCommerce Ninja",
|
src: logoWhite,
|
||||||
"desty",
|
alt: `Partner ${index + 1}`
|
||||||
"BUZZOHERO",
|
}));
|
||||||
"KOLAN",
|
|
||||||
"SCI GROUP",
|
|
||||||
"周大福",
|
|
||||||
"PONGO",
|
|
||||||
"MADAME GIE"
|
|
||||||
];
|
|
||||||
|
|
||||||
const langItems = [
|
const langItems = [
|
||||||
{ key: "zh", label: "中文(简体)" },
|
{ key: "zh", label: "中文(简体)" },
|
||||||
|
|
@ -134,13 +128,13 @@ export default function Home() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section className="home-logos">
|
<section className="home-logos">
|
||||||
<Row gutter={[8, 8]}>
|
<div className="home-logos-track">
|
||||||
{logos.map((logo) => (
|
{[...logos, ...logos].map((logo, index) => (
|
||||||
<Col key={logo} xs={8} md={4} lg>
|
<div key={`${logo.id}-${index}`} className="home-logo-item">
|
||||||
<Text className="home-logo-item">{logo}</Text>
|
<img src={logo.src} alt={logo.alt} />
|
||||||
</Col>
|
</div>
|
||||||
))}
|
))}
|
||||||
</Row>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="home-section">
|
<section className="home-section">
|
||||||
|
|
|
||||||
|
|
@ -175,19 +175,45 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-logos {
|
.home-logos {
|
||||||
display: grid;
|
height: 120px;
|
||||||
grid-template-columns: repeat(9, minmax(0, 1fr));
|
display: flex;
|
||||||
gap: 8px;
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 16px 48px;
|
|
||||||
border-top: 1px solid #e6edf7;
|
border-top: 1px solid #e6edf7;
|
||||||
border-bottom: 1px solid #e6edf7;
|
border-bottom: 1px solid #e6edf7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.home-logos-track {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 40px;
|
||||||
|
height: 100%;
|
||||||
|
animation: home-logo-scroll 30s linear infinite;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
.home-logo-item {
|
.home-logo-item {
|
||||||
text-align: center;
|
display: flex;
|
||||||
color: #94a3b8;
|
align-items: center;
|
||||||
font-size: 12px;
|
justify-content: center;
|
||||||
|
min-width: 120px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-logo-item img {
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes home-logo-scroll {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-section {
|
.home-section {
|
||||||
|
|
@ -278,7 +304,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-logos {
|
.home-logos {
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
padding: 12px 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue