main
parent
e9f8f4f167
commit
413a063668
|
|
@ -1,6 +1,10 @@
|
||||||
{
|
{
|
||||||
"extends": ["next/core-web-vitals", "next/typescript"],
|
"extends": [
|
||||||
|
"next/core-web-vitals",
|
||||||
|
"next/typescript"
|
||||||
|
],
|
||||||
"rules": {
|
"rules": {
|
||||||
"@next/next/no-img-element": "off" // 或者 "error"，取决于你希望是警告还是错误
|
"@next/next/no-img-element": "off", // 或者 "error"，取决于你希望是警告还是错误
|
||||||
|
"react-hooks/rules-of-hooks": "off"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"exampleName": "测试",
|
||||||
|
"icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
|
||||||
|
"url": "http://preview.soyootech.com/temp/A.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"exampleName": "测试",
|
||||||
|
"icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
|
||||||
|
"url": "http://preview.soyootech.com/temp/B.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"exampleName": "测试",
|
||||||
|
"icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
|
||||||
|
"url": "http://preview.soyootech.com/temp/A.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"exampleName": "测试",
|
||||||
|
"icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
|
||||||
|
"url": "http://preview.soyootech.com/temp/A.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"exampleName": "测试",
|
||||||
|
"icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
|
||||||
|
"url": "http://preview.soyootech.com/temp/A.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"exampleName": "测试",
|
||||||
|
"icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
|
||||||
|
"url": "http://preview.soyootech.com/temp/A.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"exampleName": "测试",
|
||||||
|
"icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
|
||||||
|
"url": "http://preview.soyootech.com/temp/A.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"exampleName": "测试",
|
||||||
|
"icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
|
||||||
|
"url": "http://preview.soyootech.com/temp/A.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import postcssPxtorem from 'postcss-pxtorem';
|
|
||||||
|
|
||||||
/** @type {import('postcss-load-config').Config} */
|
/** @type {import('postcss-load-config').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import Link from "next/link"
|
|
||||||
|
|
||||||
export default function More(props: {dict: Record<string, string>, lang: string[]}) {
|
|
||||||
const { dict } = props
|
|
||||||
return <>
|
|
||||||
<Link href="#contact">
|
|
||||||
|
|
||||||
<div className="flex flex-col justify-center items-center
|
|
||||||
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] w-[280px] h-[280px]"
|
|
||||||
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
|
|
||||||
<div>{ dict.seeMore }</div>
|
|
||||||
<div>{ dict.contactUs1 }</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,219 +1,124 @@
|
||||||
|
import { getDictionary } from "@/dictionaries";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
import { getDictionary } from '@/dictionaries';
|
|
||||||
import Form from "./components/form";
|
import Form from "./components/form";
|
||||||
import Header from "@/app/components/header";
|
import Header from "@/app/components/header";
|
||||||
import Footer from "@/app/components/footer";
|
import Footer from "@/app/components/footer";
|
||||||
import More from './components/more';
|
|
||||||
|
import Examples from "../components/Examples";
|
||||||
|
|
||||||
type CaseType = {
|
type CaseType = {
|
||||||
img: string
|
img: string;
|
||||||
}
|
};
|
||||||
export type PropsType = {
|
export type PropsType = {
|
||||||
params: {
|
params: {
|
||||||
lang: string[];
|
lang: string[];
|
||||||
};
|
caseList: CaseType[];
|
||||||
}
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function Home(props: { params: { lang: string[] }; caseList: CaseType[] }) {
|
||||||
|
const lang = props.params.lang || ["zh"];
|
||||||
|
|
||||||
|
const dict = await getDictionary(lang[0]);
|
||||||
|
|
||||||
export default async function Home (props: PropsType) {
|
return (
|
||||||
const lang = props.params.lang || ['zh'];
|
<>
|
||||||
const dict = await getDictionary(lang[0]);
|
<div className="w-full flex flex-col items-center">
|
||||||
const caseList: CaseType[] = [
|
<Header dict={dict} lang={lang} />
|
||||||
{ img: '/home/case_1.png' },
|
<div className="w-[1440px] relative pt-[80px]">
|
||||||
{ img: '/home/case_2.png' },
|
<div className="main">
|
||||||
{ img: '/home/case_3.png' },
|
<div className="w-full h-[770px] pl-[72px] relative" id="home">
|
||||||
{ img: '/home/case_3.png' },
|
<img className="absolute right-[-40px] w-[1520px] h-[770px]" src="/home/img_header.png" alt="" />
|
||||||
{ img: '/home/case_1.png' },
|
<div className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px]">
|
||||||
{ img: '/home/case_2.png' },
|
<div
|
||||||
{ img: '/home/case_3.png' },
|
className="font-black"
|
||||||
{ img: '/home/case_3.png' },
|
style={{
|
||||||
{ img: '/home/case_1.png' },
|
background: "linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)",
|
||||||
{ img: '/home/case_2.png' },
|
backgroundClip: "text",
|
||||||
{ img: '/home/case_3.png' },
|
WebkitTextFillColor: "transparent",
|
||||||
{ img: '/home/case_3.png' },
|
backgroundSize: "contain",
|
||||||
{ img: '/home/case_1.png' },
|
}}
|
||||||
{ img: '/home/case_2.png' },
|
>
|
||||||
{ img: '/home/case_3.png' },
|
{dict.FocusingOnPlayableAds}
|
||||||
]
|
|
||||||
return <>
|
|
||||||
<div className='w-full flex flex-col items-center'>
|
|
||||||
<Header dict={dict} lang={lang} />
|
|
||||||
<div className="w-[1440px] relative pt-[80px]"
|
|
||||||
>
|
|
||||||
<div className='main'>
|
|
||||||
<div className="w-full h-[770px] pl-[72px] relative" id="home">
|
|
||||||
<img
|
|
||||||
className="absolute right-[-40px] w-[1520px] h-[770px]"
|
|
||||||
src="/home/img_header.png"
|
|
||||||
alt=""
|
|
||||||
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px]"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="font-black"
|
|
||||||
style={{
|
|
||||||
'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
|
|
||||||
'backgroundClip': 'text',
|
|
||||||
'WebkitTextFillColor': 'transparent',
|
|
||||||
'backgroundSize': 'contain'
|
|
||||||
}}>
|
|
||||||
{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="w-full h-[428px] relative" id="service">
|
|
||||||
<img
|
|
||||||
className="absolute left-[-214px] w-[969px] h-[428px]"
|
|
||||||
src="/home/img_bg2.png"
|
|
||||||
alt=""
|
|
||||||
|
|
||||||
/>
|
|
||||||
<div className="absolute w-[770px] text-[32px] top-[184px] right-[95px] text-[#333333] text-right font-semibold">
|
|
||||||
{ dict.customized }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full h-[403px] relative">
|
|
||||||
<img
|
|
||||||
className="absolute right-[-100px] w-[888px] h-[403px]"
|
|
||||||
src="/home/img_AB.png"
|
|
||||||
alt=""
|
|
||||||
|
|
||||||
/>
|
|
||||||
<div className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#333333] text-left font-semibold">
|
|
||||||
{ dict.ABTesting}
|
|
||||||
</div>
|
|
||||||
<div className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">
|
|
||||||
{ dict.iterateGameplay }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-[392px] relative">
|
|
||||||
<img
|
|
||||||
className="absolute w-[731px] h-[392px] left-[-33px]"
|
|
||||||
src="/home/img_mutilan.png"
|
|
||||||
alt=""
|
|
||||||
|
|
||||||
/>
|
|
||||||
<div className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#333333] text-right font-semibold">
|
|
||||||
{ dict.multiLanguage }
|
|
||||||
</div>
|
|
||||||
<div className="absolute w-[520px] text-[32px] top-[242px] right-[95px] text-[#333333] text-right font-semibold">
|
|
||||||
{ dict.breakingGeographical }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full h-[317px] relative mt-[83px]">
|
|
||||||
<img
|
|
||||||
className="absolute right-0 w-[742px] h-[317px]"
|
|
||||||
src="/home/img_Omnichannel.png"
|
|
||||||
alt=""
|
|
||||||
|
|
||||||
/>
|
|
||||||
<div className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#333333] text-left font-semibold">
|
|
||||||
{ dict.allChannel }
|
|
||||||
</div>
|
|
||||||
<div className="absolute w-[680px] text-[32px] top-[169px] left-[105px] text-[#333333] text-left font-semibold">
|
|
||||||
{ dict.expandInfluence }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full h-[317px] relative mt-[83px]">
|
|
||||||
<img
|
|
||||||
className="absolute left-[-329px] w-[1250px] h-[357px]"
|
|
||||||
src="/home/img_3.png"
|
|
||||||
alt=""
|
|
||||||
|
|
||||||
/>
|
|
||||||
<div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">
|
|
||||||
{ dict.lightweightDeployment }
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">
|
|
||||||
{ dict.simplifyProcess }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
|
|
||||||
style={{
|
|
||||||
background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
|
|
||||||
backgroundClip: 'text',
|
|
||||||
WebkitTextFillColor: 'transparent'
|
|
||||||
}}
|
|
||||||
>{ dict.caseGallery }</div>
|
|
||||||
{/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]">
|
|
||||||
{
|
|
||||||
caseList.map((item: CaseType, index: number) => {
|
|
||||||
return <div key={'key'+index} className="cursor-pointer relative group mb-[60px]">
|
|
||||||
<div className='hover:scale-[1.25] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]'>
|
|
||||||
<img
|
|
||||||
className="rounded-[60px] w-full
|
|
||||||
transition ease-in-out duration-300 w-[280px] h-[280px]"
|
|
||||||
src={item.img}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center
|
|
||||||
text-white text-[30px] hidden group-hover:block '
|
|
||||||
style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}}
|
|
||||||
>
|
|
||||||
{dict.clickToPlay}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
})
|
|
||||||
}
|
|
||||||
<div className="flex flex-col justify-center items-center
|
|
||||||
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px] w-[280px] h-[280px]"
|
|
||||||
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
|
|
||||||
<More dict={dict} lang={lang} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">
|
|
||||||
<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 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>
|
|
||||||
<Footer dict={dict} />
|
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
className="font-black"
|
||||||
|
style={{
|
||||||
|
background: "linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)",
|
||||||
|
backgroundClip: "text",
|
||||||
|
WebkitTextFillColor: "transparent",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{dict.goOverseas}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="w-full h-[428px] relative" id="service">
|
||||||
|
<img className="absolute left-[-214px] w-[969px] h-[428px]" src="/home/img_bg2.png" alt="" />
|
||||||
|
<div className="absolute w-[770px] text-[32px] top-[184px] right-[95px] text-[#333333] text-right font-semibold">{dict.customized}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full h-[403px] relative">
|
||||||
|
<img className="absolute right-[-100px] w-[888px] h-[403px]" src="/home/img_AB.png" alt="" />
|
||||||
|
<div className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#333333] text-left font-semibold">{dict.ABTesting}</div>
|
||||||
|
<div className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">{dict.iterateGameplay}</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-[392px] relative">
|
||||||
|
<img className="absolute w-[731px] h-[392px] left-[-33px]" src="/home/img_mutilan.png" alt="" />
|
||||||
|
<div className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#333333] text-right font-semibold">{dict.multiLanguage}</div>
|
||||||
|
<div className="absolute w-[520px] text-[32px] top-[242px] right-[95px] text-[#333333] text-right font-semibold">{dict.breakingGeographical}</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-[317px] relative mt-[83px]">
|
||||||
|
<img className="absolute right-0 w-[742px] h-[317px]" src="/home/img_Omnichannel.png" alt="" />
|
||||||
|
<div className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#333333] text-left font-semibold">{dict.allChannel}</div>
|
||||||
|
<div className="absolute w-[680px] text-[32px] top-[169px] left-[105px] text-[#333333] text-left font-semibold">{dict.expandInfluence}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full h-[317px] relative mt-[83px]">
|
||||||
|
<img className="absolute left-[-329px] w-[1250px] h-[357px]" src="/home/img_3.png" alt="" />
|
||||||
|
<div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">{dict.lightweightDeployment}</div>
|
||||||
|
|
||||||
|
<div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">{dict.simplifyProcess}</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
|
||||||
|
<div
|
||||||
|
className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
|
||||||
|
style={{
|
||||||
|
background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
|
||||||
|
backgroundClip: "text",
|
||||||
|
WebkitTextFillColor: "transparent",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{dict.caseGallery}
|
||||||
|
</div>
|
||||||
|
{/* <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
|
||||||
|
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 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>
|
||||||
|
<Footer dict={dict} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
"use client";
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import More from "./more";
|
||||||
|
|
||||||
|
export default function Examples(props: { dict: Record<string, string>; lang: string[] }) {
|
||||||
|
const [previewInfo, setPreviewInfo] = useState({
|
||||||
|
url: "",
|
||||||
|
preview: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [examples, setExamples] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
const res = await fetch(`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/example.json`);
|
||||||
|
const dataSource = await res.json();
|
||||||
|
setExamples(dataSource);
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const [progress, setProgress] = useState(0);
|
||||||
|
|
||||||
|
const timer = useRef<NodeJS.Timeout>();
|
||||||
|
useEffect(() => {
|
||||||
|
if (previewInfo.preview) {
|
||||||
|
setProgress(0);
|
||||||
|
timer.current = setInterval(() => {
|
||||||
|
if (progress === 100) {
|
||||||
|
clearInterval(timer.current);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setProgress((prevProgress) => {
|
||||||
|
if (prevProgress >= 90) {
|
||||||
|
clearInterval(timer.current);
|
||||||
|
return 90;
|
||||||
|
}
|
||||||
|
return prevProgress + 10;
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
}, [previewInfo.preview]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="w-[96%] flex flex-wrap mt-[34px] mb-[83px] mx-auto">
|
||||||
|
{examples.map((item: { icon: string | undefined; url: string }, index: number) => {
|
||||||
|
return (
|
||||||
|
<div key={"key" + index} className="cursor-pointer relative group mb-[60px] w-1/4 flex justify-center">
|
||||||
|
<div className="hover:scale-[1.15] transition ease-in-out duration-300 hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]">
|
||||||
|
<img className="rounded-[60px] w-[280px] h-[280px]" src={item.icon} alt="" />
|
||||||
|
<div
|
||||||
|
className="absolute bottom-0 w-full h-[81px] bg-[#002653] text-center text-white text-[30px] hidden group-hover:block "
|
||||||
|
style={{ borderRadius: "0px 0px 60px 60px", lineHeight: "81px" }}
|
||||||
|
onClick={() => {
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
setPreviewInfo({
|
||||||
|
preview: true,
|
||||||
|
url: item.url,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.dict.clickToPlay}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<div
|
||||||
|
className="flex flex-col justify-center items-center
|
||||||
|
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px] w-[280px] h-[280px]"
|
||||||
|
style={{ background: "radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)" }}
|
||||||
|
>
|
||||||
|
<More dict={props.dict} lang={props.lang} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{previewInfo.preview && (
|
||||||
|
<div
|
||||||
|
className="fixed left-0 right-0 top-0 bottom-0 bg-black/60 z-[2000]"
|
||||||
|
onClick={() => {
|
||||||
|
document.body.style.overflow = "auto";
|
||||||
|
setPreviewInfo({
|
||||||
|
preview: false,
|
||||||
|
url: "",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="flex justify-center w-[370px] h-[610px] items-center fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] mx-auto border rounded-lg p-4 bg-white"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{progress < 90 && <div className="text-red-500 font-bold text-3xl text-center absolute z-[30]">{progress}%</div>}
|
||||||
|
<iframe src={previewInfo.url} className="w-full h-full" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,146 +1,123 @@
|
||||||
'use client'
|
"use client";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
type NavType = {
|
type NavType = {
|
||||||
name: string;
|
name: string;
|
||||||
href: string;
|
href: string;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export default function Header(props: { dict: Record<string, string>; lang: string[] }) {
|
||||||
export default function Header(props: { dict: Record<string, string>, lang: string[] }) {
|
const { dict, lang } = props;
|
||||||
const { dict, lang } = props
|
const [activeTab, setActiveTab] = useState(dict.home);
|
||||||
const [activeTab, setActiveTab] = useState(dict.home)
|
const [show, setShow] = useState(false);
|
||||||
const [show, setShow] = useState(false)
|
const [hash, setHash] = useState("#home");
|
||||||
const [hash, setHash] = useState('#home')
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const designWidth = 1440;
|
const designWidth = 1440;
|
||||||
const deviceWidth = document.documentElement.clientWidth
|
const deviceWidth = document.documentElement.clientWidth;
|
||||||
let scale = 1
|
let scale = 1;
|
||||||
console.log('designWidth', deviceWidth)
|
console.log("designWidth", deviceWidth);
|
||||||
if (deviceWidth <= 1440) {
|
if (deviceWidth <= 1440) {
|
||||||
scale = deviceWidth / designWidth;
|
scale = deviceWidth / designWidth;
|
||||||
}
|
}
|
||||||
console.log('scale', scale)
|
console.log("scale", scale);
|
||||||
document.documentElement.style.fontSize = `${scale * 14.4}px`;
|
document.documentElement.style.fontSize = `${scale * 14.4}px`;
|
||||||
switch (hash) {
|
switch (hash) {
|
||||||
case '#home':
|
case "#home":
|
||||||
const home = document.getElementById('home')
|
const home = document.getElementById("home");
|
||||||
document.documentElement.scrollTo({
|
document.documentElement.scrollTo({
|
||||||
top: home!.offsetTop - 80,
|
top: home!.offsetTop - 80,
|
||||||
behavior: 'smooth'
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case '#service':
|
case "#service":
|
||||||
const service = document.getElementById('service')
|
const service = document.getElementById("service");
|
||||||
document.documentElement.scrollTo({
|
document.documentElement.scrollTo({
|
||||||
top: service!.offsetTop - 80,
|
top: service!.offsetTop - 80,
|
||||||
behavior: 'smooth'
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case '#case':
|
case "#case":
|
||||||
const caseDom = document.getElementById('case')
|
const caseDom = document.getElementById("case");
|
||||||
document.documentElement.scrollTo({
|
document.documentElement.scrollTo({
|
||||||
top: caseDom!.offsetTop - 110,
|
top: caseDom!.offsetTop - 110,
|
||||||
behavior: 'smooth'
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case '#contact':
|
case "#contact":
|
||||||
const contact = document.getElementById('contact')
|
const contact = document.getElementById("contact");
|
||||||
document.documentElement.scrollTo({
|
document.documentElement.scrollTo({
|
||||||
top: contact!.offsetTop - 80,
|
top: contact!.offsetTop - 80,
|
||||||
behavior: 'smooth'
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
}, [hash]);
|
||||||
|
|
||||||
|
|
||||||
}, [hash])
|
|
||||||
|
|
||||||
const navList: NavType[] = [
|
const navList: NavType[] = [
|
||||||
{
|
{
|
||||||
name: dict.home,
|
name: dict.home,
|
||||||
href: "#home"
|
href: "#home",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: dict.services,
|
name: dict.services,
|
||||||
href: "#service"
|
href: "#service",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: dict.caseGallery,
|
name: dict.caseGallery,
|
||||||
href: "#case"
|
href: "#case",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: dict.contactUs,
|
name: dict.contactUs,
|
||||||
href: "#contact"
|
href: "#contact",
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
return (<>
|
return (
|
||||||
<div className={`flex items-center px-[40px] h-[80px] border-b-1 border-solid
|
<>
|
||||||
border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] justify-between`}
|
<div
|
||||||
style={{ borderBottom: '1px solid #D8D8D8' }}
|
className={`flex items-center px-[40px] h-[80px] border-b-1 border-solid
|
||||||
>
|
border-[#D8D8D8] fixed bg-white z-[100] w-[1440px] justify-between]`}
|
||||||
<div className="cursor-pointer">
|
style={{ borderBottom: "1px solid #D8D8D8" }}
|
||||||
<img
|
|
||||||
className="w-[180px] h-[47px]"
|
|
||||||
src="/common/logo.png"
|
|
||||||
alt="logo"
|
|
||||||
onClick={() => setHash('#home')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
|
|
||||||
>
|
>
|
||||||
{
|
<div className="cursor-pointer">
|
||||||
navList.map((item: NavType) => (
|
<img className="w-[180px] h-[47px]" src="/common/logo.png" alt="logo" onClick={() => setHash("#home")} />
|
||||||
|
</div>
|
||||||
|
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"}>
|
||||||
|
{navList.map((item: NavType) => (
|
||||||
<div onClick={() => setHash(item.href)} key={item.name}>
|
<div onClick={() => setHash(item.href)} key={item.name}>
|
||||||
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
|
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
|
||||||
<div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
|
<div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
|
||||||
{
|
{activeTab === item.name ? <img src="/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> : <div className="h-[8px]"></div>}
|
||||||
activeTab === item.name ?
|
|
||||||
<img src="/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> :
|
|
||||||
<div className="h-[8px]"></div>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))
|
))}
|
||||||
}
|
</div>
|
||||||
</div>
|
<div className="w-[129px]">
|
||||||
<div className="w-[129px]">
|
<div
|
||||||
<div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6]
|
className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6]
|
||||||
border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer"
|
border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer"
|
||||||
onClick={() => setShow(!show)}>
|
onClick={() => setShow(!show)}
|
||||||
<img
|
>
|
||||||
src="/common/earth.png"
|
<img src="/common/earth.png" className="w-[16.5px] h-[16.5px]" alt="logo" />
|
||||||
className="w-[16.5px] h-[16.5px]"
|
|
||||||
alt="logo"
|
|
||||||
/>
|
|
||||||
<div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{dict?.lang}</div>
|
<div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{dict?.lang}</div>
|
||||||
<img
|
<img className={`transition-transform duration-300 transform rotate-0 ${show && "rotate-180"} w-[10px] h-[5px]`} src="/common/arrow.png" alt="logo" />
|
||||||
className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'} w-[10px] h-[5px]`}
|
|
||||||
src="/common/arrow.png"
|
|
||||||
alt="logo"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
|
<div className={`absolute ${!show && "hidden"} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}>
|
||||||
<div className={`absolute ${!show && 'hidden'} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}>
|
<Link href={lang[0] === "zh" ? "/en" : "/"}>
|
||||||
<Link href={lang[0] === 'zh' ? '/en' : '/'}>
|
<div
|
||||||
<div className={`absolute right-[40px] top-[68px] w-[129px] h-[28px] leading-[28px]
|
className={`absolute right-[40px] top-[68px] w-[129px] h-[28px] leading-[28px]
|
||||||
bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}>
|
bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}
|
||||||
|
>
|
||||||
<div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
|
<div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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={`${!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> */}
|
</>
|
||||||
</>
|
);
|
||||||
)
|
}
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function More(props: { dict: Record<string, string>; lang: string[] }) {
|
||||||
|
const { dict } = props;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Link href="#contact">
|
||||||
|
<div
|
||||||
|
className="flex flex-col justify-center items-center
|
||||||
|
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] w-[280px] h-[280px]"
|
||||||
|
style={{ background: "radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)" }}
|
||||||
|
>
|
||||||
|
<div>{dict.seeMore}</div>
|
||||||
|
<div>{dict.contactUs1}</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue