Add the scrolling area for "Home"

main
yezhen 2026-02-01 17:01:24 +08:00
parent 1cbac9ca2f
commit c61da9b738
2 changed files with 45 additions and 25 deletions

View File

@ -27,17 +27,11 @@ const stats = [
{ value: "5亿+", label: "直播与短视频数据" },
{ value: "1000天", label: "历史数据" }
];
const logos = [
"Jet Commerce",
"eCommerce Ninja",
"desty",
"BUZZOHERO",
"KOLAN",
"SCI GROUP",
"周大福",
"PONGO",
"MADAME GIE"
];
const logos = Array.from({ length: 20 }, (_, index) => ({
id: `logo-${index + 1}`,
src: logoWhite,
alt: `Partner ${index + 1}`
}));
const langItems = [
{ key: "zh", label: "中文(简体)" },
@ -134,13 +128,13 @@ export default function Home() {
</div>
<section className="home-logos">
<Row gutter={[8, 8]}>
{logos.map((logo) => (
<Col key={logo} xs={8} md={4} lg>
<Text className="home-logo-item">{logo}</Text>
</Col>
<div className="home-logos-track">
{[...logos, ...logos].map((logo, index) => (
<div key={`${logo.id}-${index}`} className="home-logo-item">
<img src={logo.src} alt={logo.alt} />
</div>
))}
</Row>
</div>
</section>
<section className="home-section">

View File

@ -175,19 +175,45 @@ body {
}
.home-logos {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 8px;
height: 120px;
display: flex;
align-items: center;
overflow: hidden;
background: #fff;
padding: 16px 48px;
border-top: 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 {
text-align: center;
color: #94a3b8;
font-size: 12px;
display: flex;
align-items: center;
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 {
@ -278,7 +304,7 @@ body {
}
.home-logos {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 12px 24px;
}
}