fix:公共组件以及国际化

messages/br.json

@@ -111,15 +111,20 @@
   "HeaderBack": {
     "Depósito": "Depósito"
   },
-  "SummaryPage":{
+  "HeaderCom":{
     "Afiliado":"Afiliado",
-    "title":"Ganhe R$ 10.000 por dia",
+    "title":"Ganhe R$ 10.000 por dia"
+  },
+  "TabsCom":{
     "PAINEL":"PAINEL",
     "REFERÊNCIAS":"REFERÊNCIAS",
     "RELATÓRIO":"RELATÓRIO",
     "PAGAMENTOS":"PAGAMENTOS",
     "FAQ":"FAQ",
-    "TUTORIAL":"TUTORIAL",
+    "TUTORIAL":"TUTORIAL"
+  },
+  "SummaryPage":{
+    "copySuc":"Copy succeeded",
     "Hoje":"Hoje",
     "Inscrições":"Inscrições",
     "Novos":"Novos jogadores",
@@ -157,14 +162,6 @@
     "content4-2":"O sistema calcula a comissão a cada 3 minutos."
   },
   "ReferralsPage":{
-    "Afiliado":"Afiliado",
-    "Ganhe":"Ganhe R$ 10.000 por dia",
-    "PAINEL":"PAINEL",
-    "REFERÊNCIAS":"REFERÊNCIAS",
-    "RELATÓRIO":"RELATÓRIO",
-    "PAGAMENTOS":"PAGAMENTOS",
-    "FAQ":"FAQ",
-    "TUTORIAL":"TUTORIAL",
     "Conta":"Conta",
     "Apostas":"Apostas",
     "R$":"R$",
@@ -174,14 +171,6 @@
     "Aposta":"Aposta válidas em equipe[0]"
   },
   "ReportPage":{
-    "Afiliado":"Afiliado",
-    "Ganhe":"Ganhe R$ 10.000 por dia",
-    "PAINEL":"PAINEL",
-    "REFERÊNCIAS":"REFERÊNCIAS",
-    "RELATÓRIO":"RELATÓRIO",
-    "PAGAMENTOS":"PAGAMENTOS",
-    "FAQ":"FAQ",
-    "TUTORIAL":"TUTORIAL",
     "Conta":"Conta",
     "Apostas":"Apostas",
     "R$":"R$",
@@ -190,14 +179,6 @@
     "Opa":"Opa! Ainda não há dados!"
   },
   "PaymentsPage":{
-    "Afiliado":"Afiliado",
-    "Ganhe":"Ganhe R$ 10.000 por dia",
-    "PAINEL":"PAINEL",
-    "REFERÊNCIAS":"REFERÊNCIAS",
-    "RELATÓRIO":"RELATÓRIO",
-    "PAGAMENTOS":"PAGAMENTOS",
-    "FAQ":"FAQ",
-    "TUTORIAL":"TUTORIAL",
     "Data":"Data",
     "Detalhe":"Detalhe",
     "Comissão":"Comissão",
@@ -205,14 +186,6 @@
     "Opa":"Opa! Ainda não há dados!"
   },
   "FaqPage":{
-    "Afiliado":"Afiliado",
-    "title":"Ganhe R$ 10.000 por dia",
-    "PAINEL":"PAINEL",
-    "REFERÊNCIAS":"REFERÊNCIAS",
-    "RELATÓRIO":"RELATÓRIO",
-    "PAGAMENTOS":"PAGAMENTOS",
-    "FAQ":"FAQ",
-    "TUTORIAL":"TUTORIAL",
     "title1":"O que é o programa de afiliados 9F.COM?",
     "content1":"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.",
     "title2":"QUANTO CUSTA PARA PARTICIPAR?",

src/app/[locale]/affiliate/component/HeaderCom/index.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { FC, PropsWithChildren, useRef, useState } from "react";
+import { useRouter } from "@/i18n";
+import { useTranslations } from "next-intl";
+import './style.scss'
+
+interface Props { }
+const App: FC<PropsWithChildren<Props>> = (props) => {
+    const t = useTranslations("HeaderCom")
+    const router: any = useRouter()
+    const goPage = (path = '') => {
+        if (path) {
+            router.replace('/')
+            return
+        }
+        router.back()
+    }
+    return (
+        <div className="headerBack">
+            <div className="left" onClick={() => goPage()}>
+                <span className="iconfont icon-xiangzuo1"></span>
+            </div>
+            <span className="title">
+                {t("Afiliado")}
+                <span style={{ fontSize: "0.14rem" }}> - {t("title")}</span>
+            </span>
+            <span className="right" onClick={() => goPage('home')}>
+                <span className="iconfont icon-home_line router-link-active"></span>
+            </span>
+        </div>
+    )
+}
+export default App

src/app/[locale]/affiliate/component/HeaderCom/style.scss

@@ -0,0 +1,51 @@
+.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);
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    .left{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+    }
+    .iconfont {
+        font-size: .24rem;
+        color: #fff;
+        width: .4rem;
+        cursor: pointer;
+    }
+    .title {
+        color: #fff;
+        font-size: .2rem;
+        width: 100%;
+    }
+    .title span {
+        font-size: .16rem !important;
+    }
+    .right {
+        width: .4rem;
+        text-align: right;
+    }
+    .right .icon-home_line {
+        display: inline-block;
+        font-size: .24rem;
+        color: #fff;
+    }
+}

src/app/[locale]/affiliate/component/TabsCom/index.tsx

@@ -0,0 +1,50 @@
+'use client'
+import { FC, PropsWithChildren, useEffect, useRef, useState } from "react";
+import { useRouter } from "@/i18n";
+import { useTranslations } from "next-intl";
+import './style.scss'
+
+interface Props {  }
+const App: FC<PropsWithChildren<Props>> = (props) => {
+    const t = useTranslations("TabsCom")
+    const router: any = useRouter()
+    const [lineX, setLineX] = useState(0.27)
+    const [activeTab,setActiveTab] = useState(1)
+    const goPage = (id:number) => {
+        const tab = tabs.find((tab)=>tab.id===id)
+        setActiveTab(id)
+        if(tab){
+            setLineX(tab.x)
+            router.replace(`/affiliate/${tab.page}`)
+        } 
+    }
+    const tabs = [
+        { id: 1, page: 'summary', content: t("PAINEL"), x: 0.27 },
+        { id: 2, page: 'referrals', content: t("REFERÊNCIAS"), x: 0.93 },
+        { id: 3, page: 'report', content: t("RELATÓRIO"), x: 1.7 },
+        { id: 4, page: 'payments', content: t("PAGAMENTOS"), x: 2.48 },
+        { id: 5, page: 'faq', content: t("FAQ"), x: 3.06 },
+    ]
+
+    return (
+        <div className="tabsCom">
+            <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">
+                        {tabs.map((tab) => (
+                            <div className={`van-tab ${activeTab===tab.id?'van-tab--active':''}`} onClick={() => goPage(tab.id)} key={tab.id}>
+                                <span className="van-tab__text">{tab.content}</span>
+                            </div>
+                        ))}
+                        <div className="van-tab">
+                            <span className="van-tab__text">{t("TUTORIAL")}</span>
+                        </div>
+                        <div className="van-tabs__line" style={{ transform: `translateX(${lineX}rem) translateX(-50%)`, transitionDuration: "0.3s" }}></div>
+                    </div>
+                </div>
+                <div className="van-tabs__content" ></div>
+            </div>
+        </div>
+    )
+}
+export default App

src/app/[locale]/affiliate/component/TabsCom/style.scss

@@ -0,0 +1,123 @@
+.tabsCom{
+    .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;
+    }
+    .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;
+    }
+    .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-tab {
+        position: relative;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-box-flex: 1;
+        -webkit-flex: 1;
+        flex: 1;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        box-sizing: border-box;
+        padding: 0 4px;
+        color: #646566;
+        font-size: 14px;
+        line-height: 20px;
+        cursor: pointer;
+    }
+}

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

