<template>
<view class="">
	<view class="cont2_body">
		<view class="body_con_zon" v-for="(item,index) in cont3data" :key="item.id" @click="open(index)"
		 :class="index==cont3inde?'on':''">
			<view class="bodycon flex" >
			<view class="ga_cont3 flex">
			<view class="body_item">
				{{item.num}}
			</view>
			<view class="body_item mar_let" :class="item.code=='success'?'green':'red'">
			{{item.code}}
			</view>
			<view class="body_item mar_let" :class="item.code=='success'?'green':'red'">
				{{item.profit}}
			</view>
					</view>
			<view class="body_item jiantou">
				<image src="../../static/color/loading_icon_ins@3x(18).png" mode=""></image>
			</view>
			</view>
			<view class="list">
				<view class="list_con">
					<view class="periodd">
						period detall
					</view>
					<view class="perd_item flex">
						<view class="name">
							period
						</view>
						<view class="num">
							202105270745
						</view>
					</view>
					<view class="perd_item flex">
						<view class="name">
							period
						</view>
						<view class="num">
							202105270745
						</view>
					</view>
					<view class="perd_item flex">
						<view class="name">
							period
						</view>
						<view class="num">
							202105270745
						</view>
					</view>
					<view class="perd_item flex">
						<view class="name">
							period
						</view>
						<view class="num">
							202105270745
						</view>
					</view>
					<view class="perd_item flex">
						<view class="name">
							period
						</view>
						<view class="num">
							202105270745
						</view>
					</view>
					<view class="perd_item flex">
						<view class="name">
							select
						</view>
						<view class="num">
							<image src="../../static/color/ico_chili_purple@3x.png" mode=""></image>
						</view>
					</view>
					<view class="perd_item flex">
						<view class="name">
							period
						</view>
						<view class="num">
							202105270745
						</view>
					</view>
					<view class="perd_item flex">
						<view class="name">
							period
						</view>
						<view class="num">
							202105270745
						</view>
					</view>
					<view class="perd_item flex">
						<view class="name">
							period
						</view>
						<view class="num">
							202105270745
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
	<cont class="test"></cont>
	<view class="morejia">
		<p class="">More</p>
		<image src="../../static/color/loading_icon_ins@3x(20).png" mode=""></image>
	</view>
</view>
</template>

<script>
	import cont from "../cont/cont.vue"
	const COMPONENT_NAME = 'gamecont3'
	export default {
		name: COMPONENT_NAME,
	
		data() {
			return {
		    cont3data:[
				{			
					id:1,
					num:'20210701303',
					code:'Fail',
					profit:'-19.00',
			},
			{
					id:2,
					num:'20210701303',
					code:'Fail',
					profit:'-19.00',
			},
			{
					id:3,
					num:'20210701303',
					code:'Fail',
					profit:'-19.00',
			},
			{
					id:4,
					num:'20210701303',
					code:'success',
					profit:'427.50',
			},
			{
					id:5,
					num:'20210701303',
					code:'success',
					profit:'427.50',
			},
			{
					id:6,
					num:'20210701303',
					code:'Fail',
					profit:'-19.00',
			},
			{
					id:7,
					num:'20210701303',
					code:'Fail',
					profit:'-19.00',
			},
			{
					id:8,
					num:'20210701303',
					code:'Fail',
					profit:'-19.00',
			},
			{
					id:9,
					num:'20210701303',
					code:'success',
					profit:'427.50',
			},
			{
					id:10,
					num:'20210701303',
					code:'success',
					profit:'427.50',
			},
			],
			cont3inde:-1,
			pd:0,
			}
		},
		computed: {
		
		},
		mounted() {
		
		},
		methods: {
		open(i){
			this.cont3inde=i;
			this.pd++;
			if(this.pd%2==0){
				this.cont3inde=-1;
			}
		}
	},
	}
</script>


<style>
.num image{
	width: 32rpx;
	height: 32rpx;
}
	.perd_item{
		margin-bottom: 24rpx;
	}
	.perd_item .name{
		text-transform: capitalize;
		color: #303133;
		font-size: 28rpx;
	}
	.perd_item .num{
		color: #303133;
		font-size: 28rpx;
	}
	.periodd{
		font-size: 28rpx;
		text-transform: capitalize;
		color: #954DE3;
		margin-bottom: 24rpx;
	}
	.list_con{
		padding: 0 60rpx;
	}

	.list{
		max-height: 0rpx;
		overflow: hidden;
		transition: .5s all;
		padding: 0;
		background-color: #F5F7FA;
	}
	.body_con_zon.on .list{
		padding: 48rpx 0;
		max-height: 700rpx;
	}
	.red{
		color: #F25B5B !important;
	}
	.green{
		color: #00B977 !important;
	}
	.bodycon{
		height: 72rpx;
			padding: 0 36rpx;
	}
	.mar_let{
		margin-left: 30rpx;
	}
	.flex2{
		display: flex;
		justify-content: center;
	}
	.test{
		position: fixed;
		right: 0;
		top: 75%;
	}
	.morejia{
		display: table;
		width: auto;
		margin: 0 auto;
		padding-top: 48rpx;
		padding-bottom: 62rpx;
	}
	.morejia p{
		font-size: 28rpx;
		color: #954DE3;
		    text-align: center;
	}
	.morejia image{
		display: block;
		width: 24rpx;
		height: 24rpx;
		margin: 0 auto;
	}
	
	.head_item{
		font-weight: bold;
		color: #303133;
	}
	.body_item{
		color: #303133;
		text-transform: capitalize;
	}


	.body_item image{
		width: 32rpx;
		height: 32rpx;
	}
	.body_item image:last-child{
		padding-left: 8rpx;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
.gamecont2{
	padding: 0 36rpx;
	
}
.body_con_zon.on .jiantou image{
	transform: rotate(-180deg);
	padding: 0 !important;
}
</style>
