848 lines
24 KiB
Vue
848 lines
24 KiB
Vue
<template>
|
|
<view class="max_page detail-main">
|
|
<nav-bar :is_seat="false"></nav-bar>
|
|
<view class="fixed_search_div">
|
|
<view class="back_div" @click="common.navigateBack()">
|
|
<view class="back-icon"></view>
|
|
</view>
|
|
<view class="title font_pf">排行榜</view>
|
|
</view>
|
|
<view class="detail-body">
|
|
<view class="body-tabs">
|
|
<view class="tabs-sty">
|
|
<view :class="tabAct == index ?'active-tabs-item-sty':'tabs-item-sty'"
|
|
v-for="(item,index) in tabList" @click="tabChange(index,item)">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="date-body">
|
|
<view class="date-sty">
|
|
<view :class="itemIndex == index ?'active-date-item-sty':'date-item-sty'"
|
|
v-for="(item,index) in dateTabList" @click="itemFun(index,item)">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rank-style">
|
|
<view class="rank-top3">
|
|
<view class="rank-content rank-content-backgound-color1" v-if="chartsList.length > 1">
|
|
<image src="/static/images/charts/02.svg" class="crown1"></image>
|
|
<image v-if="chartsList[1].imgAddr" :src="chartsList[1].imgAddr" class="top-avator"></image>
|
|
<image v-else src="/static/images/charts/avator.png" class="top-avator"></image>
|
|
<view class="content1">top·2</view>
|
|
<view class="content2">{{chartsList[1].userName}}</view>
|
|
<view class="content3">{{chartsList[1].score}}</view>
|
|
<view class="content4">{{chartsList[1].dept}}</view>
|
|
</view>
|
|
<view class="rank-content rank-content-backgound-color2" v-if="chartsList.length > 0">
|
|
<image src="/static/images/charts/01.svg" class="crown2"></image>
|
|
<image v-if="chartsList[0].imgAddr" :src="chartsList[0].imgAddr" class="top-avator"></image>
|
|
<image v-else src="/static/images/charts/avator.png" class="top-avator"></image>
|
|
<view class="content11">top·1</view>
|
|
<view class="content2">{{chartsList[0].userName}}</view>
|
|
<view class="content33">{{chartsList[0].score}}</view>
|
|
<view class="content44">{{chartsList[0].dept}}</view>
|
|
</view>
|
|
<view class="rank-content rank-content-backgound-color3" v-if="chartsList.length > 2">
|
|
<image src="/static/images/charts/03.svg" class="crown3"></image>
|
|
<image v-if="chartsList[2].imgAddr" :src="chartsList[2].imgAddr" class="top-avator"></image>
|
|
<image v-else src="/static/images/charts/avator.png" class="top-avator"></image>
|
|
<view class="content111">top·3</view>
|
|
<view class="content2">{{chartsList[2].userName}}</view>
|
|
<view class="content333">{{chartsList[2].score}}</view>
|
|
<view class="content444">{{chartsList[2].dept}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- table形式排名 -->
|
|
<!-- <view class="rank-other">
|
|
<uni-table ref="table">
|
|
<uni-tr>
|
|
<uni-th align="center" width="100">排名</uni-th>
|
|
<uni-th align="left" width="180">用户名/所属机构</uni-th>
|
|
<uni-th align="center" >{{tableLastName}}</uni-th>
|
|
</uni-tr>
|
|
<uni-tr v-for="(item, index) in newChartsList" :key="index">
|
|
<uni-td :class="item.name == '江月心'?'active-rank-sty':'rank-sty'" align="center">{{ item.rank }}</uni-td>
|
|
<uni-td align="center">
|
|
<image src="/static/images/charts/avator.png" class="avator"></image>
|
|
<view style="float: left;margin-left: 18rpx;">
|
|
<view :class="item.name == '江月心'?'active-name':'name'">{{ item.name }}</view>
|
|
<view class="belong">{{ item.belong }}</view>
|
|
</view>
|
|
</uni-td>
|
|
<uni-td class="score-sty" align="center">{{ item.score }}</uni-td>
|
|
</uni-tr>
|
|
</uni-table>
|
|
<view style="width: 100%;height: 200rpx;"></view>
|
|
</view>
|
|
<view class="rank-mine">
|
|
<view class="rank-mine-content">
|
|
<view style="font-size: 26rpx;font-weight: 400;color: #999999;margin-left: 10rpx;">我的排名</view>
|
|
<view style="width: 100%;">
|
|
<view style="width: 100rpx;font-size: 40rpx;color: #0066FF;font-style: italic;;font-weight: 600;float: left;margin-top:30rpx;margin-left: 18rpx;">44</view>
|
|
<view style="width: 200rpx;float: left;margin-left: 46rpx;margin-top: 12rpx;width: 370rpx;">
|
|
<image src="/static/images/charts/avator.png" class="my-avator"></image>
|
|
<view style="font-size: 30rpx;font-weight: 600;color:#000000;">张伟</view>
|
|
<view style="font-size: 26rpx;font-weight: 400;color: #999999;margin-top:8rpx;">吉林银行大连分行</view>
|
|
</view>
|
|
<view style="width: 170rpx;font-size: 32rpx;text-align: center;color: #333333;font-weight: 600;float: left;margin-top: 32rpx;">91</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- list形式排名 -->
|
|
<uni-list class="rank-other">
|
|
<uni-list-item>
|
|
<!-- 自定义 header -->
|
|
<template v-slot:header>
|
|
<text class="rank-other-rank-sty rank-uni-sty">排名</text>
|
|
</template>
|
|
<!-- 自定义 body -->
|
|
<template v-slot:body>
|
|
<text class="rank-other-user-sty rank-uni-sty">用户名/所属机构</text>
|
|
</template>
|
|
<!-- 自定义 footer-->
|
|
<template v-slot:footer>
|
|
<text class="rank-other-last-sty rank-uni-sty">{{tableLastName}}</text>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item :key="index" v-if="chartsList.length < 4">
|
|
<template v-slot:header>
|
|
<text style="width:100%;text-align: center;color: #999999;">暂无数据</text>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item v-for="(item, index) in newChartsList" :key="index" v-else>
|
|
<!-- 自定义 header -->
|
|
<template v-slot:header>
|
|
<text style="width: 20%;text-align: center;margin-top:15rpx"
|
|
:class="item.userId == userId?'active-rank-sty':'rank-sty'">{{item.position}}</text>
|
|
</template>
|
|
<!-- 自定义 body -->
|
|
<template v-slot:body>
|
|
<view style="width: 55%;text-align: center;margin-left: 10rpx;">
|
|
<image v-if="item.imgAddr" :src="item.imgAddr" class="avator"></image>
|
|
<image v-else src="/static/images/charts/avator.png" class="avator"></image>
|
|
<view style="float: left;margin-left: 18rpx;">
|
|
<view :class="item.userId == userId?'active-name':'name'">{{ item.userName }}</view>
|
|
<view style="width: 250rpx;text-align: left;margin-top: 10rpx;" class="belong">{{ item.dept }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- 自定义 footer-->
|
|
<template v-slot:footer>
|
|
<text style="text-align: center;" class="score-sty score-sty-footer">{{ item.score }}</text>
|
|
</template>
|
|
</uni-list-item>
|
|
<view style="width: 100%;height: 200rpx;"></view>
|
|
<uni-list-item class="rank-mine" v-if="!myselfObj.userName">
|
|
<!-- 自定义 header -->
|
|
<template v-slot:header>
|
|
<text class="rank-sty my-rank-title">我的排名</text>
|
|
<view style="width: 100%;text-align: center;color: #999999;font-size: 28rpx;">暂无排名</view>
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item class="rank-mine" v-else>
|
|
<!-- 自定义 header -->
|
|
<template v-slot:header>
|
|
<text class="rank-sty my-rank-title">我的排名</text>
|
|
<view class="my-rank-content">{{myselfObj.position}}</view>
|
|
</template>
|
|
<!-- 自定义 body -->
|
|
<template v-slot:body>
|
|
<view style="width: 65%;text-align: center;margin-top: 30rpx;">
|
|
<image v-if="myselfObj.imgAddr" :src="myselfObj.imgAddr" class="avator" style="margin-top: 4rpx;"></image>
|
|
<image v-else src="/static/images/charts/avator.png" class="avator" style="margin-top: 4rpx;"></image>
|
|
<view style="float: left;margin-left: 18rpx;">
|
|
<view class="my-rank-name">{{myselfObj.userName}}</view>
|
|
<view style="width: 260rpx;text-align: left;margin-top: 5rpx;" class="my-rank-belong">{{myselfObj.dept}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- 自定义 footer-->
|
|
<template v-slot:footer>
|
|
<text class="my-rank-score">{{myselfObj.score}}</text>
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
getLeaderBoardStdyTmApi,
|
|
getLeaderBoardPractCntApi,
|
|
getLeaderBoardExamCntApi,
|
|
getLeaderBoardCrsCntApi
|
|
} from "@/api/leaderBoard.js"
|
|
// 我的排行榜
|
|
import { getUserInfo } from '@/common/common';
|
|
import {
|
|
reactive,
|
|
ref,
|
|
computed,
|
|
nextTick,
|
|
onMounted,
|
|
watch
|
|
} from 'vue';
|
|
import common from '@/common/common';
|
|
const userId = ref("");
|
|
const itemIndex = ref(0);
|
|
const learnTimeList = ref({})
|
|
const practCntList = ref({})
|
|
const examCntList = ref({})
|
|
const crsCntList = ref({})
|
|
const myselfObj = ref({})
|
|
const tableLastName = ref("学习时长(h)");
|
|
const taskRef = ref(null);
|
|
const tabAct = ref(0);
|
|
const tabDateAct = ref(0);
|
|
const allChartsList = ref({});
|
|
const newChartsList = ref([]);
|
|
const tabList = ref([{
|
|
name: '学习时长'
|
|
}, {
|
|
name: '练习次数'
|
|
}, {
|
|
name: '考试次数'
|
|
}, {
|
|
name: '通关课程数'
|
|
}]);
|
|
const dateTabList = ref([{
|
|
name: '本年',
|
|
value: 'annual'
|
|
}, {
|
|
name: '本月',
|
|
value: 'month'
|
|
}, {
|
|
name: '本周',
|
|
value: 'week'
|
|
}]);
|
|
const chartsList = ref([]);
|
|
const tabChange = (index, item) => {
|
|
itemIndex.value = 0;
|
|
tabAct.value = index;
|
|
tableLastName.value = item.name;
|
|
if (tableLastName.value.includes('学习时长') ) {
|
|
tableLastName.value = '学习时长(h)'
|
|
}
|
|
if (tableLastName.value.includes('学习时长')) {
|
|
allChartsList.value = learnTimeList.value;
|
|
chartsList.value = learnTimeList.value.annual?learnTimeList.value.annual.list:[];
|
|
myselfObj.value = allChartsList.value.annual?allChartsList.value.annual.self:{};
|
|
myselfObj.value.score = allChartsList.value.annual?allChartsList.value.annual.self.annlStdyTmLen:"";
|
|
chartsList.value.forEach(item => item.score = item.annlStdyTmLen)
|
|
} else if (tableLastName.value == '练习次数') {
|
|
allChartsList.value = practCntList.value;
|
|
chartsList.value = practCntList.value.annual?practCntList.value.annual.list:[];
|
|
myselfObj.value = allChartsList.value.annual?allChartsList.value.annual.self:{};
|
|
myselfObj.value.score = allChartsList.value.annual?allChartsList.value.annual.self.annlPractCnt:"";
|
|
chartsList.value.forEach(item => item.score = item.annlPractCnt);
|
|
} else if (tableLastName.value == '考试次数') {
|
|
allChartsList.value = examCntList.value;
|
|
chartsList.value = examCntList.value.annual?examCntList.value.annual.list:[];
|
|
myselfObj.value = allChartsList.value.annual?allChartsList.value.annual.self:{};
|
|
myselfObj.value.score = allChartsList.value.annual?allChartsList.value.annual.self.annlExamCnt:"";
|
|
chartsList.value.forEach(item => item.score = item.annlExamCnt);
|
|
} else if (tableLastName.value == '通关课程数') {
|
|
allChartsList.value = crsCntList.value;
|
|
chartsList.value = crsCntList.value.annual?crsCntList.value.annual.list:[];
|
|
myselfObj.value = allChartsList.value.annual?allChartsList.value.annual.self:{};
|
|
myselfObj.value.score = allChartsList.value.annual?allChartsList.value.annual.self.annlCrsCnt:"";
|
|
chartsList.value.forEach(item => item.score = item.annlCrsCnt);
|
|
}
|
|
if (chartsList.value.length > 3) {
|
|
newChartsList.value = chartsList.value.slice(3).concat();
|
|
} else {
|
|
newChartsList.value = chartsList.value;
|
|
}
|
|
console.log(tableLastName.value, 'tablelastname')
|
|
};
|
|
const itemFun = (index, item) => {
|
|
itemIndex.value = index;
|
|
if (item.value == 'annual') {
|
|
chartsList.value = allChartsList.value.annual ? allChartsList.value.annual.list : [];
|
|
myselfObj.value = allChartsList.value.annual ? allChartsList.value.annual.self : {};
|
|
if (tableLastName.value.includes('学习时长')) {
|
|
chartsList.value.forEach(item => item.score = item.annlStdyTmLen);
|
|
myselfObj.value.score = myselfObj.value.annlStdyTmLen;
|
|
} else if (tableLastName.value == '练习次数') {
|
|
chartsList.value.forEach(item => item.score = item.annlPractCnt);
|
|
myselfObj.value.score = myselfObj.value.annlPractCnt;
|
|
} else if (tableLastName.value == '考试次数') {
|
|
chartsList.value.forEach(item => item.score = item.annlExamCnt);
|
|
myselfObj.value.score = myselfObj.value.annlExamCnt;
|
|
} else if (tableLastName.value == '通关课程数') {
|
|
chartsList.value.forEach(item => item.score = item.annlCrsCnt);
|
|
myselfObj.value.score = myselfObj.value.annlCrsCnt;
|
|
}
|
|
} else if (item.value == 'month') {
|
|
console.log('month')
|
|
chartsList.value = allChartsList.value.month ? allChartsList.value.month.list : [];
|
|
myselfObj.value = allChartsList.value.month ? allChartsList.value.month.self : {};
|
|
console.log(chartsList.value,'chartsList.value')
|
|
console.log(myselfObj.value,'myselfObj.value')
|
|
if (tableLastName.value.includes('学习时长')) {
|
|
chartsList.value.forEach(item => item.score = item.thisMonthStdyTmLen);
|
|
myselfObj.value.score = myselfObj.value.thisMonthStdyTmLen;
|
|
console.log(chartsList.value,'chartsList.valueMonth')
|
|
console.log(myselfObj.value,'myselfObj.valueMonth')
|
|
} else if (tableLastName.value == '练习次数') {
|
|
chartsList.value.forEach(item => item.score = item.thisMonthPractCnt);
|
|
myselfObj.value.score = myselfObj.value.thisMonthPractCnt;
|
|
} else if (tableLastName.value == '考试次数') {
|
|
chartsList.value.forEach(item => item.score = item.thisMonthExamCnt);
|
|
myselfObj.value.score = myselfObj.value.thisMonthExamCnt;
|
|
} else if (tableLastName.value == '通关课程数') {
|
|
chartsList.value.forEach(item => item.score = item.thisMonthCrsCnt);
|
|
myselfObj.value.score = myselfObj.value.thisMonthCrsCnt;
|
|
}
|
|
} else if (item.value == 'week') {
|
|
chartsList.value = allChartsList.value.week ? allChartsList.value.week.list : [];
|
|
myselfObj.value = allChartsList.value.week ? allChartsList.value.week.self : {};
|
|
if (tableLastName.value.includes('学习时长')) {
|
|
chartsList.value.forEach(item => item.score = item.thisWeekStdyTmLen);
|
|
myselfObj.value.score = myselfObj.value.thisWeekStdyTmLen;
|
|
console.log(chartsList.value,'chartsList.valueWeek')
|
|
console.log(myselfObj.value,'myselfObj.valueWeek')
|
|
} else if (tableLastName.value == '练习次数') {
|
|
chartsList.value.forEach(item => item.score = item.thisWeekPractCnt);
|
|
myselfObj.value.score = myselfObj.value.thisWeekPractCnt;
|
|
} else if (tableLastName.value == '考试次数') {
|
|
chartsList.value.forEach(item => item.score = item.thisWeekExamCnt);
|
|
myselfObj.value.score = myselfObj.value.thisWeekExamCnt;
|
|
} else if (tableLastName.value == '通关课程数') {
|
|
chartsList.value.forEach(item => item.score = item.thisWeekCrsCnt);
|
|
myselfObj.value.score = myselfObj.value.thisWeekCrsCnt;
|
|
}
|
|
}
|
|
if (chartsList.value.length > 3) {
|
|
newChartsList.value = chartsList.value.slice(3).concat();
|
|
} else {
|
|
newChartsList.value = chartsList.value;
|
|
}
|
|
}
|
|
const userInfo = computed(() => getUserInfo())
|
|
userId.value = userInfo.value.userId;
|
|
console.log(userId.value,'userId')
|
|
onMounted(() => {
|
|
getLeaderBoardStdyTmApi().then(res => {
|
|
console.log(res, 'getLeaderBoardStdyTmApi')
|
|
learnTimeList.value = res.body || {};
|
|
allChartsList.value = learnTimeList.value;
|
|
chartsList.value = allChartsList.value.annual?allChartsList.value.annual.list:[];
|
|
myselfObj.value = allChartsList.value.annual?allChartsList.value.annual.self:{};
|
|
chartsList.value[0].dept = "吉林银行吉林分行"
|
|
myselfObj.value.dept = "吉林银行吉林分行"
|
|
console.log(chartsList.value,'chartsList.value')
|
|
console.log(myselfObj.value,myselfObj.value,'myselfObj.value')
|
|
chartsList.value.forEach(item => item.score = item.annlStdyTmLen);
|
|
myselfObj.value.score = myselfObj.value.annlStdyTmLen;
|
|
if (chartsList.value.length > 3) {
|
|
newChartsList.value = chartsList.value.slice(3).concat();
|
|
} else {
|
|
newChartsList.value = chartsList.value;
|
|
}
|
|
console.log(newChartsList.value, 'newChartsList')
|
|
})
|
|
getLeaderBoardPractCntApi().then(res => {
|
|
console.log(res, 'getLeaderBoardPractCntApi')
|
|
practCntList.value = res.body || {};
|
|
console.log(practCntList.value, 'practCntList')
|
|
})
|
|
getLeaderBoardExamCntApi().then(res => {
|
|
console.log(res, 'getLeaderBoardExamCntApi')
|
|
examCntList.value = res.body || {};
|
|
console.log(examCntList.value, 'examCntList')
|
|
})
|
|
getLeaderBoardCrsCntApi().then(res => {
|
|
console.log(res, 'getLeaderBoardCrsCntApi')
|
|
crsCntList.value = res.body || {};
|
|
console.log(crsCntList.value, 'crsCntList')
|
|
})
|
|
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$bg-margin-left: 50rpx;
|
|
.my_tabs {
|
|
// 解决这个圆角的图片，开穿透
|
|
:deep(.uv-tabs__wrapper__nav__line) {
|
|
height: 26rpx !important;
|
|
left: 70rpx;
|
|
background-size: 28rpx !important;
|
|
background-repeat: no-repeat !important;
|
|
}
|
|
}
|
|
.detail-body {
|
|
background: #ffffff;
|
|
border-radius: 15rpx;
|
|
z-index: 101;
|
|
overflow: hidden;
|
|
|
|
.body-tab {
|
|
height: 88rpx;
|
|
border-bottom: 1rpx solid #BBBBBB;
|
|
}
|
|
|
|
.body-tabs {
|
|
width: 100%;
|
|
height: 99rpx;
|
|
line-height: 96rpx;
|
|
border-bottom: 1rpx solid #BBBBBB;
|
|
}
|
|
}
|
|
|
|
.detail-main {
|
|
background-color: #F6F8FF;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.title {
|
|
color: #000000;
|
|
font-size: 34rpx;
|
|
height: 34rpx;
|
|
font-weight: 600;
|
|
line-height: 34rpx;
|
|
}
|
|
|
|
.fixed_search_div {
|
|
padding: calc(20rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
|
|
.back_div {
|
|
position: absolute;
|
|
left: 20rpx;
|
|
padding: 10rpx;
|
|
|
|
.back-icon {
|
|
position: relative;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.back-icon::before,
|
|
.back-icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.back-icon::after {
|
|
top: 25%;
|
|
left: 25%;
|
|
width: 40%;
|
|
height: 40%;
|
|
border-top: 4rpx solid #000000;
|
|
border-left: 4rpx solid #000000;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.date-body {
|
|
height: 114rpx;
|
|
line-height: 114rpx;
|
|
}
|
|
|
|
.date-sty {
|
|
margin-left: 32rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
display: inline-block;
|
|
|
|
.date-item-sty {
|
|
display: inline-block;
|
|
width: 56rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
color: #040404;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
margin-left: 42rpx;
|
|
margin-right: 42rpx;
|
|
}
|
|
|
|
.active-date-item-sty {
|
|
display: inline-block;
|
|
width: 140rpx;
|
|
height: 60rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
border-radius: 38rpx;
|
|
background-color: #4080FF;
|
|
}
|
|
}
|
|
|
|
// 墨刀样式
|
|
// .tabs-sty{
|
|
// font-size: 28rpx;
|
|
// font-weight: 600;
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
// position: relative;
|
|
// }
|
|
// .tabs-item-sty{
|
|
// width: 25%;
|
|
// text-align: center;
|
|
// height: 100rpx;
|
|
// justify-content: center;
|
|
// }
|
|
// .active-tabs-item-sty{
|
|
// color: #2572F0;
|
|
// width: 25%;
|
|
// text-align: center;
|
|
// background-color: #E6F7FF;
|
|
// border-bottom: 2px solid #2572F0;
|
|
// }
|
|
// 蓝湖样式
|
|
.tabs-sty {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.tabs-item-sty {
|
|
color: #999999;
|
|
font-weight: 500;
|
|
width: 25%;
|
|
text-align: center;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.active-tabs-item-sty {
|
|
position: relative;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
font-weight: 600;
|
|
width: 25%;
|
|
text-align: center;
|
|
}
|
|
|
|
.active-tabs-item-sty::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 90rpx;
|
|
height: 1rpx;
|
|
border-bottom: 4rpx solid #4080FF;
|
|
top: 91rpx;
|
|
left: 25%;
|
|
}
|
|
|
|
.uni-table th {
|
|
border: none;
|
|
}
|
|
|
|
.uni-table td {
|
|
// border: none;
|
|
}
|
|
|
|
.rank-style {
|
|
width: 100%;
|
|
|
|
.rank-top3 {
|
|
background-color: #FFFFFF;
|
|
padding: 0 32rpx 36rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.rank-content {
|
|
text-align: center;
|
|
border-radius: 32rpx;
|
|
padding-top: 24rpx;
|
|
position: relative;
|
|
|
|
.crown1 {
|
|
width: 32rpx;
|
|
height: 24rpx;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 130rpx;
|
|
}
|
|
|
|
.crown2 {
|
|
width: 32rpx;
|
|
height: 24rpx;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 140rpx;
|
|
}
|
|
|
|
.crown3 {
|
|
width: 32rpx;
|
|
height: 24rpx;
|
|
position: absolute;
|
|
top: 16rpx;
|
|
left: 130rpx;
|
|
}
|
|
|
|
.top-avator {
|
|
width: 158rpx;
|
|
height: 158rpx;
|
|
}
|
|
|
|
.content1 {
|
|
font-size: 28rpx;
|
|
color: #737FA6;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.content11 {
|
|
font-size: 28rpx;
|
|
color: #AFA455;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.content111 {
|
|
font-size: 28rpx;
|
|
color: #B07653;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.content2 {
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.content3 {
|
|
font-size: 28rpx;
|
|
color: #436197;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content33 {
|
|
font-size: 28rpx;
|
|
color: #986C1A;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content333 {
|
|
font-size: 28rpx;
|
|
color: #8A4815;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content4 {
|
|
font-size: 24rpx;
|
|
color: #6682B7;
|
|
font-weight: 400;
|
|
width: 158rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content44 {
|
|
font-size: 24rpx;
|
|
color: #986C1A;
|
|
font-weight: 400;
|
|
width: 158rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content444 {
|
|
font-size: 24rpx;
|
|
color: #986C1A;
|
|
font-weight: 400;
|
|
width: 158rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.rank-content-backgound-color1 {
|
|
margin-top: 32rpx;
|
|
width: 206rpx;
|
|
// height: 418rpx;
|
|
padding-bottom: 20rpx;
|
|
background-color: #E8F3FF;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
|
|
.rank-content-backgound-color2 {
|
|
width: 220rpx;
|
|
// height: 432rpx;
|
|
padding-bottom: 20rpx;
|
|
background: linear-gradient(180deg, #FEEFB7 0%, #FADB66 100%);
|
|
}
|
|
|
|
.rank-content-backgound-color3 {
|
|
margin-top: 42rpx;
|
|
width: 206rpx;
|
|
// height: 418rpx;
|
|
padding-bottom: 20rpx;
|
|
background: linear-gradient(180deg, #FCDAB7 0%, #F9B16C 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.rank-other {
|
|
width: 100%;
|
|
|
|
:deep(.uni-table) {
|
|
min-width: 0 !important;
|
|
}
|
|
:deep(.uni-list--border-top) {
|
|
display: none;
|
|
}
|
|
|
|
.rank-uni-sty {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.rank-other-rank-sty {
|
|
width: 20%;
|
|
text-align: center;
|
|
}
|
|
|
|
.rank-other-user-sty {
|
|
width: 50%;
|
|
}
|
|
|
|
.rank-other-last-sty {
|
|
width: 30%;
|
|
text-align: center;
|
|
}
|
|
|
|
.rank-sty {
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.active-rank-sty {
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
color: #0066FF;
|
|
}
|
|
|
|
.score-sty {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.score-sty-footer {
|
|
width: 30%;
|
|
text-align: center;
|
|
margin-top: 15rpx
|
|
}
|
|
|
|
.avator {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
float: left;
|
|
}
|
|
|
|
.name {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
color: #000000;
|
|
}
|
|
|
|
.active-name {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
color: #0066FF;
|
|
}
|
|
|
|
.belong {
|
|
font-size: 26rpx;
|
|
text-align: left;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
:deep(.uni-table-th-content) {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.rank-mine {
|
|
width: 100%;
|
|
height: 176rpx;
|
|
background-color: #f5f9ff !important;
|
|
box-shadow: 0rpx 1rpx 0rpx 0rpx #EFEFEF;
|
|
position: fixed;
|
|
bottom: 0;
|
|
|
|
.rank-mine-content {
|
|
width: 100%;
|
|
margin-left: 46rpx;
|
|
margin-top: 14rpx;
|
|
|
|
.my-avator {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
float: left;
|
|
margin-right: 18rpx;
|
|
}
|
|
}
|
|
:deep(.uni-list-item__container) {
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
.my-rank-title {
|
|
position: absolute;
|
|
width: 20%;
|
|
top: 16rpx;
|
|
left: 32rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.my-rank-content {
|
|
width: 20%;
|
|
text-align: center;
|
|
font-size: 40rpx;
|
|
color: #0066FF;
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
margin-top: 20rpx
|
|
}
|
|
|
|
.my-rank-name {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #000000;
|
|
text-align: left;
|
|
}
|
|
|
|
.my-rank-belong {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
|
|
.my-rank-score {
|
|
width: 30%;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
color: #333333;
|
|
font-weight: 600;
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
</style>
|