affiliate/summary静态

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

@@ -1,7 +1,24 @@
-html{
-    font-size: 144px;
+#app.widthLimit,#app.widthLimit .router-view{
+    max-width: 4.02rem;
+}
+#app {
+    font-size: 0.14rem;
+    width: 100vw;
+    height: 100%;
+    background-color: #000;
+    margin: 0 auto;
+    min-height: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+#app .router-view {
+    width: 100vw;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
-.vux-drawer{
+.vux-drawer {
     display: block;
     position: relative;
     top: 0;
@@ -224,7 +241,7 @@ body .van-tabs.alginLeft .van-tab{
 .summary .content .cardMian>div {
     width: 100%;
 }
-.summary .content ul {
+.summary .content .cardMian ul {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -244,7 +261,7 @@ ul{
 .summary .content .today li:first-child, .summary .content .total li:first-child {
     width: 70%;
 }
-.summary .content li {
+.summary .content .cardMian li {
     width: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
@@ -272,3 +289,291 @@ li {
     color: #383838;
     white-space: nowrap;
 }
+.summary .content .cardMian .vip {
+    width: .94rem;
+    min-width: .94rem;
+    height: .9rem;
+    background: #f5f5f5;
+    border-radius: .1rem;
+    margin: .12rem 0 .22rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    color: #ff6a01;
+    font-size: .1rem;
+}
+.summary .content .cardMian .vip .level {
+    font-size: .18rem;
+    position: relative;
+    width: .5rem;
+    height: .5rem;
+    margin-bottom: .06rem;
+}
+.summary .content .cardMian .vip .level .levelNum {
+    color: #fff;
+    margin-top: .1rem;
+}
+.summary .content .cardMian .vip .level span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+.summary .content .commission {
+    margin-top: .1rem;
+}
+.summary .content .wallet {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    text-align: right;
+    padding-right: .06rem;
+}
+.summary .content .wallet .btn {
+    display: inline-block;
+    color: #8a8a8a;
+    height: .24rem;
+    line-height: .24rem;
+    font-size: .12rem;
+    border: .01rem solid #9e9e9e;
+    padding: 0 .06rem;
+    border-radius: .03rem;
+    text-align: center;
+    margin-top: .08rem;
+}
+.summary .content .wallet .tip {
+    font-size: .11rem;
+    color: #383838;
+    padding: .04rem 0 .1rem;
+}
+.summary .shareMain {
+    padding-bottom: .04rem;
+}
+.summary .shareMain .title {
+    font-size: .12rem;
+    border: none;
+    padding-top: .06rem;
+}
+.summary .share {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin-top: .08rem;
+}
+.sharePlatform {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    margin: .11rem 0;
+    width: 100%;
+}
+.sharePlatform li{
+    width: 25%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    font-size: .1rem;
+    color: #727272;
+}
+.summary .shareLink {
+    color: #383838;
+    font-size: .14rem;
+    margin-top: .1rem;
+}
+.copyUrl {
+    position: relative;
+    height: .28rem;
+    border-radius: .03rem;
+    padding: 0 .08rem 0 .11rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: .1rem;
+    color: grey;
+    background-color: #f9f9f9;
+    font-weight: 700;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin-bottom: .19rem;
+}
+summary .shareLink .copyUrl {
+    margin-top: .08rem;
+}
+.copyUrl .url {
+    width: 2.4rem;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+}
+.omitWrap {
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.copyUrl #copy {
+    position: absolute;
+    display: inline-block;
+    width: .77rem;
+    height: .28rem;
+    line-height: .28rem;
+    text-align: center;
+    border-radius: .03rem;
+    color: #40a1de;
+    right: 0;
+}
+.sharePlatform img {
+    width: .4rem;
+}
+img {
+    border: none;
+    vertical-align: middle;
+}
+.summary .tel-box2, .summary .tel-box {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin-top: .1rem;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.summary .hintTitle2, .summary .hintTitle3 {
+    font-size: .12rem;
+    color: #442729;
+    line-height: .18rem;
+    margin: .01rem auto;
+}
+.summary .hintTitle2 {
+    padding-bottom: .1rem;
+}
+.summary .telicon {
+    width: .5rem;
+    height: .5rem;
+    margin-right: .1rem;
+}
+a, a:hover, a:link, a:visited, a:active {
+    text-decoration: none;
+}
+.summary .telicon img {
+    width: .5rem;
+    height: .5rem;
+}
+.summary .hint {
+    padding-bottom: .3rem;
+}
+.summary .hintTitle {
+    font-size: .14rem;
+    color: #442729;
+    line-height: .18rem;
+    font-family: SWISSC-BT;
+    text-align: center;
+    margin: .09rem auto;
+}
+.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 .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() 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;
+}
+ul.rules {
+    display: list-item;
+    color: #383838;
+    font-size: .12rem;
+    line-height: .14rem;
+    padding-left: .18rem;
+}
+ul.rules li {
+    display: list-item !important;
+    list-style: decimal;
+    margin-top: .12rem !important;
+}

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

@@ -1,95 +1,283 @@
 import { FC, PropsWithChildren } from "react";
 import './page.css'
 
-interface Props {}
+interface Props { }
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
     return (
-        <div className="vue-drawer" style={{width:"80%"}}>
-            <div className="vue-drawer-body" style={{transform: "translate3d(0px,0px,0px)"}}>
-                <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
-                    <div className="headerBack">
-                        <div className="left">
-                            <span></span>
-                        </div>
-                        <div className="title">Afiliado
-                            <span> - Ganhe R$ 10.000 por dia</span>
-                        </div>
-                        <div className="right">
-                            <span></span>
+        <div id="app" className="widthLimit" style={{ overflow: "hidden" }}>
+            <div className="vue-drawer">
+                <div className="vue-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
+                    <div className="referral router-view" id="id-router-view" style={{ backgroundColor: "rgb(237, 237, 237)" }}>
+                        <div className="headerBack">
+                            <div className="left">
+                                <span />
+                            </div>
+                            <div className="title">
+                                Afiliado
+                                <span> - Ganhe R$ 10.000 por dia</span>
+                            </div>
+                            <div className="right">
+                                <span />
+                            </div>
                         </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">
-                                    <span className="van-tab__text">PAINEL</span>
-                                </div>
-                                <div role="tab" className="van-tab">
-                                    <span className="van-tab__text">REFERÊNCIAS</span>
-                                </div>
-                                <div role="tab" className="van-tab">
-                                    <span className="van-tab__text">RELATÓRIO</span>
-                                </div>
-                                <div role="tab" className="van-tab">
-                                    <span className="van-tab__text">PAGAMENTOS</span>
-                                </div>
-                                <div role="tab" className="van-tab">
-                                    <span className="van-tab__text">FAQ</span>
-                                </div>
-                                <div role="tab" className="van-tab">
-                                    <span className="van-tab__text">TUTORIAL</span>
+                        <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"
+                                    >
+                                        <span className="van-tab__text">PAINEL</span>
+                                    </div>
+                                    <div role="tab" className="van-tab">
+                                        <span className="van-tab__text">REFERÊNCIAS</span>
+                                    </div>
+                                    <div role="tab" className="van-tab">
+                                        <span className="van-tab__text">RELATÓRIO</span>
+                                    </div>
+                                    <div role="tab" className="van-tab">
+                                        <span className="van-tab__text">PAGAMENTOS</span>
+                                    </div>
+                                    <div role="tab" className="van-tab">
+                                        <span className="van-tab__text">FAQ</span>
+                                    </div>
+                                    <div role="tab" className="van-tab">
+                                        <span className="van-tab__text">TUTORIAL</span>
+                                    </div>
                                 </div>
                             </div>
+                            <div className="van-tabs__content" />
                         </div>
-                        <div className="van-tabs__content"></div>
-                    </div>
-                    <div className="content">
-                        <div className="summary referral-router-view">
-                            <div className="content">
-                                <div className="title">
-                                    <div> Hoje 
-                                        <span></span>
+                        <div className="content">
+                            <div className="summary referral-router-view">
+                                <div className="content">
+                                    <div className="title">
+                                        <div>
+                                            {" "}
+                                            Hoje
+                                            <span />
+                                        </div>
+                                    </div>
+                                    <div className="cardMian">
+                                        <div>
+                                            <ul className="today">
+                                                <li>
+                                                    <span className="num">0</span>
+                                                    <span> Inscrições </span>
+                                                </li>
+                                                <li>
+                                                    <span className="num">0</span>
+                                                    <span> Novos jogadores </span>
+                                                </li>
+                                                <li>
+                                                    <span className="num">0</span>
+                                                    <span> Aposta válidas em equipe </span>
+                                                </li>
+                                                <li>
+                                                    <span className="num">0</span>
+                                                    <span> Comissão </span>
+                                                </li>
+                                            </ul>
+                                        </div>
                                     </div>
                                 </div>
-                                <div className="cardMian">
+                                <div className="content">
+                                    <div className="title">
                                     <div>
-                                        <ul className="today">
+                                            {" "}
+                                            Total 
+                                            <span />
+                                        </div>
+                                    </div>
+                                    <div className="cardMian">
+                                    <div>
+                                            <ul className="total">
+                                                <li>
+                                                    <span className="num">0</span>
+                                                    <span> Inscrições </span>
+                                                </li>
+                                                <li>
+                                                    <span className="num">0</span>
+                                                    <span>  Jogadores totais  </span>
+                                                </li>
+                                                <li>
+                                                    <span className="num">0</span>
+                                                    <span>  Aposta válidas total  </span>
+                                                </li>
+                                                <li>
+                                                    <span className="num">0</span>
+                                                    <span> Comissão </span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="content">
+                                    <div className="title">
+                                    <div>
+                                            {" "}
+                                            Comissão  
+                                            <span />
+                                        </div>
+                                    </div>
+                                    <div className="cardMian">
+                                        <div className="vip">
+                                            <div className="level">
+                                                <span></span>
+                                                <span className="levelNum">1</span>
+                                            </div>
+                                            <div>
+                                                Nível de Agente
+                                                <span></span>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <ul className="commission">
+                                                <li>
+                                                    <span className="num">
+                                                        <span>R$</span>
+                                                        <span className="cash">0.00</span>
+                                                    </span>
+                                                    <span> Total pago </span>
+                                                </li>
+                                                <li>
+                                                    <span className="num">
+                                                        <span>R$</span>
+                                                        <span className="cash">0.00</span>
+                                                    </span>
+                                                    <span>  Não pago  </span>
+                                                </li>
+                                            </ul>
+                                            <div className="wallet">
+                                                <div className="btn"> TRANSFERIR PARA A CARTEIRA </div>
+                                                <div className="tip">
+                                                    <span></span>
+                                                    Valor mínimo de transferência de  10 BRL
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="content shareMain">
+                                    <div className="title">Compartilhe com sua comunidade social</div>
+                                    <div className="share">
+                                        <ul className="sharePlatform">
+                                            <li>
+                                                <a href="">
+                                                    <img src="https://9f.com/img/facebook.f59b3fbc.png" alt="" />
+                                                </a>
+                                                <span>Facebook</span>
+                                            </li>
                                             <li>
-                                                <span className="num">0</span>
-                                                <span> Inscrições    </span>
+                                                <a href="">
+                                                    <img src="https://9f.com/img/WhatsApp.c96f7286.png" alt="" />
+                                                </a>
+                                                <span>WhatsApp</span>
                                             </li>
                                             <li>
-                                                <span className="num">0</span>
-                                                <span>  Novos jogadores    </span>
+                                                <a href="">
+                                                    <img src="https://9f.com/img/Twitter.ee6c269c.png" alt="" />
+                                                </a>
+                                                <span>Telegram</span>
                                             </li>
                                             <li>
-                                                <span className="num">0</span>
-                                                <span>  Aposta válidas em equipe    </span>
+                                                <a href="">
+                                                    <img src="https://9f.com/img/Twitter.ee6c269c.png" alt="" />
+                                                </a>
+                                                <span>Twitter</span>
                                             </li>
                                             <li>
-                                                <span className="num">0</span>
-                                                <span>  Comissão    </span>
+                                                <a href="">
+                                                    <img src="https://9f.com/img/email.76fd7e84.png" alt="" />
+                                                </a>
+                                                <span>Email</span>
                                             </li>
                                         </ul>
                                     </div>
+                                    <div className="shareLink">
+                                        <div className="tip">Compartilhe este link de indicação com seus amigos</div>
+                                        <div className="copyUrl">
+                                            <span className="url omitWrap">https://www.9f.com/br/m/r/xxxxxx</span>
+                                            <span id="copy">Cópia</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="content">
+                                    <div className="title">
+                                        <div> Grupo CHAT entre agentes por telegram oficial do 9F.COM </div>
+                                    </div>
+                                    <div>
+                                        <div className="tel-box">
+                                            <a href="" className="telicon">
+                                                <img src="https://9f.com/img/telegram.9b8c9ead.png" 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.
+                                            </div>
+                                        </div>
+                                        <div className="hintTitle2">
+                                            <i></i>
+                                            Se você tem um grande público e seguidores. Temos condições especiais para você personalizar seu programa de indicações! para mais detalhes, por favorcontate- nos:  
+                                            <a href="" style={{borderBottom: "1px solid rgb(109, 155, 195)",color:"#0000EE"}}>business@9f.com</a>
+                                        </div>
+                                    </div>
                                 </div>
+                                <div className="content">
+                                    <div className="title">
+                                        <div>
+                                            Regras de recompensas por comissão‰ 
+                                            <span></span>
+                                        </div>
+                                    </div>
+                                    <div className="hint">
+                                        <div className="hintTitle">
+                                            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="" />
+                                            <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="https://9f.com/img/group_br.1fae7f7f.png" 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>
+                                </div>
+                                <div className="content"></div>
                             </div>
-                            <div></div>
-                            <div></div>
-                            <div></div>
-                            <div></div>
-                            <div></div>
-                            <div></div>
                         </div>
                     </div>
                 </div>
-                <div className="footer" style={{bottom: "0px",display: "none"}}></div>
-                <div className="drawer-mask"></div>
             </div>
-            <div className="vue-drawer-content drawer-left" style={{backgroundColor: "rgb(31, 31, 31)", width: "80%"}}></div>
         </div>
-        );
+
+    );
 };
 
 export default App;