update: 调整样式
parent
3dcabcef62
commit
2d3e8fffc7
|
|
@ -10,13 +10,14 @@
|
|||
"dependencies": {
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@formatjs/intl-localematcher": "^0.5.5",
|
||||
"@mui/material": "^6.1.3",
|
||||
"i18next": "^23.15.2",
|
||||
"negotiator": "^0.6.3",
|
||||
"next": "14.2.15",
|
||||
"next-i18next": "^15.3.1",
|
||||
"next-intl": "^3.21.1",
|
||||
"postcss-pxtorem": "^6.1.0",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-i18next": "^15.0.3"
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
|
|
@ -475,6 +476,56 @@
|
|||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@formatjs/ecma402-abstract": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.0.tgz",
|
||||
"integrity": "sha512-IpM+ev1E4QLtstniOE29W1rqH9eTdx5hQdNL8pzrflMj/gogfaoONZqL83LUeQScHAvyMbpqP5C9MzNf+fFwhQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@formatjs/fast-memoize": "2.2.1",
|
||||
"@formatjs/intl-localematcher": "0.5.5",
|
||||
"tslib": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@formatjs/fast-memoize": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/@formatjs/fast-memoize/-/fast-memoize-2.2.1.tgz",
|
||||
"integrity": "sha512-XS2RcOSyWxmUB7BUjj3mlPH0exsUzlf6QfhhijgI941WaJhVxXQ6mEWkdUFIdnKi3TuTYxRdelsgv3mjieIGIA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@formatjs/icu-messageformat-parser": {
|
||||
"version": "2.7.10",
|
||||
"resolved": "https://registry.npmmirror.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.10.tgz",
|
||||
"integrity": "sha512-wlQfqCZ7PURkUNL2+8VTEFavPovtADU/isSKLFvDbdFmV7QPZIYqFMkhklaDYgMyLSBJa/h2MVQ2aFvoEJhxgg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@formatjs/ecma402-abstract": "2.2.0",
|
||||
"@formatjs/icu-skeleton-parser": "1.8.4",
|
||||
"tslib": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@formatjs/icu-skeleton-parser": {
|
||||
"version": "1.8.4",
|
||||
"resolved": "https://registry.npmmirror.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.4.tgz",
|
||||
"integrity": "sha512-LMQ1+Wk1QSzU4zpd5aSu7+w5oeYhupRwZnMQckLPRYhSjf2/8JWQ882BauY9NyHxs5igpuQIXZDgfkaH3PoATg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@formatjs/ecma402-abstract": "2.2.0",
|
||||
"tslib": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@formatjs/intl-localematcher": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.5.tgz",
|
||||
"integrity": "sha512-t5tOGMgZ/i5+ALl2/offNqAQq/lfUnKLEw0mXQI4N4bqpedhrSE+fyKLpwnd22sK0dif6AV+ufQcTsKShB9J1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.13.0",
|
||||
"resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
|
||||
|
|
@ -1083,16 +1134,6 @@
|
|||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.5",
|
||||
"resolved": "https://registry.npmmirror.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
|
||||
"integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json5": {
|
||||
"version": "0.0.29",
|
||||
"resolved": "https://registry.npmmirror.com/@types/json5/-/json5-0.0.29.tgz",
|
||||
|
|
@ -1928,17 +1969,6 @@
|
|||
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.38.1",
|
||||
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.38.1.tgz",
|
||||
"integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/cosmiconfig": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
|
||||
|
|
@ -3362,44 +3392,6 @@
|
|||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/html-parse-stringify": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
|
||||
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"void-elements": "3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/i18next": {
|
||||
"version": "23.15.2",
|
||||
"resolved": "https://registry.npmmirror.com/i18next/-/i18next-23.15.2.tgz",
|
||||
"integrity": "sha512-zcPSWzCvw6uKnuYHIqs4W7hTuB9e3AFcSdZgvCWoPXIZsBjBd4djN2/2uOHIB+1DFFkQnMBXvhNg7J3WyCuywQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com/i18next.html"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.2"
|
||||
}
|
||||
},
|
||||
"node_modules/i18next-fs-backend": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/i18next-fs-backend/-/i18next-fs-backend-2.3.2.tgz",
|
||||
"integrity": "sha512-LIwUlkqDZnUI8lnUxBnEj8K/FrHQTT/Sc+1rvDm9E8YvvY5YxzoEAASNx+W5M9DfD5s77lI5vSAFWeTp26B/3Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.3.2.tgz",
|
||||
|
|
@ -3470,6 +3462,18 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/intl-messageformat": {
|
||||
"version": "10.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/intl-messageformat/-/intl-messageformat-10.7.0.tgz",
|
||||
"integrity": "sha512-2P06M9jFTqJnEQzE072VGPjbAx6ZG1YysgopAwc8ui0ajSjtwX1MeQ6bXFXIzKcNENJTizKkcJIcZ0zlpl1zSg==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"@formatjs/ecma402-abstract": "2.2.0",
|
||||
"@formatjs/fast-memoize": "2.2.1",
|
||||
"@formatjs/icu-messageformat-parser": "2.7.10",
|
||||
"tslib": "^2.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-arguments": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.1.1.tgz",
|
||||
|
|
@ -4249,6 +4253,15 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/negotiator": {
|
||||
"version": "0.6.4",
|
||||
"resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.4.tgz",
|
||||
"integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/next": {
|
||||
"version": "14.2.15",
|
||||
"resolved": "https://registry.npmmirror.com/next/-/next-14.2.15.tgz",
|
||||
|
|
@ -4299,40 +4312,25 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/next-i18next": {
|
||||
"version": "15.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/next-i18next/-/next-i18next-15.3.1.tgz",
|
||||
"integrity": "sha512-+pa2pZJb7B6k5PKW3TLVMmAodqkNaOBWVYlpWX56mgcEJz0UMW+MKSdKM9Z72CHp6Bp48g7OWwDnLqxXNp/84w==",
|
||||
"node_modules/next-intl": {
|
||||
"version": "3.21.1",
|
||||
"resolved": "https://registry.npmmirror.com/next-intl/-/next-intl-3.21.1.tgz",
|
||||
"integrity": "sha512-hQm4Wgq5i1lfOHAWmXBVl5d2/XAeddcjsrUmjotXEESzPSvW5j2t0Pr8AV8WorTILgqU748aXuenBhz5P78tdw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com/i18next.html"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://locize.com"
|
||||
"url": "https://github.com/sponsors/amannn"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.2",
|
||||
"@types/hoist-non-react-statics": "^3.3.4",
|
||||
"core-js": "^3",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"i18next-fs-backend": "^2.3.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
"@formatjs/intl-localematcher": "^0.5.4",
|
||||
"negotiator": "^0.6.3",
|
||||
"use-intl": "^3.21.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"i18next": ">= 23.7.13",
|
||||
"next": ">= 12.0.0",
|
||||
"react": ">= 17.0.2",
|
||||
"react-i18next": ">= 13.5.0"
|
||||
"next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/next/node_modules/postcss": {
|
||||
|
|
@ -4723,7 +4721,6 @@
|
|||
"version": "8.4.47",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.47.tgz",
|
||||
"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -4861,6 +4858,15 @@
|
|||
"postcss": "^8.2.14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-pxtorem": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
|
||||
"integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-selector-parser": {
|
||||
"version": "6.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
|
||||
|
|
@ -4959,28 +4965,6 @@
|
|||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-i18next": {
|
||||
"version": "15.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-15.0.3.tgz",
|
||||
"integrity": "sha512-BlO1P+oLKjjIxDBQ0GkAIMacgjfMbnvops+3Y5nZXF7UJ99v4KCWr0Na1azJXC8AMiNWp4kgUcFCJM7U9ZsUDg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.25.0",
|
||||
"html-parse-stringify": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"i18next": ">= 23.2.3",
|
||||
"react": ">= 16.8.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
|
||||
|
|
@ -5957,6 +5941,19 @@
|
|||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-intl": {
|
||||
"version": "3.21.1",
|
||||
"resolved": "https://registry.npmmirror.com/use-intl/-/use-intl-3.21.1.tgz",
|
||||
"integrity": "sha512-52kYgcydYkG9SX0ZZGt7W6WD2Va01hwe15bDgkXuaTdSxrF9fDu6hHTV5DxIuSmSSf/FEcBo/nodpw3ZhY31Lw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@formatjs/fast-memoize": "^2.2.0",
|
||||
"intl-messageformat": "^10.5.14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
|
@ -5964,15 +5961,6 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/void-elements": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz",
|
||||
"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"negotiator": "^0.6.3",
|
||||
"next": "14.2.15",
|
||||
"next-intl": "^3.21.1",
|
||||
"postcss-pxtorem": "^6.1.0",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
import postcssPxtorem from 'postcss-pxtorem';
|
||||
|
||||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
'postcss-pxtorem': {
|
||||
rootValue: 20,
|
||||
unitPrecision: 5,
|
||||
propList: ['*'],
|
||||
selectorBlackList: [],
|
||||
minPixelValue: 0,
|
||||
mediaQuery: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 424 KiB After Width: | Height: | Size: 418 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
import Link from "next/link"
|
||||
|
||||
export default function More(props: {dict: Record<string, string>, lang: string[]}) {
|
||||
|
||||
const { dict, lang } = props
|
||||
console.log('dict', dict)
|
||||
return <Link href="#contact">
|
||||
<div className="flex flex-col justify-center items-center
|
||||
text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px]"
|
||||
style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
|
||||
<div>{ dict.seeMore }</div>
|
||||
<div>{ dict.contactUs1 }</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ import { getDictionary } from '@/dictionaries';
|
|||
import Form from "./components/form";
|
||||
import Header from "@/app/components/header";
|
||||
import Footer from "@/app/components/footer";
|
||||
import More from './components/more';
|
||||
|
||||
type CaseType = {
|
||||
img: string
|
||||
|
|
@ -40,11 +41,11 @@ export default async function Home (props: PropsType) {
|
|||
{ img: '/home/case_3.png' },
|
||||
]
|
||||
return <>
|
||||
<div className='w-full'>
|
||||
<div className="w-[1440px] relative container"
|
||||
>
|
||||
<Header dict={dict} lang={lang} />
|
||||
<div className='main' style={{height: 'calc(100vh - 82px)', overflowY: "auto"}}>
|
||||
<div className='w-full h-full flex flex-col items-center'>
|
||||
<Header dict={dict} lang={lang}/>
|
||||
<div className="min-w-[1440px] max-w-[1920px] relative container flex-1" style={{ overflowY: "auto"}}>
|
||||
|
||||
<div className='main'>
|
||||
|
||||
<section id="home">
|
||||
<div className="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[72px]">
|
||||
|
|
@ -56,7 +57,8 @@ export default async function Home (props: PropsType) {
|
|||
style={{
|
||||
'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
|
||||
'backgroundClip': 'text',
|
||||
'WebkitTextFillColor': 'transparent'
|
||||
'WebkitTextFillColor': 'transparent',
|
||||
'backgroundSize': 'contain'
|
||||
}}>
|
||||
{dict.FocusingOnPlayableAds}
|
||||
</div>
|
||||
|
|
@ -161,7 +163,7 @@ export default async function Home (props: PropsType) {
|
|||
WebkitTextFillColor: 'transparent'
|
||||
}}
|
||||
>{ dict.caseGallery }</div>
|
||||
<div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div>
|
||||
{/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -191,8 +193,7 @@ export default async function Home (props: PropsType) {
|
|||
<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>{ dict.seeMore }</div>
|
||||
<div>{ dict.contactUs1 }</div>
|
||||
<More dict={dict} lang={lang} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default function Footer(props: {dict: Record<string, string>}) {
|
|||
height={151}
|
||||
alt=""
|
||||
/>
|
||||
<div className="text-[#888888] text-[15px]">{ dict.addWeChat }</div>
|
||||
<div className="text-[#888888] text-[15px] text-center">{ dict.addWeChat }</div>
|
||||
</div>
|
||||
<div >
|
||||
<div className="text-[#AFB2B9] text-[17px] font-medium mb-[45px]">{ dict.emailContact }</div>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
|
|||
const [show, setShow] = useState(false)
|
||||
|
||||
return <>
|
||||
<div className="">
|
||||
<div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6]
|
||||
<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
|
||||
|
|
@ -36,16 +36,18 @@ function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
|
|||
</div>
|
||||
{
|
||||
|
||||
<div className={`absolute ${!show && 'hidden'} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[1000]`} onClick={() => setShow(false)}>
|
||||
<div className={`absolute ${!show && 'hidden'} left-0 top-[30px] z-[1000]`} onClick={() => setShow(false)}>
|
||||
<Link href={lang[0] === 'zh' ? '/en' : '/'}>
|
||||
<div className={`absolute right-[20px] top-[68px] w-[129px] h-[28px] leading-[28px]
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
|
|
@ -71,7 +73,8 @@ export default function Header(props: {dict: Record<string, string>, lang: strin
|
|||
},
|
||||
]
|
||||
return (<>
|
||||
<div className={"flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8] absolute w-full bg-white z-[999]"}
|
||||
<div className={`flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8]
|
||||
bg-white z-[999] min-w-[1440px] max-w-[1920px] container`}
|
||||
style={{ borderBottom: '1px solid #D8D8D8' }}
|
||||
>
|
||||
<Link href="#home">
|
||||
|
|
@ -99,11 +102,10 @@ export default function Header(props: {dict: Record<string, string>, lang: strin
|
|||
))
|
||||
}
|
||||
</div>
|
||||
<div className="w-[129px]">
|
||||
<div className="w-[129px] mr-[35px]">
|
||||
<SplitButton dict={dict} lang={lang} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[80px]"></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,body {
|
||||
height: 100%;
|
||||
}
|
||||
.main::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -11,22 +13,4 @@
|
|||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
transform-origin: top left; /* 设置变换原点为左上角 */
|
||||
}
|
||||
|
||||
/* 当屏幕宽度在1440px到1920px之间时 */
|
||||
@media screen and (min-width: 1440px) and (max-width: 1920px) {
|
||||
.container {
|
||||
transform: scale(1.333); /* 1440px宽度的1.333倍是1920px */
|
||||
left: calc(50% - 960px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 当屏幕宽度大于或等于1920px时 */
|
||||
@media screen and (min-width: 1920px) {
|
||||
.container {
|
||||
transform: scale(1.333); /* 保持与1920px宽度的屏幕相同的缩放比例 */
|
||||
left: calc(50% - 960px);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue