页面样式+图片

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

@@ -247,4 +247,97 @@ body .van-tabs.alginLeft .van-tab {
     font-size: .14rem;
     line-height: .22rem;
     cursor: pointer;
+}
+.imgContent.rowReverse {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+    padding-left: 0;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+.imgContent {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    color: red;
+    font-size: .15rem;
+    line-height: .19rem;
+    padding: .04rem 0 .15rem;
+    position: relative;
+}
+.imgContent img {
+    width: .67rem;
+}
+.imgContent.rowReverse .slider {
+    top: .24rem;
+    right: .76rem;
+}
+.imgContent .slider {
+    position: absolute;
+    width: .6rem;
+    top: .26rem;
+    right: .1rem;
+}
+.van-slider {
+    position: relative;
+    width: 100%;
+    height: 2px;
+    background-color: #ebedf0;
+    border-radius: 999px;
+    cursor: pointer;
+}
+.van-slider__bar {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #1989fa;
+    border-radius: inherit;
+    -webkit-transition: all .2s;
+    transition: all .2s;
+}
+.van-slider__button-wrapper, .van-slider__button-wrapper-right {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    -webkit-transform: translate3d(50%, -50%, 0);
+    transform: translate3d(50%, -50%, 0);
+    cursor: grab;
+}
+.imgContent .slider .img {
+    background: url('/img/huakuai.png') 50% no-repeat;
+    height: .16rem;
+    width: .16rem;
+    background-size: auto 100%;
+}
+.groupTitle {
+    font-size: .14rem;
+    font-family: SWISSC-BT;
+    text-align: center;
+    margin: .04rem 0;
+    color: #442729;
+}
+.groupImg {
+    width: 100%;
+    margin-bottom: .2rem;
+}
+ul.rules {
+    display: list-item;
+    color: #383838;
+    font-size: .12rem;
+    line-height: .14rem;
+    padding-left: .18rem;
+}
+ul.rules li {
+    display: list-item;
+    list-style: decimal;
+    margin-top: .12rem;
+}
+.referralFaq .content div p {
+    margin: .04rem 0;
 }

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

@@ -70,9 +70,44 @@ const App: FC<PropsWithChildren<Props>> = (props) =>{
                                     <a href="">Regras de cálculo de comissão</a>
                                 </div>
                             </div>
-                            <div className="imgContent rowReverse"></div>
-                            <div className="relationSchema"></div>
-                            <div className="content"></div>
+                            <div className="imgContent rowReverse">
+                                <img src="/img/cash.png" alt="" />
+                                <div>
+                                    Número de indicações > 100
+                                    <br />
+                                    Comissão > R$ 5,000 todo mês!
+                                </div>
+                                <div className="slider van-slider" style={{height: "0.02rem"}}>
+                                    <div className="van-slider__bar" style={{width: "0.900901%", background: "rgb(0, 157, 128)"}}>
+                                        <div role="slider" className="van-slider__button-wrapper">
+                                            <div className="img"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="relationSchema">
+                                <div className="groupTitle">Unlimited development of subordinates</div>
+                                <img src="/img/group_br.webp" alt="" className="groupImg"/>
+                                <ul className="rules">
+                                    <li>
+                                        Você receberá uma porcentagem de comissão diferente toda vez que um jogador indicado por você fizer uma aposta, 
+                                        <span style={{color:"red"}}>ganhar ou perder</span>
+                                    </li>
+                                    <li>
+                                        O sistema calcula a comissão a cada 3 minutos.
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="content">
+                                <h2>Definição</h2>
+                                <div>
+                                    <p>Inscrições - Número de usuários registrados</p>
+                                    <p>Novos Jogadores - Novos jogadores pagantes entre os usuários registrados de hoje</p>
+                                    <p>
+                                        Aposta válidas em equiper[num] - Total de valor de apostas válidas provenientes de indicações e contribuições de suas equipes. num - Número total de indicações e membros de suas equipes que contribuíram com apostas válidas.
+                                    </p>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>

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

@@ -109,7 +109,7 @@
     width: 0.4rem;
     text-align: right;
 }
-.van-tabs--line .van-tabs__wrap {
+.tabs.van-tabs--line .van-tabs__wrap {
     height: 100%;
 }
 .van-tabs__wrap {
@@ -134,6 +134,7 @@
 .van-tabs__nav--line {
     box-sizing: content-box;
     height: 100%;
+    padding-bottom: 15px;
 }
 .van-tabs__nav {
     position: relative;
@@ -153,10 +154,6 @@ body .van-tabs.alginLeft .van-tab{
     flex: initial;
     margin-right: .08rem;
 }
-.van-tab--active {
-    color: #323233;
-    font-weight: 500;
-}
 .van-tab {
     position: relative;
     display: -webkit-box;
@@ -178,6 +175,10 @@ body .van-tabs.alginLeft .van-tab{
     line-height: 20px;
     cursor: pointer;
 }
+.van-tab--active {
+    color: #323233;
+    font-weight: 500;
+}
 .tabs .van-tab__text {
     font-size: .13rem;
     color: grey;
@@ -541,7 +542,7 @@ a, a:hover, a:link, a:visited, a:active {
     cursor: grab;
 }
 .imgContent .slider .img {
-    background: url() 50% no-repeat;
+    background: url('/img/huakuai.png') 50% no-repeat;
     height: .16rem;
     width: .16rem;
     background-size: auto 100%;
@@ -576,7 +577,7 @@ ul.rules li {
     font-size: .24rem;
     color: #fff;
 }
-.summary .content .title .icon-wenhao {
+.summary .content .title .icon-bangzhu {
     font-size: .14rem;
     color: #40dba9;
     margin-left: .04rem;
@@ -624,4 +625,13 @@ ul.rules li {
     -webkit-flex: 1 0 auto;
     flex: 1 0 auto;
     padding: 0 12px;
+}
+.van-tabs__nav {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    background-color: #fff;
+    -webkit-user-select: none;
+    user-select: none;
 }

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

@@ -4,6 +4,9 @@ import './page.css'
 interface Props { }
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
+    // function handleSlide(e:any):void{
+    //     const startX = e.clientX - sliderRef.current.offsetX
+    // }
     return (
             <div className="vux-drawer">
                 <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
@@ -22,15 +25,8 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                         </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"
-                                    >
+                                <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">
                                         <span className="van-tab__text">PAINEL</span>
                                     </div>
                                     <div role="tab" className="van-tab">
@@ -51,7 +47,6 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                     <div className="van-tabs__line" style={{transform: "translateX(40px) translateX(-50%);transition-duration: 0.3s"}}></div>
                                 </div>
                             </div>
-                            <div className="van-tabs__content" />
                         </div>
                         <div className="content">
                             <div className="summary referral-router-view">
@@ -60,7 +55,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                         <div>
                                             {" "}
                                             Hoje
-                                            <span className="iconfont icon-wenhao"/>
+                                            <span className="iconfont icon-bangzhu"/>
                                         </div>
                                     </div>
                                     <div className="cardMian">
@@ -91,7 +86,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                     <div>
                                             {" "}
                                             Total 
-                                            <span className="iconfont icon-wenhao"/>
+                                            <span className="iconfont icon-bangzhu"/>
                                         </div>
                                     </div>
                                     <div className="cardMian">
@@ -122,7 +117,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                     <div>
                                             {" "}
                                             Comissão  
-                                            <span className="iconfont icon-wenhao"/>
+                                            <span className="iconfont icon-bangzhu"/>
                                         </div>
                                     </div>
                                     <div className="cardMian">
@@ -169,31 +164,31 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                         <ul className="sharePlatform">
                                             <li>
                                                 <a href="">
-                                                    <img src="https://9f.com/img/facebook.f59b3fbc.png" alt="" />
+                                                    <img src="/img/facebook.webp" alt="" />
                                                 </a>
                                                 <span>Facebook</span>
                                             </li>
                                             <li>
                                                 <a href="">
-                                                    <img src="https://9f.com/img/WhatsApp.c96f7286.png" alt="" />
+                                                    <img src="/img/WhatsApp.webp" alt="" />
                                                 </a>
                                                 <span>WhatsApp</span>
                                             </li>
                                             <li>
                                                 <a href="">
-                                                    <img src="https://9f.com/img/Twitter.ee6c269c.png" alt="" />
+                                                    <img src="/img/Telegram.png" alt="" />
                                                 </a>
                                                 <span>Telegram</span>
                                             </li>
                                             <li>
                                                 <a href="">
-                                                    <img src="https://9f.com/img/Twitter.ee6c269c.png" alt="" />
+                                                    <img src="/img/Twitter.webp" alt="" />
                                                 </a>
                                                 <span>Twitter</span>
                                             </li>
                                             <li>
                                                 <a href="">
-                                                    <img src="https://9f.com/img/email.76fd7e84.png" alt="" />
+                                                    <img src="/img/email.webp" alt="" />
                                                 </a>
                                                 <span>Email</span>
                                             </li>
@@ -214,7 +209,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                     <div>
                                         <div className="tel-box">
                                             <a href="" className="telicon">
-                                                <img src="https://9f.com/img/telegram.9b8c9ead.png" alt="" />
+                                                <img src="/img/telegram.webp" alt="" />
                                             </a>
                                             <div className="hintTitle3">
                                                 Clique o botão de ícone no lado esquerdo, junte-se ao nosso grupo afiliado do TG oficial Vamos oferecer- lo as palavras afiliadas profissionais e as ferramentas afiliadas profissionais. E ajudar-lo obter bem os benefícios reais.
@@ -239,7 +234,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                             Ganhe dinheiro indicando amigos para o 9F.COM, você ganha mais de 80% em recompensas de comissão!
                                         </div>
                                         <div className="imgContent">
-                                            <img src="https://9f.com/img/M-4.328863a6.png" alt="" />
+                                            <img src="/img/cash.png" alt="" />
                                             <div>
                                                 Número de indicações > 100
                                                 <br />
@@ -255,7 +250,7 @@ const App: FC<PropsWithChildren<Props>> = (props) => {
                                         </div>
                                         <div className="relationSchema">
                                             <div className="groupTitle">Unlimited development of subordinates</div>
-                                            <img src="https://9f.com/img/group_br.1fae7f7f.png" alt="" className="groupImg"/>
+                                            <img src="/img/group_br.webp" alt="" className="groupImg"/>
                                             <ul className="rules">
                                                 <li>
                                                     Você receberá uma porcentagem de comissão diferente toda vez que um jogador indicado por você fizer uma aposta,