<template>
  <div class="page-ranking">
    
    <div class="page-ranking-col experience">
          <div class="exp-hear">
           <div class="exp-hear-text">
                  经验值排行榜
                  <el-tooltip placement="top"  effect="light">
                    <div slot="content" style="line-height:13px;">
                      所有用户经验值TOP排行榜单，通过学习、贡献等行为可以获得经验值 。</br></br>
                      系统已经根据您在4月23日新系统上线之后产生的学习数据对经验值进行</br>
                      <span  style="line-height:15px;">了初始化，更早的数据以及老系统中产生的数据，将在2022年底一次性</span></br>
                      补充到您的经验值中，请您耐心等待。
                    </div>
                    <svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
                  </el-tooltip>
                  <span class="exp-hear-textbor"></span>
             </div>
              <div class="exp-hear-xiala">
                 <el-dropdown trigger="click"  @command="experienceCommand">
                    <span class="el-dropdown-link pointer">
                        {{experience.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="total">累计</el-dropdown-item>
                        <!-- <el-dropdown-item command="weeks">本周</el-dropdown-item>
                        <el-dropdown-item command="months">本月</el-dropdown-item>
                        <el-dropdown-item command="years">本年</el-dropdown-item> -->
                    </el-dropdown-menu>
                </el-dropdown>
              </div>
          </div>
          <div class="myselftext">
             <div class="myranking">
                 累计排名 :  <span> {{currentUserRankingTotalData.rankNo}}</span>
             </div>
             <div class="myexperience">
                 累计经验值 :  <span>{{currentUserRankingTotalData.rankValue}}</span>
             </div>
          </div>


          <div class="exp-table" style="margin-top:20px;">
             <div class="table-hear">
                <div style="margin-left:5px">排名</div>
                <div style="margin-left:5px">姓名</div>
                <div class="bm">经验值</div>
             </div>
             <div>
            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(ran,index) in experience.list" :key="ran.id">
                 <div class="tab-rank" >
                    <img v-if="index ==0" :src="`${webBaseUrl}/images/rank1.png`" alt=""/>
                    <img v-if="index ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
                    <img v-if="index ==2" :src="`${webBaseUrl}/images/rank3.png`" alt=""/>
                    <div v-if="index >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{index+1}}</div>
                </div>
                 <div class="tab-name">
                    <author-img :avatar="ran.authorInfo.avatar" :aid="ran.authorInfo.aid" :sex="ran.authorInfo.sex"></author-img>
                    <div>
                        <span>{{ran.authorInfo.name}}</span>
                        <div class="tab-bm">{{cutOrgNamePath(ran.authorInfo.orgInfo)}}</div>
                    </div>

                     </div>
                 <div class="jy tab-jy">
                     <div v-if="experience.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.total}}</div>
                     <div v-if="experience.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.months}}</div>
                     <div v-if="experience.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.years}}</div>
                     <div v-if="experience.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.weeks}}</div>
                 </div>
             </div>
             </div>

             <div v-if="experience.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
                 <div v-if="experience.data.rankingNo>5" class="omit">
                     <div>.</div> <div>.</div> <div>.</div>
                 </div>
             </div>


             <div v-if="experience.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
                 <div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{experience.data.rankingNo}}</div>
                 <div class="tab-name" v-if="userInfo.aid">
                    <author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
                    <div>
                        <span style="color: #0059FF;">{{userInfo.name}}</span>
                        <div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
                    </div>
                </div>

                 <div class="jy tab-jy">
                     <div v-if="experience.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.total}}</div>
                     <div v-if="experience.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.months}}</div>
                     <div v-if="experience.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.years}}</div>
                     <div v-if="experience.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.weeks}}</div>
                 </div>
             </div>

          </div>
      </div>

    <div class="page-ranking-col Duration">
           <div class="exp-hear">
              <div class="exp-hear-text">
                  学习时长排行榜
                  <el-tooltip placement="top"  effect="light">
                    <div slot="content">所有用户学习时长TOP排行榜单，统计单位为小时</div>
                    <svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
                  </el-tooltip>
                  <span class="exp-hear-textbor"></span>
             </div>
              <div class="exp-hear-xiala">
                 <el-dropdown trigger="click" @command="durationCommand">
                    <span class="el-dropdown-link pointer">
                        {{learningDuration.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="total">累计</el-dropdown-item>
                        <!-- <el-dropdown-item command="weeks">本周</el-dropdown-item>
                        <el-dropdown-item command="months">本月</el-dropdown-item>
                        <el-dropdown-item command="years">本年</el-dropdown-item> -->
                    </el-dropdown-menu>
                </el-dropdown>
              </div>
          </div>
          <div class="myselftext">
             <div class="myranking">
                 累计排名 :  <span> {{learningDurationTotalData.rankNo}}</span>
             </div>
             <div class="myexperience">
                 累计学习时长:  <span> {{formatSecondToHour(learningDurationTotalData.rankValue)}}</span> h
             </div>
          </div>
           <div class="exp-table" style="margin-top:20px;">
             <div class="table-hear">
                <div style="margin-left:5px">排名</div>
                <div style="margin-left:5px">姓名</div>
                <div style="margin-left:30%;">学习时长:小时</div>
             </div>
             <div>
            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(lan,idx) in learningDuration.list" :key="lan.id">
                 <div class="tab-rank">
                    <img v-if="idx ==0" :src="`${webBaseUrl}/images/rank1.png`" alt=""/>
                    <img v-if="idx ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
                    <img v-if="idx ==2" :src="`${webBaseUrl}/images/rank3.png`" alt=""/>
                    <div v-if="idx >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{idx+1}}</div>
                </div>
                 <div class="tab-name">
                    <author-img :avatar="lan.authorInfo.avatar" :aid="lan.authorInfo.aid" :sex="lan.authorInfo.sex"></author-img>
                    <div>
                        <span>{{lan.authorInfo.name}}</span>
                        <div class="tab-bm">{{cutOrgNamePath(lan.authorInfo.orgInfo)}}</div>
                    </div>
                </div>
                 <div class="jy tab-jy">
                     <div v-if="learningDuration.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.total)}}</div>
                     <div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.months)}}</div>
                     <div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.years)}}</div>
                     <div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.weeks)}}</div>
                 </div>
             </div>
             </div>

             <div v-if="learningDuration.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
                 <div v-if="learningDuration.data.rankingNo>5" class="omit">
                     <div>.</div> <div>.</div> <div>.</div>
                 </div>
             </div>

             <div v-if="learningDuration.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
                 <div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{learningDuration.data.rankingNo}}</div>
                 <div class="tab-name" v-if="userInfo.aid">
                    <author-img  :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
                    <div>
                        <span style="color: #0059FF;">{{userInfo.name}}</span>
                        <div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
                    </div>
                </div>
                 <div class="jy tab-jy">
                     <div v-if="learningDuration.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.total)}}</div>
                     <div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.months)}}</div>
                     <div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.years)}}</div>
                     <div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.weeks)}}</div>
                 </div>
             </div>
          </div>
      </div>
      

    <div class="page-ranking-col Duration">
           <div class="exp-hear study-info">
              <div class="exp-hear-text">
                  学习天数排行榜
                  <el-tooltip placement="top"  effect="light">
                    <div slot="content">所有用户学习天数TOP排行榜单，每活跃学习1天可累计学习天数</div>
                    <svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
                  </el-tooltip>
                  <span class="exp-hear-textbor" style="background:#f1b48f !important"></span>
             </div>
              <div class="exp-hear-xiala">
                 <el-dropdown trigger="click" @command="daysCommand">
                    <span class="el-dropdown-link pointer">
                        {{learningDays.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="total">累计</el-dropdown-item>
                        <!-- <el-dropdown-item command="weeks">本周</el-dropdown-item>
                        <el-dropdown-item command="months">本月</el-dropdown-item>
                        <el-dropdown-item command="years">本年</el-dropdown-item> -->
                    </el-dropdown-menu>
                </el-dropdown>
              </div>
          </div>
          <div class="myselftext">
             <div class="myranking">
                 累计排名 :  <span> {{learningDaysTotalData.rankNo}}</span>
             </div>
             <div class="myexperience">
                 累计学习天数 :  <span>{{learningDaysTotalData.rankValue}}</span>
             </div>
          </div>
           <div class="exp-table" style="margin-top:20px;">
             <div class="table-hear">
                <div style="margin-left:5px">排名</div>
                <div style="margin-left:5px">姓名</div>
                <div style="margin-left:41%;">学习天数</div>
             </div>
             <div>
            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(day,inx) in learningDays.list" :key="day.id">
                 <div class="tab-rank" >
                    <img v-if="inx ==0" :src="`${webBaseUrl}/images/rank1.png`" alt=""/>
                    <img v-if="inx ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
                    <img v-if="inx ==2" :src="`${webBaseUrl}/images/rank3.png`" alt=""/>
                    <div v-if="inx >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{inx+1}}</div>
                </div>
                 <div class="tab-name">
                    <author-img :avatar="day.authorInfo.avatar" :aid="day.authorInfo.aid" :sex="day.authorInfo.sex"></author-img>
                    <div>
                        <span>{{day.authorInfo.name}}</span>
                        <div class="tab-bm">{{cutOrgNamePath(day.authorInfo.orgInfo)}}</div>
                    </div>
                </div>

                 <div class="jy tab-jy">
                     <div v-if="learningDays.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.total}}</div>
                     <div v-if="learningDays.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.weeks}}</div>
                     <div v-if="learningDays.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.months}}</div>
                     <div v-if="learningDays.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.years}}</div>
                 </div>
             </div>
             </div>

             <div v-if="learningDays.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
                 <div v-if="learningDays.data.rankingNo>5" class="omit">
                     <div>.</div> <div>.</div> <div>.</div>
                 </div>
             </div>


             <div v-if="learningDays.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
                 <div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{learningDays.data.rankingNo}}</div>
                 <div class="tab-name" v-if="userInfo.aid">
                    <author-img  :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
                    <div>
                        <span style="color: #0059FF;">{{userInfo.name}}</span>
                        <div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
                    </div>
                </div>

                 <div class="jy tab-jy">
                     <div v-if="learningDays.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.total}}</div>
                     <div v-if="learningDays.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.weeks}}</div>
                     <div v-if="learningDays.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.months}}</div>
                     <div v-if="learningDays.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.years}}</div>
                 </div>
             </div>
          </div>
      </div>



  </div>
</template>

<script>
    import apiUser from "@/api/system/user.js";
    import apiStat from '@/api/phase2/stat.js';
    import { mapGetters } from 'vuex';
    import authorImg from '@/components/Portal/authorImg.vue';
    import {translate,experienceValue,formatSecondToHour,cutOrgNamePath} from "@/utils/tools.js";
export default {
    computed: {
      ...mapGetters(['userInfo']),

      },
      components: {authorImg},
  data(){
      return{
        experienceValue,
        cutOrgNamePath:cutOrgNamePath,
        current:{},
        currentUserRankingTotalData:{
          rankNo:0, // 经验值累计排名
          rankValue:0 ,// 经验值累计,
          endValue:0 // 累计经验值进度条最大值
        },
        translate,
        formatSecondToHour:formatSecondToHour,
        experience:{
            field:'total',
            name:'累计',
            data:{
                rankingNo:0,
                total:0
            },
            list:[],
        },
        learningDuration:{
            field:'total',
            name:'累计',
            data:{
                rankingNo:0,
                total:0
            },
            list:[],
        },
        learningDurationTotalData:{
          rankNo:0, // 学习时长累计排名
          rankValue:0  // 累计学习时长
        },
        learningDaysTotalData:{
          rankNo:0, // 学习天数累计排名
          rankValue:0  // 累计学习天数
        },
        learningDays:{
            field:'total',
            name:'累计',
            data:{
                rankingNo:0,
                total:0
            },
            list:[],
        }
      }
  },
  mounted() {
    this.getExperience();
    this.getDuration();
    this.getDays();
  },
  methods:{

    // 经验值排行榜（下拉框事件）
    experienceCommand(e) {
        this.experience.field = e;
        this.experience.name = this.translate(e)
        this.getExperience();
    },
    // 学习时长（下拉框事件）
    durationCommand(e) {
        this.learningDuration.field = e;
        this.learningDuration.name = this.translate(e)
        this.getDuration();
    },
    // 学习天数（下拉框事件）
    daysCommand(e) {
        this.learningDays.field = e;
        this.learningDays.name = this.translate(e)
        this.getDays();
    },
    getExperience() {//经验值
  let data = {
      aid:this.userInfo.aid,// #用户id
      statType:20, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
      field:this.experience.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
      num:5,//  #显示的条数
  }
  apiStat.getRanking(data).then(res=>{
      if(res.status==200){
          if(res.result.currentUserRankingData) {
              res.result.currentUserRankingData.authorInfo={
                  aid: "",
                  name: "",
                  orgInfo: "",
                  avatar: "",
                  sex: null
              }
              this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
              this.experience.data = res.result.currentUserRankingData;
              if(this.experience.field == 'total') {
                this.current = this.experienceValue(res.result.currentUserRankingData.total);
                this.currentUserRankingTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
                this.currentUserRankingTotalData.rankValue = res.result.currentUserRankingData.total;
                this.currentUserRankingTotalData.endValue = this.current.endValue;
              }
          }
          this.current.total=res.result.currentUserRankingData.total;//当前用户的经验值是固定的
         const ids= [];
         res.result.rankingData.forEach(item=>{
          ids.push(item.aid)
          item.authorInfo = {
              aid: "",
              name: "",
              orgInfo: "",
              avatar: "",
              sex: null
          }
         })
         this.getUserData(ids,res.result.rankingData)
         this.experience.list = res.result.rankingData;
      }
  })
    },
    getDuration() {//学习时长
      let data = {
          aid:this.userInfo.aid,// #用户id
          statType:10, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
          field:this.learningDuration.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
          num:5,//  #显示的条数
      }
      apiStat.getRanking(data).then(res=>{
          if(res.status==200){
              if(res.result.currentUserRankingData) {
                  res.result.currentUserRankingData.authorInfo={
                      aid: "",
                      name: "",
                      orgInfo: "",
                      avatar: "",
                      sex: null
                  }
                  this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
                  this.learningDuration.data = res.result.currentUserRankingData;
                  if(data.field == 'total'){
                    this.learningDurationTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
                    this.learningDurationTotalData.rankValue = res.result.currentUserRankingData.total;
                  }
              }


             const ids= [];
             res.result.rankingData.forEach(item=>{
              ids.push(item.aid)
              item.authorInfo = {
                  aid: "",
                  name: "",
                  orgInfo: "",
                  avatar: "",
                  sex: null
              }
             })
             this.getUserData(ids,res.result.rankingData)
             this.learningDuration.list = res.result.rankingData;
          }
      })
    },
    //学习天数
    getDays() {
      let data = {
          aid:this.userInfo.aid,// #用户id
          statType:11, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
          field:this.learningDays.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
          num:5,//  #显示的条数
      }
      apiStat.getRanking(data).then(res=>{
          if(res.status==200){
              if(res.result.currentUserRankingData) {
                  res.result.currentUserRankingData.authorInfo={
                      aid: "",
                      name: "",
                      orgInfo: "",
                      avatar: "",
                      sex: null
                  }
                  this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData]);
                  this.learningDays.data = res.result.currentUserRankingData;
                  if(data.field == 'total'){
                    this.learningDaysTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
                    this.learningDaysTotalData.rankValue = res.result.currentUserRankingData.total;
                  }
              }

             const ids= [];
             res.result.rankingData.forEach(item=>{
              ids.push(item.aid)
              item.authorInfo = {
                  aid: "",
                  name: "",
                  orgInfo: "",
                  avatar: "",
                  sex: null
              }
             })
             this.getUserData(ids,res.result.rankingData)
             this.learningDays.list = res.result.rankingData;
          }
      })
    },
    getUserData(ids,list) {
                const noReapetIds = [...new Set(ids)];
                apiUser.getByIds(noReapetIds).then(res => {
                    if (res.status == 200) {
                        list.forEach((item, index) => {
                            res.result.some(author => {
                            if (author.aid == item.aid) {
                                item.authorInfo = author;
                                return true;
                            } else {
                                return false;
                            }
                        });
                    });
                    } else {
                    this.$message.error(res.message);
                    }
                });
    },
}
}
</script>

