update: 调整样式

package-lock.json

@@ -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-dom": "^18"
-        "react-i18next": "^15.0.3"
       },
       "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": {
+    "node_modules/next-intl": {
-      "version": "15.3.1",
+      "version": "3.21.1",
-      "resolved": "https://registry.npmmirror.com/next-i18next/-/next-i18next-15.3.1.tgz",
+      "resolved": "https://registry.npmmirror.com/next-intl/-/next-intl-3.21.1.tgz",
-      "integrity": "sha512-+pa2pZJb7B6k5PKW3TLVMmAodqkNaOBWVYlpWX56mgcEJz0UMW+MKSdKM9Z72CHp6Bp48g7OWwDnLqxXNp/84w==",
+      "integrity": "sha512-hQm4Wgq5i1lfOHAWmXBVl5d2/XAeddcjsrUmjotXEESzPSvW5j2t0Pr8AV8WorTILgqU748aXuenBhz5P78tdw==",
       "funding": [
         {
           "type": "individual",
-          "url": "https://locize.com/i18next.html"
+          "url": "https://github.com/sponsors/amannn"
-        },
-        {
-          "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"
         }
       ],
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
+        "@formatjs/intl-localematcher": "^0.5.4",
-        "@types/hoist-non-react-statics": "^3.3.4",
+        "negotiator": "^0.6.3",
-        "core-js": "^3",
+        "use-intl": "^3.21.1"
-        "hoist-non-react-statics": "^3.3.2",
-        "i18next-fs-backend": "^2.3.2"
-      },
-      "engines": {
-        "node": ">=14"
       },
       "peerDependencies": {
-        "i18next": ">= 23.7.13",
+        "next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
-        "next": ">= 12.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-        "react": ">= 17.0.2",
-        "react-i18next": ">= 13.5.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",

package.json

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

postcss.config.mjs

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

src/app/[[...lang]]/components/more.tsx

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

src/app/[[...lang]]/page.tsx

@@ -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-full h-full flex flex-col items-center'>
-            <div className="w-[1440px] relative container"
+            <Header dict={dict} lang={lang}/>
-            >
+            <div className="min-w-[1440px] max-w-[1920px] relative container flex-1" style={{ overflowY: "auto"}}>
-                <Header dict={dict} lang={lang} />
+                
-                <div className='main' style={{height: 'calc(100vh - 82px)', 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> 
+                            <More dict={dict} lang={lang} />
-                            <div>{ dict.contactUs1 }</div>
                         </div>
                     </div>  
           

src/app/components/footer.tsx

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

src/app/components/header.tsx

@@ -15,8 +15,8 @@ function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
   const [show, setShow] = useState(false)
   
     return <>
-    <div className="">
+    <div className="relative">
-        <div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6] 
+        <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>
       </>
     )
 }

src/app/globals.css

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