添加自定义button按钮

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

@@ -147,35 +147,8 @@
     color: #fff;
 }
 
-.deposit-box .button {
-    display: block;
-    width: 100%;
-    height: .44rem;
-    background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
-    background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
-    background: -o-linear-gradient(top, #ff9323, #ff6a01);
-    background: linear-gradient(180deg, #ff9323, #ff6a01);
-    color: #fff;
-    text-align: center;
-    line-height: .44rem;
-    font-size: .14rem;
-    border-radius: 4px;
-    cursor: not-allowed;
-    opacity: .4;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.deposit-box .button.active {
-    background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
-    background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
-    background: -o-linear-gradient(top, #ff9323, #ff6a01);
-    background: linear-gradient(180deg, #ff9323, #ff6a01);
-    cursor: pointer;
-    opacity: 1;
-}
-
 .deposit-box .topUp {
-    border-radius: .05rem;
+    width: 100%;
+    height: auto;
     margin: .24rem 0 .19rem;
 }

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

@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren } from "react";
 import clsx from "clsx";
 import { Image } from "@nextui-org/image";
+import ButtonOwn from "@/components/ButtonOwn";
 // import logo from '../../../assets/imgs/deposit/logo.png'
 import './page.css'
 
@@ -45,7 +46,9 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                 }
         
             </ul>
-            <div className={clsx("button topUp", {active: amount>0})}>Depositar Agora</div>
+            <div className="topUp">
+                <ButtonOwn active={amount>0?true:false}>Depositar Agora</ButtonOwn>
+            </div>
         </div>
     );
 };

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

@@ -150,34 +150,6 @@
     font-size: 0.12rem;
 }
 
