<template>
    <div class="tz-container">
        <div class="tz-header">
             <div>
                <b-img class="tz-logo" src="/static/image/logo_white.png" />
                <b-img src="/static/image/system_name.png" />
            </div>
            <div class="tz-flex">
                <div @click="changeTab(0)" :class="tabId == 0 ?'tz-selected':''" >
                    <span> <b-img src="/static/image/system_icon1.png" /></span>
                    <span>首页</span>
                </div>
                <div @click="sim">
                    <span><b-img src="/static/image/system_icon2.png" /></span>
                    <span>仿真交易</span>
                </div>
                <div @click=" changeTab(2)" :class="tabId == 2 ?'tz-selected':''">
                    <span><b-img src="/static/image/system_icon3.png" /></span>
                    <span>排行榜</span>
                </div>
                <div @click="jixiao">
                    <span><b-img src="/static/image/system_icon4.png" /></span>
                    <span>绩效分析</span>
                </div>
                <div @click=" tabId = 4" :class="tabId == 4 ?'tz-selected':''">
                    <span><b-img src="/static/image/system_icon5.png" /></span>
                    <span>行为画像</span>
                </div>
                 <div @click=" tabId = 6" :class="tabId == 6 ?'tz-selected':''">
                    <span><b-img src="/static/image/note.png" /></span>
                    <span>每日复盘</span>
                </div>
                <div @click=" tabId = 5" :class="tabId == 5 ?'tz-selected':''">
                    <span><b-img src="/static/image/system_icon6.png" /></span>
                    <span>行情中心</span>
                </div>
            </div>
        </div>
        <div v-if="tabId == 0">
            <div class="comp-info">
            <div class="comp-thumbnail">
                <b-img fluid :src="!competition?'':competition.thumbnail" />
            </div>
            <div class="">
                <div class="comp-info-title">
                    <span class="comp-type">{{  competition&&competition.type == 1?'团队赛':'个人赛' }}</span>
                    <span class="comp-title">{{ competition.name }}--{{ currentStage.name }}--证券投资赛项</span>
                </div>
                <hr />
                <div class="comp-info-title">
                    <div class="comp-info-content">
                            <div>
                                <b-img src="/static/image/system_cmp_icon1.png"/>
                                    <div>开始时间: {{ new Date(currentStage.startTime).Format('yyyy-MM-dd')}}</div>
                            </div>
                            <div>
                                <b-img src="/static/image/system_cmp_icon2.png"/>
                                    <div>结束时间: {{ new Date(currentStage.endTime).Format('yyyy-MM-dd')}}</div>
                            </div>
                            <div>
                                <b-img src="/static/image/system_cmp_icon3.png"/>
                                    <div>初始资金: {{  !taskInof?'':taskInof.initCapital}}元</div>
                            </div>
                    </div>
                    <div class="comp-info-content">
                            <div>
                                <b-img src="/static/image/system_cmp_icon4.png"/>
                                    <div>交易品种: {{getTradeType() }}</div>
                            </div>
                            <div>
                                <b-img src="/static/image/system_cmp_icon5.png"/>
                                    <div>参赛人数: {{competition.peopleCount}}人</div>
                            </div>
                            <div>
                                <b-img src="/static/image/system_cmp_icon6.png"/>
                                    <div>行情类型: 实时</div>
                            </div>
                    </div>
                </div>
            </div>
            </div>
            <div class="tz-tab">
                <b-container>
                    <b-img thumbnail @click="sim" src="/static/image/trade_sim.png" />
                    <b-img thumbnail @click="  changeTab(2)" src="/static/image/ranking_tab.png" />
                    <b-img thumbnail @click="jixiao" src="/static/image/jixiaofenxi.png" />
                    <b-img thumbnail  @click=" tabId = 4" src="/static/image/xingweihuaxiang.png" />
                </b-container>
            </div>
            <div class="tz-ranking">
                <div class="tz-ranking-header">
                    <div>
                        <b-img src="/static/image/system_icon10.png" />
                        证券投资赛项个人排名趋势
                    </div>
                    <div>
                        创建日期{{new Date().Format("yyyy-MM-dd")}}
                    </div>
                </div>

                <div id="main"  style="width:100%; height:100%">
                </div>
            </div>
        </div>
        <div v-if="tabId == 2">
            <div class="comp-info">
                   <div class="tz-bold"> >>{{ !competition?'':competition.name }}--{{ !currentStage?'':currentStage.name }}--证券投资赛项 </div>
                   <div class="member-info"> 
                        <div>
                            <b-img src="/static/image/system_icon11.png"/> 
                            <span> 欢迎</span>
                            <span>{{ userInfo.name}}</span>
                        </div>  
                        <!-- <div>
                            <b-img src="/static/image/system_icon12.png" />
                            <span>退出</span>
                        </div>  -->
                   </div>
            </div>
            <div class="tz-filter">
                <div>
                    <span>日期</span>                    
                    <b-form-datepicker v-model="rankQuery.date"  weekday-header-format="short" />
                    <span> 检索</span> 
                    <b-input v-model="rankQuery.keyword" placeholder="用户名/所属院校/所属团队" />
                    <b-button class="tz-button" @click="rankSearch">查询</b-button>
                    <b-button class="tz-button">导出</b-button>
                </div>
                <!-- <div class="online-info">
                    <span>注册人数：1090</span>
                    <span>在线人数： 687</span>
                </div> -->
            </div>
            <div>
                <div class="tz-table-header">
                    <div>
                        用户名
                    </div>
                    <div > 
                        所属院校
                    </div>
                    <div>
                        所属团队
                    </div>
                    <div @click="rankSort('score')">
                        收益率折算分
                        <div class="tz-inline-block">
                            <div class="triangle_up"></div>
                            <div class="triangle_down"></div>
                        </div>
                    </div>
                    <div >
                        排名                        
                    </div>
                    <div>
                        期初资金
                    </div>
                    <div  @click="rankSort('nav')">
                        总资产
                        <div class="tz-inline-block">
                            <div class="triangle_up"></div>
                            <div class="triangle_down"></div>
                        </div>
                    </div>
                    <div>
                        可用资金
                    </div>
                    <div>
                        市值
                    </div>
                    <div>
                        累计盈亏
                    </div>
                    <div>
                        浮动盈亏
            
                    </div>
                    <div>
                        <div>累计手续费</div>
                    </div>
                    <div  @click="rankSort('totalRatio')">
                        <div>累计收益率</div>
                        <div class="tz-inline-block">
                            <div class="triangle_up"></div>
                            <div class="triangle_down"></div>
                        </div>
                    </div>
                    <div class="tz-flex-wrap">
                        <div>
                            基准收益率
                        </div>
                        <div>
                            (沪深300)
                        </div>
                    </div>
                    <div  @click="rankSort('yearRatio')">
                        年化收益率
                        <div class="tz-inline-block">
                            <div class="triangle_up"></div>
                            <div class="triangle_down"></div>
                        </div>
                    </div>
                    <div  v-if="isMobilePlatform == false">
                        最大回测                       
                    </div>
                    <div  v-if="isMobilePlatform == false">
                        卡玛比率
                    </div>
                    <div  v-if="isMobilePlatform == false">
                        夏普比率                       
                    </div>
                    <div  v-if="isMobilePlatform == false">
                        开仓次数                       
                    </div>
                    <div  v-if="isMobilePlatform == false">
                        平仓次数
                    </div>
                    <div v-if="isMobilePlatform == false">
                        胜率
                    </div>
                </div>
                <div class="tz-table-content">
                    <div class="tz-table-row" v-for="(item,$index) in list" :key="$index">
                        <div>{{ item.name}}</div>
                        <div style="text-align:left;">
                            <tz-tips v-if="item.school.length>maxWordLen" :content="item.school" :len="maxWordLen" />
                            <span v-if="item.school.length<=maxWordLen">{{item.school}}</span>
                        </div>
                        <div style="text-align:left;">
                            <tz-tips v-if="item.teamName.length>maxWordLen" :content="item.teamName" :len="maxWordLen"/>
                            <span v-if="item.teamName.length<=maxWordLen">{{item.teamName}} </span> 
                        </div>
                        <div>{{ numberFixed(item.financeScore)}}</div>
                        <div>{{ item.personalRank}}</div>
                        <div>{{ item.initFounds}}</div>
                        <div>{{ numberFixed(item.nav)}}</div>
                        <div>{{ numberFixed(item.available)}}</div>
                        <div>{{ numberFixed(item.marketValue)}}</div>
                        <div>{{ numberFixed(item.profitLoss)}}</div>
                        <div>{{ numberFixed(item.fpnl)}}</div>
                        <div>{{ numberFixed(item.cumCommission)}}</div>
                        <div :class="item.pnlRatio>0?'tz-red':'tz-green'" >{{ numberFixed(item.pnlRatio*100)}}%</div>
                        <div :class="item.baseRatio>0?'tz-red':'tz-green'" >{{ numberFixed(item.baseRatio*100)}}%</div>
                        <div>{{ numberFixed(item.pnlRatioAnnual*100)}}%</div>
                        <div  v-if="isMobilePlatform == false">{{ numberFixed(item.maxDrawdown*100)}}%</div>
                        <div  v-if="isMobilePlatform == false">{{ numberFixed(item.calmarRatio)}}</div>
                        <div  v-if="isMobilePlatform == false">{{ numberFixed(item.sharpRatio)}}</div>
                        <div  v-if="isMobilePlatform == false">{{ item.openCount}}</div>
                        <div  v-if="isMobilePlatform == false">{{ item.closeCount}}</div>
                        <div  v-if="isMobilePlatform == false">{{ numberFixed(item.winRatio*100)}}%</div>
                    </div>
                </div>
            </div>
            <div class="tz-pageable">
                <span class="tz-page" @click="page(-1,1)">&lt;</span>
                <div class="tz-page-number">
                    <span @click="page(1,2)" >首页</span>
                    <span v-for="index in getPrePage()" :key="index" @click="page(index,2)" class="current-page">{{index}}</span>
            
                    <span @click="page(totalPage,2)" >尾页</span>
                </div>
                <span  class="tz-page"  @click="page(1,1)">&gt;</span>
                <span>到第</span>
                <b-input style="width:5rem; margin:0; margin-right:.5rem" type="number" v-model="rankQuery.pageNo" @blur="loadRankinig2" />
                <span>页</span>   
                <span>共{{rankQuery.total}}条/共{{this.totalPage}}页</span>
                <!-- <b-select v-model="rankQuery.pageSize" @change="loadRankinig2">
                    <b-select-option value="20">20条/页</b-select-option>
                    <b-select-option value="30">30条/页</b-select-option>
                    <b-select-option value="50">50条/页</b-select-option>
                </b-select>     -->
            </div>
        </div>
        <div v-if="tabId == 4">
            <tz-portrait :competition="competition" :currentStage="currentStage" :memberInfo="memberInfo" :compId="compId" :stageId="stageId" />
        </div>
        <div v-if="tabId == 6">
            <tz-note />
        </div>

        <div v-if="tabId == 5">
            <tz-quotation />
        </div>
     <tz-footer />
    </div>
</template>
<script>
import Footer from '@/components/footer'
import Quotation from './quotation.vue'
import Portrait from './portrait.vue'
import Note from './note.vue'
import * as echarts from 'echarts'
import { getInfo,loginout } from '@/utils/auth'
import * as competitionApi from '@/api/competition'
import * as memberApi from '@/api/member'
import * as rankingApi from '@/api/ranking'
import * as taskApi from '@/api/task'
import PaoMaDeng from '@/components/paomadeng2.vue'
import Tips from '@/components/tips.vue'
export default {
    components:{
        'tz-footer': Footer,
        'tz-quotation': Quotation,
        'tz-portrait': Portrait,
        'tz-paomadeng': PaoMaDeng,
        'tz-tips': Tips,
        'tz-note': Note
    },
    methods:{
        isMobile() {
            let flag = !!navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            return flag;
        },
        sim(){
             let endTime =  new Date(this.currentStage.endTime).getTime()
             console.log(this.currentStage)
            if(endTime<new Date().getTime()){
                alert("比赛已结束")
                return 
            }
            

            if(!this.memberInfo.accountPwd){
                alert("无交易系统权限");
                return
            }

            let url = 'https://sim.sztzjy.com/user/login?token='+this.memberInfo.accountPwd+'&redirect=https://sim.sztzjy.com/sim?acc='+this.memberInfo.accountId
            window.open(url,"onlywin",'toolbar=no, location=no,directoryies=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=yes, height=600, width=1100, left=180, top=100')
        },
        jixiao(){
           

            if(!this.memberInfo.accountPwd){
                alert("无交易系统权限");
                return
            }

            if(!this.memberInfo.reportId){
                alert("无交易数据")
                return
            }else{
              let url = 'https://sim.sztzjy.com/user/login?token='+this.memberInfo.accountPwd+'&redirect=https://sim.sztzjy.com/perfweb/analysis/profile/'+this.memberInfo.reportId
              window.open(url,"onlywin",'toolbar=no, location=no,directoryies=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=yes, height=600, width=1100, left=180, top=100')
            }
        },
        getPrePage(){
            let rs = []
            for(var i = this.rankQuery.pageNo +1 ;i<this.rankQuery.pageNo+6;i++){
                if(i<=this.totalPage){
                    rs.push(i)
                }
            }
            return rs
        },
        page(step,type){
            if(type ==1){
                let pn =  parseInt(this.rankQuery.pageNo)+parseInt(step);
                if(pn>this.totalPage){
                    pn = this.totalPage
                    return 
                }
                this.rankQuery.pageNo = pn 
            }else{
                this.rankQuery.pageNo = parseInt(step)
            }
            
            if(this.rankQuery.pageNo<=0){
                this.rankQuery.pageNo = 1
            }else{
                this.loadRankinig2()
            }
        },
        getTradeType(){
            console.log(this.taskInof)
            if(this.taskInof.tradeType==1){
                return "股票基金";
            }else{
                return "期货"
            }
        },
        changeTab(id){
            this.tabId = id
            // console.log(this.tabId )
            if(id==2){
                this.loadRankinig2()
            }
        },
        numberFixed(num){
            if(typeof(num) == 'number'){
                return num.toFixed(2)
            }
            return num
        },
        rankSearch(){
            this.loadRankinig2()
        },
        loadData(){
            memberApi.getMemberInfo(this.compId, this.stageId).then(res=>{
                if(res.code == 200){
                    this.memberInfo = res.data
                }else{                    
                    alert(res.msg)
                    if(res.msg == "token异常"){
                        loginout()
                        this.$router.push({
                            path: '/login'
                        }) 
                    }
                }
            })
        },
        loadRankinig2(){
            this.rankQuery.compId = this.compId
            this.rankQuery.stageId = this.stageId
            rankingApi.list(this.rankQuery).then(res=>{
                if(res.code == 200 ){
                    this.list = res.data.list
                    this.rankQuery.total = res.data.total
                    this.totalPage = Math.ceil(this.rankQuery.total/this.rankQuery.pageSize)
                }
            })
        },
        rankSort(key){
            this.rankQuery.sort = key
            if(this.rankQuery.direct == 0){
                this.rankQuery.direct =1
            }else{
                this.rankQuery.direct = 0
            }
            this.loadRankinig2()
        },
        loadRankinig(){
            
            rankingApi.listAll(this.compId,this.stageId).then(res=>{
                if(res.code == 200){
                    this.drawRanking(res.data.list)
                }
            })
        },
        drawRanking(rankList){
            
            let xData = []
            let yData = []
           
            rankList.forEach(item=>{
                xData.push(item.updateTime)
                yData.push(item.personalRank)
            })

              let option = {
                tooltip: {
                    trigger: 'axis',
                    textStyle:{
                        align:'left'
                    },                    
                },
                xAxis: {
                    type: 'category',
                    data: xData,           
                    axisLine: {
                        onZero: false
                    }
                },
                yAxis: {
                    type: 'value',
                    inverse: true
                },
                series: [
                    {
                        data: yData,
                        type: 'line',
                        color:['#7c89ff']
                    }
                ]
                }
               
                 this.rankingCharts = echarts.init(document.getElementById('main'));
            //   if(!this.rankingCharts){
               
            //   }
            
                // 绘制图表
                
              this.rankingCharts.setOption(option,true);
            //    console.log("update ranking",this.rankingCharts)
        }
    },
    data(){
        return{
            userInfo: null,
            tabId: 0,
            list:[
            ],
            rankingCharts: null,
            competition: null,
            compId: 0 ,
            stageId: 0,
            currentStage: null,
            memberInfo: null,
            taskInof: null,
            isMobilePlatform: false,
            maxWordLen: 7,
            rankQuery:{
                pageNo: 1,
                pageSize: 50,
                date: '',
                keyword: '',
                sort: '',
                direct: 0,
                compId: 0,
                stageId: 0
            },
            totalPage: 0
        }
    },
    created(){
        memberApi.updateInfo().then(res=>{})
        this.isMobilePlatform = this.isMobile()
        if(this.isMobilePlatform){
            this.maxWordLen = 4
            // this.rankQuery.pageSize=50;
        }
        this.userInfo = getInfo()
        if(this.$route.query){
            this.compId = this.$route.query.id
            this.stageId = this.$route.query.stageId
            this.loadData()
            competitionApi.get({compId: this.compId}).then(res =>{
                if(res.code == 200 ){
                    this.competition = res.data
                    let stage =  this.competition.stageList.filter(s=>s.id == this.stageId)
                   
                    if(stage.length>0){
                        this.currentStage = stage[0]
                    }
                }
            })
           competitionApi.getGroup(this.compId,this.stageId).then(res=>{
            //    console.log("groupData:",res)
           }) 
           taskApi.get(this.compId,this.stageId).then(res=>{
               if(res.code == 200){
                   this.taskInof =res.data
                    console.log("taskInof:",this.taskInof)
               }
           })
        }
    },
    updated(){
        if(this.tabId == 0 ){
            this.$nextTick(()=>{
                this.loadRankinig()
            })
        }
    }
}
</script>
<style scoped>
.tz-green{
    color: #00994f;
}
.tz-container{
    padding-bottom: 3rem;
}
.tz-red{
    color: #fe0000;
}
.tz-pageable{
    background-color: #202a32;
    display: flex;
    color: white;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: .5rem;
    font-size: 70%;
    align-items: center;
}
.tz-page-number{
    margin-right: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tz-page-number>span{
    margin-left: 0.1rem;
}
.tz-pageable>span{
    margin-right: .5rem;
}
.current-page{
    background-color: #0263d3;
    padding: .3rem;
    border-radius: 3px;
    width: 2rem;
}
.tz-table-header{
    display: flex;
    color: white;
    background-color: #666666;
    justify-content: space-around;
    font-weight: bold;
    align-items: center;
    font-size: 60%;
}
.tz-table-row{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 50%;
    border-bottom: 1px solid #dddddd;
}
.tz-table-row>div{
    width: 100%;
    border-left: 1px solid #cdcdcd;
    padding-top: .4rem;
    padding-bottom: .4rem;
}
.tz-table-row:nth-child(even){
    background-color: #ededed;
}
/* .tz-table-row:nth-child(1){
    background-color: #fecfb1;
    color: #fe0000;
} */
.tz-table-row:nth-child(1)>div:nth-child(5){
    background-color: #fd4b00;
    color: white;
}
.tz-table-row:nth-child(2)>div:nth-child(5){
    background-color: #656565;
    color: white;
}
.tz-table-row:nth-child(3)>div:nth-child(5){
    background-color: #b77a4d;
    color: white;
}
.tz-table-row>div{
    width: 100%;
}
.tz-tabel-bg-blue{
    background-color: #0264d2 !important;
}
.tz-table-color-blue{
    color: #5364db;
}
.tz-table-header>div{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #797979;
    border-bottom: 1px solid #797979;
    border-right: 1px solid #797979;
    height: 3rem;
}
.tz-flex-wrap{
    flex-wrap: wrap;
}
.tz-inline-block{
    display: inline-block;
}
.tz-header{
    background-image: url('/static/image/answer_topbg_1990x140.jpg');
    background-size: cover;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tz-button{
    background-color: #ff7800;
    padding: 0 1rem 0 1rem;
    margin-right: 1rem;
    border-radius: 0;
    border: none;
    font-weight: bold;
}
.triangle_down{
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: white;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}
.triangle_up{
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: white;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-bottom: 2px;
}
.tz-logo{
    width: 2rem;
    margin-right: .5rem;
}
.online-info span{
    margin-right: .5rem;
}
.tz-flex{
    display: flex;
    color: white;
    margin-left: 10rem;
}

.tz-flex div{
    min-height: 80px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
}
.tz-filter{
    background-color: #202a32;
    display: flex;
    justify-content: space-between;
    color: white;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.tz-filter>div{
    display: flex;
    align-items: center;
}
.online-info{
    color: #f0f1f1;
    font-size: 60%;
}
.form-control{
    width: 11rem;
    height: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 60%;
    border-radius: 0;
}
.tz-filter>div:nth-child(1){
    width: 100%;
    margin-left: 18rem;
    
}
.tz-filter>div:nth-child(2){
    /* width: 15%; */
    margin-right: 18rem;
}
.tz-flex div:hover{
    background-color: #0264d2;
}

.tz-selected{
    background-color: #0264d2 !important;
}
.tz-flex div span {
    width: 100%;
    display: block;
    margin-bottom: .5rem;
}
.member-info{
    width: 48%;
    text-align: right;
    display: flex;
    justify-content: end;
}
.member-info div{
    margin-right: 1rem;
    vertical-align: middle;
}
.comp-info{
    width: 100%;
    background-color: #0264d2;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.comp-info-title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.comp-info-content{
    display: flex;
    width: 100%;
}
.comp-info-content>div{
    width: 33%;
    display: flex;
    margin-top: 1rem;
}
.comp-info-content>div>img{
    margin-right: .3rem;
}
.comp-thumbnail{
    padding: 1rem;
}
.comp-thumbnail img {
    border-radius: 3px;
    border: 2px solid white;
    margin-right: 1rem;
    width: 18rem;
}
.comp-type{
    display: inline-block;
    background-color: #ff8400;
    padding: .1rem 1rem .1rem 1rem;
    margin-right: 1rem;
}
.comp-title{
    font-weight: bolder;
    font-size: 130%;
}
#main{
    min-height: 387px;    
    max-width: 86rem;
    background: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.tz-tab{
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}
.tz-tab div{
    display: flex;
    justify-content: space-between;
    max-width: 86rem;
    width: 100%;
}
.tz-tab img{
    max-width: 25%;
}
.tz-ranking{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.tz-ranking-header{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 86rem;
    width: 100%;
    /* box-shadow: 10px 10px 5px #888888; */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.tz-ranking-header div{
    padding: 1rem;
}
.tz-ranking-header div:nth-child(1){
    width: 80%;
    text-align: left;
    background-color: #0263d3;
    color: white;
    border-top-left-radius: 10px;
    font-weight: bold;
    font-size: 100%;
}
.tz-ranking-header div:nth-child(2){
    width: 20%;
    text-align: right;
    background-color: #2b2b2b;
    color: white;
    border-top-right-radius: 10px;
}
</style>