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

update: 适配移动端

style
icefire 2024-10-21 15:25:49 +08:00
parent 078e3745d8
commit 7a7e77617c
8 changed files with 174 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/home/img_3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 340 KiB

After

Width:  |  Height:  |  Size: 97 KiB

BIN
public/home/img_AB.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
public/home/img_Omnichannel.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 117 KiB

BIN
public/home/img_bg2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 229 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
public/home/img_mutilan.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

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

@ -43,117 +43,118 @@ export default async function Home (props: PropsType) {
return <> return <>
<div className='w-full'> <div className='w-full'>
<Header dict={dict} lang={lang} /> <Header dict={dict} lang={lang} />
<div className="w-[1440px] relative container" <section id="home"></section>
<div className="w-[1440px] relative container pt-[80px]"
> >
<div className='main'> <div className='main'>
<div className="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[72px]">
<section id="home"> <div
<div className="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[72px]"> className="text-[46px] leading-[62px] w-[585px] text-center"
>
<div <div
className="text-[46px] leading-[62px] w-[585px] text-center" className="font-black"
> style={{
<div 'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
className="font-black" 'backgroundClip': 'text',
style={{ 'WebkitTextFillColor': 'transparent'
'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)', }}>
'backgroundClip': 'text', {dict.FocusingOnPlayableAds}
'WebkitTextFillColor': 'transparent'
}}>
{dict.FocusingOnPlayableAds}
</div>
<div
className="font-black"
style={{
'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
'backgroundClip': 'text',
'WebkitTextFillColor': 'transparent'
}}>
{dict.goOverseas}
</div>
</div> </div>
<div
className="font-black"
style={{
'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
'backgroundClip': 'text',
'WebkitTextFillColor': 'transparent'
}}>
{dict.goOverseas}
</div>
<section id="service"></section>
</div> </div>
</section> </div>
<section id="service"> <div className="w-full h-[428px] relative">
<div className="w-full h-[428px] relative"> <img
<img className="absolute left-[-140px]"
src="/home/img_bg2.png" src="/home/img_bg2.png"
width={745} width={745}
height={428} height={428}
alt="" alt=""
/> />
<div className="absolute w-[770px] text-[32px] top-[184px] right-[115px] text-[#333333] text-right font-semibold"> <div className="absolute w-[770px] text-[32px] top-[184px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.customized } { dict.customized }
</div>
</div> </div>
</section> </div>
<div className="w-full h-[403px] relative">
<img
className="absolute right-[0]"
src="/home/img_AB.png"
width={787}
height={403}
alt=""
/> <div className="w-full h-[403px] relative">
<div className="absolute w-[662px] text-[32px] top-[160px] left-[165px] text-[#333333] text-left font-semibold"> <img
{ dict.ABTesting} className="absolute right-[-30px]"
</div> src="/home/img_AB.png"
<div className="absolute w-[680px] text-[32px] top-[204px] left-[165px] text-[#333333] text-left font-semibold"> width={787}
{ dict.iterateGameplay } height={403}
</div> alt=""
/>
<div className="absolute w-[662px] text-[32px] top-[160px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.ABTesting}
</div> </div>
<div className="w-full h-[392px] relative"> <div className="absolute w-[680px] text-[32px] top-[204px] left-[165px] text-[#333333] text-left font-semibold">
<img { dict.iterateGameplay }
className="absolute"
src="/home/img_mutilan.png"
width={698}
height={392}
alt=""
/>
<div className="absolute w-[520px] text-[32px] top-[197px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.multiLanguage }
</div>
<div className="absolute w-[510px] text-[32px] top-[242px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.breakingGeographical }
</div>
</div> </div>
<div className="w-full h-[317px] relative mt-[83px]"> </div>
<img <div className="w-full h-[392px] relative">
className="absolute right-[0]" <img
src="/home/img_Omnichannel.png" className="absolute"
width={742} src="/home/img_mutilan.png"
height={317} width={731}
alt="" height={392}
alt=""
/> />
<div className="absolute w-[680px] text-[32px] top-[124px] left-[165px] text-[#333333] text-left font-semibold"> <div className="absolute w-[520px] text-[32px] top-[197px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.allChannel } { dict.multiLanguage }
</div>
<div className="absolute w-[680px] text-[32px] top-[169px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.expandInfluence }
</div>
</div> </div>
<section id="case"> <div className="absolute w-[510px] text-[32px] top-[242px] right-[115px] text-[#333333] text-right font-semibold">
<div className="w-full h-[317px] relative mt-[83px]"> { dict.breakingGeographical }
<img </div>
className="absolute" </div>
src="/home/img_3.png" <div className="w-full h-[317px] relative mt-[83px]">
width={881} <img
height={357} className="absolute right-[20px]"
alt="" src="/home/img_Omnichannel.png"
width={742}
height={317}
alt=""
/> />
<div className="absolute w-[691px] text-[32px] top-[100px] right-[115px] text-[#333333] text-right font-semibold"> <div className="absolute w-[680px] text-[32px] top-[124px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.lightweightDeployment } { dict.allChannel }
</div> </div>
<div className="absolute w-[712px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold"> <div className="absolute w-[680px] text-[32px] top-[169px] left-[165px] text-[#333333] text-left font-semibold">
{ dict.simplifyProcess } { dict.expandInfluence }
</div> </div>
</div>
<div className="w-full h-[317px] relative mt-[83px]">
<img
className="absolute left-[-194px]"
src="/home/img_3.png"
width={881}
height={357}
alt=""
/>
<div className="absolute w-[691px] text-[32px] top-[100px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.lightweightDeployment }
</div> </div>
<div className="absolute w-[712px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold">
{ dict.simplifyProcess }
</div>
</div>
<section id="case"></section>
<div className="w-full flex flex-col justify-center items-center mt-[98px]"> <div className="w-full flex flex-col justify-center items-center mt-[98px]">
<div <div
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center" className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
style={{ style={{
@ -163,63 +164,65 @@ export default async function Home (props: PropsType) {
}} }}
>{ dict.caseGallery }</div> >{ dict.caseGallery }</div>
{/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */} {/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
</div>
</section>
<div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]"> </div>
{
caseList.map((item: CaseType, index: number) => { <div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]">
return <div key={'key'+index} className="cursor-pointer relative group mb-[50px]" style={{ width: 'calc(25% - 37.5px)' }}> {
<div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] h-full'> caseList.map((item: CaseType, index: number) => {
<img return <div key={'key'+index} className="cursor-pointer relative group mb-[50px]" style={{ width: 'calc(25% - 37.5px)' }}>
className="rounded-[60px] w-full <div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] h-full'>
transition ease-in-out duration-300" <img
src={item.img} className="rounded-[60px] w-full
width={300} transition ease-in-out duration-300"
height={300} src={item.img}
alt="" width={300}
/> height={300}
<div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center alt=""
text-white text-[30px] hidden group-hover:block ' />
style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}} <div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center
> text-white text-[30px] hidden group-hover:block '
{dict.clickToPlay} style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}}
</div> >
{dict.clickToPlay}
</div> </div>
</div> </div>
})
}
<div className="flex flex-col justify-center items-center
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px]"
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)', width: 'calc(25% - 37.5px)' }}>
<More dict={dict} lang={lang} />
</div>
</div>
<section id="contact"> </div>
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]"> })
<div }
className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center" <div className="flex flex-col justify-center items-center
style={{ text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px]"
background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)', style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)', width: 'calc(25% - 37.5px)' }}>
backgroundClip: 'text', <More dict={dict} lang={lang} />
WebkitTextFillColor: 'transparent'
}}
>{ dict.contactUs }</div>
</div> </div>
<div className="w-full mb-[60px]">
<Form />
</div>
<div className="w-full flex justify-center text-[19px] text-[#59676C] pb-[52px] mb-[47px] border-b-1 border-solid border-[#D8D8D8]"
style={{ borderBottom: '1px solid #D8D8D8' }}
>
{ dict.businessCooperation }info@soyootech.com
</div>
</section>
<div>
<Footer dict={dict} />
</div> </div>
<section id="contact">
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]">
<div
className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
style={{
background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
backgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}}
>{ dict.contactUs }</div>
</div> </div>
<div className="w-full mb-[60px]">
<Form />
</div>
<div className="w-full flex justify-center text-[19px] text-[#59676C] pb-[52px] mb-[47px] border-b-1 border-solid border-[#D8D8D8]"
style={{ borderBottom: '1px solid #D8D8D8' }}
>
{ dict.businessCooperation }info@soyootech.com
</div>
</section>
<div>
<Footer dict={dict} />
</div>
</div>
</div> </div>
</div> </div>
</> </>

