referrals等页面

src/app/[locale]/affiliate/faq/page.css

@@ -0,0 +1,250 @@
+.vux-drawer {
+    display: block;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+}
+.vux-drawer>.vux-drawer-body {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    -o-transition: transform ease-in-out .38s, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
+}
+#app, .router-view {
+    max-width: 4.02rem;
+}
+#app .router-view {
+    width: 100vw;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.headerBack .left,.headerBack {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.headerBack {
+    position: fixed;
+    z-index: 9;
+    height: .44rem;
+    width: 100%;
+    font-family: SWISSC-BT;
+    max-width: 4.02rem;
+    background-color: #0d1933;
+    padding: 0 .14rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+.headerBack .iconfont {
+    font-size: .24rem;
+    color: #fff;
+    width: .4rem;
+    cursor: pointer;
+}
+.headerBack .title {
+    color: #fff;
+    font-size: .2rem;
+    width: 100%;
+}
+.headerBack .title span {
+    font-size: .16rem !important;
+}
+.headerBack .right {
+    width: .4rem;
+    text-align: right;
+}
+.headerBack .right .icon-shouye1 {
+    display: inline-block;
+    font-size: .24rem;
+    color: #fff;
+}
+.tabs {
+    margin: .44rem .06rem 0;
+    height: .36rem;
+    line-height: .36rem;
+    font-family: SWISSC;
+}
+.van-tab__text-wrapper, .van-tabs {
+    position: relative;
+}
+.tabs.van-tabs--line .van-tabs__wrap {
+    height: 100%;
+}
+.van-tabs--line .van-tabs__wrap {
+    height: 44px;
+}
+.van-tabs__wrap {
+    overflow: hidden;
+}
+.tabs .van-tabs__nav--line {
+    padding-bottom: .15rem;
+}
+.tabs .van-tabs__nav {
+    background: 0 0;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+.van-tabs__nav--line.van-tabs__nav--complete {
+    padding-right: 8px;
+    padding-left: 8px;
+}
+.van-tabs__wrap--scrollable .van-tabs__nav {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+.van-tabs__nav--line.van-tabs__nav--complete {
+    padding-right: 8px;
+    padding-left: 8px;
+}
+.van-tabs__nav--line {
+    box-sizing: content-box;
+    height: 100%;
+    padding-bottom: 15px;
+}
+.van-tabs__nav {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    background-color: #fff;
+    -webkit-user-select: none;
+    user-select: none;
+}
+.tabs.alginLeft .van-tab {
+    margin-right: 0 !important;
+    padding: 0 .04rem;
+}
+body .van-tabs.alginLeft .van-tab {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: initial;
+    -ms-flex: initial;
+    flex: initial;
+    margin-right: .08rem;
+}
+.van-tabs__wrap--scrollable .van-tab {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+    flex: 1 0 auto;
+    padding: 0 12px;
+}
+.van-tab--active {
+    color: #323233;
+    font-weight: 500;
+}
+.tabs .van-tab__text {
+    font-size: .13rem;
+    color: grey;
+}
+#app .router-view {
+    width: 100vw;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+#app {
+    font-size: 0.14rem;
+    width: 100vw;
+    height: 100%;
+    background-color: #000;
+    margin: 0 auto;
+    min-height: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.tabs .van-tabs__line {
+    width: .3rem;
+    height: .01rem;
+    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);
+    bottom: .22rem;
+}
+.van-tabs__line{
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    z-index: 1;
+    width: 40px;
+    height: 3px;
+    background-color: #ee0a24;
+    border-radius: 3px;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+    height: 100vh;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask {
+    z-index: 9999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    background-color: rgba(0, 0, 0, .3);
+}
+.referralFaq {
+    font-family: SWISSC;
+    background: #fff;
+    border-radius: .1rem;
+    min-height: -webkit-calc(100vh - 1.5rem);
+    min-height: calc(100vh - 1.5rem);
+    padding: 0 .1rem;
+    margin: 0 .11rem .46rem;
+}
+.referralFaq .content {
+    padding: .14rem 0 .18rem;
+}
+.referralFaq .content h2 {
+    font-size: .18rem;
+    color: #383838;
+    border-bottom: .01rem solid #bdbdbd;
+    line-height: .22rem;
+}
+.referralFaq .content div {
+    color: grey;
+    font-size: .14rem;
+    line-height: .16rem;
+    margin-top: .05rem;
+}
+.referralFaq .content .link {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+.referralFaq .content .link a {
+    color: #009d80;
+    font-size: .14rem;
+    line-height: .22rem;
+    cursor: pointer;
+}

src/app/[locale]/affiliate/faq/page.tsx

@@ -0,0 +1,84 @@
+import { FC, PropsWithChildren } from "react";
+import './page.css'
+
+interface Props { }
+const App: FC<PropsWithChildren<Props>> = (props) =>{
+    return (
+        <div className="vux-drawer">
+            <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
+                <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
+                    <div className="headerBack">
+                        <div className="left">
+                            <span className="iconfont icon-xiangzuo1"></span>
+                        </div>
+                        <span className="title">
+                            Afiliado 
+                            <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
+                        </span>
+                        <span className="right">
+                            <span className="iconfont icon-shouye1 router-link-active"></span>
+                        </span>
+                    </div>
+                    <div className="tabs alginLeft van-tabs van-tabs--line">
+                        <div className="van-tabs__wrap van-tabs__wrap--scrollable">
+                            <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
+                                <div className="van-tab">
+                                    <span className="van-tab__text">PAINEL</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">REFERÊNCIAS</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">RELATÓRIO</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">PAGAMENTOS</span>
+                                </div>
+                                <div className="van-tab van-tab--active" aria-selected="true">
+                                    <span className="van-tab__text">FAQ</span>  
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">TUTORIAL</span>
+                                </div>
+                                <div className="van-tabs__line" style={{transform: "translateX(442px) translateX(-50%); transition-duration: 0.3s"}}></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="content">
+                        <div className="referralFaq referralFaq referral-router-view">
+                            <div className="content">
+                                <h2>O que é o programa de afiliados 9F.COM?</h2>
+                                <div>
+                                    9F.COM Afiliados é um programa onde oferecemos a você a oportunidade de ganhar dinheiro todos os dias, simplesmente nos dando a chance de receber mais jogadores.
+                                </div>
+                            </div>
+                            <div className="content">
+                                <h2>QUANTO CUSTA PARA PARTICIPAR?</h2>
+                                <div>Absolutamente nada. É totalmente gratuito.</div>
+                            </div>
+                            <div className="content">
+                                <h2>Posso obter benefícios mesmo se não tiver um site? </h2>
+                                <div>
+                                    Claro que pode. Podemos fornecer todas as ferramentas de marketing de que você precisa para promover a 9F.COM offline nas mídias sociais ou por e-mail.
+                                </div>
+                            </div>
+                            <div className="content">
+                                <h2>QUANTO EU GANHO? </h2>
+                                <div>Como parte da nossa rede de afiliados, você será pago em um modelo de compartilhamento de receita. Você ganha mais de 80% de recompensa de comissão.</div>
+                                <div className="link">
+                                    <a href="">Regras de recompensa da comissão</a>
+                                    <a href="">Regras de cálculo de comissão</a>
+                                </div>
+                            </div>
+                            <div className="imgContent rowReverse"></div>
+                            <div className="relationSchema"></div>
+                            <div className="content"></div>
+                        </div>
+                    </div>
+                </div>
+                <div className="drawer-mask"></div>
+            </div>
+        </div>
+    )
+}
+export default App

src/app/[locale]/affiliate/payments/page.css

@@ -0,0 +1,274 @@
+.vux-drawer {
+    display: block;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+}
+.vux-drawer>.vux-drawer-body {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    -o-transition: transform ease-in-out .38s, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
+}
+#app, .router-view {
+    max-width: 4.02rem;
+}
+#app .router-view {
+    width: 100vw;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.headerBack .left,.headerBack {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.headerBack {
+    position: fixed;
+    z-index: 9;
+    height: .44rem;
+    width: 100%;
+    font-family: SWISSC-BT;
+    max-width: 4.02rem;
+    background-color: #0d1933;
+    padding: 0 .14rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+.headerBack .iconfont {
+    font-size: .24rem;
+    color: #fff;
+    width: .4rem;
+    cursor: pointer;
+}
+.headerBack .title {
+    color: #fff;
+    font-size: .2rem;
+    width: 100%;
+}
+.headerBack .title span {
+    font-size: .16rem !important;
+}
+.headerBack .right {
+    width: .4rem;
+    text-align: right;
+}
+.headerBack .right .icon-shouye1 {
+    display: inline-block;
+    font-size: .24rem;
+    color: #fff;
+}
+.tabs {
+    margin: .44rem .06rem 0;
+    height: .36rem;
+    line-height: .36rem;
+    font-family: SWISSC;
+}
+.van-tab__text-wrapper, .van-tabs {
+    position: relative;
+}
+.tabs.van-tabs--line .van-tabs__wrap {
+    height: 100%;
+}
+.van-tabs--line .van-tabs__wrap {
+    height: 44px;
+}
+.van-tabs__wrap {
+    overflow: hidden;
+}
+.tabs .van-tabs__nav--line {
+    padding-bottom: .15rem;
+}
+.tabs .van-tabs__nav {
+    background: 0 0;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+.van-tabs__nav--line.van-tabs__nav--complete {
+    padding-right: 8px;
+    padding-left: 8px;
+}
+.van-tabs__wrap--scrollable .van-tabs__nav {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+.van-tabs__nav--line.van-tabs__nav--complete {
+    padding-right: 8px;
+    padding-left: 8px;
+}
+.van-tabs__nav--line {
+    box-sizing: content-box;
+    height: 100%;
+    padding-bottom: 15px;
+}
+.van-tabs__nav {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    background-color: #fff;
+    -webkit-user-select: none;
+    user-select: none;
+}
+.tabs.alginLeft .van-tab {
+    margin-right: 0 !important;
+    padding: 0 .04rem;
+}
+body .van-tabs.alginLeft .van-tab {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: initial;
+    -ms-flex: initial;
+    flex: initial;
+    margin-right: .08rem;
+}
+.van-tabs__wrap--scrollable .van-tab {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+    flex: 1 0 auto;
+    padding: 0 12px;
+}
+.van-tab--active {
+    color: #323233;
+    font-weight: 500;
+}
+.tabs .van-tab__text {
+    font-size: .13rem;
+    color: grey;
+}
+#app .router-view {
+    width: 100vw;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+#app {
+    font-size: 0.14rem;
+    width: 100vw;
+    height: 100%;
+    background-color: #000;
+    margin: 0 auto;
+    min-height: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.tabs .van-tabs__line {
+    width: .3rem;
+    height: .01rem;
+    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);
+    bottom: .22rem;
+}
+.van-tabs__line{
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    z-index: 1;
+    width: 40px;
+    height: 3px;
+    background-color: #ee0a24;
+    border-radius: 3px;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+    height: 100vh;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask {
+    z-index: 9999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    background-color: rgba(0, 0, 0, .3);
+}
+.referralPayment {
+    background: #fff;
+    border-radius: .04rem;
+    height: -webkit-calc(100vh - 1.5rem);
+    height: calc(100vh - 1.5rem);
+    padding: 0 .1rem;
+    margin: 0 .1rem;
+    font-family: SWISSC;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.referralPayment .header li {
+    font-size: .13rem;
+    height: .3rem;
+    font-weight: 700;
+    line-height: .3rem;
+}
+.referralPayment li {
+    height: .26rem;
+    line-height: .26rem;
+    border-bottom: .01rem solid #ccc;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    color: grey;
+    font-size: .1rem;
+    text-align: right;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+.referralPayment li div:first-child {
+    min-width: .38rem;
+}
+.referralPayment li div {
+    width: 25%;
+}
+.referralPayment li div:nth-child(2) {
+    width: 100%;
+}
+.referralPayment li div:nth-child(3) {
+    min-width: .66rem;
+}
+.referralPayment li div:nth-child(4) {
+    min-width: .66rem;
+}
+.referralPayment .list {
+    height: -webkit-calc(100vh - 1.9rem);
+    height: calc(100vh - 1.9rem);
+    overflow: auto;
+}
+body .van-list__finished-text {
+    font-size: .11rem;
+}
+.van-list__error-text, .van-list__finished-text, .van-list__loading {
+    color: #969799;
+    font-size: 14px;
+    line-height: 50px;
+    text-align: center;
+}
+.van-list__placeholder {
+    height: 0;
+    pointer-events: none;
+}

src/app/[locale]/affiliate/payments/page.tsx

@@ -0,0 +1,70 @@
+import { FC, PropsWithChildren } from "react";
+import './page.css'
+
+interface Props { }
+const App: FC<PropsWithChildren<Props>> = (props) =>{
+    return (
+        <div className="vux-drawer">
+            <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
+                <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
+                    <div className="headerBack">
+                        <div className="left">
+                            <span className="iconfont icon-xiangzuo1"></span>
+                        </div>
+                        <span className="title">
+                            Afiliado 
+                            <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
+                        </span>
+                        <span className="right">
+                            <span className="iconfont icon-shouye1 router-link-active"></span>
+                        </span>
+                    </div>
+                    <div className="tabs alginLeft van-tabs van-tabs--line">
+                        <div className="van-tabs__wrap van-tabs__wrap--scrollable">
+                            <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
+                                <div className="van-tab">
+                                    <span className="van-tab__text">PAINEL</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">REFERÊNCIAS</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">RELATÓRIO</span>
+                                </div>
+                                <div className="van-tab van-tab--active" aria-selected="true">
+                                    <span className="van-tab__text">PAGAMENTOS</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">FAQ</span>  
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">TUTORIAL</span>
+                                </div>
+                                <div className="van-tabs__line" style={{transform: "translateX(358px) translateX(-50%); transition-duration: 0.3s"}}></div>
+                            </div>
+                        </div>
+                        <div className="van-tabs__content"></div>
+                    </div>
+                    <div className="content">
+                        <div className="referralPayment referral-router-view">
+                            <ul className="header">
+                                <li>
+                                    <div>Data</div>
+                                    <div>Detalhe</div>
+                                    <div>Comissão</div>
+                                    <div>Status</div>
+                                </li>
+                            </ul>
+                            <div role="feed" className="list van-list">
+                                <div className="van-list__finished-text">Opa! Ainda não há dados!</div>
+                                <div className="van-list__placeholder"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="drawer-mask"></div>
+            </div>
+        </div>
+    )
+}
+export default App

src/app/[locale]/affiliate/referrals/page.css

@@ -0,0 +1,342 @@
+.vux-drawer {
+    display: block;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+}
+.vux-drawer>.vux-drawer-body {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    -o-transition: transform ease-in-out .38s, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
+}
+#app, .router-view {
+    max-width: 4.02rem;
+}
+#app .router-view {
+    width: 100vw;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.headerBack .left,.headerBack {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.headerBack {
+    position: fixed;
+    z-index: 9;
+    height: .44rem;
+    width: 100%;
+    font-family: SWISSC-BT;
+    max-width: 4.02rem;
+    background-color: #0d1933;
+    padding: 0 .14rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+.headerBack .iconfont {
+    font-size: .24rem;
+    color: #fff;
+    width: .4rem;
+    cursor: pointer;
+}
+.headerBack .title {
+    color: #fff;
+    font-size: .2rem;
+    width: 100%;
+}
+.headerBack .title span {
+    font-size: .16rem !important;
+}
+.headerBack .right {
+    width: .4rem;
+    text-align: right;
+}
+.headerBack .right .icon-shouye1 {
+    display: inline-block;
+    font-size: .24rem;
+    color: #fff;
+}
+.tabs {
+    margin: .44rem .06rem 0;
+    height: .36rem;
+    line-height: .36rem;
+    font-family: SWISSC;
+}
+.van-tab__text-wrapper, .van-tabs {
+    position: relative;
+}
+.tabs.van-tabs--line .van-tabs__wrap {
+    height: 100%;
+}
+.van-tabs--line .van-tabs__wrap {
+    height: 44px;
+}
+.van-tabs__wrap {
+    overflow: hidden;
+}
+.tabs .van-tabs__nav--line {
+    padding-bottom: .15rem;
+}
+.tabs .van-tabs__nav {
+    background: 0 0;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+.van-tabs__nav--line.van-tabs__nav--complete {
+    padding-right: 8px;
+    padding-left: 8px;
+}
+.van-tabs__wrap--scrollable .van-tabs__nav {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+.van-tabs__nav--line.van-tabs__nav--complete {
+    padding-right: 8px;
+    padding-left: 8px;
+}
+.van-tabs__nav--line {
+    box-sizing: content-box;
+    height: 100%;
+    padding-bottom: 15px;
+}
+.van-tabs__nav {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    background-color: #fff;
+    -webkit-user-select: none;
+    user-select: none;
+}
+.tabs.alginLeft .van-tab {
+    margin-right: 0 !important;
+    padding: 0 .04rem;
+}
+body .van-tabs.alginLeft .van-tab {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: initial;
+    -ms-flex: initial;
+    flex: initial;
+    margin-right: .08rem;
+}
+.van-tabs__wrap--scrollable .van-tab {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+    flex: 1 0 auto;
+    padding: 0 12px;
+}
+.van-tab--active {
+    color: #323233;
+    font-weight: 500;
+}
+.tabs .van-tab__text {
+    font-size: .13rem;
+    color: grey;
+}
+#app .router-view {
+    width: 100vw;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+#app {
+    font-size: 0.14rem;
+    width: 100vw;
+    height: 100%;
+    background-color: #000;
+    margin: 0 auto;
+    min-height: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.tabs .van-tabs__line {
+    width: .3rem;
+    height: .01rem;
+    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);
+    bottom: .22rem;
+}
+.van-tabs__line{
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    z-index: 1;
+    width: 40px;
+    height: 3px;
+    background-color: #ee0a24;
+    border-radius: 3px;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+    height: 100vh;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask {
+    z-index: 9999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    background-color: rgba(0, 0, 0, .3);
+}
+.referral.referral-router-view {
+    background: #fff;
+    border-radius: .04rem;
+    height: -webkit-calc(100vh - 1.5rem);
+    height: calc(100vh - 1.5rem);
+    padding: 0 .1rem;
+    margin: 0 .1rem;
+    font-family: SWISSC;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.referral .search {
+    padding-top: .12rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    margin-bottom: .1rem;
+}
+.referral .search>div:first-child {
+    margin-right: .16rem;
+    padding-left: .1rem;
+}
+.referral .search>div {
+    border: .01rem solid #bababa;
+    width: 43%;
+    border-radius: .02rem;
+    height: .28rem;
+    line-height: .28rem;
+    font-size: .12rem;
+    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;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.referral .search>div .icon-guanbi, .referral .search>div .icon-rili {
+    font-size: .16rem;
+    margin-right: .04rem;
+    color: #aaa;
+    margin-left: .04rem;
+}
+.referral .search>div .icon-guanbi {
+    font-size: .13rem;
+}
+.referral .header li {
+    font-weight: 700;
+    font-size: .13rem;
+    height: .3rem;
+    line-height: .3rem;
+}
+.referral li {
+    height: .26rem;
+    line-height: .26rem;
+    border-bottom: .01rem solid #ccc;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    color: grey;
+    font-size: .1rem;
+    text-align: right;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+.referral li div:first-child {
+    min-width: .2rem;
+}
+.referral li div:nth-child(2) {
+    min-width: .6rem;
+}
+.referral li div:nth-child(3) {
+    min-width: .7rem;
+}
+.referral li div:nth-child(4) {
+    min-width: 1.1rem;
+}
+.referral li div:nth-child(5) {
+    width: 100%;
+}
+.referral .list {
+    max-height: -webkit-calc(100vh - 2.96rem);
+    max-height: calc(100vh - 2.96rem);
+    overflow: auto;
+}
+body .van-list__finished-text {
+    font-size: .11rem;
+}
+.van-list__error-text, .van-list__finished-text, .van-list__loading {
+    color: #969799;
+    font-size: 14px;
+    line-height: 50px;
+    text-align: center;
+}
+.van-list__placeholder {
+    height: 0;
+    pointer-events: none;
+}
+.referral .total>div, .referral .total {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin-right: .12rem;
+}
+.referral .total {
+    padding-top: .12rem;
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+}
+.referral .total>div {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    font-size: .12rem;
+    color: grey;
+}
+.referral .total>div .num {
+    font-family: SWISSC-BT;
+    font-size: .18rem;
+    color: #000;
+}

src/app/[locale]/affiliate/referrals/page.tsx

@@ -0,0 +1,90 @@
+import { FC, PropsWithChildren } from "react";
+import './page.css'
+
+interface Props { }
+const App: FC<PropsWithChildren<Props>> = (props) =>{
+    return (
+        <div className="vux-drawer">
+            <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
+                <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
+                    <div className="headerBack">
+                        <div className="left">
+                            <span className="iconfont icon-xiangzuo1"></span>
+                        </div>
+                        <span className="title">
+                            Afiliado 
+                            <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
+                        </span>
+                        <span className="right">
+                            <span className="iconfont icon-shouye1 router-link-active"></span>
+                        </span>
+                    </div>
+                    <div className="tabs alginLeft van-tabs van-tabs--line">
+                        <div className="van-tabs__wrap van-tabs__wrap--scrollable">
+                            <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
+                                <div className="van-tab">
+                                    <span className="van-tab__text">PAINEL</span>
+                                </div>
+                                <div className="van-tab van-tab--active" aria-selected="true">
+                                    <span className="van-tab__text">REFERÊNCIAS</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">RELATÓRIO</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">PAGAMENTOS</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">FAQ</span>  
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">TUTORIAL</span>
+                                </div>
+                                <div className="van-tabs__line" style={{transform: "translateX(134.5px) translateX(-50%)", transitionDuration:"0.3s"}}></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="content">
+                        <div className="referral referral-router-view">
+                            <div className="search">
+                                <div className="time">
+                                    <span className="dateTime"></span>
+                                    <div>
+                                        <span className="iconfont icon-rili"></span>
+                                        <span className="iconfont icon-guanbi"></span>
+                                    </div>
+                                </div>
+                            </div>
+                            <ul className="header">
+                                <li>
+                                    <div>#</div>
+                                    <div>Conta</div>
+                                    <div>Apostas(R$)</div>
+                                    <div>Aposta equipe(R$)</div>
+                                    <div>Comissão</div>
+                                </li>
+                            </ul>
+                            <div role="feed" className="list van-list">
+                                <div className="van-list__finished-text">Opa! Ainda não há dados!</div>
+                                <div className="van-list__placeholder"></div>
+                            </div>
+                            <div className="total">
+                                <div>
+                                    <span className="num">R$ 0</span>
+                                    <span>Aposta válidas em equipe[0]</span>
+                                </div>
+                                <div>
+                                    <span className="num">R$ 0</span>
+                                    <span>Comissão</span>
+                                </div>
+                            </div>
+                            {/* 日历 */}
+                        </div>
+                    </div>
+                </div>
+                <div className="drawer-mask"></div>
+            </div>
+        </div>
+    )
+}
+export default App

src/app/[locale]/affiliate/report/page.css

@@ -0,0 +1,274 @@
+.vux-drawer {
+    display: block;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+}
+.vux-drawer>.vux-drawer-body {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    -o-transition: transform ease-in-out .38s, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
+}
+#app, .router-view {
+    max-width: 4.02rem;
+}
+#app .router-view {
+    width: 100vw;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.headerBack .left,.headerBack {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.headerBack {
+    position: fixed;
+    z-index: 9;
+    height: .44rem;
+    width: 100%;
+    font-family: SWISSC-BT;
+    max-width: 4.02rem;
+    background-color: #0d1933;
+    padding: 0 .14rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+.headerBack .iconfont {
+    font-size: .24rem;
+    color: #fff;
+    width: .4rem;
+    cursor: pointer;
+}
+.headerBack .title {
+    color: #fff;
+    font-size: .2rem;
+    width: 100%;
+}
+.headerBack .title span {
+    font-size: .16rem !important;
+}
+.headerBack .right {
+    width: .4rem;
+    text-align: right;
+}
+.headerBack .right .icon-shouye1 {
+    display: inline-block;
+    font-size: .24rem;
+    color: #fff;
+}
+.tabs {
+    margin: .44rem .06rem 0;
+    height: .36rem;
+    line-height: .36rem;
+    font-family: SWISSC;
+}
+.van-tab__text-wrapper, .van-tabs {
+    position: relative;
+}
+.tabs.van-tabs--line .van-tabs__wrap {
+    height: 100%;
+}
+.van-tabs--line .van-tabs__wrap {
+    height: 44px;
+}
+.van-tabs__wrap {
+    overflow: hidden;
+}
+.tabs .van-tabs__nav--line {
+    padding-bottom: .15rem;
+}
+.tabs .van-tabs__nav {
+    background: 0 0;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+.van-tabs__nav--line.van-tabs__nav--complete {
+    padding-right: 8px;
+    padding-left: 8px;
+}
+.van-tabs__wrap--scrollable .van-tabs__nav {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+.van-tabs__nav--line.van-tabs__nav--complete {
+    padding-right: 8px;
+    padding-left: 8px;
+}
+.van-tabs__nav--line {
+    box-sizing: content-box;
+    height: 100%;
+    padding-bottom: 15px;
+}
+.van-tabs__nav {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    background-color: #fff;
+    -webkit-user-select: none;
+    user-select: none;
+}
+.tabs.alginLeft .van-tab {
+    margin-right: 0 !important;
+    padding: 0 .04rem;
+}
+body .van-tabs.alginLeft .van-tab {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: initial;
+    -ms-flex: initial;
+    flex: initial;
+    margin-right: .08rem;
+}
+.van-tabs__wrap--scrollable .van-tab {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+    flex: 1 0 auto;
+    padding: 0 12px;
+}
+.van-tab--active {
+    color: #323233;
+    font-weight: 500;
+}
+.tabs .van-tab__text {
+    font-size: .13rem;
+    color: grey;
+}
+#app .router-view {
+    width: 100vw;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+#app {
+    font-size: 0.14rem;
+    width: 100vw;
+    height: 100%;
+    background-color: #000;
+    margin: 0 auto;
+    min-height: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.tabs .van-tabs__line {
+    width: .3rem;
+    height: .01rem;
+    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);
+    bottom: .22rem;
+}
+.van-tabs__line{
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    z-index: 1;
+    width: 40px;
+    height: 3px;
+    background-color: #ee0a24;
+    border-radius: 3px;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+    height: 100vh;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask {
+    z-index: 9999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    background-color: rgba(0, 0, 0, .3);
+}
+.report {
+    background: #fff;
+    border-radius: .04rem;
+    height: -webkit-calc(100vh - 1.5rem);
+    height: calc(100vh - 1.5rem);
+    padding: 0 .1rem;
+    margin: 0 .1rem;
+    font-family: SWISSC;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.report .header li {
+    font-weight: 700;
+    font-size: .13rem;
+    height: .3rem;
+    line-height: .3rem;
+}
+.report li {
+    height: .26rem;
+    line-height: .26rem;
+    border-bottom: .01rem solid #ccc;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    color: grey;
+    font-size: .1rem;
+    text-align: right;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+.report li div:first-child {
+    min-width: .2rem;
+}
+.report li div:nth-child(2) {
+    min-width: .6rem;
+}
+.report li div:nth-child(3) {
+    min-width: .7rem;
+}
+.report li div:nth-child(4) {
+    min-width: 1.1rem;
+}
+.report li div:nth-child(5) {
+    width: 100%;
+}
+.report .list {
+    height: -webkit-calc(100vh - 1.9rem);
+    height: calc(100vh - 1.9rem);
+    overflow: auto;
+}
+body .van-list__finished-text {
+    font-size: .11rem;
+}
+.van-list__error-text, .van-list__finished-text, .van-list__loading {
+    color: #969799;
+    font-size: 14px;
+    line-height: 50px;
+    text-align: center;
+}
+.van-list__placeholder {
+    height: 0;
+    pointer-events: none;
+}

src/app/[locale]/affiliate/report/page.tsx

@@ -0,0 +1,70 @@
+import { FC, PropsWithChildren } from "react";
+import './page.css'
+
+interface Props { }
+const App: FC<PropsWithChildren<Props>> = (props) =>{
+    return (
+        <div className="vux-drawer">
+            <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
+                <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
+                    <div className="headerBack">
+                        <div className="left">
+                            <span className="iconfont icon-xiangzuo1"></span>
+                        </div>
+                        <span className="title">
+                            Afiliado 
+                            <span style={{fontSize: "0.14rem"}}> - Ganhe R$ 10.000 por dia</span>
+                        </span>
+                        <span className="right">
+                            <span className="iconfont icon-shouye1 router-link-active"></span>
+                        </span>
+                    </div>
+                    <div className="tabs alginLeft van-tabs van-tabs--line">
+                        <div className="van-tabs__wrap van-tabs__wrap--scrollable">
+                            <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
+                                <div className="van-tab">
+                                    <span className="van-tab__text">PAINEL</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">REFERÊNCIAS</span>
+                                </div>
+                                <div className="van-tab van-tab--active" aria-selected="true">
+                                    <span className="van-tab__text">RELATÓRIO</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">PAGAMENTOS</span>
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">FAQ</span>  
+                                </div>
+                                <div className="van-tab">
+                                    <span className="van-tab__text">TUTORIAL</span>
+                                </div>
+                                <div className="van-tabs__line" style={{transform: "translateX(246px) translateX(-50%)",transitionDuration: "0.3s"}}></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="content">
+                        <div className="report referral-router-view">
+                            <ul className="header">
+                                <li>
+                                    <div>#</div>
+                                    <div>Conta</div>
+                                    <div>Apostas(R$)</div>
+                                    <div>Aposta equipe(R$)</div>
+                                    <div>Comissão</div>
+                                </li>
+                            </ul>
+                            <div role="feed" className="list van-list">
+                                <div className="van-list__finished-text">Opa! Ainda não há dados!</div>
+                                <div className="van-list__placeholder"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="drawer-mask"></div>
+            </div>
+        </div>
+    )
+}
+export default App

src/app/[locale]/affiliate/summary/page.css

@@ -1,17 +1,5 @@
-#app.widthLimit,#app.widthLimit .router-view{
+.router-view{
     max-width: 4.02rem;
-}
-#app {
-    font-size: 0.14rem;
-    width: 100vw;
-    height: 100%;
-    background-color: #000;
-    margin: 0 auto;
-    min-height: 100%;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-#app .router-view {
     width: 100vw;
     height: 100%;
     overflow-y: auto;
@@ -24,7 +12,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;
+    min-height: 100vh;
 }
 .vux-drawer>.vux-drawer-body {
     height: 100%;
@@ -91,7 +79,7 @@
     font-family: SWISSC-BT;
     max-width: 4.02rem;
     background-color: #0d1933;
-    padding: 0.14rem;
+    padding: 0 .14rem;
     box-sizing: border-box;
     transform: translateZ(0);
 }
@@ -115,7 +103,7 @@
     width: 100%;
 }
 .headerBack .title span {
-    font-size: 0.16rem !important;
+    font-size: 0.16rem;
 }
 .headerBack .right{
     width: 0.4rem;
@@ -152,7 +140,7 @@
     display: flex;
     user-select: none;
 }
-.tabs  .van-tab {
+.tabs.alginLeft .van-tab {
     margin-right: 0 !important;
     padding: 0 .04rem;
 }
@@ -611,4 +599,29 @@ ul.rules li {
     font-size: .06rem;
     color: #a6a6a6;
     margin-right: .1rem;
+}
+.tabs .van-tabs__line{
+    width: .3rem;
+    height: .01rem;
+    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);
+    bottom: .22rem
+}
+.van-tabs__line {
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    z-index: 1;
+    width: 40px;
+    height: 3px;
+    background-color: #ee0a24;
+    border-radius: 3px;
+}
+.van-tabs__wrap--scrollable .van-tab {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 auto;
+    flex: 1 0 auto;
+    padding: 0 12px;
 }

src/app/[locale]/affiliate/summary/page.tsx

@@ -5,9 +5,8 @@ interface Props { }
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
     return (
-        <div id="app" className="widthLimit" style={{ overflow: "hidden" }}>
-            <div className="vue-drawer">
-                <div className="vue-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
+            <div className="vux-drawer">
+                <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
                     <div className="referral router-view" id="id-router-view" style={{ backgroundColor: "rgb(237, 237, 237)" }}>
                         <div className="headerBack">
                             <div className="left">
@@ -49,6 +48,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                     <div role="tab" className="van-tab">
                                         <span className="van-tab__text">TUTORIAL</span>
                                     </div>
+                                    <div className="van-tabs__line" style={{transform: "translateX(40px) translateX(-50%);transition-duration: 0.3s"}}></div>
                                 </div>
                             </div>
                             <div className="van-tabs__content" />
@@ -275,8 +275,6 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                     </div>
                 </div>
             </div>
-        </div>
-
     );
 };
 

src/app/globals.css

@@ -4,7 +4,8 @@
 @import "@/styles/iconfont/iconfont.css";
 html, body {
     width: 100vw;
-    height: auto;
+    height: 100%;
+    min-height: 80%;
 }
 
 ::-webkit-scrollbar {