fix: 修改高度兼容性

src/app/[locale]/(TabBar)/[[...share]]/layout.tsx

@@ -33,7 +33,7 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
     return (
         <>
             <Header></Header>
-            <main id="maincontainer" className={"main-footer-header"}>
+            <main id="maincontainer" className={"main-header"}>
                 {/*弹窗*/}
                 {popupWidget}
                 <Box>

src/app/[locale]/(TabBar)/deposit/layout.tsx

@@ -17,7 +17,7 @@ export default async function Layout({
     return (
         <>
             <HeaderBack showBack={true} />
-            <main className={"main-footer-header bg-[#1f1f1f]"}>{children}</main>
+            <main className={"main-header bg-[#1f1f1f]"}>{children}</main>
         </>
     );
 }

src/app/[locale]/(TabBar)/freeGames/layout.tsx

@@ -18,7 +18,7 @@ export default async function LocaleLayout({
     return (
         <>
             <HeaderBack showBack={true} title={"Free Games"} />
-            <main className={"main-footer-header bg-[#1f1f1f]"}>{children}</main>
+            <main className={"main-header bg-[#1f1f1f]"}>{children}</main>
         </>
     );
 }

src/app/[locale]/(TabBar)/gameList/layout.tsx

@@ -18,7 +18,7 @@ export default async function LocaleLayout({
     return (
         <>
             <HeaderBack showBack={true} />
-            <main className={"main-footer-header bg-[#1f1f1f]"}>{children}</main>
+            <main className={"main-header bg-[#1f1f1f]"}>{children}</main>
         </>
     );
 }

src/app/[locale]/(TabBar)/profile/layout.tsx

@@ -18,7 +18,7 @@ export default async function LocaleLayout({
     return (
         <>
             <HeaderBack showBack={true} />
-            <main className={"main-footer-header bg-[#1f1f1f]"}>{children}</main>
+            <main className={"main-header bg-[#1f1f1f]"}>{children}</main>
         </>
     );
 }

src/app/[locale]/(TabBar)/promo/layout.tsx

@@ -13,7 +13,7 @@ export default async function Layout({
     return (
         <>
             <HeaderBack showBack={true} title={t("promocoes")} />
-            <main className={"main-footer-header bg-[#282828]"}>{children}</main>
+            <main className={"main-header bg-[#282828]"}>{children}</main>
         </>
     );
 }

src/app/[locale]/(TabBar)/replayGames/layout.tsx

@@ -18,7 +18,7 @@ export default async function LocaleLayout({
     return (
         <>
             <HeaderBack showBack={true} title={"Replay Games"} />
-            <main className={"main-footer-header bg-[#1f1f1f]"}>{children}</main>
+            <main className={"main-header bg-[#1f1f1f]"}>{children}</main>
         </>
     );
 }

src/app/[locale]/(TabBar)/sports/layout.tsx

@@ -15,7 +15,7 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
     return (
         <>
             <Header visibleLanguage={false} />
-            <main className={"main-footer-header"}>{children}</main>
+            <main className={"main-header"}>{children}</main>
         </>
     );
 };

src/app/[locale]/providers.tsx

@@ -109,6 +109,7 @@ const Layout = ({ children, themeProps }: ProvidersProps) => {
                 resistanceRatio={10}
                 initialSlide={2}
                 slidesPerView={"auto"}
+                style={{ width: "100%", height: "100%" }}
                 onSlidePrevTransitionStart={startHandler}
                 onSlideNextTransitionEnd={endHandler}
                 slideToClickedSlide
@@ -117,17 +118,20 @@ const Layout = ({ children, themeProps }: ProvidersProps) => {
                 }}
                 allowTouchMove={false}
             >
-                <SwiperSlide>
-                    <section className="relative flex h-[100vh] items-center justify-center">
+                <SwiperSlide style={{ width: "100%", height: "100%" }}>
+                    <section className="relative flex h-[100%] items-center justify-center">
                         <Loading />
                     </section>
                 </SwiperSlide>
 
-                <SwiperSlide style={{ width: "70%" }} className={"bg-[rgb(31,31,31)]"}>
-                    <section className="relative h-[100vh]">{<Sidebar></Sidebar>}</section>
+                <SwiperSlide
+                    style={{ width: "70%", height: "100%" }}
+                    className={"bg-[rgb(31,31,31)]"}
+                >
+                    <section className="relative h-[100%]">{<Sidebar></Sidebar>}</section>
                 </SwiperSlide>
 
-                <SwiperSlide style={{ width: "100%" }}>
+                <SwiperSlide style={{ width: "100%", height: "100%" }}>
                     <section className="relative h-[100%]" ref={homeContainerRef}>
                         {children}
                     </section>

src/app/globals.scss

@@ -47,12 +47,7 @@
 
 
 html, body {
-  height: 100vh;
-  min-height: 100vh;
-
-  height: 100dvh;
-  min-height:100dvh;
-
+  height: 100%;
   position: relative;
   font-family: helvetica neue, Helvetica, apple sd gothic neo, malgun gothic, Arial, sans-serif;
   box-sizing: border-box;
@@ -81,18 +76,15 @@ body{
 }
 // dvh解决ios高度包含底部ui栏问题
 .main-footer-header{
-  height: calc(calc(100vh - $-header-height) - $-footer-height);
-  height: calc(calc(100dvh - $-header-height) - $-footer-height);
-  overflow-y: scroll;
+  height: calc(calc(100% - $-header-height) - $-footer-height);
+  overflow: scroll;
 }
 .main-footer{
-  height: calc(100vh  - $-footer-height);
-  height: calc(100dvh  - $-footer-height);
+  height: calc(100%  - $-footer-height);
   overflow-y: scroll;
 }
 .main-header{
-  height: calc(100vh  - $-header-height);
-  height: calc(100dvh  - $-header-height);
+  height: calc(100%  - $-header-height);
   overflow-y: scroll;
 }
 

src/components/Card/Card.tsx

@@ -20,6 +20,7 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
     const { render, item, groupType } = props;
 
     const t = useTranslations("Game");
+    const tcode = useTranslations();
     const brandRef = useRef<string>("");
     const score = useWalletStore((state) => state.score);
 
@@ -50,15 +51,19 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
             id: game.id + "",
             mode: groupType!,
         };
-        getGameDetailApi(params).then((res) => {
-            if (res.data && res.data.game_url) {
-                const url = `${res.data?.game_url}&brand=${brandRef.current}`;
-                window.open(url);
-            } else {
-                Toast.show("data Error");
-            }
-            Toast.clear();
-        });
+        getGameDetailApi(params)
+            .then((res) => {
+                Toast.clear();
+                if (res.data && res.data.game_url) {
+                    const url = `${res.data?.game_url}&brand=${brandRef.current}`;
+                    window.open(url);
+                } else {
+                    Toast.show(tcode("code.500"));
+                }
+            })
+            .catch((error) => {
+                Toast.clear();
+            });
     };
     return (
         <>