<template>
	<view class="gameContent" @click="ss">

		<view class="perCon">
			<view class="perCoun flex">
			<view class="period">
	  <span>Period</span>	
			</view>
			<view class="coDown">
				count down
			</view>
				</view>
				<view class="timeCon flex">
					<view class="time">
						{{colorList0.lotteryPeriod.period}}
					</view>
					<view class="count">
						<u-count-down :timestamp="colorList0.gap*60" :show-days="false" :show-hours="false"></u-count-down>
					</view>
				</view>
		</view>
	
	  <view class="">
		  <view class="flex icon-con">
		  	<view class="ico">
		  		<image src="../../static/color/ico_apple_green@3x.png" mode=""></image>
		  	</view>
			<view class="ico">
				<image src="../../static/color/ico_chili_purple@3x.png" mode=""></image>
			</view>
			<view class="ico">
				<image src="../../static/color/ico_apple_red@3x.png" mode=""></image>
			</view>
		  </view>
	    
		
		<view class="multiple">
	     <view class="multiple-con flex">
	     	<view class="mul-item bg_jb1">
	     		0
	     	</view>
			<view class="mul-item bg_green">
				1
			</view>
			<view class="mul-item bg_red">
				2
			</view>
			<view class="mul-item bg_green">
				3
			</view>
			<view class="mul-item bg_red">
				4
			</view>
			</view>
			 <view class="multiple-con flex">
			<view class="mul-item bg_jb2">
				5
			</view>
			<view class="mul-item bg_red">
				6
			</view>
			<view class="mul-item bg_green">
				7
			</view>
			<view class="mul-item bg_red">
				8
			</view>
			<view class="mul-item bg_red">
				9
			</view>
				</view>
 </view>
 
 
 
	     </view>
	
	
	<view class="donna flex">
		<view class="flex info">
			<view class="imgcon">
				<image :src="'https://apitest.luck-work.com/'+myImgUrl" mode="aspectFit"></image>
			</view>
			<view class="doname">
				<p class="name">{{myName}}</p>
				<view class="win">
					64% win
				</view>
			</view>
		</view>
		<view class="recharge">
			<image src="../../static/color/ico_apple_red_2@2x.png" mode=""></image>
			<span><i>₦</i>2000</span>
		</view>
		<view class="follow">
			Follow
		</view>
	</view>
	
	
	  </view>
	
</template>

<script>
		import index from '@/utils/index'
	const COMPONENT_NAME = 'gameView'
	export default {
		name: COMPONENT_NAME,
   props:['myName',"myImgUrl","colorList0","colorList1","colorList2","colorList"],
		data() {
			return {
					
				// colorList1:this.colorList[0],
			
				period:'',
				count:'',
			}
		},
		computed: {
		
		},
	
		methods: {
			ss(){
			
			},
		gaClick(i){
			this.ganum=i
			// var s=index.formatyymmdd(this.colorList2.addTime);
			// console.log(s)
		}
	},
	mounted() {
		
		},
	}
</script>


<style>
	
	.timeCon{
		margin-top: 38rpx;
	}
	.time,.count{
		color: #303133;
		font-size: 36rpx;
	}
	.perCoun,.timeCon{
		align-items: center;
		justify-content: space-between;
	}
	.period,.coDown{
		text-transform: capitalize;
		color: #909399;
		font-size: 28rpx;
	}
		.perCon{
			padding-top: 24rpx;
			padding-bottom: 48rpx;
		}
	.gameContent{
		padding:  0 36rpx;
	}
.flex{
	display: flex;
	align-items: center;
}


.icon-con{
	justify-content: space-between;
}
.ico{
	width: 210rpx;
	height: 80rpx;
	border: 2rpx solid #EDEFF2;
	border-radius: 16rpx;
	position: relative;
}
.ico image{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.multiple-con{
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 24rpx;
}
.mul-item{
	width: 112rpx;
	line-height: 80rpx;
	color: #fff;
	font-size: 32rpx;
	border-radius: 16rpx;
	text-align: center;
}
.bg_green{
	background-color: #00B977;
}
.bg_red{
	background-color: #F25B5B;
}
.bg_jb1{          
 background-image: linear-gradient(-30deg, #954DE3 50% , #F25B5B 50% );
}
.bg_jb2{
 background-image: linear-gradient(-30deg,#954DE3  50% , #00B977 50% );
}

.donna{
	background-color: #34026B;
	border-radius: 16rpx;
	height: 160rpx;
	padding: 24rpx 24rpx;
	margin-top: 48rpx;
	justify-content: space-between;
}
.info{
	justify-content: space-between;
}
.info .imgcon{
	width: 76rpx;
	height: 76rpx;
}
.info .imgcon image{
	width: 100%;
	height: 100%;
}
.doname{
	margin-left: 24rpx;
}
.doname .name{
	color: #fff;
	font-size: 32rpx;
}
.doname .win{
	width: 124rpx;
	padding: 4rpx 8rpx;
	line-height: 32rpx;
	color: #fff;
	font-size: 20rpx;
	background-color: #491C7A;
	border-radius: 8rpx;
	margin-top: 6rpx;
}
.recharge{
	position: relative;
	padding-left: 50rpx;
}
.recharge image{
	width: 40rpx;
	height: 40rpx;
	position: absolute;
     left: 0;
	 bottom: 0;
	}
.recharge i{
	font-style: normal;
	margin-right: 8rpx;
}
.recharge span{
	color: #fff;
	font-size: 32rpx;
}
.follow{
	width: 142rpx;
	line-height: 60rpx;
	background-color: #954DE3;
	color: #fff;
	font-size: 24rpx;
	border-radius: 16rpx;
	position: relative;
	text-align: center;
	padding-right: 10rpx;
}
.follow::after{
	content: '';
	width: 24rpx;
	height: 24rpx;
	background: url(../../static/color/top_icon_ins@3x.png)no-repeat;
	background-size: contain;
	position: absolute;
	right: 12rpx;
	top: 50%;
	transform: translateY(-50%);
}
</style>
