mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-15 22:06:43 +08:00
727 lines
30 KiB
Vue
727 lines
30 KiB
Vue
<template>
|
|
<div class="page-ranking">
|
|
<div class="page-ranking-col experience">
|
|
<div class="exp-hear">
|
|
<div class="exp-hear-text">
|
|
经验值排行榜
|
|
<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
|
<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> {{experience.data.rankingNo}}</span>
|
|
</div>
|
|
<div class="myexperience">
|
|
我的经验值 : <span>{{experience.data.total || experience.data.months || experience.data.years || experience.data.weeks}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="exp-bar">
|
|
<h6> {{experience.data.total || experience.data.months || experience.data.years || experience.data.weeks}}/{{current.endValue}}</h6>
|
|
<div class="exp-barbox">
|
|
<el-progress :percentage="experience.data.total*100/current.endValue
|
|
|| experience.data.months*100/current.endValue
|
|
|| experience.data.years*100/current.endValue
|
|
|| experience.data.weeks*100/current.endValue" color="#387DF7"></el-progress>
|
|
</div>
|
|
<div class="exp-barname">
|
|
<span>{{current.start}}</span>
|
|
<span>{{current.end}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="exp-table">
|
|
<div class="table-hear">
|
|
<div style="margin-left:5px">排名</div>
|
|
<div style="margin-left:5px">姓名</div>
|
|
<div class="bm">经验值</div>
|
|
</div>
|
|
<div style="height:450px;overflow-y:auto">
|
|
<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">{{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>4" class="omit">
|
|
<div>.</div> <div>.</div> <div>.</div>
|
|
</div>
|
|
<div v-if="experience.data.rankingNo>4" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
|
|
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >{{experience.data.rankingNo}}</div>
|
|
<div class="tab-name" v-if="experience.data.authorInfo && experience.data.authorInfo.aid">
|
|
<author-img :avatar="experience.data.authorInfo.avatar" :aid="experience.data.authorInfo.aid" :sex="experience.data.authorInfo.sex"></author-img>
|
|
<div>
|
|
<span style="color: #0059FF;">{{experience.data.authorInfo.name}}</span>
|
|
<div class="tab-bm" style="color: #0059FF;">{{experience.data.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;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">
|
|
学习时长排行榜<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
|
<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> {{learningDuration.data.rankingNo}}</span>
|
|
</div>
|
|
<div class="myexperience">
|
|
我的学习时长: <span> {{learningDuration.data.total || learningDuration.data.months || learningDuration.data.years || learningDuration.data.weeks}}</span> h
|
|
</div>
|
|
</div>
|
|
<div class="exp-table">
|
|
<div class="table-hear">
|
|
<div style="margin-left:5px">排名</div>
|
|
<div style="margin-left:5px">姓名</div>
|
|
<!-- <div class="bm">学习时长:小时</div> -->
|
|
<div style="margin-left:40%;">学习时长:小时</div>
|
|
</div>
|
|
<div style="height:500px;overflow-y:auto">
|
|
<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">{{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;">{{lan.total}}</div>
|
|
<div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{lan.months}}</div>
|
|
<div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{lan.years}}</div>
|
|
<div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{lan.weeks}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="learningDuration.data.rankingNo>5" class="omit">
|
|
<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:15px;font-size: 16px;" class="tab-rank" >{{learningDuration.data.rankingNo}}</div>
|
|
<div class="tab-name" v-if="learningDuration.data.authorInfo && learningDuration.data.authorInfo.aid">
|
|
<author-img :avatar="learningDuration.data.authorInfo.avatar" :aid="learningDuration.data.authorInfo.aid" :sex="learningDuration.data.authorInfo.sex"></author-img>
|
|
<div>
|
|
<span style="color: #0059FF;">{{learningDuration.data.authorInfo.name}}</span>
|
|
<div class="tab-bm" style="color: #0059FF;">{{learningDuration.data.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;color: #0059FF;">{{learningDuration.data.total}}</div>
|
|
<div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDuration.data.months}}</div>
|
|
<div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDuration.data.years}}</div>
|
|
<div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{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">
|
|
学习天数排行榜<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
|
|
<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> {{learningDays.data.rankingNo}}</span>
|
|
</div>
|
|
<div class="myexperience">
|
|
我的学习天数 : <span>{{learningDays.data.total || learningDays.data.months || learningDays.data.years || learningDays.data.weeks}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="exp-table">
|
|
<div class="table-hear">
|
|
<div style="margin-left:5px">排名</div>
|
|
<div style="margin-left:5px">姓名</div>
|
|
<div class="bm">学习天数</div>
|
|
</div>
|
|
<div style="height:500px;overflow-y:auto">
|
|
<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">{{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" class="omit">
|
|
<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:15px;font-size: 16px;" class="tab-rank" >{{learningDays.data.rankingNo}}</div>
|
|
<div class="tab-name" v-if="learningDays.data.authorInfo && learningDays.data.authorInfo.aid">
|
|
<author-img :avatar="learningDays.data.authorInfo.avatar" :aid="learningDays.data.authorInfo.aid" :sex="learningDays.data.authorInfo.sex"></author-img>
|
|
<div>
|
|
<span style="color: #0059FF;">{{learningDays.data.authorInfo.name}}</span>
|
|
<div class="tab-bm" style="color: #0059FF;">{{learningDays.data.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;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} from "@/utils/tools.js";
|
|
export default {
|
|
computed: {
|
|
...mapGetters(['userInfo']),
|
|
|
|
},
|
|
components: {authorImg},
|
|
data(){
|
|
return{
|
|
experienceValue,
|
|
current:{},
|
|
translate,
|
|
experience:{
|
|
field:'total',
|
|
name:'累计',
|
|
data:{
|
|
rankingNo:0,
|
|
total:0
|
|
},
|
|
list:[],
|
|
},
|
|
learningDuration:{
|
|
field:'total',
|
|
name:'累计',
|
|
data:{
|
|
rankingNo:0,
|
|
total:0
|
|
},
|
|
list:[],
|
|
},
|
|
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:4,// #显示的条数
|
|
}
|
|
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])
|
|
if(res.result.currentUserRankingData.weeks == undefined){res.result.currentUserRankingData.weeks = 0;}
|
|
if(res.result.currentUserRankingData.months == undefined){res.result.currentUserRankingData.months = 0;}
|
|
if(res.result.currentUserRankingData.years == undefined){res.result.currentUserRankingData.years = 0;}
|
|
this.experience.data = res.result.currentUserRankingData;
|
|
|
|
if(res.result.currentUserRankingData.total>=0) {
|
|
this.current = this.experienceValue(res.result.currentUserRankingData.total);
|
|
}else if(
|
|
res.result.currentUserRankingData.weeks>=0) {this.current = this.experienceValue(res.result.currentUserRankingData.weeks);
|
|
}else if(res.result.currentUserRankingData.months>=0) {
|
|
this.current = this.experienceValue(res.result.currentUserRankingData.months);
|
|
}else if(res.result.currentUserRankingData.years>=0) {
|
|
this.current = this.experienceValue(res.result.currentUserRankingData.years);
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
|
|
}
|
|
.page-ranking-col{
|
|
min-width: 430px;
|
|
//padding-right:30px;
|
|
padding-right: 5%;
|
|
}
|
|
|
|
.omit{
|
|
padding-left: 20px;
|
|
div{
|
|
font-size: 30px;
|
|
line-height: 10px;
|
|
color: #D8D8D8;
|
|
}
|
|
}
|
|
.exp-table{
|
|
//width: 100%;
|
|
padding-left: 25px;
|
|
.table-hear{
|
|
display: flex;
|
|
div{
|
|
// margin-right: 13%;
|
|
min-width: 52px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
.bm{
|
|
// flex: 1;
|
|
margin-left: 50%;
|
|
// 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;
|
|
.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;
|
|
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;
|
|
}
|
|
.tab-name{
|
|
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{
|
|
|
|
// text-align: center;
|
|
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>
|