推出弹窗样式布局

src/app/[locale]/(ordinary)/profile/component/ItemCom/index.tsx

@@ -2,7 +2,6 @@
 import { ChangeEvent, FC, PropsWithChildren, useMemo, useState } from "react";
 import clsx from "clsx";
 import Link from "next/link";
-import ButtonOwn from "@/components/ButtonOwn";
 import "./style.scss";
 
 /**

src/app/[locale]/(ordinary)/profile/component/ModalCom/index.tsx

@@ -0,0 +1,78 @@
+"use client";
+import { FC, PropsWithChildren, } from "react";
+import {Modal, ModalContent, ModalBody, ModalFooter, useDisclosure} from "@nextui-org/react";
+import "./style.scss";
+import { useGlobalStore } from '@/stores';
+import { useRouter } from "@/i18n";
+import {getLogoutApi} from "@/api/user";
+
+/**
+ * @description 底部组件
+ */
+export interface ItemComProps {
+    type?: string;
+    callbackFun?: (params: any) => void;
+}
+
+const ModalCom: FC<PropsWithChildren<ItemComProps>> = () => {
+    const { token, setToken, setUserInfo } = useGlobalStore();
+    const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
+
+
+    const logoutRequest = async () => {
+        let res = await getLogoutApi()
+        if(res.code == 200) {
+            onClose()
+            setUserInfo('')
+            setToken('')
+            router.replace('/login')
+        }
+    }
+
+    const router = useRouter();
+    const goPage = (path = '/') => {
+        router.push(path)
+    }
+
+    return (
+        <>
+             {
+                token ? <span className="logOut" onClick={onOpen}>Sair</span> : (
+                    <span className="logOut" onClick={() => goPage('/login')}>Login</span>
+                )
+            }
+            <Modal 
+                backdrop="opaque" 
+                isOpen={isOpen} 
+                size="5xl"
+                placement={'center'}
+                onOpenChange={onOpenChange}
+                hideCloseButton={true}
+                classNames={{
+                    body: "body1-box",
+                    footer: "footer1-box",
+                }}
+            >
+                <ModalContent>
+                {(onClose) => (
+                    <>
+                    <ModalBody>
+                        <p className="modal-p-box">Deseja sair?</p>
+                    </ModalBody>
+                    <ModalFooter>
+                        <span className="modal-span-box" onClick={onClose}>
+                            Cancelar
+                        </span>
+                        <span className="modal-span-box active" onClick={logoutRequest}>
+                            Continuar
+                        </span>
+                    </ModalFooter>
+                    </>
+                )}
+                </ModalContent>
+            </Modal>
+        </>
+    );
+};
+
+export default ModalCom;

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

@@ -0,0 +1,38 @@
+.body1-box {
+  .modal-p-box {
+    width: 2.5rem;
+    height: auto;
+    text-align: center;
+    color: #fff;
+    font-size: .16rem;
+    padding-top: .4rem;
+    padding-bottom: .3rem;
+  }
+}
+
+.footer1-box {
+  .modal-span-box {
+      max-width: 1.06rem !important;
+      height: .37rem;
+      background-color: #a4a4a4;
+      border-radius: .05rem;
+      margin: 0 auto;
+      font-weight: 600;
+      color: #fff;
+      line-height: .2rem;
+      font-size: .14rem;
+      padding: 0 .2rem;
+      margin-bottom: .2rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &.active {
+        background-color: #009d81;
+      }
+  }
+}
+
+.bg-content1 {
+  background-color: #353535;
+}

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

@@ -178,5 +178,5 @@
       text-align: center;
       cursor: pointer;
     }
-  }
-  
+
+}

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

@@ -3,23 +3,14 @@ import { FC, PropsWithChildren } from "react";
 import { useRouter } from "@/i18n";
 import clsx from "clsx";
 import ItemCom from "./component/ItemCom";
+import ModalCom from "./component/ModalCom";
 import './page.scss'
 import { useGlobalStore } from '@/stores';
-import {getLogoutApi} from "@/api/user";
 
 interface Props {}
 
 const Profile: FC<PropsWithChildren<Props>> = () => {
-    const { token, setToken, userInfo, setUserInfo } = useGlobalStore();
-
-    const logoutRequest = async () => {
-        let res = await getLogoutApi()
-        if(res.code == 200) {
-            setUserInfo('')
-            setToken('')
-            router.replace('/login')
-        }
-    }
+    const { token, userInfo } = useGlobalStore();
 
     const router = useRouter();
     const goPage = (path = '/') => {
@@ -79,14 +70,8 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
                 <span  onClick={() => goPage('/deposit')}>Depósito</span>
                 <span  onClick={() => goPage(token ? '/withdraw' : `/login?redirect=withdraw`)}>Sacar</span>
             </div>
-
             <ItemCom />
-
-            {
-                token ? <span className="logOut" onClick={logoutRequest}>Sair</span> : (
-                    <span className="logOut" onClick={() => goPage('/login')}>Login</span>
-                )
-            }
+            <ModalCom  />
         </div>
     );
 };

src/components/Footer/style.module.scss

@@ -1,14 +0,0 @@
-
-.placeholder{
-  height: $-footer-height;
-  max-width: 4.02rem;
-}
-.footerWrap{
-  position: fixed;
-  max-width: 4.02rem;
-  width: 100%;
-  height: .6rem;
-  background-color: $-footer-bg;
-  z-index: 10;
-  bottom: 0;
-}