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

update: 调整样式

main
icefire 2024-10-20 22:44:08 +08:00
parent 3dcabcef62
commit 2d3e8fffc7
9 changed files with 160 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"
},

10
postcss.config.mjs
View File

@ -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,
},
},
};

BIN
public/home/img_header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 424 KiB

After

Width:  |  Height:  |  Size: 418 KiB

16
src/app/[[...lang]]/components/more.tsx 100644
View File

@ -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>
}

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

@ -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>

2
src/app/components/footer.tsx
View File

@ -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>

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

@ -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>
</>
)
}

24
src/app/globals.css
View File

@ -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);
}
}