<template>
	<view class="content">
		<view class="game-top-bg">
			<image src="../../static/game/game06.png" mode=""></image>
			<view class="game-top-time">
				第31期&nbsp;立即预约结束仅剩<span>03</span>时<span>03</span>分<span>03</span>秒
			</view>
			<view class="game-top-xl">
				<view class="xl">
					血量值:&nbsp;14585745/458789654
				</view>
				<view class="xl-t">
					<!-- 血量进度条 暂未开发! -->
					<progress></progress>
					
				</view>
			</view>
			<view class="xgs">
				<image :src="xiaoguaishou" mode=""></image>
			</view>
			<view class="id">
				作战Id:1-期数Id:30
			</view>
			<view class="gl">
				<image src="../../static/game/game08.png" mode=""></image>
			</view>
		</view>
		<view class="edu">
			本次参与额度:1~4500
		</view>
		<view class="button">
			<image src="../../static/game/game07.png" mode=""></image>
		</view>
		<view class="u-table">
		<view class="column">
			<view class="table-box">
				<view class="table-img">
					<image src="../../static/game/game04.png" mode=""></image>
				</view>
				<view class="table-title">
					<view class="table-top">
						200
					</view>
					<view class="table-top">
						白积分
					</view>
				</view>
			</view>
			<view class="table-box">
				<view class="table-img">
					<image src="../../static/game/game05.png" mode=""></image>
				</view>
				<view class="table-title">
					<view class="table-top">
						200
					</view>
					<view class="table-top">
						紫积分
					</view>
				</view>
			</view>
		</view>
			<view class="a" style="width: 685rpx;top:152rpx;position: absolute;height: 2rpx;background: #7F69D8;"></view>
			<view class="a" style="width: 2rpx;height: 305rpx;background: #7F69D8; margin-left:343rpx; top: 0; position: absolute;"></view>
		<view class="column">
			<view class="table-box">
				<view class="table-img">
					<image src="../../static/game/game03.png" mode=""></image>
				</view>
				<view class="table-title">
					<view class="table-top">
						200
					</view>
					<view class="table-top">
						绿卡
					</view>
				</view>
			</view>
			<view class="table-box">
				<view class="table-img">
					<image src="../../static/game/game02.png" mode=""></image>
				</view>
				<view class="table-title">
					<view class="table-top">
						200
					</view>
					<view class="table-top">
						红积分
					</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import prog from '@/components/cu-progress/cu-progress.vue'
	export default {
		data() {
			return {
				xiaoguaishou:'',
				imageList: [{
						image: "../../static/game/game01.png"
					},
					{
						image: "../../static/game/reb02.png"
					},
					{
						image: "../../static/game/reb03.png"
					},
					{
						image: "../../static/game/reb01.png"
					},
					{
						image: "../../static/game/reb04.png"
					}
				] //小怪兽图片
			};
		},
		onLoad(option) {
			this.xiaoguaishou = this.imageList[option.id].image
			console.log(this.xiaoguaishou,'打印');
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	page {
		background: #ECE7F8;
		width: 750rpx;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.game-top-bg {
		position: relative;
		width: 750rpx;
		height: 550rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.game-top-time {
		line-height: 50rpx;
		padding-left: 100rpx;
		position: absolute;
		top: 30rpx;
		left: 40rpx;
		width: 670rpx;
		height: 50rpx;
		background: #000000;
		opacity: 0.61;
		border-radius: 25rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #fff;

		span {
			width: 42rpx;
			height: 42rpx;
			background: #5655EF;
			border-radius: 10rpx;
		}
	}

	.game-top-xl {
		position: absolute;
		text-align: center;
		left: 140rpx;
		top: 90rpx;

		// line-height: 75rpx;
		.xl {
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.xl-t {
			margin-top: 10rpx;
			width: 474rpx;
			height: 31rpx;
			background: #A38CF4;
			border: 3rpx solid #FFFFFF;
			border-radius: 13rpx;
		}
	}

	.xgs {
		position: absolute;
		top: 200rpx;
		left: 210rpx;
		width: 330rpx;
		height: 260rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.id {
		text-align: center;
		position: absolute;
		top: 490rpx;
		left: 255rpx;
		width: 240rpx;
		height: 40rpx;
		background: #000000;
		opacity: 0.64;
		border-radius: 20rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.gl {
		top: 400rpx;
		left: 36rpx;
		position: absolute;
		width: 90rpx;
		height: 106rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.edu {
		margin: 20rpx 225rpx;
		width: 302rpx;
		height: 50rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		background: #1B1E2F;
		opacity: 0.57;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.button {
		margin: 0 160rpx;
		width: 430rpx;
		height: 120rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.u-table {
		margin: 20rpx 30rpx;
		width: 688rpx;
		height: 309rpx;
		background: #FFFFFF;
		border: 3rpx solid #7F69D8;
		box-shadow: 0px 0px 20rpx 0rpx rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		position: relative;
		.column{
			display: flex;
			justify-content: space-between;
		}

		.table-box {
			align-items: center;
			display: flex;
			padding: 44rpx 76rpx;

			.table-img {
				width: 65rpx;
				height: 65rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.table-title {
				
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;

				.table-top {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					// line-height: 75px;
				}
			}

			;
		}
	}
</style>
