From 3dcabcef62be7abaaff1678ae8ca6c214ee338c5 Mon Sep 17 00:00:00 2001
From: icefire <1028247921@qq.com>
Date: Sat, 19 Oct 2024 22:00:46 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E5=B1=8F=E5=B9=95=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/[[...lang]]/page.tsx  | 20 ++++++++++++--------
 src/app/components/header.tsx | 28 ++++++++++++++++------------
 src/app/globals.css           | 27 +++++++++++++++++++++++++++
 src/dictionaries/zh.json      |  2 +-
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/src/app/[[...lang]]/page.tsx b/src/app/[[...lang]]/page.tsx
index b2371b9..5083d89 100644
--- a/src/app/[[...lang]]/page.tsx
+++ b/src/app/[[...lang]]/page.tsx
@@ -41,8 +41,11 @@ export default async function Home (props: PropsType) {
     ]
     return <>
         <div className='w-full'>
-            <div className="w-min-[1440px] w-max-[1920px] mx-auto">
+            <div className="w-[1440px] relative container"
+            >
                 <Header dict={dict} lang={lang} />
+                <div className='main' style={{height: 'calc(100vh - 82px)', overflowY: "auto"}}>
+
                 <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 
@@ -162,13 +165,13 @@ export default async function Home (props: PropsType) {
                     </div> 
                     </section>
                
-                    <div className="w-full px-[40px] flex flex-wrap justify-center gap-[50px] mt-[34px] mb-[83px]">
+                    <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">
-                                    <div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px]'>
+                                return <div key={'key'+index} className="cursor-pointer relative group mb-[50px]" style={{ width: 'calc(25% - 37.5px)' }}>
+                                    <div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] h-full'>
                                         <img
-                                            className="rounded-[60px] 
+                                            className="rounded-[60px] w-full
                                             transition ease-in-out duration-300"
                                             src={item.img}
                                             width={300}
@@ -185,9 +188,9 @@ export default async function Home (props: PropsType) {
                                 </div>
                             })
                         }
-                        <div className="w-[300px] h-[300px] 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 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>
                         </div>
@@ -216,6 +219,7 @@ export default async function Home (props: PropsType) {
                 <div>
                     <Footer dict={dict} />
                 </div>
+                </div>
             </div>
         </div>
     </>
diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
index 560444a..f1128af 100644
--- a/src/app/components/header.tsx
+++ b/src/app/components/header.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 
 
 
+
 type NavType = {
     name: string;
     href: string;
@@ -12,6 +13,7 @@ type NavType = {
 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] 
@@ -34,9 +36,9 @@ function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
         </div>
         {
             
-              <div className={`absolute ${!show && 'hidden'} w-[100vw] h-[100vh] left-0 top-0 z-[1000]`} onClick={() => setShow(false)}>
+              <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-[40px] top-[68px] w-[129px] h-[28px] 
+                  <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>
@@ -69,16 +71,19 @@ 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] fixed w-full bg-white z-[999]"}
+        <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' }}
         >
-          <img
-            src="/common/logo.png"
-            width={180}
-            height={47}
-            alt="logo"
-          />
-          <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}>
+          <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]"}
+          >
               {
                 navList.map((item: NavType) => (
                   <Link href={item.href} key={item.name}>
@@ -94,8 +99,7 @@ export default function Header(props: {dict: Record<string, string>, lang: strin
                 ))
               }
           </div>
-          <div className="">
-         
+          <div className="w-[129px]">
             <SplitButton dict={dict} lang={lang} />
           </div>
         </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index bcf21eb..dc07fc4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,4 +2,31 @@
 @tailwind components;
 @tailwind utilities;
 
+    .main::-webkit-scrollbar {
+        display: none;
+      }
+      
+      .main {
+        -ms-overflow-style: none;
+        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);
+        }
+      }
\ No newline at end of file
diff --git a/src/dictionaries/zh.json b/src/dictionaries/zh.json
index c9309cd..43351ed 100644
--- a/src/dictionaries/zh.json
+++ b/src/dictionaries/zh.json
@@ -28,5 +28,5 @@
     "privacyPolicy": "隐私条款",
     "userAgreement": "用户协议",
     "productPricing": "产品定价",
-    "clickToPlay": "点击游玩"
+    "clickToPlay": "点击试玩"
 }
\ No newline at end of file