Merge remote-tracking branch 'origin/style'
commit
aa92e4c4a4
|
|
@ -1,3 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": ["next/core-web-vitals", "next/typescript"]
|
"extends": ["next/core-web-vitals", "next/typescript"],
|
||||||
|
"rules": {
|
||||||
|
"@next/next/no-img-element": "off" // 或者 "error"，取决于你希望是警告还是错误
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
"@emotion/styled": "^11.13.0",
|
"@emotion/styled": "^11.13.0",
|
||||||
"@formatjs/intl-localematcher": "^0.5.5",
|
"@formatjs/intl-localematcher": "^0.5.5",
|
||||||
"@mui/material": "^6.1.3",
|
"@mui/material": "^6.1.3",
|
||||||
|
"lib-flexible": "^0.3.2",
|
||||||
"negotiator": "^0.6.3",
|
"negotiator": "^0.6.3",
|
||||||
"next": "14.2.15",
|
"next": "14.2.15",
|
||||||
"next-intl": "^3.21.1",
|
"next-intl": "^3.21.1",
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,9 @@ importers:
|
||||||
'@mui/material':
|
'@mui/material':
|
||||||
specifier: ^6.1.3
|
specifier: ^6.1.3
|
||||||
version: 6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
version: 6.1.3(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||||
|
lib-flexible:
|
||||||
|
specifier: ^0.3.2
|
||||||
|
version: 0.3.2
|
||||||
negotiator:
|
negotiator:
|
||||||
specifier: ^0.6.3
|
specifier: ^0.6.3
|
||||||
version: 0.6.3
|
version: 0.6.3
|
||||||
|
|
@ -29,6 +32,9 @@ importers:
|
||||||
next-intl:
|
next-intl:
|
||||||
specifier: ^3.21.1
|
specifier: ^3.21.1
|
||||||
version: 3.21.1(next@14.2.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
|
version: 3.21.1(next@14.2.15(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
|
||||||
|
postcss-pxtorem:
|
||||||
|
specifier: ^6.1.0
|
||||||
|
version: 6.1.0(postcss@8.4.47)
|
||||||
react:
|
react:
|
||||||
specifier: ^18
|
specifier: ^18
|
||||||
version: 18.3.1
|
version: 18.3.1
|
||||||
|
|
@ -1279,6 +1285,9 @@ packages:
|
||||||
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
|
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
|
||||||
engines: {node: '>= 0.8.0'}
|
engines: {node: '>= 0.8.0'}
|
||||||
|
|
||||||
|
lib-flexible@0.3.2:
|
||||||
|
resolution: {integrity: sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==}
|
||||||
|
|
||||||
lilconfig@2.1.0:
|
lilconfig@2.1.0:
|
||||||
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
|
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
|
@ -1510,6 +1519,11 @@ packages:
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.2.14
|
postcss: ^8.2.14
|
||||||
|
|
||||||
|
postcss-pxtorem@6.1.0:
|
||||||
|
resolution: {integrity: sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==}
|
||||||
|
peerDependencies:
|
||||||
|
postcss: ^8.0.0
|
||||||
|
|
||||||
postcss-selector-parser@6.1.2:
|
postcss-selector-parser@6.1.2:
|
||||||
resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
|
resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
|
||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
|
|
@ -3354,6 +3368,8 @@ snapshots:
|
||||||
prelude-ls: 1.2.1
|
prelude-ls: 1.2.1
|
||||||
type-check: 0.4.0
|
type-check: 0.4.0
|
||||||
|
|
||||||
|
lib-flexible@0.3.2: {}
|
||||||
|
|
||||||
lilconfig@2.1.0: {}
|
lilconfig@2.1.0: {}
|
||||||
|
|
||||||
lilconfig@3.1.2: {}
|
lilconfig@3.1.2: {}
|
||||||
|
|
@ -3568,6 +3584,10 @@ snapshots:
|
||||||
postcss: 8.4.47
|
postcss: 8.4.47
|
||||||
postcss-selector-parser: 6.1.2
|
postcss-selector-parser: 6.1.2
|
||||||
|
|
||||||
|
postcss-pxtorem@6.1.0(postcss@8.4.47):
|
||||||
|
dependencies:
|
||||||
|
postcss: 8.4.47
|
||||||
|
|
||||||
postcss-selector-parser@6.1.2:
|
postcss-selector-parser@6.1.2:
|
||||||
dependencies:
|
dependencies:
|
||||||
cssesc: 3.0.0
|
cssesc: 3.0.0
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,13 @@ const config = {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
'postcss-pxtorem': {
|
'postcss-pxtorem': {
|
||||||
rootValue: 20,
|
rootValue: 14.4, // 默认的根元素字体大小
|
||||||
unitPrecision: 5,
|
unitPrecision: 5, // 单位转换后保留的精度
|
||||||
propList: ['*'],
|
propList: ['*'], // 转换哪些属性，'*' 表示全部
|
||||||
selectorBlackList: [],
|
selectorBlackList: [], // 不转换的类名
|
||||||
minPixelValue: 0,
|
minPixelValue: 0, // 小于或等于`1px`的不转换为`rem`
|
||||||
mediaQuery: false,
|
mediaQuery: false, // 允许在媒体查询中转换`px`
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
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 |
|
|
@ -26,9 +26,8 @@ export default function Form() {
|
||||||
>
|
>
|
||||||
<div className="text-[#fff] text-[24px] font-semibold">提交</div>
|
<div className="text-[#fff] text-[24px] font-semibold">提交</div>
|
||||||
<img
|
<img
|
||||||
|
className="w-[26px] h-[22px]"
|
||||||
src="/home/submit_icon.png"
|
src="/home/submit_icon.png"
|
||||||
width={26}
|
|
||||||
height={22}
|
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,17 @@
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
|
|
||||||
export default function More(props: {dict: Record<string, string>, lang: string[]}) {
|
export default function More(props: {dict: Record<string, string>, lang: string[]}) {
|
||||||
|
const { dict } = props
|
||||||
|
return <>
|
||||||
|
<Link href="#contact">
|
||||||
|
|
||||||
const { dict, lang } = props
|
|
||||||
console.log('dict', dict)
|
|
||||||
return <Link href="#contact">
|
|
||||||
<div className="flex flex-col justify-center items-center
|
<div className="flex flex-col justify-center items-center
|
||||||
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px]"
|
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%)' }}>
|
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
|
||||||
<div>{ dict.seeMore }</div>
|
<div>{ dict.seeMore }</div>
|
||||||
<div>{ dict.contactUs1 }</div>
|
<div>{ dict.contactUs1 }</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
</>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -41,16 +41,20 @@ export default async function Home (props: PropsType) {
|
||||||
{ img: '/home/case_3.png' },
|
{ img: '/home/case_3.png' },
|
||||||
]
|
]
|
||||||
return <>
|
return <>
|
||||||
<div className='w-full h-full flex flex-col items-center'>
|
<div className='w-full flex flex-col items-center'>
|
||||||
<Header dict={dict} lang={lang}/>
|
<Header dict={dict} lang={lang} />
|
||||||
<div className="min-w-[1440px] max-w-[1920px] relative container flex-1" style={{ overflowY: "auto"}}>
|
<div className="w-[1440px] relative pt-[80px]"
|
||||||
|
>
|
||||||
<div className='main'>
|
<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=""
|
||||||
|
|
||||||
<section id="home">
|
/>
|
||||||
<div className="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[72px]">
|
|
||||||
<div
|
<div
|
||||||
className="text-[46px] leading-[62px] w-[585px] text-center"
|
className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px]"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="font-black"
|
className="font-black"
|
||||||
|
|
@ -73,111 +77,99 @@ export default async function Home (props: PropsType) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div className="w-full h-[428px] relative" id="service">
|
||||||
<section id="service">
|
|
||||||
<div className="w-full h-[428px] relative">
|
|
||||||
<img
|
<img
|
||||||
|
className="absolute left-[-214px] w-[969px] h-[428px]"
|
||||||
src="/home/img_bg2.png"
|
src="/home/img_bg2.png"
|
||||||
width={745}
|
|
||||||
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-[95px] text-[#333333] text-right font-semibold">
|
||||||
{ dict.customized }
|
{ dict.customized }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
<div className="w-full h-[403px] relative">
|
<div className="w-full h-[403px] relative">
|
||||||
<img
|
<img
|
||||||
className="absolute right-[0]"
|
className="absolute right-[-100px] w-[888px] h-[403px]"
|
||||||
src="/home/img_AB.png"
|
src="/home/img_AB.png"
|
||||||
width={787}
|
|
||||||
height={403}
|
|
||||||
alt=""
|
alt=""
|
||||||
|
|
||||||
/>
|
/>
|
||||||
<div className="absolute w-[662px] text-[32px] top-[160px] left-[165px] text-[#333333] text-left font-semibold">
|
<div className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#333333] text-left font-semibold">
|
||||||
{ dict.ABTesting}
|
{ dict.ABTesting}
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute w-[680px] text-[32px] top-[204px] left-[165px] text-[#333333] text-left font-semibold">
|
<div className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">
|
||||||
{ dict.iterateGameplay }
|
{ dict.iterateGameplay }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full h-[392px] relative">
|
<div className="w-full h-[392px] relative">
|
||||||
<img
|
<img
|
||||||
className="absolute"
|
className="absolute w-[731px] h-[392px] left-[-33px]"
|
||||||
src="/home/img_mutilan.png"
|
src="/home/img_mutilan.png"
|
||||||
width={698}
|
|
||||||
height={392}
|
|
||||||
alt=""
|
alt=""
|
||||||
|
|
||||||
/>
|
/>
|
||||||
<div className="absolute w-[520px] text-[32px] top-[197px] right-[115px] text-[#333333] text-right font-semibold">
|
<div className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#333333] text-right font-semibold">
|
||||||
{ dict.multiLanguage }
|
{ dict.multiLanguage }
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute w-[510px] text-[32px] top-[242px] right-[115px] text-[#333333] text-right font-semibold">
|
<div className="absolute w-[520px] text-[32px] top-[242px] right-[95px] text-[#333333] text-right font-semibold">
|
||||||
{ dict.breakingGeographical }
|
{ dict.breakingGeographical }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full h-[317px] relative mt-[83px]">
|
<div className="w-full h-[317px] relative mt-[83px]">
|
||||||
<img
|
<img
|
||||||
className="absolute right-[0]"
|
className="absolute right-0 w-[742px] h-[317px]"
|
||||||
src="/home/img_Omnichannel.png"
|
src="/home/img_Omnichannel.png"
|
||||||
width={742}
|
|
||||||
height={317}
|
|
||||||
alt=""
|
alt=""
|
||||||
|
|
||||||
/>
|
/>
|
||||||
<div className="absolute w-[680px] text-[32px] top-[124px] left-[165px] text-[#333333] text-left font-semibold">
|
<div className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#333333] text-left font-semibold">
|
||||||
{ dict.allChannel }
|
{ dict.allChannel }
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute w-[680px] text-[32px] top-[169px] left-[165px] text-[#333333] text-left font-semibold">
|
<div className="absolute w-[680px] text-[32px] top-[169px] left-[105px] text-[#333333] text-left font-semibold">
|
||||||
{ dict.expandInfluence }
|
{ dict.expandInfluence }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<section id="case">
|
|
||||||
<div className="w-full h-[317px] relative mt-[83px]">
|
<div className="w-full h-[317px] relative mt-[83px]">
|
||||||
<img
|
<img
|
||||||
className="absolute"
|
className="absolute left-[-329px] w-[1250px] h-[357px]"
|
||||||
src="/home/img_3.png"
|
src="/home/img_3.png"
|
||||||
width={881}
|
|
||||||
height={357}
|
|
||||||
alt=""
|
alt=""
|
||||||
|
|
||||||
/>
|
/>
|
||||||
<div className="absolute w-[691px] text-[32px] top-[100px] right-[115px] text-[#333333] text-right font-semibold">
|
<div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">
|
||||||
{ dict.lightweightDeployment }
|
{ dict.lightweightDeployment }
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute w-[712px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold">
|
|
||||||
|
<div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">
|
||||||
{ dict.simplifyProcess }
|
{ dict.simplifyProcess }
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
|
||||||
|
|
||||||
<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={{
|
background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
|
||||||
background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
|
backgroundClip: 'text',
|
||||||
backgroundClip: 'text',
|
WebkitTextFillColor: 'transparent'
|
||||||
WebkitTextFillColor: 'transparent'
|
}}
|
||||||
}}
|
>{ 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>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<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-[60px]">
|
||||||
<div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] h-full'>
|
<div className='hover:scale-[1.25] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]'>
|
||||||
<img
|
<img
|
||||||
className="rounded-[60px] w-full
|
className="rounded-[60px] w-full
|
||||||
transition ease-in-out duration-300"
|
transition ease-in-out duration-300 w-[280px] h-[280px]"
|
||||||
src={item.img}
|
src={item.img}
|
||||||
width={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
|
||||||
|
|
@ -187,18 +179,19 @@ export default async function Home (props: PropsType) {
|
||||||
{dict.clickToPlay}
|
{dict.clickToPlay}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
<div className="flex flex-col justify-center items-center
|
<div className="flex flex-col justify-center items-center
|
||||||
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px]"
|
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%)', width: 'calc(25% - 37.5px)' }}>
|
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
|
||||||
<More dict={dict} lang={lang} />
|
<More dict={dict} lang={lang} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section id="contact">
|
|
||||||
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]">
|
<div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">
|
||||||
<div
|
<div
|
||||||
className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
|
className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -212,11 +205,10 @@ export default async function Home (props: PropsType) {
|
||||||
<Form />
|
<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 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' }}
|
style={{ borderBottom: '1px solid #D8D8D8' }}
|
||||||
>
|
>
|
||||||
{ dict.businessCooperation }info@soyootech.com
|
{ dict.businessCooperation }info@soyootech.com
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
<div>
|
<div>
|
||||||
<Footer dict={dict} />
|
<Footer dict={dict} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,111 +1,146 @@
|
||||||
'use client'
|
'use client'
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
type NavType = {
|
type NavType = {
|
||||||
name: string;
|
name: string;
|
||||||
href: string;
|
href: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
|
|
||||||
const { dict, lang } = props
|
|
||||||
const [show, setShow] = useState(false)
|
|
||||||
|
|
||||||
return <>
|
export default function Header(props: { dict: Record<string, string>, lang: string[] }) {
|
||||||
<div className="relative">
|
|
||||||
<div className="flex items-center w-[136px] h-[28px] bg-[#EEF1F6]
|
|
||||||
border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer"
|
|
||||||
onClick={() => setShow(!show)}>
|
|
||||||
<img
|
|
||||||
src="/common/earth.png"
|
|
||||||
width={16.5}
|
|
||||||
height={16.5}
|
|
||||||
alt="logo"
|
|
||||||
/>
|
|
||||||
<div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{ dict?.lang }</div>
|
|
||||||
<img
|
|
||||||
className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'}`}
|
|
||||||
src="/common/arrow.png"
|
|
||||||
width={10}
|
|
||||||
height={5}
|
|
||||||
alt="logo"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{
|
|
||||||
|
|
||||||
<div className={`absolute ${!show && 'hidden'} left-0 top-[30px] z-[1000]`} onClick={() => setShow(false)}>
|
|
||||||
<Link href={lang[0] === 'zh' ? '/en' : '/'}>
|
|
||||||
<div className={`w-[136px] h-[28px] leading-[28px]
|
|
||||||
bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}>
|
|
||||||
<div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
<div className={`fixed ${!show && 'hidden'} w-[100vw] h-[100vh] left-0 top-0 bg-[#000000] opacity-0`} onClick={() => setShow(false)}>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
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 navList: NavType[] = [
|
const [show, setShow] = useState(false)
|
||||||
|
const [hash, setHash] = useState('#home')
|
||||||
|
useEffect(() => {
|
||||||
|
const designWidth = 1440;
|
||||||
|
const deviceWidth = document.documentElement.clientWidth
|
||||||
|
let scale = 1
|
||||||
|
console.log('designWidth', deviceWidth)
|
||||||
|
if (deviceWidth <= 1440) {
|
||||||
|
scale = deviceWidth / designWidth;
|
||||||
|
}
|
||||||
|
console.log('scale', scale)
|
||||||
|
document.documentElement.style.fontSize = `${scale * 14.4}px`;
|
||||||
|
switch (hash) {
|
||||||
|
case '#home':
|
||||||
|
const home = document.getElementById('home')
|
||||||
|
document.documentElement.scrollTo({
|
||||||
|
top: home!.offsetTop - 80,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case '#service':
|
||||||
|
const service = document.getElementById('service')
|
||||||
|
document.documentElement.scrollTo({
|
||||||
|
top: service!.offsetTop - 80,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case '#case':
|
||||||
|
const caseDom = document.getElementById('case')
|
||||||
|
document.documentElement.scrollTo({
|
||||||
|
top: caseDom!.offsetTop - 110,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case '#contact':
|
||||||
|
const contact = document.getElementById('contact')
|
||||||
|
document.documentElement.scrollTo({
|
||||||
|
top: contact!.offsetTop - 80,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}, [hash])
|
||||||
|
|
||||||
|
const navList: NavType[] = [
|
||||||
|
{
|
||||||
|
name: dict.home,
|
||||||
|
href: "#home"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: dict.services,
|
||||||
|
href: "#service"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: dict.caseGallery,
|
||||||
|
href: "#case"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: dict.contactUs,
|
||||||
|
href: "#contact"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
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`}
|
||||||
|
style={{ borderBottom: '1px solid #D8D8D8' }}
|
||||||
|
>
|
||||||
|
<div className="cursor-pointer">
|
||||||
|
<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]"}
|
||||||
|
>
|
||||||
{
|
{
|
||||||
name: dict.home,
|
navList.map((item: NavType) => (
|
||||||
href: "#home"
|
<div onClick={() => setHash(item.href)} key={item.name}>
|
||||||
},
|
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
|
||||||
{
|
<div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
|
||||||
name: dict.services,
|
{
|
||||||
href: "#service"
|
activeTab === item.name ?
|
||||||
},
|
<img src="/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> :
|
||||||
{
|
<div className="h-[8px]"></div>
|
||||||
name: dict.caseGallery,
|
}
|
||||||
href: "#case"
|
</div>
|
||||||
},
|
</div>
|
||||||
{
|
))
|
||||||
name: dict.contactUs,
|
}
|
||||||
href: "#contact "
|
</div>
|
||||||
},
|
<div className="w-[129px]">
|
||||||
]
|
<div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6]
|
||||||
return (<>
|
border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer"
|
||||||
<div className={`flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8]
|
onClick={() => setShow(!show)}>
|
||||||
bg-white z-[999] min-w-[1440px] max-w-[1920px] container`}
|
|
||||||
style={{ borderBottom: '1px solid #D8D8D8' }}
|
|
||||||
>
|
|
||||||
<Link href="#home">
|
|
||||||
<img
|
<img
|
||||||
src="/common/logo.png"
|
src="/common/earth.png"
|
||||||
width={180}
|
className="w-[16.5px] h-[16.5px]"
|
||||||
height={47}
|
alt="logo"
|
||||||
|
/>
|
||||||
|
<div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{dict?.lang}</div>
|
||||||
|
<img
|
||||||
|
className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'} w-[10px] h-[5px]`}
|
||||||
|
src="/common/arrow.png"
|
||||||
alt="logo"
|
alt="logo"
|
||||||
/>
|
/>
|
||||||
</Link>
|
|
||||||
<div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
navList.map((item: NavType) => (
|
|
||||||
<Link href={item.href} key={item.name}>
|
|
||||||
<div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
|
|
||||||
<div className="my-[10px] w-[144px] text-[18px]">{ item.name }</div>
|
|
||||||
{
|
|
||||||
activeTab === item.name ?
|
|
||||||
<img src="/common/tab_checked.png" width={144} height={8} alt="" /> :
|
|
||||||
<div className="h-[8px]"></div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="w-[129px] mr-[35px]">
|
{
|
||||||
<SplitButton dict={dict} lang={lang} />
|
|
||||||
</div>
|
<div className={`absolute ${!show && 'hidden'} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}>
|
||||||
</div>
|
<Link href={lang[0] === 'zh' ? '/en' : '/'}>
|
||||||
</>
|
<div 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`}>
|
||||||
|
<div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</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="h-[80px] container"></div> */}
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -1,16 +1,12 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
html,body {
|
|
||||||
height: 100%;
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
.main::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
.main {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,7 @@
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import localFont from "next/font/local";
|
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ReactElement, ReactNode } from "react";
|
import { ReactElement, ReactNode } from "react";
|
||||||
|
|
||||||
const geistSans = localFont({
|
|
||||||
src: "./fonts/GeistVF.woff",
|
|
||||||
variable: "--font-geist-sans",
|
|
||||||
weight: "100 900",
|
|
||||||
});
|
|
||||||
const geistMono = localFont({
|
|
||||||
src: "./fonts/GeistMonoVF.woff",
|
|
||||||
variable: "--font-geist-mono",
|
|
||||||
weight: "100 900",
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "北京索游科技",
|
title: "北京索游科技",
|
||||||
|
|
@ -23,7 +12,6 @@ function RootLayout({ children }:{ children: ReactNode } ): ReactElement {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue