summary页面

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

@@ -0,0 +1,274 @@
+html{
+    font-size: 144px;
+}
+.vux-drawer{
+    display: block;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.vux-drawer>.vux-drawer-body {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    transition: visibility .38s, -webkit-transform .38s ease-in-out;
+    -o-transition: transform ease-in-out .38s, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s;
+    transition: transform .38s ease-in-out, visibility .38s, -webkit-transform .38s ease-in-out;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask, .vux-drawer>.vux-drawer-content {
+    height: 100vh;
+}
+.vux-drawer>.drawer-left {
+    left: 0;
+    -webkit-transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+    transform: translateX(-100%);
+}
+.vux-drawer>.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>.vux-drawer-body>.drawer-mask{
+    height: 100vh;
+}
+.vux-drawer>.vux-drawer-body>.drawer-mask {
+    z-index: 9999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    transition: opacity .38s ease-in-out, visibility .38s ease-in-out;
+    background-color: rgba(0, 0, 0, .3);
+}
+.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 !important;
+}
+.headerBack .right{
+    width: 0.4rem;
+    text-align: right;
+}
+.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%;
+}
+.van-tabs__nav {
+    position: relative;
+    display: flex;
+    user-select: none;
+}
+.tabs  .van-tab {
+    margin-right: 0 !important;
+    padding: 0 .04rem;
+}
+body .van-tabs.alginLeft .van-tab{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: initial;
+    -ms-flex: initial;
+    flex: initial;
+    margin-right: .08rem;
+}
+.van-tab--active {
+    color: #323233;
+    font-weight: 500;
+}
+.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;
+}
+.tabs .van-tab__text {
+    font-size: .13rem;
+    color: grey;
+}
+.summary {
+    font-family: SWISSC;
+    padding-bottom: .3rem;
+}
+.summary .content{
+    background: #fff;
+    border-radius: .04rem;
+    margin: 0 .1rem .08rem;
+    padding: 0 .12rem;
+    color: grey;
+    font-size: .1rem;
+}
+.summary .content .title {
+    font-family: SWISSC-BT;
+    font-size: .12rem;
+    height: .24rem;
+    line-height: .24rem;
+    border-bottom: .01rem solid #bdbdbd;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: item;
+    -ms-flex-align: item;
+    align-items: item;
+}
+.summary .content .title>div {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+.summary .content .cardMian {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+.summary .content .cardMian>div {
+    width: 100%;
+}
+.summary .content ul {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    padding: 0 .07rem;
+    width: 100%;
+    -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%;
+}
+.summary .content li {
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -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;
+    margin: .08rem 0;
+}
+li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.summary .content .num {
+    font-size: .15rem;
+    font-family: SWISSC-BT;
+    color: #383838;
+    white-space: nowrap;
+}

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

@@ -0,0 +1,95 @@
+import { FC, PropsWithChildren } from "react";
+import './page.css'
+
+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>
+                    </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>
+                            </div>
+                        </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>
+                                </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></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;