400 lines
9.6 KiB
Vue
400 lines
9.6 KiB
Vue
<template>
|
||
<view class="exam-ranking">
|
||
<image src="@/static/images/competition/ranking/ranking_bg.png" mode="widthFix" class="bg-box"></image>
|
||
<view class="ranking-box">
|
||
<view class="nav-div">
|
||
<view class="back_div" @click="common.navigateBack()">
|
||
<view class="back-icon"></view>
|
||
</view>
|
||
</view>
|
||
<view class="title-view">
|
||
<!-- <view class="title-info">考试排行榜</view> -->
|
||
<image
|
||
class="title-image"
|
||
src="@/static/images/competition/ranking/ranking_title.png"
|
||
mode="aspectFit"
|
||
></image>
|
||
<view class="title-desc">欲穷千里目，更上一层楼</view>
|
||
<image class="cup-image" src="@/static/images/examRanking/cup.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="ranking-body">
|
||
<view class="list-header list-item">
|
||
<view class="rank-column">排名</view>
|
||
<view class="user-column">用户名/所属机构</view>
|
||
<view class="score-column">最高分</view>
|
||
<view class="time-column">用时</view>
|
||
</view>
|
||
<scroll-view :scroll-y="true" class="scroll-items-view">
|
||
<view v-for="(item, index) in userList" :class="['list-item', 'item-' + (index + 1)]">
|
||
<view class="rank-column">
|
||
{{ item.ranking }}
|
||
</view>
|
||
<view class="user-column">
|
||
<view class="avatar-box">
|
||
<image-preview
|
||
v-if="item.ossAddr"
|
||
class="avatar-image"
|
||
:src="item.ossAddr"
|
||
mode="aspectFit"
|
||
></image-preview>
|
||
<image v-else class="avatar-image" :src="defaultAvatarSrc"></image>
|
||
</view>
|
||
<view class="user-name">{{ item.userName }}</view>
|
||
<view class="user-org">{{ item.orgName }}</view>
|
||
</view>
|
||
<view class="score-column">{{ item.examGrade }}</view>
|
||
<view class="time-column">{{ item.time ?? 0 }}s</view>
|
||
</view>
|
||
<list-no-data v-if="userList.length == 0">暂无数据</list-no-data>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="ranking-self">
|
||
<view class="list-header list-item">
|
||
<view class="rank-column">我的排名</view>
|
||
</view>
|
||
<view class="list-item item-me">
|
||
<view class="rank-column">
|
||
{{ userRankObj.ranking }}
|
||
</view>
|
||
<view class="user-column">
|
||
<view class="avatar-box">
|
||
<image-preview
|
||
v-if="userRankObj.ossAddr"
|
||
class="avatar-image"
|
||
:src="userRankObj.ossAddr"
|
||
mode="aspectFit"
|
||
></image-preview>
|
||
<image class="avatar-image" v-else :src="defaultAvatarSrc"></image>
|
||
</view>
|
||
<view class="user-name">{{ userRankObj.userName }}</view>
|
||
<view class="user-org">{{ userRankObj.orgName }}</view>
|
||
</view>
|
||
<view class="score-column">{{ userRankObj.examGrade }}</view>
|
||
<view class="time-column">{{ userRankObj.time }}s</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {queryTraCompetitionRankingList} from '@/api/competition.js';
|
||
import {defaultAvatar} from '@/enum.js';
|
||
import common from '@/common/common';
|
||
import {onLoad} from '@dcloudio/uni-app';
|
||
import {formatSecondsToMS} from './js/tool';
|
||
import {ref} from 'vue';
|
||
|
||
const papersId = ref('');
|
||
const orgId = ref('');
|
||
const userList = ref([]);
|
||
const userRankObj = ref({});
|
||
onLoad((e) => {
|
||
papersId.value = e.papersId;
|
||
orgId.value = e.orgId;
|
||
getList();
|
||
});
|
||
const getList = () => {
|
||
queryTraCompetitionRankingList({
|
||
papersId: papersId.value,
|
||
orgId: orgId.value
|
||
}).then((res) => {
|
||
userList.value = res.body.rankingListVos || [];
|
||
userRankObj.value = res.body;
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$top-height: var(--status-bar-height);
|
||
|
||
.exam-ranking {
|
||
position: relative;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding-top: $top-height;
|
||
|
||
// background:url(@/static/images/examRanking/bg.png) no-repeat top center;
|
||
.bg-box {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 412rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.ranking-box {
|
||
height: calc(100% - $top-height);
|
||
overflow: hidden;
|
||
position: absolute;
|
||
top: $top-height;
|
||
width: 100%;
|
||
z-index: 2;
|
||
}
|
||
|
||
.nav-div {
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 70rpx;
|
||
|
||
.back_div {
|
||
margin-right: 10rpx;
|
||
position: absolute;
|
||
left: 25rpx;
|
||
top: 0;
|
||
padding: 15rpx;
|
||
|
||
.back-icon {
|
||
position: relative;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.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 #000;
|
||
border-left: 4rpx solid #000;
|
||
transform: rotate(-45deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.title-view {
|
||
height: 180rpx;
|
||
position: relative;
|
||
padding-left: 79rpx;
|
||
padding-top: 20rpx;
|
||
|
||
.cup-image {
|
||
position: absolute;
|
||
right: 90rpx;
|
||
bottom: -5rpx;
|
||
width: 178rpx;
|
||
height: 159rpx;
|
||
}
|
||
|
||
.title-desc {
|
||
line-height: 34rpx;
|
||
font-size: 25rpx;
|
||
color: #ffffff;
|
||
margin-top: -6rpx;
|
||
}
|
||
|
||
.title-image {
|
||
width: 354rpx;
|
||
height: 88rpx;
|
||
margin-left: -20rpx;
|
||
}
|
||
}
|
||
|
||
.ranking-body {
|
||
height: calc(100% - 170rpx - 180rpx - 70rpx);
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
border-radius: 31rpx 31rpx 0 0;
|
||
padding-top: 20rpx;
|
||
box-sizing: border-box;
|
||
z-index: 100;
|
||
|
||
.scroll-items-view {
|
||
height: calc(100% - 54rpx);
|
||
}
|
||
}
|
||
|
||
.list-item {
|
||
height: 108rpx;
|
||
border-bottom: 2rpx solid #efefef;
|
||
overflow: hidden;
|
||
|
||
&.list-header {
|
||
height: 54rpx;
|
||
line-height: 54rpx;
|
||
color: #999;
|
||
font-size: 25rpx;
|
||
border-bottom: 0;
|
||
|
||
.rank-column {
|
||
height: 54rpx;
|
||
line-height: 54rpx;
|
||
color: #999;
|
||
font-weight: normal;
|
||
font-size: 25rpx;
|
||
font-style: initial;
|
||
text-indent: 0;
|
||
}
|
||
|
||
.user-column {
|
||
padding: 0;
|
||
}
|
||
|
||
.score-column {
|
||
line-height: 54rpx;
|
||
color: #999;
|
||
font-weight: normal;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
.time-column {
|
||
line-height: 54rpx;
|
||
color: #999;
|
||
font-weight: normal;
|
||
font-size: 25rpx;
|
||
}
|
||
}
|
||
|
||
&.item-1 {
|
||
border-bottom: 0;
|
||
margin-bottom: 8rpx;
|
||
background: linear-gradient(90deg, #fbf9f5 0%, #fffffd 100%);
|
||
|
||
.rank-column {
|
||
color: #ffffff00;
|
||
background: url(@/static/images/examRanking/no-1.png) no-repeat;
|
||
background-position: 40rpx center;
|
||
background-size: 44rpx 66rpx;
|
||
text-indent: 8rpx;
|
||
}
|
||
}
|
||
|
||
&.item-2 {
|
||
border-bottom: 0;
|
||
margin-bottom: 8rpx;
|
||
background: linear-gradient(90deg, #f4f8f9 0%, #f7fbfe 100%);
|
||
|
||
.rank-column {
|
||
color: #ffffff00;
|
||
background: url(@/static/images/examRanking/no-2.png) no-repeat;
|
||
background-position: 40rpx center;
|
||
background-size: 44rpx 66rpx;
|
||
text-indent: 8rpx;
|
||
}
|
||
}
|
||
|
||
&.item-3 {
|
||
border-bottom: 0;
|
||
margin-bottom: 8rpx;
|
||
background: linear-gradient(90deg, #faf6f5 0%, #fcfbfc 100%);
|
||
|
||
.rank-column {
|
||
color: #ffffff00;
|
||
background: url(@/static/images/examRanking/no-3.png) no-repeat;
|
||
background-position: 40rpx center;
|
||
background-size: 44rpx 66rpx;
|
||
text-indent: 8rpx;
|
||
}
|
||
}
|
||
|
||
&.item-me {
|
||
border-bottom: 0;
|
||
|
||
.rank-column {
|
||
color: #06f;
|
||
}
|
||
}
|
||
|
||
.rank-column {
|
||
width: 170rpx;
|
||
padding-left: 40rpx;
|
||
float: left;
|
||
font-weight: 600;
|
||
line-height: 92rpx;
|
||
height: 108rpx;
|
||
color: #333;
|
||
font-size: 38rpx;
|
||
font-style: italic;
|
||
text-indent: 8rpx;
|
||
}
|
||
|
||
.user-column {
|
||
width: 300rpx;
|
||
float: left;
|
||
padding: 15rpx 0;
|
||
|
||
.avatar-box {
|
||
width: 77rpx;
|
||
height: 77rpx;
|
||
overflow: hidden;
|
||
float: left;
|
||
background-color: #eee;
|
||
border-radius: 50%;
|
||
|
||
.avatar-image {
|
||
width: 77rpx;
|
||
height: 77rpx;
|
||
}
|
||
}
|
||
|
||
.user-name {
|
||
float: left;
|
||
width: calc(100% - 77rpx);
|
||
padding-left: 18rpx;
|
||
padding-right: 18rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
font-size: 29rpx;
|
||
color: #000;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.user-org {
|
||
float: left;
|
||
width: calc(100% - 77rpx);
|
||
padding-left: 18rpx;
|
||
padding-right: 18rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
height: 34rpx;
|
||
line-height: 34rpx;
|
||
font-size: 25rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.score-column {
|
||
width: 126rpx;
|
||
text-align: right;
|
||
float: left;
|
||
font-weight: 600;
|
||
line-height: 108rpx;
|
||
color: #333;
|
||
font-size: 31rpx;
|
||
}
|
||
|
||
.time-column {
|
||
width: 100rpx;
|
||
text-align: right;
|
||
float: left;
|
||
font-weight: 600;
|
||
line-height: 108rpx;
|
||
color: #333;
|
||
font-size: 31rpx;
|
||
}
|
||
}
|
||
|
||
.ranking-self {
|
||
height: 170rpx;
|
||
overflow: hidden;
|
||
background-color: #f5f9ff;
|
||
padding-top: 4rpx;
|
||
}
|
||
}
|
||
</style>
|