底部样式兼容性

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

@@ -71,7 +71,6 @@ const ResetPhone: FC<Props> = () => {
             return true;
         }
         getFindPwdApi({ user_phone, code, pwd }).then((res) => {
-            setMsgError(res.msg || "");
             if (res.code == 200) {
                 Toast.show({ icon: "success", content: "修改成功", maskClickable: false });
                 setUserInfo('')
@@ -79,6 +78,7 @@ const ResetPhone: FC<Props> = () => {
                 setTimeout(() => {
                     router.replace("/login");
                 }, 1000);
+                setMsgError(res.msg && res.msg!='ok' ? res.msg : "");
             }
         });
     };

src/app/globals.css

@@ -31,8 +31,8 @@
 }
 
 html, body {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   font-family: helvetica neue, Helvetica, apple sd gothic neo, malgun gothic, Arial, sans-serif;
   overflow: hidden;
   background-color: #f8f8f8;
@@ -46,7 +46,10 @@ html {
 #app {
     width: 100%;
     max-width: 4.02rem;
-    height: 100vh;
+    height: 100%;
+    padding-bottom: 0;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
     margin: 0 auto;
     font-size: 0.14rem;
     background-color: var(--bg-color);
@@ -63,5 +66,3 @@ input {
 .adm-input input{
   color: #fff;
 }
-
-

src/components/Footer/index.tsx

@@ -4,6 +4,7 @@ import clsx from "clsx";
 import { FC, PropsWithChildren, ReactNode, useEffect, useState } from "react";
 import "./style.scss";
 import { useGlobalStore } from "@/stores";
+import { SafeArea } from "antd-mobile";
 
 /**
  * @description 底部Tab组件
@@ -89,6 +90,7 @@ const Footer: FC<PropsWithChildren> = () => {
                     );
                 })}
             </ul>
+            <SafeArea position='bottom' />
         </div>
     );
 };

src/components/Footer/style.scss

@@ -1,11 +1,13 @@
 .footer-box {
   width: 100%;
-  height: .6rem;
+  height: auto;
   background-color: #292929;
+  display: flex;
+  flex-direction: column;
 
   ul {
     width: 100%;
-    height: 100%;
+    height: .6rem;
     padding-bottom: 0.12rem;
     display: flex;
     flex-direction: row;