mobile_h5/card/components/my-ranklist/my-ranklist.vue

<template>
	<uni-list class="list" :border="false">
		<uni-list-item v-for="(item,index) in rankRs" :key="index" :border="false"
			class="list-item uni-row" :class="item.isSelf ? 'list-item-isself' : ''">
			<template v-slot:body>
				<text class="item-rankNum"
					:class="getMedalClass(item.rankNum)">{{item.rankNum > 0 ? item.rankNum : '--'}}</text>
				<view class="item-detail uni-row">
					<text class="item-userName">{{ teamType >= 0 ? getTeamName(teamType, item.userName) : item.userName}}</text>
					<text class="item-totalTime">{{fmtTime(item.totalTime)}}</text>
				</view>
			</template>
		</uni-list-item>
	</uni-list>
</template>

<script>
	import tools from '/common/tools';
	import { teamName } from '/common/define';
	
	export default {
		name:"my-ranklist",
		props: {
			rankRs: {},
			teamType: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				// item: {}
			};
		},
		methods: {
			getTeamName(teamType, teamIndex) {
				return teamName[teamType][teamIndex];
			},
			getMedalClass(rankNum) {
				if (rankNum == 0)
					return 'item-rankNum-other';
				if (rankNum <= 3)
					return 'item-rankNum-medal-' + rankNum;
				else if (rankNum <= 10)
					return 'item-rankNum-medal-other';
				else
					return 'item-rankNum-other';
			},
			fmtTime(time) {
				if (time > 0)
					return tools.convertSecondsToHMS(time, 1);
				else
					return '--';
			},
			// onItemClick(item) {
			// 	this.data.item = item
			// 	this.$emit('my-combo-list-click', this.data);
			// }
		}
	}
</script>

<style lang="scss" scoped>

	.list {
		width: 90%;
		height: 53vh;
		/* margin-top: 20rpx; */
		/* margin-top: 1vh; */
		overflow: scroll;
	}

	.list-item {
		width: 100%;
		height: 70rpx;
		justify-content: flex-start;
	}

	.list-item-isself {
		background-color: #ececea !important;
		border-radius: 10rpx;
	}

	.item-rankNum {
		width: 80rpx;
		height: 50rpx;
		text-align: center;
		margin-top: 6rpx;
		padding-right: 0.5rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		line-height: 50rpx;
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: top;
		background-size: contain;
	}

	.item-detail {
		width: 82%;
		height: 60rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-bottom: #ececea 5rpx solid;
		justify-content: space-between;
	}

	.item-rankNum-medal-1 {
		color: #bd640a;
		background-image: url("/static/default/medal_gold.png");
	}

	.item-rankNum-medal-2 {
		color: #68758c;
		background-image: url("/static/default/medal_silver.png");
	}

	.item-rankNum-medal-3 {
		color: #9b3b11;
		background-image: url("/static/default/medal_copper.png");
	}

	.item-rankNum-medal-other {
		color: #9a140a;
		background-image: url("/static/default/medal_other.png");
	}

	.item-rankNum-other {
		color: #9a140a;
	}

	.item-userName {
		font-size: 30rpx;
	}

	.item-totalTime {
		font-size: 26rpx;
		font-weight: 550;
	}
	
</style>