文件修改

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

@@ -3,11 +3,11 @@ 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'
+import './page.scss'
 
 interface Props {}
 
-const App: FC<PropsWithChildren<Props>> = (props) => {
+const Deposit: FC<PropsWithChildren<Props>> = (props) => {
     // let [amount, setAmount] = React.useState(0)
     let amount = 50
     let amountList = [10,20,50,100,200,500,1000,5000,10000]
@@ -53,4 +53,4 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
     );
 };
 
-export default App;
+export default Deposit;

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

@@ -1,167 +0,0 @@
-
-.login-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;
-}
-
-.main .title h2 {
-    color: #ff6a01;
-    text-align: center;
-}
-
-.main .otherAccount {
-    margin: .2rem 0 .1rem;
-}
-
-.main .otherAccount .ggAfb,.main .otherAccount .ggAfb span {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-}
-
-.main .otherAccount .ggAfb span {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    width: 67%;
-    border-radius: .04rem;
-    height: .42rem;
-    color: #fff;
-    font-size: .1rem;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.main .otherAccount .ggAfb span.gg {
-    background-color: #06b594;
-}
-
-.main .otherAccount .ggAfb span i {
-    width: .26rem;
-    height: .26rem;
-    margin-right: .13rem;
-    background-image: url('https://9f.com/img/gg.ef7c3bc6.svg');
-    background-size: 100% 100%;
-}
-
-.main .otherAccount .or {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-    margin-top: .16rem;
-}
-
-.main .otherAccount .or:after,.main .otherAccount .or:before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 0;
-    border-top: .01rem solid #666;
-}
-
-.main .otherAccount .or span {
-    display: block;
-    margin: 0 .03rem;
-    font-size: .12rem;
-    color: #ddd;
-}
-
-.main .phoneInput, .passwordInput {
-    width: 100%;
-    height: auto;
-    background-color: #494949;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-}
-
-.main .passwordInput {
-    margin: .13rem 0 .04rem;
-}
-
-.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 .passwordInput .iconfont {
-    font-size: .16rem;
-}
-
-.main .passwordInput input {
-    text-indent: .23rem;
-}
-
-.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;
-}
-
-.main .btnContent .tips {
-    text-align: center;
-    margin-bottom: .06rem;
-    color: #e53535;
-    font-size: 0.12rem;
-}
-
-.main .link {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-}
-
-.main .link .forgotText {
-    font-size: .12rem;
-    color: #fff;
-    text-align: center;
-    display: block;
-}

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

