Add the scrolling area for "Home"
parent
1cbac9ca2f
commit
c61da9b738
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue