<template>
    <div class="main">
        <div class="basic">
            <!-- 背景图片 -->
            <!-- <img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt=""> -->
            <div class="bg"></div>
            <!-- 个人信息 -->
            <div class="info-box">
                <personal-information
                    :profile-image="personalInfo.imageUrl"
                    :profile-name="personalInfo.name"
                    :date="personalInfo.date"
                    :days="personalInfo.days"
                    ></personal-information>
                
            </div>
            <!-- <div class="info">
                <div class="info-profile">
                    <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
                </div>
                <div class="info-detail">
                    <div class="info-detail-name">
                        王小呆
                    </div>
                    <div class="info-detail-others">自<span>2016.3.23</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>483</span>天啦                      
                    </div>
                </div>
                <div class="arrow-right">
                    <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/arrowRight.png" alt="">
                </div>
            </div> -->
        </div>
        <div class="detail">
            <div class="tab-header">
                <div class="tab-header-name" :class="{active:currentTab===0}" @click="toggleTab(0)">
                    <div class="text">
                        本院
                    </div>
                    <div class="bar">

                    </div>
                </div>
                <div class="tab-header-name" :class="{active:currentTab===1}" @click="toggleTab(1)">
                    <div class="text">
                        本省
                    </div>
                    <div class="bar">

                    </div>
                </div>
                <div class="tab-header-name" :class="{active:currentTab===2}" @click="toggleTab(2)">
                    <div class="text">
                        全国
                    </div>
                    <div class="bar">

                    </div>
                </div>
            </div>
            <div class="tab">
                <!-- 近七天成长路径 -->
                <div class="sub grow-path">
                    <header class="title">30天成长路径</header>
                    <!-- 图表 -->
                    <div id="growPath" class="grow-path-chart"> 
                    </div>
                </div>
                <!-- 学习情况 -->
                <div class="sub study-condition">
                    <header class="title">学习情况</header>
                    <!-- 图表 -->
                    <div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;">

                    </div>
                
                    <!-- 新的对比 -->
                    <div class="study-cmp">
                        <!-- 头部tab -->
                        <header>
                            <div class="tab-name" :class="{active:currentStudyTab===0}" @click="toggleStudyTab(0)">完成课程</div>
                            <div class="tab-name" :class="{active:currentStudyTab===1}" @click="toggleStudyTab(1)">完成考试</div>
                            <div class="tab-name" :class="{active:currentStudyTab===2}" @click="toggleStudyTab(2)">获得证书</div>
                        </header>
                        <!--表格-->
                        <div class="rank-table">
                            <!-- header -->
                            <header>
                                <div class="rank-name my-rank">我的最近Top3</div>
                                <div class="rank-name other-rank">院内Top3</div>
                            </header>
                            <!-- 测试组件 -->
                            <compare-table :cmp-table-data=cmpTableDataTest3 :type=type></compare-table>
                        </div>
                    </div>


                </div>
                <!-- 为你推荐 -->
                <div class="recommend-for-you">
                    <recommend-list :title="recommendTitle" title-position="center" :recommends="recommendList"></recommend-list>

                </div>
                <!-- 其它为你推荐 -->
                <recommend-list 
                    title="你可能需要" 
                    title-position="left"
                    has-change=true
                    has-more=true
                    has-course-tag=true
                    tag-position="right"
                    :recommends="recommendListTest"></recommend-list>
                <!-- 课程列表 -->
                <course-list 
                    title="你可能需要" 
                    title-position="left"
                    has-change=true
                    has-more=true
                    has-course-tag=true
                    tag-position="right"
                    :courses="courseList"></course-list>
                    
               

            </div>
        </div>
        
    </div>
</template>

<script>
// import RecommendList from './RecommendList.vue'
// import RecommendListTest from './RecommendListTest.vue'
import CompareTable from './CompareTable.vue'
import RecommendList from 'src/components/common/yqy/RecommendList.vue'
import CourseList from 'src/components/common/yqy/CourseList.vue'
import PersonalInformation from 'src/components/common/yqy/PersonalInformation.vue'

var echarts=require('echarts');
export default {
    name:'gpranking',
    components:{
        // RecommendList,
        RecommendList,
        CourseList,
        PersonalInformation,
        CompareTable
    },
    data(){
        return{
            //记录全国/全省/本院tab ----0/1/2
            currentTab:0,
            //记录课程/考试/证书 ----0/1/2
            currentStudyTab:0,
            //记录准确的 ‘全国-课程’这种组合 ----00/01/02/10/11/12/20/21/22
            currentChosen:'00',
            //共六种表格样式-----4：normal,
            type:3,
            //提示信息列表，
            messageList:{
                institute:{
                    course:{
                        messageA:'您完成的课程太少了，赶紧去学习喔',
                        messageB:'您和您所在的医院已完成的课程数太少了，赶紧去学习哦！'
                    },
                    exam:{
                        messageA:'您完成的考试太少了，去测试一下自己的水平吧',
                        messageB:'您和您所在的医院已完成的考试太少了，赶紧去学习哦！'
                    },
                    certificate:{
                        messageA:'您获得的证书太少了，赶紧去考证吧！',
                        messageB:'您和您所在的医院已获得的证书不足3张，赶紧去学习哦！'
                    }
                },
                province:{
                    course:{
                        messageA:'您完成的课程太少了，赶紧去学习喔',
                        messageB:'您和您所在的省已完成的课程数太少了，赶紧去学习哦！'
                    },
                    exam:{
                        messageA:'您完成的考试太少了，去测试一下自己的水平吧',
                        messageB:'您和您所在省已完成的考试太少了，赶紧去学习哦！'
                    },
                    certificate:{
                        messageA:'您获得的证书太少了，赶紧去考证吧！',
                        messageB:'您和您所在的省已获得的证书不足3张，赶紧去学习哦！'
                    }
                },
                country:{
                    course:{
                        messageA:'您完成的课程太少了，赶紧去学习喔',
                        messageB:''
                    },
                    exam:{
                        messageA:'您完成的考试太少了，去测试一下自己的水平吧',
                        messageB:''
                    },
                    certificate:{
                        messageA:'您获得的证书太少了，赶紧去考证吧！',
                        messageB:''
                    }
                }

            },

            //图表数据
            //30天成长
            growPathDataSet: [
                        ['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
                        ['10.6','15','22','2','4'],
                        ['10.7','15','24','2','4'],
                        ['10.8','17','28','2','4'],
                        ['10.9','15','18','2','4'],
                        ['今天','15','20','2','4']
            ],
            //学习情况
            studyConditionDataSet: [
                        ['content', '我的', '本院平均'],
                        ['完成课程', 56,69],
                        ['完成考试', 23,45],
                        ['获得证书', 8,20],
            ],
            OptionGrowPath:{},//30天成长路径///////
            OptionStudyCondition:{},
            //为你推荐数据：
            recommendTitle:"为你推荐",
            recommendList:[],
            recommendListTest:[],
            courseList:[],
            personalInfo:{"name":"王小呆","date":"2016.3.23","days":555,"imageUrl":"https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png"},
            cmpTableHeader:{institute:"院内",province:"省内",country:"国内"},
            cmpTableData:{
                self:[
                    {isMessage:false,name:'治疗药物检测的临床意义'},
                    {isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
                    {isMessage:true,name:'您获得的证书太少了，赶紧去考证吧！'}
                    ],
                other:[
                        {name:'聚集糖尿病治疗与管理'},
                        {name:'治疗药物检测的临床意义是什么'},
                        {name:'治疗药物检测的临床意义'}
                     ]
                
            },
            cmpTableDataTest4:{
                self:[
                    {isMessage:false,name:'治疗药物检测的临床意义'},
                    {isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
                    {isMessage:true,name:'您获得的证书太少了，赶紧去考证吧！'}
                    ],
                other:[
                        {name:'聚集糖尿病治疗与管理'},
                        {name:'治疗药物检测的临床意义是什么'},
                        {name:'治疗药物检测的临床意义'}
                     ]
                
            },
            cmpTableDataTest5:{
                self:[
                    {isMessage:false,name:'治疗药物检测的临床意义'},
                    {isMessage:true,name:'您获得的考试太少了，赶紧去考证吧！'}
                    ],
                other:[
                        {name:'聚集糖尿病治疗与管理'},
                        {name:'治疗药物检测的临床意义是什么'},
                        {name:'治疗药物检测的临床意义'}
                     ]
            },
            cmpTableDataTest6:{
                self:[
                        {isMessage:false,name:'您获得的考试太少了，赶紧去考证吧！'},
                        {isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
                        {isMessage:true,name:'您和您的学院，获得的证书太少了，快去学习吧'},

                    ],
                other:[
                        {name:'聚集糖尿病治疗与管理'},
                        {name:'治疗药物检测的临床意义是什么'},
                        {isMessage:true,name:'您和您的学院，获得的证书太少了，快去学习吧'},
                     ]
            },
            cmpTableDataTest1:{
                self:[
                    {isMessage:false,name:'治疗药物检测的临床意义'},
                    {isMessage:false,name:'治疗药物检测的临床意义'},
                    // {isMessage:true,name:'暂无'},
                    // {isMessage:true,name:'暂无'}
                    ],
                other:[
                        {name:'聚集糖尿病治疗与管理'},
                        {name:'治疗药物检测的临床意义是什么'},
                     ],
                commonMessage:'您和您的学院，获得的证书太少了，快去学习吧'
            },
            cmpTableDataTest2:{
                self:[
                    // {isMessage:false,name:'治疗药物检测的临床意义'},
                    {isMessage:true,name:'暂无'},
                    // {isMessage:true,name:'暂无'}
                    ],
                other:[
                        {name:'聚集糖尿病治疗与管理'},
                     ],
                commonMessage:'您和您的学院，获得的证书太少了，快去学习吧'
            },
            cmpTableDataTest3:{
                commonMessage:'您和您所在地，获得的证书太少了，快去学习吧'
            }
        }
    },
    mounted(){
        this.handleData();
        // this.generateExample();
        this.generateStudyConditionChart();
        this.generateGrowPathChart();
        //为你推荐
        this.getRecommendList();
      




    },
    methods:{
        handleData:function(){
            this.OptionGrowPath={
                // title:{
                //     show:true,
                // },
                legend:{
                    itemHeight:6,//图例的高度
                    itemGap:10,//图例间距
                    itemWidth:10,//图例的宽度
                    textStyle:{//整体设置文字部分的样式
                                color:'#666',
                                fontSize:12,
                                fontweight:400,
                                height:16.5,
                                lineHeight:16.5,
                                padding:[0,30,0,0],
                                // borderColor:'#ccc',
                                // borderWidth:2,
                                
                            },
                    data:[
                            {
                                name:'我的学习时长',
                                icon:'line',
                            },
                            {
                                name:'我的学习课程',
                            },
                            {
                                name:'平均学习时长',
                                icon:'line',
                            },
                            {
                                name:'平均学习课程',
                            }                           
                        ],

                },
                dataset: {
                    //提供一份数据
                    source: this.growPathDataSet,
                },
                grid:{
                    left:0,
                    right:0,
                    bottom:0
                },
                xAxis:
                    {
                        type:'category',
                        axisLine:{
                            lineStyle:{
                                type:'solid',
                                color:'#EDEEF0',
                                width:'2',
                            },
                        },
                        axisLabel:{
                            show:true,
                            textStyle:{
                                // color:'#aaa', //坐标值具体的颜色
                                // color:'rgb(255,0,0)',
                            },
                            fontSize:'10px',
                        },
                       
                        axisTick:{
                            show:false,
                            // length:10
                        },
                        data:[
                                    {value:'10.6',
                                        textStyle:{fontweight:'bold',color:'#000'}}, 
                                    '10.7', '10.8','10.9', '今天'],
                                    
                    },
                yAxis:[
                    {
                        type:'value',
                        name:'时长',
                        // interval:25,
                        min:0,
                        // max:60,
                        axisLabel:{
                            formatter:`{value}min`
                        },
                        show:false

                    },
                    {
                        type:'value',
                        name:'课程',
                        min:0,
                        // max:6,
                        axisLabel:{
                            formatter:`{value}`
                        },
                        show:false


                    
                    }
                    

                ],
                series:[
                    //['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
                    {
                        type:'line',
                        symbol:'none',
                        smooth:true,
                        itemStyle:{'color':'#449284'}
                    },{
                        type:'line',
                        symbol:'none',
                        smooth:true,
                        itemStyle:{'color':'#CAA861'}
                    },{
                        type:'bar',
                        yAxisIndex:1,
                        label:{
                            show:true,
                            position:'top'
                        },
                        barGap:0.1,
                        barCategoryGap:'30px',
                        itemStyle:{'color':'#CAA861'}
                    },{
                        type:'bar',
                        yAxisIndex:1,
                        label:{
                            show:true,
                            position:'top'
                        },
                        barGap:0.1,
                        barCategoryGap:'30px',
                        itemStyle:{'color':'rgba(202,168,97,0.2)'}//透明度以这种方式设置，才会在图例中有效果
                    }
                    
                ]

            };
            this.OptionStudyCondition={
                // color:{},
                legend: {},
                tooltip: {},
                dataset: {
                    //提供一份数据
                    source:this.studyConditionDataSet,
                },
                grid:{
                    show:false,
                    left:0,
                    right:0,
                    // bottom:0
                },
                textStyle:{
                    color:'#444'
                },
                xAxis: {
                    type: 'category',
                    // name:'xxxx',
                    axisLine:{
                        lineStyle:{
                            type:'solid',
                            color:'#aaa',
                            width:'4',
                        },
                    },
                    triggerEvent:true,
                    axisLabel:{
                        show:true,
                        textStyle:{
                            // color:'#aaa', //坐标值具体的颜色
                            // color:'rgb(255,0,0)',
                        },
                        fontSize:'10px',
                        clickable:true
                    },
                    axisTick:{
                        show:false,
                        // length:10
                    },
                    
                    // data:[
                    //     {value:'课程',
                    //     textStyle:{fontweight:'bold',color:'#000'}}, 
                    // '完成课程', '完成考试','获得证书', '参与项目'],
                   
                        
                        

                },
                yAxis: {
                    show:false,
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        type: 'bar',
                        barGap:0,
                        barCategoryGap:'30px',
                        label:{
                            show:true,
                            position:'top'
                        },
                        itemStyle:{
                            'color':'#5489FD',
                            'opacity':0.84
                        }
                    },
                    {
                        type: 'bar',
                        barGap:0.1,
                        barCategoryGap:'30px',
                        label:{
                            show:true,
                            position:'top'
                        },
                        itemStyle:{
                            'color':'#5489FD',
                            'opacity':0.34
                        }
                    }
                ]
            };
           
        },
        getRecommendList(){
            this.recommendList=[
                {name:'肖丹丹',num:'671',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
                {name:'肖丹丹',num:'672',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
                {name:'肖丹丹',num:'673',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
                {name:'肖丹丹',num:'674',title:'患者心理学入门文字很长文字很长文字很长文字很长',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'}
            ],
            this.recommendListTest=[
                {name:'肖丹',num:'666',title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
                {name:'肖小丹',num:'667',title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'治疗'},
                {name:'肖丹丹',num:'668',title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'随访'},
                {name:'肖丹丹',num:'669',title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'检查'},
               
            ],
            this.courseList=[
                {name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
                {name:'肖小丹',num:'1.1k',time:'3小时前',saveStatus:false,title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'糖尿病'},
                {name:'肖丹丹',num:'668',time:'3小时前',saveStatus:false,title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'心脏病'},
                {name:'肖丹丹',num:'669',time:'3小时前',saveStatus:true,title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'检查'},
               
            ]
        },
        toggleTab:function(tab){
            this.currentTab=tab;
            this.currentChosen=`${this.currentTab}${this.currentStudyTab}`;
            console.log(this.currentTab,this.currentStudyTab,this.currentChosen);
            //将相应的数据分别给

        },
        toggleStudyTab:function(tab){
            this.currentStudyTab=tab;
            this.currentChosen=`${this.currentTab}${this.currentStudyTab}`;
            console.log(this.currentTab,this.currentStudyTab,this.currentChosen)

        },
        generateGrowPathChart:function(){
            let growPathChart=echarts.init(document.getElementById('growPath'));
            growPathChart.setOption(this.OptionGrowPath);
            growPathChart.on('click',function(params){
                if(params.value){
                    alert("单击了"+params.name+"柱状图");
                }else{
                    alert("单击了"+params.name+"x轴标签");
                }
                // console.log(params)
            });
            // s

        },
        generateStudyConditionChart:function(){
            let studyConditionChart=echarts.init(document.getElementById('studyCondition'));
            studyConditionChart.setOption(this.OptionStudyCondition);
            // studyConditionChart.on('axisareaselected',function(){
            //     console.log('xxx')
            // })
            studyConditionChart.on('click',function(params){
                if(params.value){
                    alert("单击了"+params.name+"柱状图");
                }else{
                    alert("单击了"+params.name+"x轴标签");
                }
                // console.log(params)
                if(params.componentType=='xAxis'){
                    // console.log(params.value)
                }
            });
           
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '../../style/mixin';
    /*****************************************basic信息******************************************/
    .main{
        background-color:$fc;//整体背景为蓝色
    }
    .basic{
        width:px2rem(375px);
        height:px2rem(150px);
        position:relative;
    }
    .basic .bg{/*图片响应式:内容自动向下排列*/
        width:px2rem(375px);
        height:px2rem(119px);
        background-color:#41B1A3;
        // background-color:linear-gradient(25deg,rgba(65,177,163,1) 0%,rgba(74,158,143,1) 100%);
        // margin-bottom:px2rem(51px)
    }
    .basic .info-box{
        @include cl;//水平居中
        position: absolute;
        top:px2rem(80px);
    }
   
    /****************************************具体信息*****************************************/
    .detail{
        display:flex;
        flex-direction: column;
        /* justify-content:center; */
        width:100%;
        padding-top:px2rem(20px);
        padding-right:px2rem(15px);
        padding-left:px2rem(15px);
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .tab-header{
        display:flex;
        justify-content:center;
        width:100%;
        height:px2rem(34.5px);
        box-shadow: 0 px2rem(2px) px2rem(4px) 0 rgba(0,0,0,0.04)
    }

    .tab-header .tab-header-name{
        width:px2rem(30px);
        height:px2rem(17px);
        line-height:px2rem(17px);
        font-size:px2rem(15px);
        font-weight:400;
        color:rgb(153,153,153)
        /* padding:1rem; */
        /* margin:0 2rem; */

    }
    .tab-header .tab-header-name:nth-child(1),.tab-header .tab-header-name:nth-child(2){
        margin-right:px2rem(67.5px);

    }

    .tab-header .tab-header-name .text{
        height:px2rem(17px);
        line-height:px2rem(17px);

    }
    .tab-header .tab-header-name.active .bar{
        width:px2rem(10px);
        height:px2rem(3px);
        margin-top:px2rem(9.5px);
        margin-left:px2rem(10px);
        background:#449284;
        border-radius:px2rem(1.5px);
    }

    .tab-header .tab-header-name.active{
        font-weight:500;
        color:rgb(51,51,51)
    }

    .tab{
        width:100%;
    }
   
    .sub.grow-path,.sub.study-condition{
        padding:0 px2rem(5px);
    }

    .sub>.title{/*整体控制每个部分标题与内容之间的间距与样式*/
        margin-top:px2rem(25px);
        margin-bottom:px2rem(11px);
        height:px2rem(25px);
        line-height:px2rem(25px);
        font-size:px2rem(18px);
        font-weight:400;
        color:#333;
        text-align:center;
    }
    .sub.grow-path>.title{
        margin-top:px2rem(25px);
    }
    .sub.study-condition>.title{
        margin-top:px2rem(20px);
    }

    /*成长情况*/
    .grow-path-chart{
        width:100%;
        height:px2rem(282px);/*(33+532)/2*/
    }

    /*学习情况*/
    ///////新设计的学习情况
    .study-cmp{
        width:px2rem(345px);
        // min-height:px2rem(254.5px);
        min-height:px2rem(284.5px);
        box-shadow:0px 10px 30px 0px rgba(0,57,47,0.05);
        border-radius:10px;

    }
    .study-cmp>header{
        height:px2rem(36.5px);
        display:flex;
        display:-webkit-flex;
        flex-direction:row;
    }
    .study-cmp .tab-name{
        width:px2rem(115px);
        height:px2rem(36.5px);
        line-height:px2rem(36.5px);
        font-size:px2rem(12px);
        text-align:center;
        background-color:#f5f5f5;
    }
    .study-cmp .tab-name:nth-child(1),.study-cmp .tab-name:nth-child(2){
        border-right: px2rem(0.5px) solid #e7e7e7;
    }
    .study-cmp .tab-name.active{
        background-color:#fff;
    }
   
    .rank-table{
        margin:px2rem(21.5px) px2rem(15px) px2rem(28px) px2rem(15px);//上右下左
        border:px2rem(0.5px) solid rgb(236,238,241);
    }
    .rank-table>header{
        display:flex;
        display:-webkit-flex;
        flex-direction:row;
        height:px2rem(37px);

    }
    .rank-table .rank-name{
        width:px2rem(157.5px);
        height:px2rem(37px);
        line-height:px2rem(37px);
        text-align:center;
        font-weight:500;
        font-size:px2rem(12px);
        color:#333;
    }
    .rank-table .rank-name.my-rank{
        background-color:rgba(227,188,122,0.1);
    }
      .rank-table .rank-name.other-rank{
        background-color:rgba(68,146,132,0.1);
    }

    //具体内容的样式
    .rank-table-content{
        display:flex;
        display:-webkit-flex;
        flex-direction:row;
    }

    .rank-table-content .content.my-rank-content{
        width:px2rem(157px);

    }
    .rank-table-content .content.other-rank-content{
        width:px2rem(157px);

    }
    .rank-table-content .content .item{
        height:px2rem(58px);
        display:flex;display:-webkit-flex;justify-content:center;align-items:center;
         .normal span{
            font-size:px2rem(12px);
            display:inline-block;
            vertical-align:middle;//行内块垂直居中
        }
        .normal span.num{
            width:px2rem(13px);
            height:px2rem(13px);
            line-height:px2rem(13px);
            text-align:center;
            background-color: rgb(202,168,97);
            border-radius: px2rem(6.5px);
            color:#fff;
            font-weight:400;
        }
        .normal span.text{
            width:px2rem(114px);
            line-height:px2rem(16px);
            text-align:center;
            // padding-left:px2rem(10px);
            font-weight:400;
        }

        .special{
             font-size:px2rem(12px);
             text-align:center;
             padding:px2rem(20px);
             color:#999;
        }
        
    }
    .content.my-rank-content .item{
        border-top:px2rem(0.5px) solid rgb(236,238,241);
        border-right:px2rem(0.5px) solid rgb(236,238,241);
    }
    .content.other-rank-content .item{
        border-top:px2rem(0.5px) solid rgb(236,238,241);
       
    }






    ////////////////////////

    /*为你推荐*/
   .recommend-for-you{
       padding-top:px2rem(5px);/*补充推荐list组件里不足的顶部间距*/
   }
</style>





