<template>
	<view>
		<view class="img-box">
			<img src="static/blue.png"></img>
		</view>
		<view class="project-box">
			<view class="project-info" v-for="(item,index) in list" :key="index" @click="jump(index)">
				<view class="info-left">
					{{ index + 1 }}
				</view>
				<view class="info-con">
					<view class="info-con-left">{{ item.project }}</view>
					<view>{{ item.time }}</view>
				</view>
				<view class="info-right">
					<view class="right-con">
						<text class="started" v-if="item.result - 0 === 0">未开始</text>
						<text class="ongoing" v-if="item.result - 0 === 2">进行中</text>
						<text class="success" v-if="item.result - 0 === 1">出成绩</text>
						<icon class="cuIcon-right" type="icon"></icon>
						<icon class="cuIcon-right" type="icon"></icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					project:'30秒单摇跳',
					time:'11月28日 09:00',
					result:1
				}, {
					project:'3分钟单摇跳',
					time:'11月28日 10:00',
					result:1
				}, {
					project:'30秒双摇跳',
					time:'11月28日 11:00',
					result:2
				}, {
					project:'连续三摇跳',
					time:'11月28日 14:00',
					result:0
				}, {
					project:'30秒交互绳',
					time:'11月28日 11:00',
					result:2
				}, {
					project:'30秒交互绳',
					time:'11月28日 11:00',
					result:0
				}, {
					project:'30秒交互绳',
					time:'11月28日 11:00',
					result:0
				}, {
					project:'30秒交互绳',
					time:'11月28日 11:00',
					result:0
				}, {
					project:'30秒交互绳',
					time:'11月28日 11:00',
					result:0
				}]
			}
		},
		methods: {
			jump(num) {
				// console.log(num)
				uni.navigateTo({
					url: `/pages/Details/Details?num=${num}`
				})
			}
		}
	}
</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 $blue;
	height: 62%;
	top: 31%;
	padding: 35rpx 35rpx;
	border-radius: 20rpx;
	overflow-y: auto;
}
.project-info {
	height: 60px;
	position: relative;
	box-shadow: 0 0 10px $blueLight;
	margin-bottom: 10px;
	border-radius: 50px;
	overflow-x: auto;
}
.info-left {
	height: 60px;
	width: 20%;
	line-height: 60px;
	text-align: center;
	font-size: 30px;
	color: $white;
	position: absolute;
	left: 0;
	background: $blue;
}
.info-con {
	position: absolute;
	left: 20%;
	width: 50%;
	line-height: 30px;
	padding-left: 20px;
	font-size: 14px;
	font-weight: 1000;
	height: 100%;
}
.info-con-left {
	letter-spacing:4px
}
.info-right {
	position: absolute;
	right: 0;
	height: 100%;
	width: 30%;
	font-size: 14px;
	
	icon {
		font-size: 10px;
	}
}
.right-con {
	position: absolute;
	bottom: 5px;
	width: 85%;
	text-align: justify !important;
	text-align-last: justify;
	font-size: 14px;
	font-weight: bold;
}
.started {
	color: #ADADAD;
}
.ongoing {
	color: #F3CB77;
}
.success {
	color: $blue;
}
</style>