-.button {
-    display: block;
-    width: 100%;
-    height: .44rem;
-    background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
-    background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
-    background: -o-linear-gradient(top, #ff9323, #ff6a01);
-    background: linear-gradient(180deg, #ff9323, #ff6a01);
-    color: #fff;
-    text-align: center;
-    line-height: .44rem;
-    font-size: .14rem;
-    border-radius: 4px;
-    cursor: not-allowed;
-    opacity: .4;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.button.active {
-    background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
-    background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
-    background: -o-linear-gradient(top, #ff9323, #ff6a01);
-    background: linear-gradient(180deg, #ff9323, #ff6a01);
-    cursor: pointer;
-    opacity: 1;
-}
-
 .main .link {
     display: -webkit-box;
     display: -ms-flexbox;

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

@@ -1,5 +1,5 @@
 import { FC, PropsWithChildren } from "react";
-import clsx from "clsx";
+import ButtonOwn from "@/components/ButtonOwn";
 import './page.css'
 
 interface Props {}
@@ -33,7 +33,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                 </div>
                 <div className="btnContent">
                     <div className="tips"> O número de telefone não existe. </div>
-                    <button className="button active">Login</button>
+                    <ButtonOwn active={true}>Login</ButtonOwn>
                 </div>
                 <div className="link">
                     <span className="forgotText">Esqueci minha senha?</span>

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

@@ -1,5 +1,6 @@
+"use client";
 import { FC, PropsWithChildren } from "react";
-import clsx from "clsx";
+import ButtonOwn from "@/components/ButtonOwn";
 import './page.css'
 
 interface Props {}
@@ -9,10 +10,6 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
     let amount = 50
     let amountList = [10,20,50,100,200,500,1000,5000,10000,500,1000,5000,10000]
 
-    const setAmountFun = (amount = 0) => {
-        // setAmount(amount)
-    }
-
     return (
         <div className="main">
             <div className="userContent">
@@ -56,6 +53,8 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
             <div className="link">
                 <span>Depósito</span>
                 <span>Sacar</span>
+                {/* <ButtonOwn active={true}>Depósito</ButtonOwn>
+                <ButtonOwn active={true}>Sacar</ButtonOwn> */}
             </div>
 
             <ul>

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

@@ -0,0 +1,133 @@
+
+.resetPhone-box {
+    width: 100%;
+    min-height: 100vh;
+    background-color: rgb(31, 31, 31);
+    display: flex;
+    flex-direction: column;
+}
+
+.main {
+    background-color: #1f1f1f;
+    padding: .72rem .18rem 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.main .title {
+    font-size: .18rem;
+    padding: 0 .45rem;
+}
+
+.main .title h2 {
+    color: #fcde26;
+    text-align: center;
+    line-height: .22rem;
+}
+
+.main .title div {
+    color: #fff;
+    font-size: .12rem;
+    text-align: center;
+    margin: .06rem 0;
+    line-height: .2rem;
+}
+
+.main .phoneInput {
+    width: 100%;
+    height: auto;
+    background-color: #494949;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    margin-top: 0.2rem;
+}
+
+.main .phoneInput .after {
+    margin-left: .1rem;
+    font-size: .14rem;
+    color: #868686;
+}
+
+.main .phoneInput input {
+    padding-left: .14rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.main input {
+    flex: 1;
+    background-color: #494949;
+    height: .48rem;
+    color: #868686;
+    font-size: .14rem;
+    outline: none;
+}
+
+.main input::placeholder{
+	color: #868686;
+}
+
+.main .btnContent {
+    margin: .29rem 0 .19rem;
+}
+
+.button {
+    display: block;
+    width: 100%;
+    height: .44rem;
+    background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
+    background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
+    background: -o-linear-gradient(top, #ff9323, #ff6a01);
+    background: linear-gradient(180deg, #ff9323, #ff6a01);
+    color: #fff;
+    text-align: center;
+    line-height: .44rem;
+    font-size: .14rem;
+    border-radius: 4px;
+    cursor: not-allowed;
+    opacity: .4;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.button.active {
+    background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
+    background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
+    background: -o-linear-gradient(top, #ff9323, #ff6a01);
+    background: linear-gradient(180deg, #ff9323, #ff6a01);
+    cursor: pointer;
+    opacity: 1;
+}
+
+.footer-box {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+}
+
+.footer-box .text {
+    height: .81rem;
+    background-color: #131212;
+    color: #7d7d7d;
+    font-size: .12rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    padding: 0 .36rem;
+}
+
+.footer-box .text .iconfont {
+    color: #e53535;
+    font-size: .2rem;
+}

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

@@ -0,0 +1,38 @@
+import { FC, PropsWithChildren } from "react";
+import ButtonOwn from "@/components/ButtonOwn";
+import './page.css'
+import React from "react";
+
+interface Props {}
+
+const App: FC<PropsWithChildren<Props>> = (props) => {
+    let amount = 50
+    let amountList = [10,20,50,100,200,500,1000,5000,10000]
+
+    return (
+        <div className="resetPhone-box">
+            <div className="main">
+                <div className="title">
+                    <h2>Encontre sua conta</h2>
+                    <div>Insira seu número de celular para procurar a sua conta.</div>
+                </div>
+                <div className="phoneInput">
+                    <span className="after">+55</span>
+                    <input type="tel" placeholder="Número de Celular" />
+                </div>
+                <div className="btnContent">
+                    <ButtonOwn active={true}>Continuar</ButtonOwn>
+                </div>
+            </div>
+            <div className="footer-box">
+                <div className="text">
+                    <span>© 9F.COM todos direitos reservados</span>
+                    <span className="iconfont icon-a-18"></span>
+                </div>
+            </div>
+            
+        </div>
+    );
+};
+
+export default App;

src/components/ButtonOwn/index.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import styles from "./style.module.scss";
+
+/**
+ * @description 自定义button按钮
+ * @param {any} children 插槽内容
+ * @param {boolean} active 是否高亮
+ */
+export interface ButtonProps {
+    children?: any;
+    active?: boolean;
+    callbackFun?: () => void;
+    [props: string]: any
+}
+
+const ButtonOwn: FC<PropsWithChildren<ButtonProps>> = (props) => {
+    const { children = '', active = false, callbackFun } = props;
+    const style = clsx({
+        [styles.button]: true,
+        [styles.active]: active,
+    });
+    
+    return (
+        <div className={style} onClick={callbackFun}>{children}</div>
+    );
+};
+
+export default ButtonOwn;

src/components/ButtonOwn/style.module.scss

@@ -0,0 +1,27 @@
+.button {
+  display: block;
+  width: 100%;
+  height: .44rem;
+  background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
+  background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
+  background: -o-linear-gradient(top, #ff9323, #ff6a01);
+  background: linear-gradient(180deg, #ff9323, #ff6a01);
+  color: #fff;
+  text-align: center;
+  line-height: .44rem;
+  font-size: .14rem;
+  border-radius: 4px;
+  cursor: not-allowed;
+  opacity: .4;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.button.active {
+  background: -webkit-gradient(linear, left top, left bottom, from(#ff9323), to(#ff6a01));
+  background: -webkit-linear-gradient(top, #ff9323, #ff6a01);
+  background: -o-linear-gradient(top, #ff9323, #ff6a01);
+  background: linear-gradient(180deg, #ff9323, #ff6a01);
+  cursor: pointer;
+  opacity: 1;
+}