sct/pagesT/Distribution/Ranking.vue

<template>
	<view class="Ranking">
		<u-navbar title="排行榜" title-color="#ffffff" back-icon-color="#ffffff" :border-bottom="false" :background="{ backgroundColor: '#ff4f63' }"></u-navbar>
		<view class="ranking-cont" v-if="grade_list.length > 0">
			<image class="ranking-bg" src="https://onlineimg.qianniao.vip/ranking-bg.png" mode=""></image>
			<view class="top-three clearfix">
				<view class="top-three-li second">
					<view class="user-avator-view"  v-if="grade_list[1]">
						<view class="ranking-sort">
							2
						</view>
						<image class="r-vip" src="https://onlineimg.qianniao.vip/r-two.png" mode="aspectFill"></image>
						<image class="user-avator" :src="grade_list[1].avatar" mode="aspectFill"></image>
					</view>
					<view class="user-info-view" v-if="grade_list[1]">
						<view class="user-name">{{ grade_list[1].name }}</view>
						<view class="user-money">¥{{ grade_list[1].totalMoney || 0  }}</view>
					</view>
				</view>
				<view class="top-three-li first">
					<view class="user-avator-view">
						<view class="ranking-sort">
							1
						</view>
						<image class="r-vip" src="https://onlineimg.qianniao.vip/r-one.png" mode="aspectFill"></image>
						<image class="user-avator" :src="grade_list[0].avatar" mode="aspectFill"></image>
					</view>
					<view class="user-info-view">
						<view class="user-name">{{ grade_list[0].name }}</view>
						<view class="user-money">¥{{ grade_list[0].totalMoney || 0 }}</view>
					</view>
				</view>
				<view class="top-three-li third">
					<view class="user-avator-view"  v-if="grade_list[2]">
						<view class="ranking-sort">
							3
						</view>
						<image class="r-vip" src="https://onlineimg.qianniao.vip/r-three.png" mode="aspectFill"></image>
						<image class="user-avator" :src="grade_list[2].avatar" mode="aspectFill"></image>
					</view>
					<view class="user-info-view"  v-if="grade_list[2]">
						<view class="user-name">{{ grade_list[2].name }}</view>
						<view class="user-money">¥{{ grade_list[2].totalMoney || 0 }}</view>
					</view>
				</view>
			</view>
			<view class="ranking-list">
				<block v-for="(item, index) in grade_list" :key="index">
					<view class="ranking-li clearfix" v-if="index > 2">
						<view class="float_left sort-num">{{ index + 1 }}</view>
						<image class="float_left user-avator" :src="item.avatar" mode="aspectFill"></image>
						<view class="float_left user-info clearfix">
							<view class="user-name float_left">{{ item.name }}</view>
							<view class="money float_right">¥{{ item.totalMoney || 0 }}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			grade_list: []
		};
	},
	onLoad() {
		this.commissionTop();
	},
	methods: {
		 commissionTop() {
			this.$u.api.commissionTop().then(res=>{
				this.grade_list = res.data.moneyTop;
			});
		}
	}
};
</script>

<style lang="scss">
body {
	background-color: #ff4f63;
}
.Ranking {
	.ranking-cont {
		padding-top: 165upx;
		.ranking-bg {
			width: 424upx;
			height: 79upx;
			display: block;
			margin: 0 auto;
			transform: translateY(-100upx);
		}
		.top-three {
			padding-left: 36upx;
			.top-three-li {
				float: left;
				width: 192upx;
				height: 309upx;
				background-color: #ff354c;
				border-radius: 12upx;
				.user-avator-view {
					position: relative;
					.ranking-sort{
						font-size: 24upx;
						width: 34upx;
						height: 34upx;
						line-height: 34upx;
						background-color: #8fc7fe;
						color: #fff;
						border-radius: 100%;
						border: 1px solid #6eb7ff;
						position: absolute;
						bottom: 34upx;
						left: 50%;
						transform: translateX(-50%);
						z-index: 9;
						text-align: center;
					}
					.r-vip {
						width: 58upx;
						height: 42upx;
						display: block;
						position: absolute;
						top: -68upx;
						left: 50%;
						transform: translateX(-29upx);
					}
					.user-avator {
						width: 136upx;
						height: 136upx;
						border-radius: 100%;
						display: block;
						border: 4upx solid #8cc5fd;
						margin: 0 auto;
						transform: translateY(-30upx);
					}
				}
				.user-info-view {
					text-align: center;
					color: #ffffff;
					font-weight: bold;
					font-size: 32upx;
					.user-money {
						font-weight: normal;
						padding-top: 12upx;
					}
				}
			}
			.first {
				width: 260upx;
				height: 359upx;
				margin: 0 16upx;
				transform: translateY(-50upx);
				.user-avator-view {
					.user-avator {
						width: 180upx;
						height: 180upx;
						border-color: #fdb10d;
					}
					.ranking-sort{
						width: 44upx;
						height: 44upx;
						line-height: 44upx;
						border-color: #f9ce72;
						font-size: 26upx;
						background-color: #febd03;
					}
				}
			}
			.third {
				.user-avator-view {
					.user-avator {
						border-color: #ffaa6a;
					}
					.ranking-sort{
						border-color: #f5abb5;
						background-color: #ffaa6a;
					}
				}
			}
		}
		.ranking-list {
			min-height: 756upx;
			background-color: #fff;
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;
			transform: translateY(-70upx);
			padding: 30upx 0;
			.ranking-li {
				padding: 0 36upx 20upx;
				.sort-num {
					line-height: 100upx;
					font-size: 30upx;
					font-weight: bold;
					padding-right: 26upx;
				}
				.user-avator {
					width: 100upx;
					height: 100upx;
					border-radius: 100%;
					margin-right: 30upx;
				}
				.user-info {
					width: 500upx;
					line-height: 100upx;
					.user-name {
						font-size: 28upx;
						font-weight: bold;
					}
					.money {
						color: #fe582e;
					}
				}
			}
		}
	}
}
</style>