<template>
	<div class="pb_content2" style="background: #fff; display: inline">
		<div class="pb_content_body">
			<div class="fanhui" @click="goTo('/index')"></div>
			<div class="logo"></div>
			<div class="leader">
				<div class="top">
					<div>排名</div>
					<div>姓名</div>
					<div style="width: 20%">总分</div>
				</div>
				<div class="leaderBody">
					<div v-for="(item, index) in leader" :key="index" class="hang">
						<div v-if="index + 1 == 1" class="first">
							<img src="../../assets/twentyFour/first.png" alt="" />
						</div>
						<div v-else-if="index + 1 == 2" class="second">
							<img src="../../assets/twentyFour/second.png" alt="" />
						</div>
						<div v-else-if="index + 1 == 3" class="third">
							<img src="../../assets/twentyFour/third.png" alt="" />
						</div>
						<div v-else class="num">{{ index + 1 }}</div>
						<div class="name">
							<div class="tx">
								<img src="../../assets/icon/portal.png" alt="" />
							</div>
							<div class="userName">{{ item.name }}</div>
						</div>
						<div style="width: 10%; display: flex; justify-content: center">
							{{ item.score }}
						</div>
					</div>
				</div>
			</div>
			<div class="returnIndex" @click="goTo('/index')"></div>
		</div>
	</div>
</template>

<script>
	import "../../common/aws-sdk-2.235.1.min";

	export default {
		data() {
			return {
				leader: [
					{ name: "林嘉琪", score: "120" },
					{ name: "文泉", score: "88" },
					{ name: "ZHANGAl", score: "86" },
					{ name: "苏苏", score: "74" },
					{ name: "华佳琪", score: "72" },
					{ name: "林伟清", score: "70" },
					{ name: "彭于晏", score: "60" },
					{ name: "吴彦祖", score: "40" },
				],
			};
		},
		computed: {
			playsinline() {
				let ua = navigator.userAgent.toLocaleLowerCase();
				// x5内核
				if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
					return false;
				} else {
					// ios端
					return true;
				}
			},
		},
		methods: {
			goBack() {
				document.getElementsByClassName("pb_content2")[0].style.display = "block";
				this.$router.isBack = true;
				if (window.history.length <= 1) {
					this.$router.push({ path: "/" });
					return false;
				} else {
					this.$router.go(-1);
				}
			},
			goTo(path) {
				this.$router.push(path);
			},
		},
		created() {},
	};
</script>

<style scoped>
	.pb_content_body {
		font-size: 0.9rem;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		background-image: url("../../assets/twentyFour/phBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: auto;
		position: relative;
	}

	.pb_content_body div {
		margin: 0.5rem 0 0;
	}
	.pb_content_body div > img {
		width: 5rem;
	}
	.pb_content_body .van-cell {
		margin: 0;
	}

	.fanhui {
		background: url("../../assets/twentyFour/phfh.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		width: 40px;
		height: 40px;
		top: 35px;
		left: 20px;
	}
	.logo {
		min-height: 7rem;
		min-width: 8rem;
		margin: 3rem auto 1rem auto !important;
		background-image: url("../../assets/twentyFour/phLogo.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.leader {
		background-image: url("../../assets/twentyFour/leader.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 90%;
		min-height: 28.3rem;
		overflow: auto;
		margin: 0 auto !important;
	}
	.top {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		color: #b2b2b2;
		margin: 10px 0 10px 25px !important;
	}

	.top > div {
		width: calc(100% / 3);
	}

	.top > div:nth-child(2),
	.hang > div:nth-child(2) {
		margin-right: 55px;
	}
	.leaderBody {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}
	.hang {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		width: 100%;
	}
	.name {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0 15px 0 0 !important;
		width: 140px;
	}
	.userName {
		width: 100px;
		margin: 0 !important;
		color: #b4b4b4;
	}
	.tx {
		width: 40px;
		margin: 0 10px 0 0 !important;
	}
	.tx > img {
		width: 100% !important;
		height: 100%;
	}
	.first,
	.second,
	.third,
	.num {
		width: 10%;
		height: 37px;
		display: flex;
		justify-content: center;
	}
	.first > img,
	.second > img,
	.third > img {
		width: 30px !important;
	}
	.returnIndex {
		background-image: url("../../assets/twentyFour/returnIndex.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 11rem;
		min-height: 2.6rem;
		margin: 10px auto !important;
	}
</style>
