优化Page

src/components/Page/index.js

@@ -1,4 +1,5 @@
 import { Button, Space } from "antd";
+import { useEffect, useState } from "react";
 import HeaderBack from "../HeaderBack";
 
 /**
@@ -18,17 +19,37 @@ function Page(props) {
     extraActionButtons,
   } = props;
 
+  const [pageWidth, setPageWidth] = useState(window.innerWidth);
+
+  const getPageWidth = () => {
+    const pageDom = document.querySelector("#page");
+    if (!pageDom)
+      return;
+    setPageWidth(pageDom.offsetWidth);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      getPageWidth();
+    }, 0);
+    window.addEventListener("resize", getPageWidth);
+    return () => {
+      window.removeEventListener("resize", getPageWidth);
+      clearTimeout(timer);
+    };
+  }, []);
+
   return (
-    <div className="page">
+    <div className="page" id="page">
       {(isShowAllAction && isShowHeader) && <HeaderBack title={headerTitle} history={history} previous={headerPrevious} />}
       <div style={{ padding: contentPadding }}>
         {props.children}
       </div>
       {
         (isShowAllAction && isShowFooter) && (
-          <div style={{ transform: 'scale(1)', margin: '0px -44px' }}>
+          <>
-            <div style={{ height: "52px" }}></div>
+            <div style={{ height: "32px" }}></div>
-            <div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: "100%" }}>
+            <div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0px -44px" }}>
               {customActionButtons || (
                 <Space>
                   {extraActionButtons}
@@ -38,7 +59,7 @@ function Page(props) {
                 </Space>
               )}
             </div>
-          </div>
+          </>
         )
       }
     </div>