update: 适配移动端

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

@@ -43,11 +43,10 @@ export default async function Home (props: PropsType) {
     return <>
         <div className='w-full'>
             <Header dict={dict} lang={lang} />
-            <div className="w-[1440px] relative container"
+            <section id="home"></section>
+            <div className="w-[1440px] relative container pt-[80px]"
             >
             <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]">
                     <div 
                         className="text-[46px] leading-[62px] w-[585px] text-center"
@@ -70,12 +69,12 @@ export default async function Home (props: PropsType) {
                         }}>
                             {dict.goOverseas}
                         </div>
+                        <section id="service"></section> 
                     </div>
                 </div>
-                </section>
-                <section id="service">
                 <div className="w-full h-[428px] relative">
                     <img
+                        className="absolute left-[-140px]"
                         src="/home/img_bg2.png"
                         width={745}
                         height={428}
@@ -86,10 +85,10 @@ export default async function Home (props: PropsType) {
                     { dict.customized }
                     </div>
                 </div>
-                </section> 
+            
                 <div className="w-full h-[403px] relative">
                     <img
-                            className="absolute right-[0]"
+                        className="absolute right-[-30px]"
                         src="/home/img_AB.png"
                         width={787}
                         height={403}
@@ -107,7 +106,7 @@ export default async function Home (props: PropsType) {
                     <img
                         className="absolute"
                         src="/home/img_mutilan.png"
-                            width={698}
+                        width={731}
                         height={392}
                         alt=""
                     
@@ -121,7 +120,7 @@ export default async function Home (props: PropsType) {
                 </div>
                 <div className="w-full h-[317px] relative mt-[83px]">
                     <img
-                            className="absolute right-[0]"
+                        className="absolute right-[20px]"
                         src="/home/img_Omnichannel.png"
                         width={742}
                         height={317}
@@ -135,10 +134,10 @@ export default async function Home (props: PropsType) {
                     { dict.expandInfluence }
                     </div>
                 </div>      
-                    <section id="case"> 
+               
                 <div className="w-full h-[317px] relative mt-[83px]">
                     <img
-                            className="absolute"
+                        className="absolute left-[-194px]"
                         src="/home/img_3.png"
                         width={881}
                         height={357}
@@ -148,12 +147,14 @@ export default async function Home (props: PropsType) {
                     <div className="absolute w-[691px] text-[32px] top-[100px] right-[115px] 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">
                     { dict.simplifyProcess }
                     </div>
                 </div>  
-                    
+                <section id="case"></section>
                     <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={{
@@ -163,8 +164,8 @@ 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]">
                     {
@@ -186,6 +187,7 @@ export default async function Home (props: PropsType) {
                                         {dict.clickToPlay}
                                     </div>
                                 </div>
+                               
                             </div>
                         })
                     }
@@ -196,6 +198,7 @@ export default async function Home (props: PropsType) {
                     </div>
                 </div>  
                 
+        
         <section id="contact">
                 <div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]">
                     <div 

src/app/components/header.tsx

@@ -97,8 +97,8 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
           }
       </div>
     </div>
-    <div className={`${!show && 'hidden'} absolute bg-[#000000] opacity-[0] left-0 top-0 bottom-0 right-0 z-[899]`} onClick={() => setShow(false)}></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>
+    {/* <div className="h-[80px] container"></div> */}
   </>
   )
 }

src/app/globals.css

@@ -14,6 +14,18 @@
       .container {
         transform-origin: top left; /* 设置变换原点为左上角 */
       }
+      @media screen and (max-width: 600px) {
+        .container {
+          transform: scale(0.28); /* 1440px宽度的1.333倍是1920px */
+          left: calc(50% - 200px);
+        }
+      }
+      @media screen and (min-width: 600px) and (max-width: 800px) {
+        .container {
+          transform: scale(0.6); /* 1440px宽度的1.333倍是1920px */
+          left: calc(50% - 200px);
+        }
+      }
       @media screen and (min-width: 1440px) and (max-width: 1540px) {
         .container {
           transform: scale(1.069); /* 1440px宽度的1.333倍是1920px */