update:样式修改

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

@@ -0,0 +1,17 @@
+import Link from "next/link"
+
+export default function More(props: {dict: Record<string, string>, lang: string[]}) {
+    const { dict, lang } = props
+    return <>
+    <Link href="#contact">
+    
+        <div className="flex flex-col justify-center items-center 
+        text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] w-full h-full"
+        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,10 +41,10 @@ export default async function Home (props: PropsType) {
         { img: '/home/case_3.png' },
     ]
     return <>
-        <div className='w-full'>
+        <div className='w-full' style={{overflow: 'hidden'}}>
+            <Header dict={dict} lang={lang} />
             <div className="w-[1440px] relative container"
             >
-                <Header dict={dict} lang={lang} />
                 <div className='main' style={{height: 'calc(100vh - 82px)', overflowY: "auto"}}>
 
                 <section id="home">
@@ -161,7 +162,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 +192,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>  
           

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

@@ -6,104 +6,99 @@ import { useState } from "react";
 
 
 type NavType = {
-    name: string;
-    href: string;
+  name: string;
+  href: string;
 }
 
-function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
-  const { dict, lang } = props
-  const [show, setShow] = useState(false)
-  
-    return <>
-    <div className="">
-        <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"
-                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 right-0 top-0 bottom-0 left-0 top-0 z-[1000]`} onClick={() => setShow(false)}>
-                <Link href={lang[0] === 'zh' ? '/en' : '/'}>
-                  <div className={`absolute right-[20px] 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>
-    </>
-}
-export default function Header(props: {dict: Record<string, string>, lang: string[]}) {
+
+export default function Header(props: { dict: Record<string, string>, lang: string[] }) {
   const { dict, lang } = props
   const [activeTab, setActiveTab] = useState(dict.home)
-    const navList: NavType[] = [
+  const [show, setShow] = useState(false)
+
+  const navList: NavType[] = [
+    {
+      name: dict.home,
+      href: "#home"
+    },
+    {
+      name: dict.services,
+      href: "#service"
+    },
+    {
+      name: dict.caseGallery,
+      href: "#case"
+    },
+    {
+      name: dict.contactUs,
+      href: "#contact"
+    },
+  ]
+  return (<>
+    <div className={`flex items-center px-[55px] h-[80px] border-b-1 border-solid 
+        border-[#D8D8D8] absolute bg-white z-[900] w-[1440px] container`}
+      style={{ borderBottom: '1px solid #D8D8D8' }}
+    >
+      <Link href="#home">
+        <img
+          src="/common/logo.png"
+          width={180}
+          height={47}
+          alt="logo"
+        />
+      </Link>
+      <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
+      >
         {
-          name: dict.home,
-          href: "#home"
-        },
-        {
-          name: dict.services,
-          href: "#service"
-        },
-        {
-          name: dict.caseGallery,
-          href: "#case"
-        },
-        {
-          name: dict.contactUs,
-          href: "#contact "
-        },
-    ]
-    return (<>
-        <div className={"flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8] absolute w-full bg-white z-[999]"}
-          style={{ borderBottom: '1px solid #D8D8D8' }}
-        >
-          <Link href="#home">
+          navList.map((item: NavType) => (
+            <Link href={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>
+                {
+                  activeTab === item.name ?
+                    <img src="/common/tab_checked.png" width={144} height={8} alt="" /> :
+                    <div className="h-[8px]"></div>
+                }
+              </div>
+            </Link>
+          ))
+        }
+      </div>
+      <div className="w-[129px]">
+          <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/logo.png"
-              width={180}
-              height={47}
+              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"
             />
-          </Link>
-          <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
-          >
-              {
-                navList.map((item: NavType) => (
-                  <Link href={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>
-                      {
-                        activeTab === item.name ? 
-                        <img src="/common/tab_checked.png" width={144} height={8} alt="" /> : 
-                        <div className="h-[8px]"></div>
-                      }
-                    </div>
-                  </Link>
-                ))
-              }
           </div>
-          <div className="w-[129px]">
-            <SplitButton dict={dict} lang={lang} />
-          </div>
-        </div>
-        <div className="h-[80px]"></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-[55px] 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'} absolute 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

@@ -21,6 +21,9 @@
           transform: scale(1.333); /* 1440px宽度的1.333倍是1920px */
           left: calc(50% - 960px);
         }
+        .mn {
+          transform: scaleY(1 /1.333)
+        }
       }
       
       /* 当屏幕宽度大于或等于1920px时 */
@@ -29,4 +32,7 @@
           transform: scale(1.333); /* 保持与1920px宽度的屏幕相同的缩放比例 */
           left: calc(50% - 960px);
         }
+        .mn {
+          transform: scaleY(1 /1.333)
+        }
       }