feat: pull dev

src/app/[locale]/deposit/page.css

@@ -0,0 +1,24 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+.deposit-box {
+    width: 579px;
+    height: 100vh;
+    padding: 0 18px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.deposit-box .logo {
+    width: 100px;
+    height: auto;
+    margin: 12px 0;
+    background-color: red;
+}
+
+.deposit-box .btn {
+
+}

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

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from "react";
+// import logo from '../../../assets/imgs/deposit/logo.png'
+import './page.css'
+
+interface Props {}
+
+const App: FC<PropsWithChildren<Props>> = (props) => {
+    return (
+    <div className="deposit-box">
+       {/* <img src={logo} className="logo" alt="logo" /> */}
+       <div className="btn">PIX 1</div>
+    </div>
+    );
+};
+
+export default App;

src/app/[locale]/providers.tsx

@@ -4,6 +4,7 @@ import { NextUIProvider } from "@nextui-org/system";
 import { ThemeProvider } from "next-themes";
 import { ThemeProviderProps } from "next-themes/dist/types";
 import { ReactNode } from "react";
+import { setHtmlFontSize } from "@/utils/index"
 
 export interface ProvidersProps {
     children: ReactNode;
@@ -13,8 +14,13 @@ export interface ProvidersProps {
 export const Providers = ({ children, themeProps }: ProvidersProps) => {
     const router = useRouter();
     return (
-        <NextUIProvider navigate={router.push}>
-            <ThemeProvider {...themeProps}>{children}</ThemeProvider>
-        </NextUIProvider>
+        <div id="app">
+            <NextUIProvider navigate={router.push}>
+                <ThemeProvider {...themeProps}>{children}</ThemeProvider>
+            </NextUIProvider>
+        </div>
     );
 };
+
+// 调用响应式方法
+setHtmlFontSize()

src/app/globals.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html, body {
+    width: 100vw;
+    height: auto;
+}
+
+#app {
+    max-width: 4.02rem;
+    width: 100vw;
+    height: auto;
+    margin: 0 auto;
+}

src/utils/index.ts

@@ -0,0 +1,18 @@
+// 设置根节点html的字体大小用于移动端适配使用
+export const setHtmlFontSize = () => {
+    (function (doc, win) {
+        var htmlDom = doc.getElementsByTagName('html')[0],
+            resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
+            recalc = function () {
+                requestAnimationFrame(()=>{
+                    var clientWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
+                    if (!clientWidth) return;
+                    htmlDom.style.fontSize = clientWidth>=579 ? '144px' : 145 * (clientWidth / 579) + 'px';
+                })
+            };
+        if (!doc.addEventListener) return;
+        win.addEventListener(resizeEvt, recalc, false);
+        doc.addEventListener('DOMContentLoaded', recalc, false);
+        setTimeout(()=>recalc(),10)
+    })(document, window);
+}