样式优化

src/app/[locale]/(ordinary)/deposit/page.scss

@@ -1,11 +1,12 @@
 .deposit-box {
+    flex: 1;
     width: 100%;
-    min-height: 100vh;
-    padding: 0 .14rem;
-    padding: .44rem .18rem;
+    overflow-y: auto;
+    padding: 0.1rem .18rem;
     background-color: #1f1f1f;
     display: flex;
     flex-direction: column;
+
     .img-box {
       width: .8rem;
       height: .27rem;
@@ -13,6 +14,7 @@
       background: url('/img/pixImg.png') no-repeat center;
       background-size: 100% 100%;
     }
+
     .btn-box {
       margin: .1rem 0;
       height: .3rem;
@@ -138,7 +140,7 @@
     .topUp {
       width: 100%;
       height: auto;
-      margin: .24rem 0 .19rem;
+      margin: .24rem 0 .4rem;
     }
   }
   

src/app/[locale]/(ordinary)/deposit/page.tsx

@@ -70,6 +70,7 @@ const Deposit: FC<Props> = () => {
                     {t("DepositarAgora")}
                 </ButtonOwn>
             </div>
+            
         </div>
     );
 };

src/app/[locale]/(ordinary)/layout.tsx

@@ -12,7 +12,7 @@ export default async function LocaleLayout({
 }) {
     const messages = await getMessages();
     return (
-        <div>
+        <div style={{width:'100%', height:'100vh', display: 'flex', flexDirection:'column'}}>
             <HeaderBack />
             {children}
             <Footer />

src/app/[locale]/(ordinary)/profile/component/ModalCom/style.scss

@@ -5,12 +5,9 @@
   height: .34rem;
   line-height: .34rem;
   display: block;
-  margin: .1rem auto .3rem;
+  margin: .5rem auto .3rem;
   text-align: center;
   cursor: pointer;
-  margin: 0 auto;
-  position: relative;
-  top: calc(100vh - 3.3rem);
 }
 
 .body1-box {

src/app/[locale]/(ordinary)/profile/page.scss

@@ -1,10 +1,9 @@
 .profile-box {
-    padding: .44rem 0 .6rem;
-    height: 100vh;
+    flex: 1;
+    width: 100%;
     overflow-y: auto;
+    padding-bottom: .4rem;
     background-color: #1f1f1f;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
     display: flex;
     flex-direction: column;
 

src/app/[locale]/(ordinary)/sports/page.scss

@@ -0,0 +1,13 @@
+.sports-box {
+    flex: 1;
+    width: 100%;
+    overflow-y: auto;
+    // -webkit-overflow-scrolling: touch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: .2rem;
+    background-color: #1f1f1f;
+    color: #fff;
+    font-size: .16rem;
+}

src/app/[locale]/(ordinary)/sports/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { useGlobalStore } from "@/stores";
+import { useTranslations } from "next-intl";
+import { FC } from "react";
+import "./page.scss";
+
+interface Props {}
+
+const Sports: FC<Props> = () => {
+    const t = useTranslations("ProfilePage");
+    const { token, userInfo, setUserInfo } = useGlobalStore();
+
+    return (
+        <div className="sports-box">
+            to by continued
+        </div>
+    );
+};
+
+export default Sports;

src/app/[locale]/login/component/FromCom/style.scss

@@ -1,8 +1,8 @@
 .FromCom {
+  width: 100%;
+  height: auto;
   background-color: #1f1f1f;
   padding: 0 .18rem;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
 
   .passwordInput {
     margin: .13rem 0 .04rem;
@@ -52,6 +52,7 @@
   }
 
   .link {
+    margin-bottom: .2rem;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;

src/app/[locale]/login/component/GoogleCom/style.scss

@@ -1,8 +1,8 @@
 .GoogleCom {
+  width: 100%;
+  height: auto;
   background-color: #1f1f1f;
   padding: .72rem .18rem 0;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
 
   .title {
     font-size: .16rem;

src/app/[locale]/login/page.scss

@@ -1,7 +1,15 @@
 .login-box, .register-box {
     width: 100%;
-    min-height: 100vh;
+    height: 100vh;
     background-color: rgb(31, 31, 31);
     display: flex;
     flex-direction: column;
+
+    .content-box {
+        flex: 1;
+        width: 100%;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+    }
 }

src/app/[locale]/login/page.tsx

@@ -50,9 +50,11 @@ const Login: FC<Props> = () => {
     return (
         <div className="login-box">
             <HeaderBack />
-            <GoogleCom />
-            <FromCom callbackFun={loginRequest} msgError={msgError} />
-            <DomainFooter />
+            <div className="content-box">
+                <GoogleCom />
+                <FromCom callbackFun={loginRequest} msgError={msgError} />
+                <DomainFooter />
+            </div>
         </div>
     );
 };

src/app/[locale]/register/page.tsx

@@ -31,9 +31,11 @@ const Register: FC<Props> = () => {
     return (
         <div className="register-box">
             <HeaderBack />
-            <GoogleCom title={t("registerGoogletitle")} text={t("registerGoogletext")} />
-            <FromCom type="register" callbackFun={registerRequest} msgError={msgError} />
-            <DomainFooter />
+            <div className="content-box">
+                <GoogleCom title={t("registerGoogletitle")} text={t("registerGoogletext")} />
+                <FromCom type="register" callbackFun={registerRequest} msgError={msgError} />
+                <DomainFooter />
+            </div>
         </div>
     );
 };

src/app/globals.css

@@ -22,9 +22,8 @@
   --bg-color:#000000;
 }
 
-
-html {
-    font-size: 144px;
+* { 
+  box-sizing: border-box;
 }
 
 ::-webkit-scrollbar {
@@ -32,24 +31,30 @@ html {
 }
 
 html, body {
-  /* width: 100vw; */
-  height: 100%;
-  min-height: 80%;
+  width: 100vw;
+  height: 100vh;
   font-family: helvetica neue, Helvetica, apple sd gothic neo, malgun gothic, Arial, sans-serif;
   overflow: hidden;
-  background: #f8f8f8;
+  background-color: #f8f8f8;
+}
+
+html {
+  font-size: 144px;
+  transform: translate3d(0, 0, 0);
 }
 
 #app {
+    width: 100%;
     max-width: 4.02rem;
-    width: 100vw;
-    height: auto;
+    height: 100vh;
     margin: 0 auto;
     font-size: 0.14rem;
-    position: relative;
     background-color: var(--bg-color);
 }
 
+input {
+  line-height: normal;
+}
 
 /* ant-design-ui */
 .adm-toast-mask .adm-toast-main-icon .adm-toast-icon svg {

src/components/DomainFooter/style.module.scss

@@ -1,6 +1,7 @@
 .footer-box {
   width: 100%;
   flex: 1;
+  min-height: .81rem;
   display: flex;
   flex-direction: column;
   justify-content: end;

src/components/Footer/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { usePathname, useRouter } from "@/i18n";
 import clsx from "clsx";
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { FC, PropsWithChildren, ReactNode, useEffect, useState } from "react";
 import "./style.scss";
 import { useGlobalStore } from "@/stores";
 
@@ -36,7 +36,7 @@ const Footer: FC<PropsWithChildren> = () => {
         {
             iconSpanName: "icon-tiyu",
             label: "Esportes",
-            path: "/",
+            path: "/sports",
         },
         {
             iconSpanName: "icon-yonghu",
@@ -46,13 +46,20 @@ const Footer: FC<PropsWithChildren> = () => {
     ];
 
     const pathname = usePathname();
+    const [tabActiveName, setTabActiveName] = useState('/')
+
+    useEffect(() => {
+        setTabActiveName(pathname)
+    }, [pathname])
 
     const router = useRouter();
+    
     const goPage = (path = "/") => {
         if(!token && (path == '/deposit' || path == "/profile")) {
-            router.replace(`/login?redirect=${path}`)
+            router.push(`/login?redirect=${path}`)
             return
         }
+        setTabActiveName(path)
         router.push(path);
     };
 
@@ -62,7 +69,7 @@ const Footer: FC<PropsWithChildren> = () => {
                 {tabList.map((item, index) => {
                     return (
                         <li
-                            className={clsx(item.path == pathname && "active")}
+                            className={clsx(item.path == tabActiveName && "active")}
                             onClick={() => goPage(item.path)}
                             key={index}
                         >

src/components/Footer/style.scss

@@ -1,9 +1,5 @@
 .footer-box {
-  position: fixed;
-  bottom: 0;
-  z-index: 10;
-  width: 100vw;
-  max-width: 4.02rem;
+  width: 100%;
   height: .6rem;
   background-color: #292929;
 

src/components/HeaderBack/style.module.scss

@@ -1,14 +1,9 @@
 
 .headerBack {
-  position: fixed;
-  z-index: 10;
   width: 100%;
-  max-width: 4.02rem;
   height: .44rem;
   background-color: #000;
   padding: 0 .14rem;
-  box-sizing: border-box;
-  transform: translateZ(0);
   display: flex;
   align-items: center;
   justify-content: space-between;