Scorequery/pages/Details/Details.vue

<template>
	<view>
		<view class="img-box">
			<img src="static/red.png"></img>
			<view class="project-title">
				30秒单摇跳
<!-- 				<icon class="cuIcon-right" type="icon"></icon>
				<icon class="cuIcon-right" type="icon"></icon> -->
			</view>
		</view>
		<view class="project-box">
			<view class="project-team-name">
				<v-tabs v-model="current" :tabs="tabs" :pills="true" activeColor="white" pillsBorderRadius="25px" pillsColor="#FCBC3B" @change="changeTab"></v-tabs>
			</view> 
			<view class="project-nav">
				<view class="ranking">
					<view class="ranking-title">
						排名
					</view>
				</view>
				<view class="team">
					<view class="team-title">
						参赛队伍
					</view>
				</view>
				<view class="player-name">
					<view class="name-title">
						姓名
					</view>
				</view>
				<view class="result">
					<view class="result-title">
						成绩
					</view>
				</view>
			</view>
			<view class="project-con">
				<view class="ranking">
					<view class="ranking-con" v-for="(item,index) in list" :key="index">
						<text v-if="item.ranking - 0 === 1" class="top1">TOP{{ item.ranking }}</text>
						<text v-else-if="item.ranking - 0 === 2" class="top2">TOP{{ item.ranking }}</text>
						<text v-else-if="item.ranking - 0 === 3">TOP{{ item.ranking }}</text>
						<text v-else>{{ item.ranking }}</text>
					</view>
				</view>
				<view class="team">
					<view class="team-con-box">
						<view class="team-con" :class="item.team.length - 0 > 8 ? 'team-con-act' : ''" v-for="(item,index) in list" :key="index">
							{{ item.team }}
						</view>
					</view>
				</view>
				<view class="player-name">
					<view class="name-con" v-for="(item,index) in list" :key="index">
						{{ item.name }}
					</view>
				</view>
				<view class="result">
					<view class="result-con" v-for="(item,index) in list" :key="index">
						{{ item.result }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					ranking: 1,
					team: '山西太原实验小学十中',
					name: '某某某',
					result: 100
				},{
					ranking: 2,
					team: 'XXXXXX学校XXXXXX学校',
					name: '某某某',
					result: 99
				},{
					ranking: 3,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 95
				},{
					ranking: 4,
					team: 'XXXXXX学校X',
					name: '某某某',
					result: 93
				},{
					ranking: 5,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 92
				},{
					ranking: 6,
					team: 'XXXXXX学校XXXXX',
					name: '某某某',
					result: 90
				},{
					ranking: 5,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 92
				},{
					ranking: 7,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 89
				},{
					ranking: 8,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 88
				},{
					ranking: 9,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 87
				},{
					ranking: 8,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 88
				},{
					ranking: 9,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 87
				},{
					ranking: 10,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 86
				},{
					ranking: 11,
					team: 'XXXXXX学校',
					name: '某某某',
					result: 86
				}],
				ActIndex: 0,
				current: 0,
				tabs: ['XXXXXX组', 'XXXXXX组XXXXXX组XXXXXX组', 'XXXXXX组', 'XXXXXX组', 'XXXXXX组', 'XXXXXX组', 'XXXXXX组', 'XXXXXX学校']
			}
		},
		methods: {
			changeTab(index) {
				console.log('当前选中的项：' + index)
			}
		}
	}
</script>

<style lang="scss" scoped>

.img-box {
	position: relative;
	width: 750rpx;
	height: 500rpx;
	img {
		width: 100%;
	}
}
.project-box {
	position: absolute;
	width: 630rpx;
	left: 60rpx;
	background: $white;
	box-shadow: 0 0 30px $redShadow;
	height: 62%;
	top: 31%;
	padding: 35rpx 35rpx;
	border-radius: 20rpx;
}
.project-title {
	height: 26px;
	line-height: 26px;
	min-width: 130px;
	position: absolute;
	top: 58%;
	left: 8%;
	background: $white;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 50px;
	color: #FE5835;
	font-size: 16px;
	font-weight: 1000;
}
.project-nav {
	margin-top: 14px;
	// box-shadow: 0 2px 2px $redShadow;
	display: flex;
}
.project-con {
	display: flex;
	height: 80%;
	overflow-y: auto;
	font-size: 14px;
}
.ranking {
	flex: 1;
	text-align: center;
}
.ranking-title {
	height: 30px;
	line-height: 30px;
	margin-bottom: 5px;
}
.ranking-con {
	height: 40px;
	line-height: 40px;
	color: 	#B87333;
	font-size: 14px;
	font-weight: 1000;
}
.team {
	flex: 2;
	text-align: center;
	// overflow-y: visible !important;
	width: 40%;
}
.team-con-box {
	overflow-x: hidden;
}
.team-title {
	height: 30px;
	line-height: 30px;
	margin-bottom: 5px;
}
.team-con {
	height: 40px;
	line-height: 40px;
	// width: 200px;
	white-space:nowrap;
}
.team-con-act {
	animation: 15s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
		0% {
				transform: translateX(0px);
				-webkit-transform: translateX(0px);
		}
		99% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
		100% {
				transform: translateX(0%);
				-webkit-transform: translateX(0%);
		}
}

@-webkit-keyframes wordsLoop {
		0% {
				transform: translateX(0px);
				-webkit-transform: translateX(0px);
		}
		100% {
				transform: translateX(-100%);
				-webkit-transform: translateX(-100%);
		}
}





.player-name {
	flex: 1;
	text-align: center;
}
.name-title {
	height: 30px;
	line-height: 30px;
	margin-bottom: 5px;
}
.name-con {
	height: 40px;
	line-height: 40px;
	overflow-x: auto;
}
.result {
	flex: 1;
	text-align: center;
}
.result-title {
	height: 30px;
	line-height: 30px;
	margin-bottom: 5px;
}
.result-con {
	height: 40px;
	line-height: 40px;
}
.top1 {
	font-size: 18px;
	color: #FFD700;
}
.top2 {
	font-size: 16px;
	color: #c0c0c0;
}
.project-team-name {
	height: 40px;
	line-height: 40px;
	width: 570rpx;
	// background: $yellowLight;
	display: flex;
	overflow-x: auto;
}
.team-det {
	flex: 0 0 120px;
	color: #ccc;
	text-align: center;
	font-size: 14px;
	// flex-shrink:0;
	// width: 100px;
}
.active {
	color: $black;
	font-size: 16px;
}
</style>