guofei
/
addseed-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 轮播改成css动画 便于seo

main
guofei 2025-02-10 21:33:37 +08:00
parent ad991e86d2
commit 4063aa014b
2 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/[[...lang]]/page.tsx
View File

@ -69,7 +69,7 @@ export default async function Home(props: { params: { lang: string[] } }) {
</div>
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[50px]">
<div
<h2
className="leading-[42px] text-[36px] font-black w-[350px] mb-[11px] text-center"
style={{
background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
@ -77,12 +77,12 @@ export default async function Home(props: { params: { lang: string[] } }) {
WebkitTextFillColor: "transparent",
}}>
{dict.channel}
</div>
</h2>
</div>
<ChannelSwiper />
<div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
<div
<h2
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
style={{
background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
@ -90,13 +90,13 @@ export default async function Home(props: { params: { lang: string[] } }) {
WebkitTextFillColor: "transparent",
}}>
{dict.caseGallery}
</div>
</h2>
{/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
</div>
<Examples dict={dict} lang={lang} />
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">
<div
<h2
className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
style={{
background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
@ -104,7 +104,7 @@ export default async function Home(props: { params: { lang: string[] } }) {
WebkitTextFillColor: "transparent",
}}>
{dict.contactUs}
</div>
</h2>
</div>
<div className="w-full mb-[60px]">
<Form />

51
src/app/components/ChannelSwiper.tsx
View File

@ -1,5 +1,6 @@
"use client";
import Marquee from "react-fast-marquee";
import { useEffect, useRef } from "react";
const data = [
{ url: "logo-yandex.png" },
@ -21,25 +22,55 @@ const data = [
];
export default function ChannelSwiper() {
// const isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
// isMobile ? 15 :
const marqueeContentRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (marqueeContentRef.current) {
marqueeContentRef.current.style.visibility = "visible";
}
}, []);
return (
<>
<div className="overflow-hidden flex items-center">
<Marquee speed={50}>
{data.map((item, index) => {
return (
<div key={index} className="mx-8 max-w-[100px] w-auto h-[80px] flex items-center ">
<div className="marquee">
<div
className="marquee-content"
ref={marqueeContentRef}
style={{
display: "flex",
flexDirection: "row",
width: "max-content",
animation: "marquee 40s linear infinite",
animationPlayState: "running",
}}>
{[...data, ...data].map((item, index) => (
<div key={index} className="mx-8 max-w-[100px] w-auto h-[80px] flex items-center">
<img
src={`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/channel/${item.url}`}
className={` ${item.url.includes("chartboost") ? "translate-y-[-16px]" : ""}`}
alt={`${item.url.replace(".png", "").replace("logo-", "")}试玩广告`}
/>
</div>
);
})}
</Marquee>
))}
</div>
</div>
</div>
<style jsx>{`
.marquee {
width: 100%;
overflow: hidden;
position: relative;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
`}</style>
</>
);
}