<style lang="scss" scoped>
  //只是控制布局
  .page-ranking{
    padding:15px 18px;
    display:flex;
    overflow-x: auto;
  }
  ::v-deep .el-dropdown-menu__item:not(.is-disabled):hover{
        background-color: #fff !important;
        color: #0059FF !important;
    }
  ::v-deep.el-dropdown-menu {
      border: none !important;
  }
  .page-ranking-col{
     min-width: 430px;
     //padding-right:30px;
     padding-right: 5%;
  }

.omit{
  padding-left: 13px;
  div{
      font-size: 30px;
      line-height: 10px;
      color: #D8D8D8;
  }
}
.exp-table{
      //width: 100%;
      padding-left: 25px;
      padding-right: 10px;
      .table-hear{
         display: flex;
        div{
        //  margin-right: 13%;
         min-width: 60px;
         font-size: 14px;
         font-weight: 400;
         color: #999999;
       }
      .bm{
        //   flex: 1;
          margin-left: 46%;
        // float: right;
      }
      .jy{
          margin-left: auto;
          text-align: right;
          margin-right: 0;
          text-align: center;
      }
      }


  }
 .myselftext{
      height: 75px;
      padding: 0 25px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .myranking{
        //   flex: 1;
          line-height: 75px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          span{
              color: #333;
              font-weight: 600;
              font-size: 18px;
          }
      }
      .myexperience{
        //   text-align: right;
          line-height: 75px;
        //   margin-left: auto;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          span{
              color: #333;
              font-weight: 600;
              font-size: 18px;
          }
      }
  }