@@ -0,0 +1,148 @@
+.login-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;
+    .title {
+      font-size: .18rem;
+      h2 {
+        color: #ff6a01;
+        text-align: center;
+      }
+    }
+    .otherAccount {
+      margin: .2rem 0 .1rem;
+      .ggAfb {
+        span {
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          width: 67%;
+          border-radius: .04rem;
+          height: .42rem;
+          color: #fff;
+          font-size: .1rem;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          &.gg {
+            background-color: #06b594;
+          }
+          i {
+            width: .26rem;
+            height: .26rem;
+            margin-right: .13rem;
+            background-image: url('https://9f.com/img/gg.ef7c3bc6.svg');
+            background-size: 100% 100%;
+          }
+        }
+      }
+      .or {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -ms-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+        margin-top: .16rem;
+        span {
+          display: block;
+          margin: 0 .03rem;
+          font-size: .12rem;
+          color: #ddd;
+        }
+      }
+    }
+    .passwordInput {
+      margin: .13rem 0 .04rem;
+      .iconfont {
+        font-size: .16rem;
+      }
+      input {
+        text-indent: .23rem;
+      }
+    }
+    .phoneInput {
+      .after {
+        margin-left: .1rem;
+        font-size: .14rem;
+        color: #868686;
+      }
+      input {
+        padding-left: .14rem;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+    }
+    input {
+      flex: 1;
+      background-color: #494949;
+      height: .48rem;
+      color: #868686;
+      font-size: .14rem;
+      outline: none;
+      &::placeholder {
+        color: #868686;
+      }
+    }
+    .btnContent {
+      margin: .29rem 0 .19rem;
+      .tips {
+        text-align: center;
+        margin-bottom: .06rem;
+        color: #e53535;
+        font-size: 0.12rem;
+      }
+    }
+    .link {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      .forgotText {
+        font-size: .12rem;
+        color: #fff;
+        text-align: center;
+        display: block;
+      }
+    }
+  }
+  .main .otherAccount .ggAfb,.main .otherAccount .ggAfb span {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+  .main .otherAccount .or:after,.main .otherAccount .or:before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 0;
+    border-top: .01rem solid #666;
+  }
+  .main .phoneInput, .passwordInput {
+    width: 100%;
+    height: auto;
+    background-color: #494949;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+  

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

@@ -1,11 +1,11 @@
 import { FC, PropsWithChildren } from "react";
 import ButtonOwn from "@/components/ButtonOwn";
 import DomainFooter from "@/components/DomainFooter";
-import './page.css'
+import './page.scss'
 
 interface Props {}
 
-const App: FC<PropsWithChildren<Props>> = (props) => {
+const Login: FC<PropsWithChildren<Props>> = (props) => {
     let amount = 50
     let amountList = [10,20,50,100,200,500,1000,5000,10000]
 
@@ -45,4 +45,4 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
     );
 };
 
-export default App;
+export default Login;

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

@@ -1,229 +0,0 @@
-
-.main {
-    padding: .44rem 0 .04rem;
-    min-height: 100vh;
-    background-color: #1f1f1f;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-}
-
-.main .userContent {
-    background: -webkit-gradient(linear, left top, left bottom, from(#ffaa30), to(#ffe6be));
-    background: -webkit-linear-gradient(top, #ffaa30, #ffe6be);
-    background: -o-linear-gradient(top, #ffaa30 0, #ffe6be 100%);
-    background: linear-gradient(180deg, #ffaa30, #ffe6be);
-    min-height: .93rem;
-}
-
-.main .userInfo {
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-    height: .56rem;
-    padding: .11rem .18rem;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.main .userInfo>div {
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    height: .36rem;
-    font-size: .14rem;
-    color: #000;
-}
-
-.main .userInfo>div .bgImg {
-    width: .36rem;
-    height: .36rem;
-    margin-right: .1rem;
-    background-color: transparent;
-    background-image: url('https://9f.com/img/logo_5.6a41c34a.png');
-    background-size: 100% 100%;
-}
-
-.main .userInfo>div>div {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    height: .36rem;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-}
-
-.main .userInfo>div .phone {
-    font-size: .12rem;
-}
-
-.main .userInfo .goto {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-.main .userInfo .iconfont {
-    font-size: .16rem;
-    font-weight: 700;
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-    margin-left: .04rem;
-}
-
-.main .coin{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    padding: .07rem 0 .3rem;
-    margin: 0 .18rem;
-    border-top: .01rem dotted #d9a801;
-}
-
-.main .coin>div {
-    display: flex;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    width: 50%;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.main .coin>div:first-child {
-    border-right: .01rem dotted #d9a801;
-}
-
-.main .coin>div .iconfont {
-    margin: 0 .08rem;
-    font-size: .18rem;
-}
-
-.main .coin>div>div {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.main .coin>div div span {
-    font-size: .12rem;
-}
-
-.main .coin>div div .num {
-    width: 100%;
-    height: auto;
-    display: flex;
-}
-
-.main .coin>div div .num span {
-    font-size: .14rem;
-}
-
-.main .coin>div div .num span:first-child {
-    margin-right: .04rem;
-}
-
-.main .link {
-    width: 100%;
-    height: auto;
-    margin-top: -.22rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.main .link span {
-    width: 1.63rem;
-    height: .44rem;
-    line-height: .44rem;
-    background: -o-linear-gradient(top, #ff9323, #ff6a01);
-    background: linear-gradient(180deg, #ff9323, #ff6a01);
-    border-radius: .04rem;
-    color: #fff;
-    font-size: .14rem;
-    margin: 0 .08rem;
-    text-align: center;
-}
-
-.main ul li {
-    color: #fff;
-    height: .5rem;
-    line-height: .5rem;
-    font-size: .14rem;
-    border-bottom: .01rem solid #3f3f3f;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    margin: 0 .18rem;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    line-height: .2rem;
-}
-
-.main ul li.free {
-    padding-top: .12rem;
-    margin: 0;
-    padding: 0 .18rem;
-    border-bottom: .08rem solid #131212;
-}
-
-.main ul li>div {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-.main ul li .icon-hot {
-    font-size: .16rem;
-    color: #fc9b26;
-    margin-left: .1rem;
-}
-
-.main ul li div.content .iconfont {
-    margin-right: .04rem;
-    margin-left: .1rem;
-    font-size: .18rem;
-}
-
-.main ul li .iconfont.icon-to {
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-.main .logOut {
-    color: #fff;
-    font-size: .12rem;
-    width: 1rem;
-    height: .34rem;
-    line-height: .34rem;
-    display: block;
-    margin: .1rem auto .3rem;
-    text-align: center;
-    cursor: pointer;
-}

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

@@ -0,0 +1,213 @@
+.main {
+    padding: .44rem 0 .04rem;
+    min-height: 100vh;
+    background-color: #1f1f1f;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .userContent {
+      background: -webkit-gradient(linear, left top, left bottom, from(#ffaa30), to(#ffe6be));
+      background: -webkit-linear-gradient(top, #ffaa30, #ffe6be);
+      background: -o-linear-gradient(top, #ffaa30 0, #ffe6be 100%);
+      background: linear-gradient(180deg, #ffaa30, #ffe6be);
+      min-height: .93rem;
+    }
+    .userInfo {
+      display: flex;
+      -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      -webkit-box-align: start;
+      -ms-flex-align: start;
+      align-items: flex-start;
+      height: .56rem;
+      padding: .11rem .18rem;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      & > div {
+        display: flex;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        height: .36rem;
+        font-size: .14rem;
+        color: #000;
+        .bgImg {
+          width: .36rem;
+          height: .36rem;
+          margin-right: .1rem;
+          background-color: transparent;
+          background-image: url('https://9f.com/img/logo_5.6a41c34a.png');
+          background-size: 100% 100%;
+        }
+        & > div {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+          flex-direction: column;
+          height: .36rem;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+        .phone {
+          font-size: .12rem;
+        }
+      }
+      .goto {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+      .iconfont {
+        font-size: .16rem;
+        font-weight: 700;
+        -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
+        margin-left: .04rem;
+      }
+    }
+    .coin {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      padding: .07rem 0 .3rem;
+      margin: 0 .18rem;
+      border-top: .01rem dotted #d9a801;
+      & > div {
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        width: 50%;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        &:first-child {
+          border-right: .01rem dotted #d9a801;
+        }
+        .iconfont {
+          margin: 0 .08rem;
+          font-size: .18rem;
+        }
+        & > div {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+        div {
+          span {
+            font-size: .12rem;
+          }
+          .num {
+            width: 100%;
+            height: auto;
+            display: flex;
+            span {
+              font-size: .14rem;
+              &:first-child {
+                margin-right: .04rem;
+              }
+            }
+          }
+        }
+      }
+    }
+    .link {
+      width: 100%;
+      height: auto;
+      margin-top: -.22rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        width: 1.63rem;
+        height: .44rem;
+        line-height: .44rem;
+        background: -o-linear-gradient(top, #ff9323, #ff6a01);
+        background: linear-gradient(180deg, #ff9323, #ff6a01);
+        border-radius: .04rem;
+        color: #fff;
+        font-size: .14rem;
+        margin: 0 .08rem;
+        text-align: center;
+      }
+    }
+    ul {
+      li {
+        color: #fff;
+        height: .5rem;
+        line-height: .5rem;
+        font-size: .14rem;
+        border-bottom: .01rem solid #3f3f3f;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        margin: 0 .18rem;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        line-height: .2rem;
+        &.free {
+          padding-top: .12rem;
+          margin: 0;
+          padding: 0 .18rem;
+          border-bottom: .08rem solid #131212;
+        }
+        & > div {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+        .icon-hot {
+          font-size: .16rem;
+          color: #fc9b26;
+          margin-left: .1rem;
+        }
+        div {
+          &.content {
+            .iconfont {
+              margin-right: .04rem;
+              margin-left: .1rem;
+              font-size: .18rem;
+            }
+          }
+        }
+        .iconfont {
+          &.icon-to {
+            -webkit-transform: rotate(180deg);
+            -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+    .logOut {
+      color: #fff;
+      font-size: .12rem;
+      width: 1rem;
+      height: .34rem;
+      line-height: .34rem;
+      display: block;
+      margin: .1rem auto .3rem;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+  

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

@@ -1,11 +1,11 @@
 "use client";
 import { FC, PropsWithChildren } from "react";
-import ButtonOwn from "@/components/ButtonOwn";
-import './page.css'
+// import ButtonOwn from "@/components/ButtonOwn";
+import './page.scss'
 
 interface Props {}
 
-const App: FC<PropsWithChildren<Props>> = (props) => {
+const Profile: FC<PropsWithChildren<Props>> = (props) => {
     // let [amount, setAmount] = React.useState(0)
     let amount = 50
     let amountList = [10,20,50,100,200,500,1000,5000,10000,500,1000,5000,10000]
@@ -76,4 +76,4 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
     );
 };
 
-export default App;
+export default Profile;

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

@@ -1,103 +0,0 @@
-
-.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;
-}

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

@@ -0,0 +1,65 @@
+.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;
+    .title {
+      font-size: .18rem;
+      padding: 0 .45rem;
+      h2 {
+        color: #fcde26;
+        text-align: center;
+        line-height: .22rem;
+      }
+      div {
+        color: #fff;
+        font-size: .12rem;
+        text-align: center;
+        margin: .06rem 0;
+        line-height: .2rem;
+      }
+    }
+    .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;
+      .after {
+        margin-left: .1rem;
+        font-size: .14rem;
+        color: #868686;
+      }
+      input {
+        padding-left: .14rem;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+    }
+    input {
+      flex: 1;
+      background-color: #494949;
+      height: .48rem;
+      color: #868686;
+      font-size: .14rem;
+      outline: none;
+      &::placeholder {
+        color: #868686;
+      }
+    }
+    .btnContent {
+      margin: .29rem 0 .19rem;
+    }
+  }
+  

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

@@ -1,12 +1,12 @@
 import { FC, PropsWithChildren } from "react";
 import ButtonOwn from "@/components/ButtonOwn";
 import DomainFooter from "@/components/DomainFooter";
-import './page.css'
+import './page.scss'
 import React from "react";
 
 interface Props {}
 
-const App: FC<PropsWithChildren<Props>> = (props) => {
+const ResetPhone: FC<PropsWithChildren<Props>> = (props) => {
     let amount = 50
     let amountList = [10,20,50,100,200,500,1000,5000,10000]
 
@@ -30,4 +30,4 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
     );
 };
 
-export default App;
+export default ResetPhone;