merge: feature-Before

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

@@ -1,15 +1,52 @@
 import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import { Image } from "@nextui-org/image";
 // import logo from '../../../assets/imgs/deposit/logo.png'
 import './page.css'
 
 interface Props {}
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
+    // let [amount, setAmount] = React.useState(0)
+    let amount = 50
+    let amountList = [10,20,50,100,200,500,1000,5000,10000]
+
+    const setAmountFun = (amount = 0) => {
+        // setAmount(amount)
+    }
+
     return (
-    <div className="deposit-box">
-       {/* <img src={logo} className="logo" alt="logo" /> */}
-       <div className="btn">PIX 1</div>
-    </div>
+        <div className="deposit-box">
+            {/* <Image
+                className="img-box"
+                width={300}
+                radius="none"
+                alt="logo"
+                src="https://nextui-docs-v2.vercel.app/images/hero-card-complete.jpeg"
+                /> */}
+            <div className="img-box"></div>
+            <p className="btn-box" color="primary">PIX Ⅰ</p>
+            <div className="amount-box">
+                <span>Montante (BRL):</span>
+                <input type="number" placeholder="Mín. 10.00"/>
+            </div>
+            <ul className="ul-box">
+                {
+                    amountList.map((item, index) => (
+                        <li className={amount==item?'active':''} key={index}>
+                            <span className="hot"></span>
+                            <div className="amountContent">
+                                <span className="iconfont icon-unit-brl"></span>
+                                <span> {item}</span>
+                            </div>
+                            <span className="amountTips">Oferecer 100%</span>
+                        </li>
+                    ))
+                }
+        
+            </ul>
+            <div className={clsx("button topUp", {active: amount>0})}>Depositar Agora</div>
+        </div>
     );
 };
 

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

@@ -0,0 +1,225 @@
+
+.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;
+}
+
+.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;
+    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;
+}
+
+.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]/login/page.tsx

@@ -0,0 +1,54 @@
+import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import './page.css'
+
+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="login-box">
+            <div className="main">
+                <div className="title"><h2>Bem Vindo ao 9F.COM</h2></div>
+                <div className="otherAccount">
+                    <div className="ggAfb">
+                        <span className="gg">
+                            <i></i> Entrar com Google+ 
+                        </span>
+                    </div>
+                    <div className="or">
+                        <span>OU</span>
+                    </div>
+                </div>
+                <div className="phoneInput">
+                    <span className="after">+55</span>
+                    <input type="tel" placeholder="Número de Celular" />
+                </div>
+                <div className="passwordInput">
+                    <input placeholder="Senha" type="password" />
+                    <span className="iconfont icon-noeyes"></span>
+                </div>
+                <div className="btnContent">
+                    <div className="tips"> O número de telefone não existe. </div>
+                    <button className="button active">Login</button>
+                </div>
+                <div className="link">
+                    <span className="forgotText">Esqueci minha senha?</span>
+                    <span className="forgotText">Criar Conta Nova</span>
+                </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/app/[locale]/profile/page.css

@@ -0,0 +1,229 @@
+
+.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.tsx

@@ -0,0 +1,80 @@
+import { FC, PropsWithChildren } from "react";
+import clsx from "clsx";
+import './page.css'
+
+interface Props {}
+
+const App: 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]
+
+    const setAmountFun = (amount = 0) => {
+        // setAmount(amount)
+    }
+
+    return (
+        <div className="main">
+            <div className="userContent">
+                <div className="userInfo">
+                    <div>
+                        <div className="bgImg"></div>
+                        <div>
+                            <span>Conta</span>
+                            <span className="phone">5516982013895</span>
+                        </div>
+                    </div>
+                    <div className="goto">
+                        <span>Login</span>
+                        <span className="iconfont icon-to"></span>
+                    </div>
+                </div>
+                <div className="coin">
+                    <div>
+                        <span className="iconfont icon-wallet"></span>
+                        <div>
+                            <span> Saldo </span>
+                            <div className="num">
+                                <span className="uppercase">brl </span>
+                                <span>0.00</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <span className="iconfont icon-gift2"></span>
+                        <div>
+                            <span> Bônus </span>
+                            <div className="num">
+                                <span className="uppercase">brl </span>
+                                <span>0.00</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="link">
+                <span>Depósito</span>
+                <span>Sacar</span>
+            </div>
+
+            <ul>
+                {
+                    amountList.map((item, index) => (
+                        <li className={index==0?'free':''} key={index}>
+                            <div className="content"> Afiliado - Ganhe R$ 10.000 por dia | 9F.COM 
+                                <span data-v-5c42ece6="" className="iconfont icon-hot"></span>
+                                <div data-v-5c42ece6=""></div>
+                            </div>
+                            <div><span className="iconfont icon-to"></span></div>
+                        </li>
+                    ))
+                }
+            </ul>
+
+            <span className="logOut">Login</span>
+        </div>
+    );
+};
+
+export default App;

src/utils/index.ts

@@ -8,13 +8,12 @@ export const setHtmlFontSize = () => {
                 requestAnimationFrame(() => {
                     var clientWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
                     if (!clientWidth) return;
-                    htmlDom.style.fontSize =
-                        clientWidth >= 579 ? "144px" : 145 * (clientWidth / 579) + "px";
-                });
+                    htmlDom.style.fontSize = clientWidth>=578.88 ? '144px' : 154.5 * (clientWidth / 578.88) + 'px';
+                })
             };
         if (!doc.addEventListener) return;
         win.addEventListener(resizeEvt, recalc, false);
-        doc.addEventListener("DOMContentLoaded", recalc, false);
-        setTimeout(() => recalc(), 10);
+        doc.addEventListener('DOMContentLoaded', recalc, false);
+        setTimeout(()=>recalc(),1000)
     })(document, window);
 };