@@ -1,208 +1,4 @@
-.vux-drawer-faq{
-    display: block;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-height: 100vh;
-.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;
-}
-.router-view {
-    max-width: 4.02rem;
-}
-.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-home_line {
-    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;
-}
-.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 {
-//     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;
-    transform: translateX(442px) translateX(-50%); 
-    transition-duration: 0.3s;
-}
-.van-tabs__line{
-    position: absolute;
-    bottom: 15px;
-    left: 0;
-    z-index: 1;
-    width: 40px;
-    height: 3px;
-    background-color: #ee0a24;
-    border-radius: 3px;
-}
-.vux-drawer-body>.drawer-mask, .vux-drawer-content {
-    height: 100vh;
-}
-.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);
-}
+.content{
 .referralFaq {
     font-family: SWISSC;
     background: #fff;
@@ -335,25 +131,4 @@ ul.rules li {
 .referralFaq .content div p {
     margin: .04rem 0;
 }
-.van-tab {
-    position: relative;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: 0 4px;
-    color: #646566;
-    font-size: 14px;
-    line-height: 20px;
-    cursor: pointer;
-}
 }

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

@@ -1,163 +1,107 @@
 'use client'
-import { FC, PropsWithChildren ,useRef, useState } from "react";
+import { FC, PropsWithChildren, useRef, useState } from "react";
 import { useRouter } from "@/i18n";
 import { useTranslations } from "next-intl";
 import './page.scss'
+import HeaderCom from '../component/HeaderCom'
+import TabsCom from "../component/TabsCom"
 
 interface Props { }
-const App: FC<PropsWithChildren<Props>> = (props) =>{
+const App: FC<PropsWithChildren<Props>> = (props) => {
     const t = useTranslations("FaqPage")
-    const router:any = useRouter()
-    const goPage = (path = '')=>{
-        if(path){
-            if(path === 'home'){
-                router.replace('/')
-                return
-            }
-            
-            console.log(router);
-            
-            router.replace(`/affiliate/${path}`)
-            return 
-        }
-        router.back()
-    }
+
     const sliderRef = useRef<HTMLDivElement>(null)
-    const [num,setNum] = useState(100)
-    const [money,setMoney] = useState('5000')
-    const handleSlide:any =(e:React.MouseEvent<HTMLDivElement,MouseEvent>)=>{
-        if(sliderRef.current){
+    const [num, setNum] = useState(100)
+    const [money, setMoney] = useState('5000')
+    const handleSlide: any = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (sliderRef.current) {
             const startX = sliderRef.current.getBoundingClientRect().x
             const x = e.clientX - startX
-            const xRem = x/(144*0.6)
-            const intNum = Math.round(10000*xRem)-Math.round(10000*xRem%10)
+            const xRem = x / (144 * 0.6)
+            const intNum = Math.round(10000 * xRem) - Math.round(10000 * xRem % 10)
             setNum(intNum)
-            const m = intNum*50
+            const m = intNum * 50
             let r = ''
             const arr = m.toString().split('')
-            arr.forEach((item,i)=>{
-                if(i!==(arr.length-1)&&(arr.length-i-1)%3===0){
+            arr.forEach((item, i) => {
+                if (i !== (arr.length - 1) && (arr.length - i - 1) % 3 === 0) {
                     r += item + ','
-                }else{
+                } else {
                     r += item
                 }
             })
-            
+
             setMoney(r)
 
-            const scale = ((Math.round((xRem * 10000)))/100.00).toFixed(2) + '%';
+            const scale = ((Math.round((xRem * 10000))) / 100.00).toFixed(2) + '%';
             sliderRef.current.style.width = scale
         }
     }
     return (
-        <div className="vux-drawer-faq">
-            <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" onClick={()=>goPage()}>
-                            <span className="iconfont icon-xiangzuo1"></span>
-                        </div>
-                        <span className="title">
-                            {t("Afiliado")} 
-                            <span style={{fontSize: "0.14rem"}}> - {t("title")}</span>
-                        </span>
-                        <span className="right" onClick={()=>goPage('home')}>
-                            <span className="iconfont icon-home_line router-link-active"></span>
-                        </span>
+        <div className="content">
+            <div className="referralFaq referralFaq referral-router-view">
+                <div className="content">
+                    <h2>{t("title1")}</h2>
+                    <div>
+                        {t("content1")}
                     </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" onClick={()=>goPage('summary')}>
-                                    <span className="van-tab__text">{t("PAINEL")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('referrals')}>
-                                    <span className="van-tab__text">{t("REFERÊNCIAS")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('report')}>
-                                    <span className="van-tab__text">{t("RELATÓRIO")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('payments')}>
-                                    <span className="van-tab__text">{t("PAGAMENTOS")}</span>
-                                </div>
-                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('faq')}>
-                                    <span className="van-tab__text">{t("FAQ")}</span>  
-                                </div>
-                                <div className="van-tab">
-                                    <span className="van-tab__text">{t("TUTORIAL")}</span>
-                                </div>
-                                <div className="van-tabs__line"></div>
-                            </div>
-                        </div>
+                </div>
+                <div className="content">
+                    <h2>{t("title2")}</h2>
+                    <div>{t("content2")}</div>
+                </div>
+                <div className="content">
+                    <h2>{t("title3")}</h2>
+                    <div>
+                        {t("content3")}
                     </div>
-                    <div className="content">
-                        <div className="referralFaq referralFaq referral-router-view">
-                            <div className="content">
-                                <h2>{t("title1")}</h2>
-                                <div>
-                                    {t("content1")}
-                                </div>
-                            </div>
-                            <div className="content">
-                                <h2>{t("title2")}</h2>
-                                <div>{t("content2")}</div>
-                            </div>
-                            <div className="content">
-                                <h2>{t("title3")}</h2>
-                                <div>
-                                    {t("content3")}
-                                </div>
-                            </div>
-                            <div className="content">
-                                <h2>{t("title4")} </h2>
-                                <div>{t("content4")}</div>
-                                <div className="link">
-                                    <a href="">{t("link1")}</a>
-                                    <a href="">{t("link2")}</a>
-                                </div>
-                            </div>
-                            <div className="imgContent rowReverse">
-                                <img src="/img/cash.png" alt="" />
-                                <div>
-                                    {t("number")} > {num}
-                                    <br />
-                                    {t("Comissão")} > {t("R$")} {money} {t("money")}
-                                </div>
-                                <div className="slider van-slider" style={{height: "0.02rem"}} onClick={handleSlide}>
-                                    <div className="van-slider__bar" style={{width: "0.900901%", background: "rgb(0, 157, 128)"}} ref={sliderRef}>
-                                        <div role="slider" className="van-slider__button-wrapper">
-                                            <div className="img"></div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="relationSchema">
-                                <div className="groupTitle">{t("title5")}</div>
-                                <img src="/img/group_br.webp" alt="" className="groupImg"/>
-                                <ul className="rules">
-                                    <li>
-                                        {t("content5-1")} 
-                                        <span style={{color:"red"}}>{t("red1")}</span>
-                                    </li>
-                                    <li>
-                                        {t("content5-2")}
-                                    </li>
-                                </ul>
-                            </div>
-                            <div className="content">
-                                <h2>{t("title6")}</h2>
-                                <div>
-                                    <p>{t("content6-1")}</p>
-                                    <p>{t("content6-2")}</p>
-                                    <p>
-                                        {t("content6-3")}
-                                    </p>
-                                </div>
+                </div>
+                <div className="content">
+                    <h2>{t("title4")} </h2>
+                    <div>{t("content4")}</div>
+                    <div className="link">
+                        <a href="">{t("link1")}</a>
+                        <a href="">{t("link2")}</a>
+                    </div>
+                </div>
+                <div className="imgContent rowReverse">
+                    <img src="/img/cash.png" alt="" />
+                    <div>
+                        {t("number")} > {num}
+                        <br />
+                        {t("Comissão")} > {t("R$")} {money} {t("money")}
+                    </div>
+                    <div className="slider van-slider" style={{ height: "0.02rem" }} onClick={handleSlide}>
+                        <div className="van-slider__bar" style={{ width: "0.900901%", background: "rgb(0, 157, 128)" }} ref={sliderRef}>
+                            <div role="slider" className="van-slider__button-wrapper">
+                                <div className="img"></div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div className="drawer-mask"></div>
+                <div className="relationSchema">
+                    <div className="groupTitle">{t("title5")}</div>
+                    <img src="/img/group_br.webp" alt="" className="groupImg" />
+                    <ul className="rules">
+                        <li>
+                            {t("content5-1")}
+                            <span style={{ color: "red" }}>{t("red1")}</span>
+                        </li>
+                        <li>
+                            {t("content5-2")}
+                        </li>
+                    </ul>
+                </div>
+                <div className="content">
+                    <h2>{t("title6")}</h2>
+                    <div>
+                        <p>{t("content6-1")}</p>
+                        <p>{t("content6-2")}</p>
+                        <p>
+                            {t("content6-3")}
+                        </p>
+                    </div>
+                </div>
             </div>
         </div>
     )

src/app/[locale]/affiliate/layout.tsx

@@ -0,0 +1,29 @@
+import { getMessages } from "next-intl/server";
+import { ReactNode } from "react";
+import HeaderCom from './component/HeaderCom'
+import TabsCom from "./component/TabsCom"
+import './style.scss'
+export default async function LocaleLayout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    console.log(locale);
+    
+    const messages = await getMessages();
+    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)" }}>
+                    <HeaderCom></HeaderCom>
+                    <TabsCom></TabsCom>
+                    <div>
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -1,209 +1,4 @@
-.vux-drawer-payments{
-    display: block;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-height: 100vh;
-.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;
-}
-.router-view {
-    max-width: 4.02rem;
-}
-.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-home_line {
-    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;
-}
-.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 {
-//     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;
-    transform: translateX(358px) translateX(-50%); 
-    transition-duration: 0.3s;
-}
-.van-tabs__line{
-    position: absolute;
-    bottom: 15px;
-    left: 0;
-    z-index: 1;
-    width: 40px;
-    height: 3px;
-    background-color: #ee0a24;
-    border-radius: 3px;
-}
-.vux-drawer-body>.drawer-mask, .vux-drawer-content {
-    height: 100vh;
-}
-.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);
-}
+.content{
 .referralPayment {
     background: #fff;
     border-radius: .04rem;
@@ -267,25 +62,4 @@
     height: 0;
     pointer-events: none;
 }
-.van-tab {
-    position: relative;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: 0 4px;
-    color: #646566;
-    font-size: 14px;
-    line-height: 20px;
-    cursor: pointer;
-}
 }

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

@@ -2,86 +2,28 @@
 import { FC, PropsWithChildren } from "react";
 import { useRouter } from "@/i18n";
 import { useTranslations } from "next-intl";
+import HeaderCom from "../component/HeaderCom"
+import TabsCom from "../component/TabsCom"
 import './page.scss'
 
 interface Props { }
-const App: FC<PropsWithChildren<Props>> = (props) =>{
+const App: FC<PropsWithChildren<Props>> = (props) => {
     const t = useTranslations("PaymentsPage")
-    const router:any = useRouter()
-    const goPage = (path = '')=>{
-        if(path){
-            if(path === 'home'){
-                router.replace('/')
-                return
-            }
-            
-            console.log(router);
-            
-            router.replace(`/affiliate/${path}`)
-            return 
-        }
-        router.back()
-    }
     return (
-        <div className="vux-drawer-payments">
-            <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" onClick={()=>goPage()}>
-                            <span className="iconfont icon-xiangzuo1"></span>
-                        </div>
-                        <span className="title">
-                            {t("Afiliado")} 
-                            <span style={{fontSize: "0.14rem"}}> - {t("Ganhe")}</span>
-                        </span>
-                        <span className="right" onClick={()=>goPage('home')}>
-                            <span className="iconfont icon-home_line 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" onClick={()=>goPage('summary')}>
-                                    <span className="van-tab__text">{t("PAINEL")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('referrals')}>
-                                    <span className="van-tab__text">{t("REFERÊNCIAS")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('report')}>
-                                    <span className="van-tab__text">{t("RELATÓRIO")}</span>
-                                </div>
-                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('payments')}>
-                                    <span className="van-tab__text">{t("PAGAMENTOS")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('faq')}>
-                                    <span className="van-tab__text">{t("FAQ")}</span>  
-                                </div>
-                                <div className="van-tab">
-                                    <span className="van-tab__text">{t("TUTORIAL")}</span>
-                                </div>
-                                <div className="van-tabs__line"></div>
-                            </div>
-                        </div>
-                        <div className="van-tabs__content"></div>
-                    </div>
-                    <div className="content">
-                        <div className="referralPayment referral-router-view">
-                            <ul className="header">
-                                <li>
-                                    <div>{t("Data")}</div>
-                                    <div>{t("Detalhe")}</div>
-                                    <div>{t("Comissão")}</div>
-                                    <div>{t("Status")}</div>
-                                </li>
-                            </ul>
-                            <div role="feed" className="list van-list">
-                                <div className="van-list__finished-text">{t("Opa")}</div>
-                                <div className="van-list__placeholder"></div>
-                            </div>
-                        </div>
-                    </div>
+        <div className="content">
+            <div className="referralPayment referral-router-view">
+                <ul className="header">
+                    <li>
+                        <div>{t("Data")}</div>
+                        <div>{t("Detalhe")}</div>
+                        <div>{t("Comissão")}</div>
+                        <div>{t("Status")}</div>
+                    </li>
+                </ul>
+                <div role="feed" className="list van-list">
+                    <div className="van-list__finished-text">{t("Opa")}</div>
+                    <div className="van-list__placeholder"></div>
                 </div>
-                <div className="drawer-mask"></div>
             </div>
         </div>
     )

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

@@ -1,208 +1,4 @@
-.vux-drawer-referrals{
-    display: block;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-height: 100vh;
-.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;
-}
-.router-view {
-    max-width: 4.02rem;
-}
-.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-home_line {
-    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;
-}
-.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 {
-//     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;
-    transform: translateX(134.5px) translateX(-50%); transition-duration: 0.3s;
-}
-.van-tabs__line{
-    position: absolute;
-    bottom: 15px;
-    left: 0;
-    z-index: 1;
-    width: 40px;
-    height: 3px;
-    background-color: #ee0a24;
-    border-radius: 3px;
-}
-.vux-drawer-body>.drawer-mask, .vux-drawer-content {
-    height: 100vh;
-}
-.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);
-}
+.content{
 .referral.referral-router-view {
     background: #fff;
     border-radius: .04rem;
@@ -334,25 +130,4 @@
     font-size: .18rem;
     color: #000;
 }
-.van-tab {
-    position: relative;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: 0 4px;
-    color: #646566;
-    font-size: 14px;
-    line-height: 20px;
-    cursor: pointer;
-}
 }

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

@@ -1,108 +1,51 @@
 'use client'
-import { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren, useEffect } from "react";
 import { useRouter } from "@/i18n";
 import { useTranslations } from "next-intl";
 import './page.scss'
 
+
 interface Props { }
-const App: FC<PropsWithChildren<Props>> = (props) =>{
+const App: FC<PropsWithChildren<Props>> = (props) => {
     const t = useTranslations("ReferralsPage")
-    const router:any = useRouter()
-    const goPage = (path = '')=>{
-        if(path){
-            if(path === 'home'){
-                router.replace('/')
-                return
-            }
-            
-            console.log(router);
-            
-            router.replace(`/affiliate/${path}`)
-            return 
-        }
-        router.back()
-    }
+
 
     return (
-        <div className="vux-drawer-referrals">
-            <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" onClick={()=>goPage()}>
-                            <span className="iconfont icon-xiangzuo1"></span>
+        <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>
-                        <span className="title">
-                            {t("Afiliado")} 
-                            <span style={{fontSize: "0.14rem"}}> - {t("Ganhe")}</span>
-                        </span>
-                        <span className="right" onClick={()=>goPage('home')}>
-                            <span className="iconfont icon-home_line 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" onClick={()=>goPage('summary')}>
-                                    <span className="van-tab__text">{t("PAINEL")}</span>
-                                </div>
-                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('referrals')}>
-                                    <span className="van-tab__text">{t("REFERÊNCIAS")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('report')}>
-                                    <span className="van-tab__text">{t("RELATÓRIO")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('payments')}>
-                                    <span className="van-tab__text">{t("PAGAMENTOS")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('faq')}>
-                                    <span className="van-tab__text">{t("FAQ")}</span>  
-                                </div>
-                                <div className="van-tab">
-                                    <span className="van-tab__text">{t("TUTORIAL")}</span>
-                                </div>
-                                <div className="van-tabs__line"></div>
-                            </div>
-                        </div>
+                </div>
+                <ul className="header">
+                    <li>
+                        <div>#</div>
+                        <div>{t("Conta")}</div>
+                        <div>{t("Apostas")}({t("R$")})</div>
+                        <div>{t("ApostaEquipe")}({t("R$")})</div>
+                        <div>{t("Comissão")}</div>
+                    </li>
+                </ul>
+                <div role="feed" className="list van-list">
+                    <div className="van-list__finished-text">{t("Opa")}</div>
+                    <div className="van-list__placeholder"></div>
+                </div>
+                <div className="total">
+                    <div>
+                        <span className="num">{t("R$")} 0</span>
+                        <span>{t("Aposta")}</span>
                     </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>{t("Conta")}</div>
-                                    <div>{t("Apostas")}({t("R$")})</div>
-                                    <div>{t("ApostaEquipe")}({t("R$")})</div>
-                                    <div>{t("Comissão")}</div>
-                                </li>
-                            </ul>
-                            <div role="feed" className="list van-list">
-                                <div className="van-list__finished-text">{t("Opa")}</div>
-                                <div className="van-list__placeholder"></div>
-                            </div>
-                            <div className="total">
-                                <div>
-                                    <span className="num">{t("R$")} 0</span>
-                                    <span>{t("Aposta")}</span>
-                                </div>
-                                <div>
-                                    <span className="num">{t("R$")} 0</span>
-                                    <span>{t("Comissão")}</span>
-                                </div>
-                            </div>
-                            {/* 日历 */}
-                        </div>
+                    <div>
+                        <span className="num">{t("R$")} 0</span>
+                        <span>{t("Comissão")}</span>
                     </div>
                 </div>
-                <div className="drawer-mask"></div>
+                {/* 日历 */}
             </div>
         </div>
     )

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

@@ -1,208 +1,4 @@
-.vux-drawer-report{
-    display: block;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-height: 100vh;
-.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;
-}
-.router-view {
-    max-width: 4.02rem;
-}
-.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-home_line {
-    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;
-}
-.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 {
-//     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;
-    transform: translateX(246px) translateX(-50%); 
-    transition-duration: 0.3s;
-}
-.van-tabs__line{
-    position: absolute;
-    bottom: 15px;
-    left: 0;
-    z-index: 1;
-    width: 40px;
-    height: 3px;
-    background-color: #ee0a24;
-    border-radius: 3px;
-}
-.vux-drawer-body>.drawer-mask, .vux-drawer-content {
-    height: 100vh;
-}
-.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);
-}
+.content{
 .report {
     background: #fff;
     border-radius: .04rem;
@@ -266,25 +62,4 @@
     height: 0;
     pointer-events: none;
 }
-.van-tab {
-    position: relative;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: 0 4px;
-    color: #646566;
-    font-size: 14px;
-    line-height: 20px;
-    cursor: pointer;
-}
 }

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

@@ -1,87 +1,28 @@
 'use client'
 import { FC, PropsWithChildren } from "react";
-import {useRouter} from '@/i18n'
+import { useRouter } from '@/i18n'
 import { useTranslations } from "next-intl";
 import './page.scss'
 
 interface Props { }
-const App: FC<PropsWithChildren<Props>> = (props) =>{
+const App: FC<PropsWithChildren<Props>> = (props) => {
     const t = useTranslations("ReportPage")
-    const router:any = useRouter()
-    const goPage = (path = '')=>{
-        if(path){
-            if(path === 'home'){
-                router.replace('/')
-                return
-            }
-            
-            console.log(router);
-            
-            router.replace(`/affiliate/${path}`)
-            return 
-        }
-        router.back()
-    }
     return (
-        <div className="vux-drawer-report">
-            <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" onClick={()=>goPage()}>
-                            <span className="iconfont icon-xiangzuo1"></span>
-                        </div>
-                        <span className="title">
-                            {t("Afiliado")} 
-                            <span style={{fontSize: "0.14rem"}}> - {t("Ganhe")}</span>
-                        </span>
-                        <span className="right" onClick={()=>goPage('home')}>
-                            <span className="iconfont icon-home_line 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" onClick={()=>goPage('summary')}>
-                                    <span className="van-tab__text">{t("PAINEL")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('referrals')}>
-                                    <span className="van-tab__text" >{t("REFERÊNCIAS")}</span>
-                                </div>
-                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('report')}>
-                                    <span className="van-tab__text">{t("RELATÓRIO")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('payments')}>
-                                    <span className="van-tab__text">{t("PAGAMENTOS")}</span>
-                                </div>
-                                <div className="van-tab" onClick={()=>goPage('faq')}>
-                                    <span className="van-tab__text">{t("FAQ")}</span>  
-                                </div>
-                                <div className="van-tab">
-                                    <span className="van-tab__text">{t("TUTORIAL")}</span>
-                                </div>
-                                <div className="van-tabs__line"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="content">
-                        <div className="report referral-router-view">
-                            <ul className="header">
-                                <li>
-                                    <div>#</div>
-                                    <div>{t("Conta")}</div>
-                                    <div>{t("Apostas")}({t("R$")})</div>
-                                    <div>{t("ApostaEquipe")}({t("R$")})</div>
-                                    <div>{t("Comissão")}</div>
-                                </li>
-                            </ul>
-                            <div role="feed" className="list van-list">
-                                <div className="van-list__finished-text">{t("Opa")}</div>
-                                <div className="van-list__placeholder"></div>
-                            </div>
-                        </div>
-                    </div>
+        <div className="content">
+            <div className="report referral-router-view">
+                <ul className="header">
+                    <li>
+                        <div>#</div>
+                        <div>{t("Conta")}</div>
+                        <div>{t("Apostas")}({t("R$")})</div>
+                        <div>{t("ApostaEquipe")}({t("R$")})</div>
+                        <div>{t("Comissão")}</div>
+                    </li>
+                </ul>
+                <div role="feed" className="list van-list">
+                    <div className="van-list__finished-text">{t("Opa")}</div>
+                    <div className="van-list__placeholder"></div>
                 </div>
-                <div className="drawer-mask"></div>
             </div>
         </div>
     )

src/app/[locale]/affiliate/style.scss

@@ -0,0 +1,31 @@
+.vux-drawer {
+    display: block;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100vh;
+
+    .router-view {
+        max-width: 4.02rem;
+        width: 100vw;
+        height: 100%;
+        overflow-y: auto;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+    }
+
+    .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;
+    }
+}

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

@@ -1,187 +1,4 @@
-.vux-drawer-summary{
-    display: block;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-height: 100vh;
-.router-view{
-    max-width: 4.02rem;
-    width: 100vw;
-    height: 100%;
-    overflow-y: auto;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-.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;
-}
-.vux-drawer-body>.drawer-mask, .vux-drawer-content {
-    height: 100vh;
-}
-.drawer-left {
-    left: 0;
-    -webkit-transform: translateX(-100%);
-    -ms-transform: translateX(-100%);
-    transform: translateX(-100%);
-}
-.vux-drawer-content {
-    background-color: #fff;
-    position: absolute;
-    top: 0;
-    height: 100%;
-    overflow: hidden;
-    pointer-events: none;
-    visibility: hidden;
-    -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;
-    will-change: none;
-}
-.vux-drawer-body>.drawer-mask{
-    height: 100vh;
-}
-.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);
-}
-.headerBack{
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-    position: fixed;
-    z-index: 9;
-    height: 0.44rem;
-    width: 100%;
-    font-family: SWISSC-BT;
-    max-width: 4.02rem;
-    background-color: #0d1933;
-    padding: 0 .14rem;
-    box-sizing: border-box;
-    transform: translateZ(0);
-}
-.tabs{
-    margin: 0.44rem 0.06rem 0;
-    height: 0.36rem;
-    line-height: 0.36rem;
-    font-family: SWISSC;
-}
-.van-tabs {
-    position: relative;
-}
-.headerBack .left{
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-}
-.headerBack .title {
-    color: #fff;
-    font-size: 0.2rem;
-    width: 100%;
-}
-.headerBack .title span {
-    font-size: 0.16rem;
-}
-.headerBack .right{
-    width: 0.4rem;
-    text-align: right;
-}
-.tabs.van-tabs--line .van-tabs__wrap {
-    height: 100%;
-}
-.van-tabs__wrap {
-    overflow: hidden;
-}
-.tabs .van-tabs__nav--line {
-    padding-bottom: .15rem;
-}
-.tabs .van-tabs__nav {
-    background: 0 0;
-    -webkit-box-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;
-}
-.van-tabs__nav--line {
-    box-sizing: content-box;
-    height: 100%;
-    padding-bottom: 15px;
-}
-.van-tabs__nav {
-    position: relative;
-    display: flex;
-    user-select: none;
-}
-.tabs.alginLeft .van-tab {
-    margin-right: 0 !important;
-    padding: 0 .04rem;
-}
-.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-tab {
-    position: relative;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: 0 4px;
-    color: #646566;
-    font-size: 14px;
-    line-height: 20px;
-    cursor: pointer;
-}
-.van-tab--active {
-    color: #323233;
-    font-weight: 500;
-}
-.tabs .van-tab__text {
-    font-size: .13rem;
-    color: grey;
-}
+.content{
 .summary {
     font-family: SWISSC;
     padding-bottom: .3rem;
@@ -241,11 +58,6 @@
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
-ul{
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
 .summary .content .today li:first-child, .summary .content .total li:first-child {
     width: 70%;
 }
@@ -266,11 +78,6 @@ ul{
     align-items: center;
     margin: .08rem 0;
 }
-li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
 .summary .content .num {
     font-size: .15rem;
     font-family: SWISSC-BT;
@@ -444,6 +251,7 @@ summary .shareLink .copyUrl {
     border-radius: .03rem;
     color: #40a1de;
     right: 0;
+    cursor: default;
 }
 .sharePlatform img {
     width: .4rem;

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

@@ -3,312 +3,264 @@ import { FC, PropsWithChildren, useRef, useState } from "react";
 import './page.scss'
 import { useRouter } from "@/i18n"
 import { useTranslations } from "next-intl";
+import { Toast } from 'antd-mobile'
+
 
 interface Props { }
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
     const t = useTranslations("SummaryPage");
-    const router:any = useRouter()
-    const goPage = (path = '')=>{
-        if(path){
-            if(path === 'home'){
-                router.replace('/')
-                return
-            }
-            
-            // console.log(router);
-            
-            router.replace(`/affiliate/${path}`)
-            return 
-        }
-        router.back()
-    }
+
     const sliderRef = useRef<HTMLDivElement>(null)
-    const [num,setNum] = useState(100)
-    const [money,setMoney] = useState('5000')
-    const handleSlide:any =(e:React.MouseEvent<HTMLDivElement,MouseEvent>)=>{
-        if(sliderRef.current){
+    const [num, setNum] = useState(100)
+    const [money, setMoney] = useState('5000')
+    const handleSlide: any = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (sliderRef.current) {
             const startX = sliderRef.current.getBoundingClientRect().x
             const x = e.clientX - startX
-            const xRem = x/(144*0.6)
-            const intNum = Math.round(10000*xRem)-Math.round(10000*xRem%10)
+            const xRem = x / (144 * 0.6)
+            const intNum = Math.round(10000 * xRem) - Math.round(10000 * xRem % 10)
             setNum(intNum)
-            const m = intNum*50
+            const m = intNum * 50
             let r = ''
             const arr = m.toString().split('')
-            arr.forEach((item,i)=>{
-                if(i!==(arr.length-1)&&(arr.length-i-1)%3===0){
+            arr.forEach((item, i) => {
+                if (i !== (arr.length - 1) && (arr.length - i - 1) % 3 === 0) {
                     r += item + ','
-                }else{
+                } else {
                     r += item
                 }
             })
-            
+
             setMoney(r)
-            const scale = ((Math.round((xRem * 10000)))/100.00).toFixed(2) + '%';
+            const scale = ((Math.round((xRem * 10000))) / 100.00).toFixed(2) + '%';
             sliderRef.current.style.width = scale
         }
     }
+
+    const copy = (text: string) => {
+        navigator.clipboard.writeText(text).then(() => {
+            Toast.show({ icon: 'success', content: t("copySuc"), maskClickable: false })
+        })
+    }
     return (
-            <div className="vux-drawer-summary">
-                <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" onClick={()=>goPage()}>
-                                <span className="iconfont icon-xiangzuo1"/>
-                            </div>
-                            <div className="title">
-                                {t("Afiliado")}
-                                <span> - {t("title")}</span>
+        <div className="content">
+            <div className="summary referral-router-view">
+                <div className="content">
+                    <div className="title">
+                        <div>
+                            {t("Hoje")}
+                            <span className="iconfont icon-bangzhu" />
+                        </div>
+                    </div>
+                    <div className="cardMian">
+                        <div>
+                            <ul className="today">
+                                <li>
+                                    <span className="num">0</span>
+                                    <span> {t("Inscrições")} </span>
+                                </li>
+                                <li>
+                                    <span className="num">0</span>
+                                    <span> {t("Novos")} </span>
+                                </li>
+                                <li>
+                                    <span className="num">0</span>
+                                    <span> {t("Aposta")} </span>
+                                </li>
+                                <li>
+                                    <span className="num">0</span>
+                                    <span> {t("Comissão")} </span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="title">
+                        <div>
+                            {t("Total")}
+                            <span className="iconfont icon-bangzhu" />
+                        </div>
+                    </div>
+                    <div className="cardMian">
+                        <div>
+                            <ul className="total">
+                                <li>
+                                    <span className="num">0</span>
+                                    <span> {t("Inscrições")} </span>
+                                </li>
+                                <li>
+                                    <span className="num">0</span>
+                                    <span>  {t("Jogadores")}  </span>
+                                </li>
+                                <li>
+                                    <span className="num">0</span>
+                                    <span>  {t("ApostaTotal")}  </span>
+                                </li>
+                                <li>
+                                    <span className="num">0</span>
+                                    <span> {t("Comissão")} </span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="title">
+                        <div>
+                            {t("Comissão")}
+                            <span className="iconfont icon-bangzhu" />
+                        </div>
+                    </div>
+                    <div className="cardMian">
+                        <div className="vip">
+                            <div className="level">
+                                <span className="iconfont icon-vip"></span>
+                                <span className="levelNum">1</span>
                             </div>
-                            <div className="right" onClick={()=>goPage('home')}>
-                                <span className="iconfont icon-company_nav_icon_home router-link-active"/>
+                            <div>
+                                {t("Nível")}
+                                <span className="iconfont icon-tishi"></span>
                             </div>
                         </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 role="tab" className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('summary')}>
-                                        <span className="van-tab__text">{t("PAINEL")}</span>
-                                    </div>
-                                    <div role="tab" className="van-tab" onClick={()=>goPage('referrals')}>
-                                        <span className="van-tab__text">{t("REFERÊNCIAS")}</span>
-                                    </div>
-                                    <div role="tab" className="van-tab" onClick={()=>goPage('report')}>
-                                        <span className="van-tab__text">{t("RELATÓRIO")}</span>
-                                    </div>
-                                    <div role="tab" className="van-tab" onClick={()=>goPage('payments')}>
-                                        <span className="van-tab__text">{t("PAGAMENTOS")}</span>
-                                    </div>
-                                    <div role="tab" className="van-tab" onClick={()=>goPage('faq')}>
-                                        <span className="van-tab__text">{t("FAQ")}</span>
-                                    </div>
-                                    <div role="tab" className="van-tab">
-                                        <span className="van-tab__text">{t("TUTORIAL")}</span>
-                                    </div>
-                                    <div className="van-tabs__line"></div>
+                        <div>
+                            <ul className="commission">
+                                <li>
+                                    <span className="num">
+                                        <span>{t("R$")}</span>
+                                        <span className="cash">0.00</span>
+                                    </span>
+                                    <span> {t("TotalPago")} </span>
+                                </li>
+                                <li>
+                                    <span className="num">
+                                        <span>{t("R$")}</span>
+                                        <span className="cash">0.00</span>
+                                    </span>
+                                    <span>  {t("Não")}  </span>
+                                </li>
+                            </ul>
+                            <div className="wallet">
+                                <div className="btn"> {t("TRANSFERIR")} </div>
+                                <div className="tip">
+                                    <span className="iconfont icon-tishi1"></span>
+                                    {t("Valor")}
                                 </div>
                             </div>
                         </div>
-                        <div className="content">
-                            <div className="summary referral-router-view">
-                                <div className="content">
-                                    <div className="title">
-                                        <div>
-                                            {t("Hoje")}
-                                            <span className="iconfont icon-bangzhu"/>
-                                        </div>
-                                    </div>
-                                    <div className="cardMian">
-                                        <div>
-                                            <ul className="today">
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> {t("Inscrições")} </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> {t("Novos")} </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> {t("Aposta")} </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> {t("Comissão")} </span>
-                                                </li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="content">
-                                    <div className="title">
-                                    <div>
-                                            {t("Total")} 
-                                            <span className="iconfont icon-bangzhu"/>
-                                        </div>
-                                    </div>
-                                    <div className="cardMian">
-                                    <div>
-                                            <ul className="total">
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> {t("Inscrições")} </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span>  {t("Jogadores")}  </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span>  {t("ApostaTotal")}  </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> {t("Comissão")} </span>
-                                                </li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="content">
-                                    <div className="title">
-                                    <div>
-                                            {t("Comissão")}  
-                                            <span className="iconfont icon-bangzhu"/>
-                                        </div>
-                                    </div>
-                                    <div className="cardMian">
-                                        <div className="vip">
-                                            <div className="level">
-                                                <span className="iconfont icon-vip"></span>
-                                                <span className="levelNum">1</span>
-                                            </div>
-                                            <div>
-                                                {t("Nível")}
-                                                <span className="iconfont icon-tishi"></span>
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <ul className="commission">
-                                                <li>
-                                                    <span className="num">
-                                                        <span>{t("R$")}</span>
-                                                        <span className="cash">0.00</span>
-                                                    </span>
-                                                    <span> {t("TotalPago")} </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">
-                                                        <span>{t("R$")}</span>
-                                                        <span className="cash">0.00</span>
-                                                    </span>
-                                                    <span>  {t("Não")}  </span>
-                                                </li>
-                                            </ul>
-                                            <div className="wallet">
-                                                <div className="btn"> {t("TRANSFERIR")} </div>
-                                                <div className="tip">
-                                                    <span className="iconfont icon-tishi1"></span>
-                                                    {t("Valor")}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="content shareMain">
-                                    <div className="title">{t("title1")}</div>
-                                    <div className="share">
-                                        <ul className="sharePlatform">
-                                            <li>
-                                                <a href="">
-                                                    <img src="/img/facebook.webp" alt="" />
-                                                </a>
-                                                <span>{t("Facebook")}</span>
-                                            </li>
-                                            <li>
-                                                <a href="">
-                                                    <img src="/img/WhatsApp.webp" alt="" />
-                                                </a>
-                                                <span>{t("WhatsApp")}</span>
-                                            </li>
-                                            <li>
-                                                <a href="">
-                                                    <img src="/img/Telegram.png" alt="" />
-                                                </a>
-                                                <span>{t("Telegram")}</span>
-                                            </li>
-                                            <li>
-                                                <a href="">
-                                                    <img src="/img/Twitter.webp" alt="" />
-                                                </a>
-                                                <span>{t("Twitter")}</span>
-                                            </li>
-                                            <li>
-                                                <a href="">
-                                                    <img src="/img/email.webp" alt="" />
-                                                </a>
-                                                <span>{t("Email")}</span>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                    <div className="shareLink">
-                                        <div className="tip">{t("content1")}</div>
-                                        <div className="copyUrl">
-                                            <span className="url omitWrap">{t("https")}</span>
-                                            <span id="copy">{t("Cópia")}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="content">
-                                    <div className="title">
-                                        <div> {t("title2")}</div>
-                                    </div>
-                                    <div>
-                                        <div className="tel-box">
-                                            <a href="" className="telicon">
-                                                <img src="/img/telegram.webp" alt="" />
-                                            </a>
-                                            <div className="hintTitle3">
-                                                {t("content2-1")}
-                                            </div>
-                                        </div>
-                                        <div className="hintTitle2">
-                                            <i className="iconfont icon-tishi"></i>
-                                                {t("content2-2")}  
-                                            <a href="" style={{borderBottom: "1px solid rgb(109, 155, 195)",color:"#0000EE"}}>{t("business")}</a>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="content">
-                                    <div className="title">
-                                        <div>
-                                            {t("title3")} 
-                                            <span className="iconfont icon-bangzhu"></span>
-                                        </div>
-                                    </div>
-                                    <div className="hint">
-                                        <div className="hintTitle">
-                                            {t("content3")}
-                                        </div>
-                                        <div className="imgContent">
-                                            <img src="/img/cash.png" alt="" />
-                                            <div>
-                                                {t("number")}{num}
-                                                <br />
-                                                {t("Comissão")} > {t("R$")} {money} {t("money")}
-                                            </div>
-                                            <div className="slider van-slider" style={{height: "0.02rem"}} onClick={handleSlide}>
-                                                <div className="van-slider__bar" style={{width: "0.900901%",background: "rgb(0, 157, 128)"}} ref={sliderRef}>
-                                                    <div role="slider" className="van-slider__button-wrapper" >
-                                                        <div className="img"></div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="relationSchema">
-                                            <div className="groupTitle">{t("title4")}</div>
-                                            <img src="/img/group_br.webp" alt="" className="groupImg"/>
-                                            <ul className="rules">
-                                                <li>
-                                                    {t("content4-1")}
-                                                    <span style={{color:"red"}}>{t("red")}</span>
-                                                    .
-                                                </li>
-                                                <li>
-                                                    {t("content4-2")}
-                                                </li>
-                                            </ul>
-                                        </div>
+                    </div>
+                </div>
+                <div className="content shareMain">
+                    <div className="title">{t("title1")}</div>
+                    <div className="share">
+                        <ul className="sharePlatform">
+                            <li>
+                                <a href="">
+                                    <img src="/img/facebook.webp" alt="" />
+                                </a>
+                                <span>{t("Facebook")}</span>
+                            </li>
+                            <li>
+                                <a href="">
+                                    <img src="/img/WhatsApp.webp" alt="" />
+                                </a>
+                                <span>{t("WhatsApp")}</span>
+                            </li>
+                            <li>
+                                <a href="">
+                                    <img src="/img/Telegram.png" alt="" />
+                                </a>
+                                <span>{t("Telegram")}</span>
+                            </li>
+                            <li>
+                                <a href="">
+                                    <img src="/img/Twitter.webp" alt="" />
+                                </a>
+                                <span>{t("Twitter")}</span>
+                            </li>
+                            <li>
+                                <a href="">
+                                    <img src="/img/email.webp" alt="" />
+                                </a>
+                                <span>{t("Email")}</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div className="shareLink">
+                        <div className="tip">{t("content1")}</div>
+                        <div className="copyUrl">
+                            <span className="url omitWrap">{t("https")}</span>
+                            <span id="copy" onClick={() => copy(t("https"))}>{t("Cópia")}</span>
+                        </div>
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="title">
+                        <div> {t("title2")}</div>
+                    </div>
+                    <div>
+                        <div className="tel-box">
+                            <a href="" className="telicon">
+                                <img src="/img/telegram.webp" alt="" />
+                            </a>
+                            <div className="hintTitle3">
+                                {t("content2-1")}
+                            </div>
+                        </div>
+                        <div className="hintTitle2">
+                            <i className="iconfont icon-tishi"></i>
+                            {t("content2-2")}
+                            <a href="" style={{ borderBottom: "1px solid rgb(109, 155, 195)", color: "#0000EE" }}>{t("business")}</a>
+                        </div>
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="title">
+                        <div>
+                            {t("title3")}
+                            <span className="iconfont icon-bangzhu"></span>
+                        </div>
+                    </div>
+                    <div className="hint">
+                        <div className="hintTitle">
+                            {t("content3")}
+                        </div>
+                        <div className="imgContent">
+                            <img src="/img/cash.png" alt="" />
+                            <div>
+                                {t("number")}{num}
+                                <br />
+                                {t("Comissão")} > {t("R$")} {money} {t("money")}
+                            </div>
+                            <div className="slider van-slider" style={{ height: "0.02rem" }} onClick={handleSlide}>
+                                <div className="van-slider__bar" style={{ width: "0.900901%", background: "rgb(0, 157, 128)" }} ref={sliderRef}>
+                                    <div role="slider" className="van-slider__button-wrapper" >
+                                        <div className="img"></div>
                                     </div>
                                 </div>
-                                <div className="content"></div>
                             </div>
                         </div>
+                        <div className="relationSchema">
+                            <div className="groupTitle">{t("title4")}</div>
+                            <img src="/img/group_br.webp" alt="" className="groupImg" />
+                            <ul className="rules">
+                                <li>
+                                    {t("content4-1")}
+                                    <span style={{ color: "red" }}>{t("red")}</span>
+                                    .
+                                </li>
+                                <li>
+                                    {t("content4-2")}
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
+                <div className="content"></div>
             </div>
+        </div>
+
     );
 };