4
src/app/components/header.tsx
View File

@ -97,8 +97,8 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
} }
</div> </div>
</div> </div>
<div className={`${!show && 'hidden'} absolute bg-[#000000] opacity-[0] left-0 top-0 bottom-0 right-0 z-[899]`} onClick={() => setShow(false)}></div> <div className={`${!show && 'hidden'} fixed bg-[#000000] opacity-[0] left-0 top-0 bottom-0 right-0 z-[899]`} onClick={() => setShow(false)}></div>
<div className="h-[80px] container"></div> {/* <div className="h-[80px] container"></div> */}
</> </>
) )
} }

12
src/app/globals.css
View File

@ -14,6 +14,18 @@
.container { .container {
transform-origin: top left; /* 设置变换原点为左上角 */ transform-origin: top left; /* 设置变换原点为左上角 */
} }
@media screen and (max-width: 600px) {
.container {
transform: scale(0.28); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 200px);
}
}
@media screen and (min-width: 600px) and (max-width: 800px) {
.container {
transform: scale(0.6); /* 1440px宽度的1.333倍是1920px */
left: calc(50% - 200px);
}
}
@media screen and (min-width: 1440px) and (max-width: 1540px) { @media screen and (min-width: 1440px) and (max-width: 1540px) {
.container { .container {
transform: scale(1.069); /* 1440px宽度的1.333倍是1920px */ transform: scale(1.069); /* 1440px宽度的1.333倍是1920px */