.tab-jy{
    padding-top: 10px;
    padding-right: 10px;
    div{
        line-height: 28px;
        width: 70px;
        text-align: center;
        font-size: 18px;
        color: #333333;
        font-weight: 600;
        height: 28px;
        background: #F7F8FA;
        border-radius: 14px;
    }
}
.tab-bm{
    font-size: 12px !important;
    color: #666666;
    margin-top: 7px;
}
.exp-table .table-hear div{
    min-width: 65px !important;
}
.tab-name{
    min-width: 65px;
    display: flex;
    ::v-deep .item-author{
        min-width: 54px !important;
    }
    img{
        width: 40px;
        height: 40px;
        vertical-align: middle;
    }
    span{
        color: #333333;
        font-size: 14px;
        font-weight: 600;
    }

}
.tab-rank{
    width: 54px;
    img{
         width: 40px;
         height: 40px;

    }
}
.experience{
  .exp-hear{
      //width: 100%;
      height: 65px;
      background: url('../../../public/images/expbg.png') no-repeat 100% / 100%;
      .exp-hear-text{
          float: left;
          line-height: 65px;
          margin-left: 25px;
          font-size: 18px;
          font-weight: 600;
          color: #333333;
          position: relative;
          z-index: 888;
          .exp-hear-textbor{
            width: 108px;
            height: 10px;
            background: #9CC7FC;
            border-radius: 9px;
            display: inline-block;
            position: absolute;
            left: 0;
            z-index: -1;
            top: 60%;
          }
      }
      .exp-hear-xiala{
          line-height: 65px;
          float: right;
          margin-right: 15px;
      }

  }

  .exp-bar{
      //width: 100%;
      h6{
           font-size: 14px;
            color: #666666;
            font-weight: 600;
            margin: 0;
            margin-left: 50px;
     }
     .exp-barname{
         //width: 100%;
         padding: 20px 35px;
         display: flex;
         span{
             flex: 1;
         }
     }
     .exp-barbox{
         //width: 100%;
         height: 8px;
        //  background: #ECF1FE;
         border-radius: 6px;
         margin-left: 25px;
         margin-top: 3px;
         position: relative;
         z-index: 1;
         ::v-deep .el-progress__text{
            display: none;
         }
         .exp-bar-cont{
             width: 230px;
             height: 6px;
             background: #0059FF;
             border-radius: 6px;
             opacity: 0.56;
             position: absolute;
             left: 0;
             z-index: 999;
         }
     }


  }
}
.Duration{

  .study-info{
      height: 62px !important;
      background: url('../../../public/images/study-info.png') no-repeat 100% / 100% !important;
  }
  .exp-hear{
      //width: 100%;
      height: 62px;
      background: url('../../../public/images/Durbg.png') no-repeat 100% / 100%;
      .exp-hear-text{
          float: left;
          line-height: 62px;
          margin-left: 25px;
          font-size: 18px;
          font-weight: 600;
          color: #333333;
          position: relative;
          z-index: 888;
          .exp-hear-textbor{
            width: 130px;
            height: 10px;
            background: #FDAFB3 ;
            border-radius: 9px;
            display: inline-block;
            position: absolute;
            left: 0;
            z-index: -1;
            top: 60%;
          }
      }
      .exp-hear-xiala{
          line-height: 65px;
          float: right;
          margin-right: 15px;
      }

  }
}
</style>
