update: 适配移动端
parent
078e3745d8
commit
7a7e77617c
Binary file not shown.
|
Before Width: | Height: | Size: 340 KiB After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 229 KiB After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
|
@ -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">
|
|
||||||
{ dict.customized }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<div className="w-full h-[403px] relative">
|
|
||||||
<img
|
|
||||||
className="absolute right-[0]"
|
|
||||||
src="/home/img_AB.png"
|
|
||||||
width={787}
|
|
||||||
height={403}
|
|
||||||
alt=""
|
|
||||||
|
|
||||||
/>
|
|
||||||
<div className="absolute w-[662px] text-[32px] top-[160px] left-[165px] text-[#333333] text-left font-semibold">
|
|
||||||
{ dict.ABTesting}
|
|
||||||
</div>
|
|
||||||
<div className="absolute w-[680px] text-[32px] top-[204px] left-[165px] text-[#333333] text-left font-semibold">
|
|
||||||
{ dict.iterateGameplay }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-[392px] relative">
|
|
||||||
<img
|
|
||||||
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 className="w-full h-[317px] relative mt-[83px]">
|
|
||||||
<img
|
|
||||||
className="absolute right-[0]"
|
|
||||||
src="/home/img_Omnichannel.png"
|
|
||||||
width={742}
|
|
||||||
height={317}
|
|
||||||
alt=""
|
|
||||||
|
|
||||||
/>
|
|
||||||
<div className="absolute w-[680px] text-[32px] top-[124px] left-[165px] text-[#333333] text-left font-semibold">
|
|
||||||
{ dict.allChannel }
|
|
||||||
</div>
|
|
||||||
<div className="absolute w-[680px] text-[32px] top-[169px] left-[165px] text-[#333333] text-left font-semibold">
|
|
||||||
{ dict.expandInfluence }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<section id="case">
|
|
||||||
<div className="w-full h-[317px] relative mt-[83px]">
|
|
||||||
<img
|
|
||||||
className="absolute"
|
|
||||||
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 className="absolute w-[712px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold">
|
|
||||||
{ dict.simplifyProcess }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
/>
|
||||||
|
<div className="absolute w-[770px] text-[32px] top-[184px] right-[115px] text-[#333333] text-right font-semibold">
|
||||||
|
{ dict.customized }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full h-[403px] relative">
|
||||||
|
<img
|
||||||
|
className="absolute right-[-30px]"
|
||||||
|
src="/home/img_AB.png"
|
||||||
|
width={787}
|
||||||
|
height={403}
|
||||||
|
alt=""
|
||||||
|
|
||||||
|
/>
|
||||||
|
<div className="absolute w-[662px] text-[32px] top-[160px] left-[165px] text-[#333333] text-left font-semibold">
|
||||||
|
{ dict.ABTesting}
|
||||||
|
</div>
|
||||||
|
<div className="absolute w-[680px] text-[32px] top-[204px] left-[165px] text-[#333333] text-left font-semibold">
|
||||||
|
{ dict.iterateGameplay }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-[392px] relative">
|
||||||
|
<img
|
||||||
|
className="absolute"
|
||||||
|
src="/home/img_mutilan.png"
|
||||||
|
width={731}
|
||||||
|
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 className="w-full h-[317px] relative mt-[83px]">
|
||||||
|
<img
|
||||||
|
className="absolute right-[20px]"
|
||||||
|
src="/home/img_Omnichannel.png"
|
||||||
|
width={742}
|
||||||
|
height={317}
|
||||||
|
alt=""
|
||||||
|
|
||||||
|
/>
|
||||||
|
<div className="absolute w-[680px] text-[32px] top-[124px] left-[165px] text-[#333333] text-left font-semibold">
|
||||||
|
{ dict.allChannel }
|
||||||
|
</div>
|
||||||
|
<div className="absolute w-[680px] text-[32px] top-[169px] left-[165px] text-[#333333] text-left font-semibold">
|
||||||
|
{ dict.expandInfluence }
|
||||||
|
</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 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>
|
||||||
|
|
||||||
<div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]">
|
<div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]">
|
||||||
{
|
{
|
||||||
caseList.map((item: CaseType, index: number) => {
|
caseList.map((item: CaseType, index: number) => {
|
||||||
return <div key={'key'+index} className="cursor-pointer relative group mb-[50px]" style={{ width: 'calc(25% - 37.5px)' }}>
|
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'>
|
<div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] h-full'>
|
||||||
<img
|
<img
|
||||||
className="rounded-[60px] w-full
|
className="rounded-[60px] w-full
|
||||||
transition ease-in-out duration-300"
|
transition ease-in-out duration-300"
|
||||||
src={item.img}
|
src={item.img}
|
||||||
width={300}
|
width={300}
|
||||||
height={300}
|
height={300}
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center
|
<div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center
|
||||||
text-white text-[30px] hidden group-hover:block '
|
text-white text-[30px] hidden group-hover:block '
|
||||||
style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}}
|
style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}}
|
||||||
>
|
>
|
||||||
{dict.clickToPlay}
|
{dict.clickToPlay}
|
||||||
</div>
|
|
||||||
</div>
|
</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)' }}>
|
<div className="flex flex-col justify-center items-center
|
||||||
<More dict={dict} lang={lang} />
|
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px]"
|
||||||
</div>
|
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)', width: 'calc(25% - 37.5px)' }}>
|
||||||
</div>
|
<More dict={dict} lang={lang} />
|
||||||
|
|
||||||
<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 className="w-full mb-[60px]">
|
|
||||||
<Form />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full flex justify-center text-[19px] text-[#59676C] pb-[52px] mb-[47px] border-b-1 border-solid border-[#D8D8D8]"
|
</div>
|
||||||
style={{ borderBottom: '1px solid #D8D8D8' }}
|
|
||||||
>
|
|
||||||
{ dict.businessCooperation }info@soyootech.com
|
<section id="contact">
|
||||||
</div>
|
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]">
|
||||||
</section>
|
<div
|
||||||
<div>
|
className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
|
||||||
<Footer dict={dict} />
|
style={{
|
||||||
|
background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
|
||||||
|
backgroundClip: 'text',
|
||||||
|
WebkitTextFillColor: 'transparent'
|
||||||
|
}}
|
||||||
|
>{ dict.contactUs }</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full mb-[60px]">
|
||||||
|
<Form />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
</section>
|
||||||
|
<div>
|
||||||
|
<Footer dict={dict} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -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> */}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -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 */
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue