dreamland/pages/dream/ranking.vue

<template name="ranking">
	<view class="container" :class="show ?'slidein':''" @touchstart="Dever.slide" @touchend="end">
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="k == index?'text-orange cur':''" v-for="(v, k) in fetch.ranking" :key="k" @click="select(k)">
					{{v.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y class="container_content">
			<view class="description" v-if="fetch.ranking.length > 0">
				<rich-text class="p" :nodes="fetch.ranking[index].desc"></rich-text>
			</view>
			<view class="score-cont" >
				<view class="tip noborder">
					<text class="ico-refresh"></text>
					<picker @change="change" :value="periods_index" :range="ranking_periods">
						<view class="picker">
							左滑关闭，当前是{{periods_index>=0?ranking_periods[periods_index]:'左滑关闭，点此查看往期'}}
						</view>
					</picker>
				</view>
				<view class="top3" v-if="fetch.ranking_data.length > 2">
					<view>
						<view class="no2">
							<view class="avatar-wrap">
								<image :src="fetch.ranking_data[1].user.avatar"></image>
							</view>
							<view class="name">{{fetch.ranking_data[1].user.username}}
								<text>{{fetch.ranking_data[1].num}}{{fetch.ranking[index].unit}}</text>
							</view>
						</view>
						<view class="no1">
							<view class="avatar-wrap">
								<image :src="fetch.ranking_data[0].user.avatar"></image>
							</view>
							<view class="name">{{fetch.ranking_data[0].user.username}}
								<text>{{fetch.ranking_data[0].num}}{{fetch.ranking[index].unit}}</text>
							</view>
						</view>
						<view class="no3">
							<view class="avatar-wrap">
								<image :src="fetch.ranking_data[2].user.avatar"></image>
							</view>
							<view class="name">{{fetch.ranking_data[2].user.username}}
								<text>{{fetch.ranking_data[2].num}}{{fetch.ranking[index].unit}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="scorelist" v-if="fetch.ranking_data.length > 2">
					<view class="scoreitem" v-for="(v, k) in fetch.ranking_data" :key="k" v-if="k > 2">
						<view class="avatar">
							<text class="order-num">{{k+1}}</text>
							<image :src="v.user.avatar"></image>
							<text class="name">{{v.user.username}}</text>
						</view>
						<view class="score">{{v.num}}{{fetch.ranking[index].unit}}</view>
					</view> 
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: "ranking",
	props: {
		id : 0,
		bgcolor : '',
		color : '',
	},
	data() {
		return {
			fetch : {
				ranking_periods : [],
				ranking_data : [],
				ranking : [],
			},
			periods_index : 0,
			index : 0,
			show : false,
			ranking_periods : [],
		}
	},
	mounted() {
		this.getData();
	},
	methods:{
		getData : function() {
			var self = this;
			this.Dever.get(this, 'app/collection/?l=api.getRanking', {id:this.id,noloading:1}, function(t) {
				if (t && t.ranking && t.ranking[self.index]) {
					self.getRankingData(t.ranking[self.index].id, 0);
				}
			});
		},
		getRankingData : function(ranking_id, ranking_periods) {
			var self = this;
			this.fetch.ranking_data = [];
			this.Dever.get(this, 'app/collection/?l=api.getRankingData', {id:this.id,ranking_id:ranking_id,ranking_periods:ranking_periods}, function(t) {
				self.show = true;
				if (t && t.ranking_periods) {
					for (var i in t.ranking_periods) {
						self.ranking_periods[i] = t.ranking_periods[i].name;
					}
				}
			});
		},
		select : function(index) {
			this.index = index;
			this.periods_index = 0;
			this.getRankingData(this.fetch.ranking[this.index].id, 0);
		},
		hideRanking : function() {
			this.show = false;
			this.$emit('hideRanking');
		},
		end : function(e) {
			var type = this.Dever.slideEnd(e);
			if (type == 3 || type == 4) {
				this.hideRanking();
			}
		},
		change : function(e) {
			this.periods_index = e.detail.value;
			this.getRankingData(this.fetch.ranking[this.index].id, this.fetch.ranking_periods[this.periods_index].id);
		}
	},
	components:{
		
	}
}
</script>

<style>
.container {
  background: white;
  flex: 1;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
}
.container.slidein{
  transform: translateY(0);
}
.container_content {
	height: 92%;
}
.btn-wrapper {
  justify-content: space-around;
  width: 100%;
}

.button {
  height: 80rpx;
  border: 1rpx solid #cc1619;
  color: #cc1619;
  font-size: 30rpx;
  min-width: 300rpx;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  display: block;
  position: relative;
}
.button>button{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}

.button.primary {
  background-color: #000;
  color: #fff;
}

.button.blk {
  background-color: #000;
  color: #fff;
  border-color: #000;
}
.header .tit{
  font-size: 30rpx;
  line-height: 36rpx;
  margin: 50rpx 0 50rpx 29rpx;
  overflow: hidden;
}
.description{
  width: 710rpx;
  margin: 0 auto;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
}
.description image{
  width: 100%;
}

.score-cont{
  width: 690rpx;
  margin: 0 auto;
  overflow: visible;
  min-height: 400rpx;
}
.score-cont .tip{
  border-top: #CCCCCC 1rpx solid;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  overflow: visible;
  padding: 33rpx 0 40rpx;
}
.score-cont .tip.noborder{
  border: 0;
}
.score-cont .tip .ico-refresh{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTY5QTAyREQ2NDNBMTFFOUIyMDVEMzU1OTUxMEE2RDIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTY5QTAyREU2NDNBMTFFOUIyMDVEMzU1OTUxMEE2RDIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNjlBMDJEQjY0M0ExMUU5QjIwNUQzNTU5NTEwQTZEMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBNjlBMDJEQzY0M0ExMUU5QjIwNUQzNTU5NTEwQTZEMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtESzCAAAAJOSURBVHjatJZLSBxBEIZ71vf7EZWQi6ggIoIXRQQxBBERPHgRD4GAh+BBPEVvggevgouQHBTxIBIC4kFRlAiieBBEBTUXHwElIQgSH8QHarL+Bf9IZ5xZd3dmCz5mp6e7/u3qqu5WgUBA6YRpsaAOxJgNVn+Pfl0KtYhv0BVtoRxwBk5AZjAhXwShyga5wKBAP3ihz8rWnpmROKsFH8E3cMdQCf/AdzDB9z/gZSShqwebmuNbsAXmyDq40r4L/nCEEsCQNlicNoNkm4CUgz2t70BIQrAUsMRBB+C1Q8SzwAi4Z1+ZeUNIWcdamOfABZAeZGnfs98+aOVaqlCFejh4xSFMusWDN8zCoMn1nxCsANyA3+CVcmHaH5eU/woadaFPnE2HcmmaUCF97pihTQIXLL5Er4QoNkOxatkZakAamMTHG+WtjfPZJEKVfFlU3tsynxU+JoJiqnpqiNAPPC5BvgjFsf1URcfOZe19rG6xjCgJSeH/FaEjNhR6rWAYhhwnqaIhQhtsr4nCbEyf6+bUrsFPuy3FZR19YR3Vmw1jbHjn8c4g638IfGZjqSwYZ5XlVohbjrkrtFt3bz8/TOnXpwiFuulL1ibGKiQn6xo7fOZREIl10ofUZZHTCSvpuM2Oq6AkDAEJ+SjHSpFWPXdnkPvZrHYhGdb2QzvLB73c/WXMLiiz+jWsVywUmbmYbaBPOwiPWXO/mE1yeSwDxfwuJTIoY+DzMtx7nazTWzDNcAQs3PLo/0Bhx6PcaUZOJrPL4+8Lbl/3Nln3xB4EGAAwlCnQ9YtQ6QAAAABJRU5ErkJggg==) no-repeat;
  background-size: 26rpx 30rpx;
  width: 26rpx;
  height: 30rpx;
  display: block;
  margin-right: 14rpx;
}
.score-cont .top3{
  display: flex;
  align-items: center;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAADlCAIAAAAgD4OxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYmViY2I0Yi02M2IzLTQ4NGMtYjAyMC0zYTA2NjRiYWExMzYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTY5QTAyREE2NDNBMTFFOUIyMDVEMzU1OTUxMEE2RDIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTY5QTAyRDk2NDNBMTFFOUIyMDVEMzU1OTUxMEE2RDIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpkMWRkZTJlYi1lYWI3LTRlZTMtYmFiMC03NzdiNTg3ZjdmN2UiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo2Y2VmNDhjYS0wYWU3LWJjNDUtYjdm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) no-repeat;
  background-size: 690rpx 229rpx;
  width: 690rpx;
  height: 229rpx;
}
.score-cont .top3>view{
  width: 690rpx;
  margin: -29rpx auto 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  font-size: 24rpx;
  color: #ffffff;
}
.score-cont .top3 image{
  width: 66rpx;
  height: 66rpx;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  border: 2rpx solid #fff;
}
.score-cont .top3>view .no1,.score-cont .top3>view .no2,.score-cont .top3>view .no3{
  width: 33.33%;
  flex-shrink: 0;
}
.score-cont .top3 .name{
  display: block;
  font-size: 24rpx;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.score-cont .top3 .name text{
  display: block;
  font-size: 22rpx;
}
.score-cont .top3 .avatar-wrap{
  position: relative;
  margin-bottom: 18rpx;
  overflow: visible;
}
.score-cont .top3 .avatar-wrap:after{
  content: '';
  position: absolute;
  width: 34rpx;
  height: 34rpx;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkZENTU1Rjk2NDM3MTFFOUIyMDVEMzU1OTUxMEE2RDIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkZENTU1RkE2NDM3MTFFOUIyMDVEMzU1OTUxMEE2RDIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRkQ1NTVGNzY0MzcxMUU5QjIwNUQzNTU5NTEwQTZEMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRkQ1NTVGODY0MzcxMUU5QjIwNUQzNTU5NTEwQTZEMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjl4OZUAAAZcSURBVHjarJdrbBRVFMf/987sqy3tlj5paUspCAgFBSmPgCS8DPKQWKoxoEFASPwgicZPgJQmYFDjg0SjEnxFJARLGiURsBaUp00BWyiB0ndL35Vti9vd7sxcz0zbpbC7ZaGd5OTenZ1772/Oued/zzA8xnVnzcsyNSvI3iBbzMcky8xur9duN+4Sra3fRf58WHvUOdkjAoylZhPZBrK4e7MwMHsEeGwMwLlDOLsPajW12wioY9hAaHEzNavJNpMtDGYMCw8HGxnZA5PpjGhuecf+zf7ixwYhAP2/t8i2kcV4/5Ak8KemQ0sbBzU+HiI8ApAlMOd/4E1N4NeuQly+1Du5zQaelgrRdbeYPLSZPFT4OCA7qMnx3uAc0pLnoM6aDXfyGLDaGrCaarAO8r7EIUZGEdx4sIRRMLc0g508DnHyhBdemviEBiF2hefsygkahCCiqakjsxoPxcVDWvMSnJPTwU/lQ/r9BJjD4fcFRHIKlJUvABmzYKkog/bBXsDlMsIlzZyuirr68PA9u50PjuMBHLLZC5E4GtK61+AkGFP2dshHDgeEMJ4nT5k+3wfpw71wxSVA2vM+zWSF6OyEaGiUYLHs9DeO+/GGiZo3jUlDQiC/mAmnLQTmPTlg5HLvwNhomBfOR8jGdQj/ZLfvxNdKYNqdg26LDdLObOOeeqsCzGpdGxQIXZlkiXrHtGo1nCmpMH32seHe+wZGRUJtazdgdCi/3mm4DXnfp+hJTAbPygIUBVpLa0Ln9h1zgwHZakwyOgnKhInguUfAujp9HnJfLkbPhcKH6gO/eQPaqQKwJUuNDa/V1TOYzdmDglBYMqiZbXhjzly4KLbSxfN+F5AoXFJoWFBiJf+aB481FGzZMkAj0XW5Mzp3ZlsG88hWby8mFryoiNJAYKgXa2uDUlYGPqc3Ilp7ewSp8Xa/IOQNXbKzjIHkCS0yErzsBobr4mU3Abu9N8X/vQMWGrohkEcW6xExerFxUCljWFvrsIEYc1ltfWIjIFR1lOPV9XZ/ICbvIFJCQ+s8yrCBwOPBwCCrV4qZ6O6O9gdy1quOXV1gCg2MiBg2DqEfhGrfi8kyaZStm3r1PiB0IJVT86cxiNwo6UpIKTxsIEnJYHfv9i6aPFqX/AJa0xUoa772hqe9Ddq0p4eHQg/11GkQVZW9i0ZH6ZKfPVj6HtUTyEix8luQUlIgomOGzKHOngtzWAjU3FzKlhBQ4VRt//ZAUUCQPlf9oPeV8+dgrSyH8sraoVFYLFAzs8CryRuNjWBUw2j1De8FI/G94SEFVM6egSl+FNRFS3zVcsokw9q3vmuY3pdSU3yTZdMWWCPCoO7bZxRQ4KxdOBwHg6pHHOsyS4VLftJYcPlKuKkgQt5RSKcL7rm72+mrFZyqN4vFuy88r2+CPG8e+IH9EGf+Mqo1bqn9bUTOT88/FEQpXJHec7z6H3fJZK+35BWr0ENeUekAkw8dpKrMMWg0tDGpUNZvhDmJsuPQjxD5+WAjwsATYmFbVKXxmJFZUvoXRwOC6BDUFGh15dHOvHEQ3aH3Yjh9BgR5xpU6FvxSEfiVy+A1VXQyd+mugIjSS8U0qBlzgClTYGlqgPjqS6CyovdlZs4gdc2DZQHVtmMWuCCUtQNh2IMQZNEgMfP8fQU9V2ZAc4YP2Bgy+PxnoaZPhUrFsxIRaXxK9E8ku13gtMHZxQvA6VP3Z7C9FdZZxeDpdMBzXdBS74NhPhD9l8sJraoUSqUFntvjoTkeKH5MJqNm0RVTcPqu6SKxqij3Oa2lyBbIiZWQJwjwlElEa/L6YCAM8wsxUBGdpLBN1VBrnFDq0qC0JNMm4IMfcGYX5PhqyEn1tHgUeBxlk8nit3bvh2FKyZZc6qRDaKOhuW1QKRuEn8PO0wPRUgutuUP0lD+Tr1SHTKa7CQOZyY6bxrWWmCdcfZvFJppYVIJRlQ1yddD+us5sKV3ePaKW5TC4m2dRzJcKT8d8eO4sDkSvu7KvyNa/f9P71PgXEsSagKHun8We8YdwFH5E3VI541jdoDpCE+kKdjIQRDCC6hfGHA0+KmsXj1ueHex3zfWhQBgJlnHsat+3cpt3ppBUcr0zP9jPCX2S27rAPi5EQBhLglur//5c0CB9en1tKBD+YJgc1ky/xSOBMGvS3aFC+MBwS2mgZ/4XYAARyXi7iYVf/AAAAABJRU5ErkJggg==) no-repeat;
  background-size: 34rpx 34rpx;
  bottom: -12rpx;
  left: 50%;
  transform: translate(-50%,0);
}
.score-cont .top3 .no1 image{
  width: 96rpx;
  height: 96rpx;
}
.score-cont .top3 .no2 .avatar-wrap:after{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkZENTU1RkQ2NDM3MTFFOUIyMDVEMzU1OTUxMEE2RDIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkZENTU1RkU2NDM3MTFFOUIyMDVEMzU1OTUxMEE2RDIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRkQ1NTVGQjY0MzcxMUU5QjIwNUQzNTU5NTEwQTZEMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRkQ1NTVGQzY0MzcxMUU5QjIwNUQzNTU5NTEwQTZEMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps37K60AAAc3SURBVHjarJd7bFRVHse/59x7512mb/qwTEegvFpBVtvVWokKPotxI2DEsAnrg5hoxegad5UgvuIjMZoQ/jBLskFE44NdtcjKuhKpjwgqr5YCKRT7oDK1jxloOzP3cfZ375Rph5kpA3iS35zbnnt/93N+5/e6DBcx+l6ul2mqJ3mQZKFc7Jd5Vk6X3tu1Th8I/DPv743GhepkFwhwOU0PkPyFZPKYFgYCgZRTCHBpUISHNms9J54loODvBkIvt9F01+jub8rkGe72gntzo0xSdukDp57MaXh3/0WDEIC51kDyDEnB2FskYPo1EEUVEN4iGM5JZBAZLHIafLAHrGMfxLHdMeUOF5TSaTCGT+/TetpXkYV2XwzIszS9MAbAwa7+E/SKOujZlwGBdrBekqF+WpMhsvIIbiZYbgmUUA+w9zOIvdtiz0oSbL5ZBoRYl3Xvq89nDEIQeTR1kTisf+SWAjeshFo4B/zAdvB9jTGAFEMU+KFfvQSsohb2nlZo/1oHRMPgHi/ss2t0vbc7i2BGko4zjUFWxSEKfGC3PALVngd5y+OQvt2UFsLaGVlJ/vx1sK3rMEKWU1a8CdgcMM4EofV2S5Dk5zKyyGhoniAphcMNdudfEWVOKNbOhhPutVXUwFFdD3myH9qpdoR3NyJ69Icx6+RNgb7kRThH+qFuWg0mybDN+EO35641l2VikSUWhLm44M+IekqhfPpyEoR7EUWw/0p0Nm1H5/8+tmA8ix+14OK77OsA3/Yaorl+SLXLIXQNlGdKQlueuvbcl8opQBqs38LLYZTMpqN4BxhJTAeKrxLtX3yAUHsr3G4HIhEVI4EuVNz7GOy1SxOswruaoR3cAdu8eujfv0+W+4XZpl6xlpZuSWsROpZqmq6xFuYuhKZz8CNNSaQDbc1wh3sxbWoZiosKUO4rgdG6KwaZW5R0v7TnQ6iKG3z+YsCg4ImM1IQ2P2Gb6Gga4lfZxWBt35snnaTYwXW4Xc6E/+V6YnqHA13JjhgKQD15GNLMBdbfRrDPyxT7mpQgZA3Kz1gW80InhCsH7GRrysiQKS+cO1yzYsfe8/W/U2fbk4fIsXKsaz3UB+Z0r0xnkUWmZa2rHDK17AALnsq8EJHjhtoPUeR8ljqsySrmBmPhRFY29JL+N5Z5U4GMnZmsWIUMejQjBjNS2KQCtLyx2vKZlEOLJhxy5PBPTISHC1OBxL2SDQXBDI3s7T0vhBm2fHYdDrz+KKaW5aW9T7iySace008b5Q5XmC47k0CoILXRZLm+MItX5AxEfvnEFZMSHp99PZrX/82CSOU7Y8nNR2kgFIuiwjKzQu+kd4bTRc0/4i85HYBRftWEEI7rluHYB+tRXpydAOGoXnyOp0pg5fMgAsdjINS3GEPBtRMltA9J3jLdVXS2ULW9h6pqPkH9lgSRdffTiKoqZj38ItUJlrAW+ObT0UIVG8b0WthcWdC/e89apzzSkbP6vT1p88ioqTZZpty/A8rAL9DrVibnEbKEXOSHq6yCynuVlWnPiukzI8fG9UEKFbzaFWCBNoj+Lsj5xZRdO9ZkkuI3kjxmZcD9X4BfvxJG5c3gzTviN7RufAmB3ifSHtvcqgqyfywItYWPUO2cBP2jZ2JNFeMDxumBzRn1I/2v3tYqdGmmdUPdcqhzbgNv2gTe8t/M8wq9VLvhYSiVN4J9uQFGy5eQS6eCa52NWfdvXXze6qvtrq+ye45XxL29aQuUlv9A1K2AdvNqgFrD8w2R74e69BUocyil79poQXCnhxo5CY5p9tu1Aw/dMaFFTAiavjK62vKHjpbS6YyrJzPrIObfCTV7CvjRJvDje6gJOgY2PEhaJMupRdEMGDPqgPIrYR/shrFjPcRombDPqYFxohHOaRFw34KIMEbulq94e1sSyFkIknxoKtR9PyMcqiQY97gyShl33q0Q5fOhF0yHYffEVZi/kk4t4ak2sKPfkH9tT6zA8iAcuYcgV9ZYepjTnwDDkiDOjvAQjPZmqP12qNFy6Hp2oi0VshZFiLBTF8dtZJkBiJ4jZg1JBJD6odg7odBXEPfNovAYrSSMJ8CwlBDjz5vSvfj1BPTeYUQjPjJW8Xk/bRiLUrnqJtYeSEV54JN9Vt+afOMYDCPH+YR6uCoSKrlhO3RqsIWe/FA0AiPQAdFHH3LRuV9pQZu5gcLxzCQ7FW9wr8PV2sAKShWWXxIL2fRjiPzrMHOWBeNb0w89KRPEdbSdRUId/CPUwRvP9Wvm8ochtPukqg1bqX+xj34BziXpJfmEEuLxtEd9Vov3qp0i+CO19jhoNulydaNIm0dI0a00bU8HkUkaSQljywcvXvo8n3zH2ky/aw5eCoSVsqsbTR2mVeOFivSQ6YdTZkWeRkk3TcGLhUgLYy+h7kj9LmOQUY9uvhSIVDBM9vzKS5cbFwTCHFPOXCpEEozkOnLBD+sHVnH8zsPo3pJW5/8FGADRqsU0fzlMaAAAAABJRU5ErkJggg==);
}
.score-cont .top3 .no3 .avatar-wrap:after{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUVEMjg2RTQ2NDM3MTFFOUIyMDVEMzU1OTUxMEE2RDIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUVEMjg2RTU2NDM3MTFFOUIyMDVEMzU1OTUxMEE2RDIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRkQ1NTVGRjY0MzcxMUU5QjIwNUQzNTU5NTEwQTZEMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRkQ1NTYwMDY0MzcxMUU5QjIwNUQzNTU5NTEwQTZEMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsFNIO0AAAcESURBVHja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);
}
.scorelist{
  border-left: 1rpx solid #e5e5e5;
  border-right: 1rpx solid #e5e5e5;
  width: 636rpx;
  margin: -27rpx 0 0 27rpx;
  box-sizing: border-box;
}
.scorelist .scoreitem{
  display: flex;
  height: 135rpx;
  align-items: center;
  border-bottom: 1rpx solid #F0F0F0;
  justify-content: space-between;
  padding: 0 30rpx;
}
.scorelist .scoreitem .avatar{
  display: flex;
  align-items: center;
}
.scorelist .scoreitem .avatar image{
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin: 0 15rpx;
}
.scorelist .scoreitem .avatar .name{
  font-size: 28rpx;
}
.scorelist .scoreitem .score{
  font-size: 28rpx;
  color: #666;
}
.scorelist .scoreitem .order-num{
  font-size: 28rpx;
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
}
.loading{
  padding:50rpx;
}
</style>