weapp/pages/crownshare/crownshare.vue

<template>
	<view class="crownshare">
		<image src="../../static/icon/crownsharebanner.png" mode="scaleToFill" class="banner"></image>
		<image src="../../static/icon/crownsharetitle.png" mode="scaleToFill" class="title"></image>
		<text class="titletext">第{{ season }}季大卫博士争霸赛</text>
		<view class="content">
			<view class="top">
				<view class="left">
					<image :src="top.length ? top[1].avatar : ''" mode="scaleToFill"></image>
					<text class="name">{{ top.length ? top[1].name : '' }}</text>
					<text class="text">学分数</text>
					<text class="score">{{ top.length ? top[1].score : '' }}</text>
				</view>
				<view class="center">
					<image :src="top.length ? top[0].avatar : ''" mode="scaleToFill"></image>
					<text class="name">{{ top.length ? top[0].name : '' }}</text>
					<text class="text">学分数</text>
					<text class="score">{{ top.length ? top[0].score : '' }}</text>
				</view>
				<view class="right">
					<image :src="top.length ? top[2].avatar : ''" mode="scaleToFill"></image>
					<text class="name">{{ top.length ? top[2].name : '' }}</text>
					<text class="text">学分数</text>
					<text class="score">{{ top.length ? top[2].score : '' }}</text>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index" :class="item.self ? 'self' : ''">
					<text class="rank">No.{{ item.rank }}</text>
					<image :src="item.avatar" mode="aspectFill"></image>
					<text class="name">{{ item.name }}</text>
					<text class="score">{{ item.score }}</text>
				</view>
			</view>
		</view>
		<view class="contentbg">
			<view class="top">
				<view class="left" style="background: #FFB121;"></view>
				<view class="center" style="background: #FFB121;"></view>
				<view class="right" style="background: #FFB121;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: [],
				list: [],
				season: ''
			}
		},
		onLoad(opt) {
			this.$hideLoading()  //取消loading
			this.top = JSON.parse(opt.top)
			this.list =  JSON.parse(opt.list)
			this.season = opt.season || 23
		}
	}
</script>

<style lang="scss" scoped>
	.crownshare {
		height: 100%;
		box-sizing: border-box;
		border-top: 385rpx solid #FF5A3F;
		background: #FFD157;
		position: relative;
		.banner {
			position: fixed;
			width: 690rpx;
			height: 292rpx;
			top: 30rpx;
			left: 30rpx;
		}
		.title, .titletext {
			position: fixed;
			width: 527rpx;
			height: 82rpx;
			left: 50%;
			top: 337rpx;
			text-align: center;
			transform: translateX(-50%);
			line-height: 70rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.content, .contentbg {
			background: #FFFFFF;
			position: absolute;
			top: 107rpx;
			left: 30rpx;
			right: 30rpx;
			bottom: 50rpx;
			z-index: 1;
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			&.contentbg {
				z-index: 0;
				top: 100rpx;
				background: #FFB121;
			}
			.top {
				width: 100%;
				height: 326rpx;
				position: relative;
				border-radius: 10rpx;
				view {
					position: absolute;
					width: 230rpx;
					height: 100%;
					border-radius: 10rpx;
					background: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: center;
					image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
						margin-bottom: 12rpx;
					}
					.name {
						font-size: 28rpx;
						color: #000000;
						margin-bottom: 10rpx;
					}
					.text {
						font-size: 18rpx;
						color: #666666;
						margin-bottom: 10rpx;
					}
					.score {
						color: #FEB21F;
						font-size: 46rpx;
						margin-bottom: 17rpx;
					}
					&.left {
						top: 0rpx;
						left: 0;
					}
					&.center {
						height: 356rpx;
						top: -50rpx;
						left: 230rpx;
						height: 376rpx;
					}
					&.right {
						top: 0;
						right: 0;
					}
				}
			}
			.list {
				width: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				.item {
					width: 100%;
					flex: 1;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 0 77rpx;
					.rank {
						font-size: 20rpx;
						color: #EE722D;
						width: 84rpx;
					}
					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-right: 24rpx;
					}
					.name {
						font-size: 24rpx;
						color: #484647;
						margin-right: 20rpx;
						width: 230rpx;
					}
					.score {
						flex: 1;
						font-size: 24rpx;
						color: #FEB21F;
						font-weight: bolder;
					}
					&.self {
						background: rgba(254, 83, 27, .15);;
					}
				}
			}
		}
	}
</style>