Merge remote-tracking branch 'origin/style'

.eslintrc.json

@@ -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"，取决于你希望是警告还是错误
+  }
 }

package.json

@@ -13,6 +13,7 @@
     "@emotion/styled": "^11.13.0",
     "@formatjs/intl-localematcher": "^0.5.5",
     "@mui/material": "^6.1.3",
+    "lib-flexible": "^0.3.2",
     "negotiator": "^0.6.3",
     "next": "14.2.15",
     "next-intl": "^3.21.1",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@mui/material':
         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)
+      lib-flexible:
+        specifier: ^0.3.2
+        version: 0.3.2
       negotiator:
         specifier: ^0.6.3
         version: 0.6.3
@@ -29,6 +32,9 @@ importers:
       next-intl:
         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)
+      postcss-pxtorem:
+        specifier: ^6.1.0
+        version: 6.1.0(postcss@8.4.47)
       react:
         specifier: ^18
         version: 18.3.1
@@ -1279,6 +1285,9 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lib-flexible@0.3.2:
+    resolution: {integrity: sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==}
+
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -1510,6 +1519,11 @@ packages:
     peerDependencies:
       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:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
@@ -3354,6 +3368,8 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lib-flexible@0.3.2: {}
+
   lilconfig@2.1.0: {}
 
   lilconfig@3.1.2: {}
@@ -3568,6 +3584,10 @@ snapshots:
       postcss: 8.4.47
       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:
     dependencies:
       cssesc: 3.0.0

postcss.config.mjs

@@ -5,13 +5,13 @@ const config = {
   plugins: {
     tailwindcss: {},
     '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`
-    },
+    }
   },
 };
 

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

@@ -26,9 +26,8 @@ export default function Form() {
            >
                 <div className="text-[#fff] text-[24px] font-semibold">提交</div>
                 <img
+                    className="w-[26px] h-[22px]"
                     src="/home/submit_icon.png"
-                    width={26}
-                    height={22}
                     alt=""
                 />
 

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

@@ -1,16 +1,17 @@
 import Link from "next/link"
 
 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 
-        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%)' }}>
             <div>{ dict.seeMore }</div> 
             <div>{ dict.contactUs1 }</div>
         </div>
     </Link>
+        </>
     
 }

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

@@ -41,16 +41,20 @@ export default async function Home (props: PropsType) {
         { img: '/home/case_3.png' },
     ]
     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="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 
-                            className="text-[46px] leading-[62px] w-[585px] text-center"
+                            className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px]"
                         >
                             <div 
                             className="font-black"
@@ -73,88 +77,78 @@ export default async function Home (props: PropsType) {
                             </div>
                         </div>
                     </div>
-                </section>
+                    <div className="w-full h-[428px] relative" id="service">
-                <section id="service">
-                    <div className="w-full h-[428px] relative">
                         <img
+                            className="absolute left-[-214px] w-[969px] h-[428px]"
                             src="/home/img_bg2.png"
-                            width={745}
-                            height={428}
                             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 }
                         </div>
                     </div>
-                </section> 
+                
                     <div className="w-full h-[403px] relative">
                         <img
-                            className="absolute right-[0]"
+                            className="absolute right-[-100px] w-[888px] h-[403px]"
                             src="/home/img_AB.png"
-                            width={787}
-                            height={403}
                             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}
                         </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 }
                         </div>
                     </div>
                     <div className="w-full h-[392px] relative">
                         <img
-                            className="absolute"
+                            className="absolute w-[731px] h-[392px] left-[-33px]"
                             src="/home/img_mutilan.png"
-                            width={698}
-                            height={392}
                             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 }
                         </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 }
                         </div>
                     </div>
                     <div className="w-full h-[317px] relative mt-[83px]">
                         <img
-                            className="absolute right-[0]"
+                            className="absolute right-0 w-[742px] h-[317px]"
                             src="/home/img_Omnichannel.png"
-                            width={742}
-                            height={317}
                             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 }
                         </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 }
                         </div>
                     </div>      
-                    <section id="case"> 
+                
                     <div className="w-full h-[317px] relative mt-[83px]">
                         <img
-                            className="absolute"
+                            className="absolute left-[-329px] w-[1250px] h-[357px]"
                             src="/home/img_3.png"
-                            width={881}
-                            height={357}
                             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 }
                         </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 }
                         </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 
                                 className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
                                 style={{
@@ -164,20 +158,18 @@ export default async function Home (props: PropsType) {
                                 }}
                             >{ dict.caseGallery }</div>
                             {/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
+                                
                         </div>
-                    </section>
                     
                     <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-[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
                                             className="rounded-[60px] w-full
-                                            transition ease-in-out duration-300"
+                                            transition ease-in-out duration-300 w-[280px] h-[280px]"
                                             src={item.img}
-                                            width={300}
-                                            height={300}
                                             alt=""
                                         />
                                         <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}
                                         </div>
                                     </div>
+                                
                                 </div>
                             })
                         }
                         <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} />
                         </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 
                             className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
                             style={{
@@ -216,7 +209,6 @@ export default async function Home (props: PropsType) {
                     >
                     { dict.businessCooperation }info@soyootech.com
                     </div>
-                </section>
                 <div>
                     <Footer dict={dict} />
                 </div>

src/app/components/header.tsx

@@ -1,6 +1,6 @@
 'use client'
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 
 
@@ -10,50 +10,57 @@ type NavType = {
   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 [activeTab, setActiveTab] = useState(dict.home)
+  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,
@@ -69,43 +76,71 @@ export default function Header(props: {dict: Record<string, string>, lang: strin
     },
     {
       name: dict.contactUs,
-          href: "#contact "
+      href: "#contact"
     },
   ]
   return (<>
-        <div className={`flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8]
+    <div className={`flex items-center px-[40px] h-[80px] border-b-1 border-solid 
-        bg-white z-[999] min-w-[1440px] max-w-[1920px] container`}
+        border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] justify-between`}
       style={{ borderBottom: '1px solid #D8D8D8' }}
     >
-          <Link href="#home">
+      <div className="cursor-pointer">
         <img
+          className="w-[180px] h-[47px]"
           src="/common/logo.png"
-              width={180}
-              height={47}
           alt="logo"
+          onClick={() => setHash('#home')}
         />
-          </Link>
+      </div>
       <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
       >
         {
           navList.map((item: NavType) => (
-                  <Link href={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="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" width={144} height={8} alt="" /> : 
+                    <img src="/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> :
                     <div className="h-[8px]"></div>
                 }
               </div>
-                  </Link>
+            </div>
           ))
         }
       </div>
-          <div className="w-[129px] mr-[35px]">
+      <div className="w-[129px]">
-            <SplitButton dict={dict} lang={lang} />
+          <div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6] 
+        border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer"
+            onClick={() => setShow(!show)}>
+            <img
+              src="/common/earth.png"
+              className="w-[16.5px] h-[16.5px]"
+              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"
+            />
+          </div>
+          {
+
+            <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' : '/'}>
+                <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> */}
   </>
   )
 }

src/app/globals.css

@@ -1,16 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-html,body {
-  height: 100%;
-}
-    .main::-webkit-scrollbar {
-        display: none;
-      }
 
-      .main {
+::-webkit-scrollbar {
+  display: none;
+}
+
+.main {
   -ms-overflow-style: none;
   scrollbar-width: none;
-      }
+}
-
-    

src/app/layout.tsx

@@ -1,18 +1,7 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./globals.css";
 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 = {
   title: "北京索游科技",
@@ -23,7 +12,6 @@ function RootLayout({ children }:{ children: ReactNode } ): ReactElement {
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
       </body>