paopao/pages/index/index.vue

<template>
	<view class="container" :style="{paddingBottom:heightMath.bottomHeight+'px'}">
		<countdown-time :downTime='initPaopao.timeStart' :list='list' :isClose='initPaopao.isClose'
			@timeOut='startGame'></countdown-time>
		<!-- 头部banner -->
		<view class="topBox">
			<image class="topImgBg" src="../../static/img/ganme01/gamebg.png" mode="widthFix"></image>
			<!-- <view class="leftGz">
				规则
			</view> -->
			<view class="moneyIcon flex">
				<image class="icon" src="../../static/img/ganme01/icontb.png" mode="scaleToFill"></image>
				<text>{{userinfo.integral}}</text>
			</view>
			<!-- <view class="jlBox flex">
				<image class="icon" src="../../static/img/ganme01/iconjlu.png" mode="scaleToFill"></image>
				<text>
					记录>
				</text>
			</view> -->
		</view>
		<view class="userBg" :style="{animationPlayState:initPaopao.gameState==1?'running':'paused'}">
		</view>
		<!-- 头部bannerEnd -->
		<!-- 跑道 -->
		<view class="content">
			<view class="listItem" v-for="(item,index) in list">
				<view class="line" v-if="index>0"></view>
				<view class="itemBox">
					<!-- 当前跑道数 -->
					<view class="indexItem flex" :style="{left:initPaopao.gameState>0?'-200rpx':'150rpx'}">
						<view class="leftI"></view>
						<view class="LeftInd">
							{{index+1}}
						</view>
					</view>
					<!-- 当前跑道数 -->
					<!-- 名次排行 -->
					<!-- 右侧头像 -->
					<view class="rightImgAv flex"
						:style="{marginRight:item.margin+'rpx',transitionDuration: item.time+'s'}">

						<view class="amdImg" :style="{
								animationDuration:item.speed +'s', 
								animationPlayState:item.paopao?'running':'paused',
								backgroundImage:`url(${urlFile}/static/img/ganme01/xdwP0${index+1}.png)`
								}">
						</view>

					</view>
					<!-- 右侧头像END -->
					<!-- 左侧详情 -->
					<view class="levelBox flex" :class="{noWin:item.pm!=1,win:item.pm==1}"
						:style="{marginRight:item.onEnd?0:'',transitionDuration: item.time+'s'}">
						<view class="levelLeft flex">
							<view class="imgAvBox flex" :class="{noWin:item.pm!=1,win:item.pm==1}">
								<image class="imgAv" :src="`../../static/img/ganme01/xdw0${index+1}.png`"
									mode="widthFix">
								</image>
							</view>
							<view class="levelContent">
								<view class="levelItemName" :class="{noWin:item.pm!=1,win:item.pm==1}">
									{{item.name}}
								</view>
								<view class="levelItemEnName">
									{{item.enName}}
								</view>
							</view>
							<view class="rightTIp"></view>
						</view>
						<view class="levelRight">
							{{item.pm}}
						</view>
					</view>
					<!-- 左侧详情END -->
					<!-- 名次排行END -->
				</view>
			</view>
			<image class="saidao" :style="{marginRight:(initPaopao.gameState==2)?'170rpx':'-30rpx'}"
				src="../../static/img/ganme01/saidao.png" mode="widthFix"></image>
		</view>
		<!-- 跑道END -->
		<!-- 底部投票 -->
		<view class="bottomBox">
			<!-- 底部标题 -->
			<view class="bottomTitle flex">
				<view class="titleLeft flex">
					<image class="titleRtip" src="../../static/img/ganme01/icongj.png" mode="widthFix"></image>
					<view class="title">
						猜冠军
					</view>
					<view class="tip">
						猜对得1分红积分
					</view>
				</view>
				<view class="titleRight flex">
					<image class="rightIcon" src="../../static/img/ganme01/iconrw.png" mode="widthFix"></image>
					<view class="rightNum">
						{{initPaopao.userNum}}
					</view>
				</view>
			</view>
			<!-- 底部标题END -->
			<!-- 动物列表 -->
			<view class="bottoItemList flex">
				<view v-for="(item,index) in list" class="item flex" @click="checkedItem(item.key)"
					:class="{itemchecked:initPaopao.checked==item.key}">
					<image class="itemIcon" :src="`../../static/img/ganme01/xdw0${index+1}.png`" mode="widthFix">
					</image>
					<view class="nameBox">
						<view class="name">
							{{item.name}}
						</view>
						<view class="nameTip">
							{{item.enName}}
						</view>
					</view>
					<view class="topMoneyTip flex" v-if="item.money>0">
						<image class="topMoneyTipIcon" src="../../static/img/ganme01/icontb.png" mode="widthFix">
						</image>
						<text class="itemMoney">
							{{item.money}}
						</text>
					</view>
				</view>
			</view>
			<!-- 动物列表END -->
			<view class="buttomBox flex">
				<!-- <image class="leftIcon" src="../../static/img/ganme01/iconDj.png" mode="widthFix"></image> -->
				<view class="buttom flex">
					<view class="buttomLeft flex">
						<view>
							<view class="name">
								积分
							</view>
							<view class="num">
								100
							</view>
						</view>
					</view>
					<view class="buttomRight flex">
						<view class="left">
							<view class="tip">
								消耗100积分
							</view>
							<view class="tip">
								中奖后获得1分红积分
							</view>
						</view>
						<view class="right flex" @click="onStart">
							<view class="cont">
							</view>
							<view>
								竞猜
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="backMask" v-if="initPaopao.isClose==true"></view>
		</view>
		<!-- 底部投票END -->
		<ljt :show="initPaopao.phShow" :list='list' @change='phbMask'></ljt>
		<popup :status="initPaopao.winStatus" :money='initPaopao.winMoney' @close='initGame'></popup>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from "../../api/login.js"
	import {
		mapState
	} from "vuex"
	import {
		gameDetail,
		gameSetCu,
		gameGameLast
	} from "../../api/game.js"
	import countdownTime from "./compon/paopao-countdown.vue"
	import ljt from "./compon/paopao-ljt.vue"
	import popup from "./compon/paopao-popup.vue"
	export default {
		components: {
			countdownTime,
			ljt,
			popup,
		},
		computed: {
			...mapState(['urlFile'])
		},
		data() {
			return {
				// 游戏基础数据保存对象
				initPaopao: {
					onBgAnimation: false, //座位席背景动画
					checked: 1, //当前选中的要投票的人物
					game: '', //保存跑步中的游戏对象
					gameState: 0, //判断游戏状态0未开始，1跑步中，2已结束
					marginSt: 630, //开始时右侧距离
					marginEnd: 30, //结束时右侧距离
					sp: 500, //每秒移动距离
					time: 5, //跑步计算间隔时间
					baseTime: 2, //最低移动需要时间
					isClose: true, //倒计时是否关闭
					timeStart: 10086, //下次游戏开始时间
					userNum: 0, //参与当前游戏的用户数
					money: 0, //投注获取积分
					getGameData: '', //获取游戏结果数据定时器
					winXdw: 0, //保存上局胜利的小动物
					winMoney: 0, //保存胜利后获取的积分数
					winStatus: 0, //0不显示1获奖2未获奖
					phShow: false //是否显示排行结果
				},
				heightMath: {
					pageHeight: 0,
					bannerHeight: 0,
					bottomHeight: 0,
					cMathNum: 30,
				},
				pageWidth: 0, //页面宽度
				list: [{
						key: 1,
						name: '猴子',
						enName: 'Monkey',
						onEnd: false, //是否已经跑步结束
						margin: 630, //动物离右侧的距离
						time: 1, //动物移动时动画效果时间
						pm: 0, //排名
						money: 0, //当前所投注的金额
						speed: 1, //小动物跑步速度
						paopao: false, //小动物是否开始跑步
					},
					{
						key: 2,
						name: '老虎',
						enName: 'Tiger',
						onEnd: false,
						margin: 630,
						time: 1,
						pm: 0,
						money: 0,
						speed: 1, //小动物跑步速度
						paopao: false, //小动物是否开始跑步
					},
					{
						key: 3,
						name: '老鼠',
						enName: 'Mouse',
						onEnd: false,
						margin: 630,
						time: 1,
						pm: 0,
						money: 0,
						speed: 1, //小动物跑步速度
						paopao: false, //小动物是否开始跑步
					},
					{
						key: 4,
						name: '龙',
						enName: 'Dragon',
						onEnd: false,
						margin: 630,
						time: 1,
						pm: 0,
						money: 0,
						speed: 1, //小动物跑步速度
						paopao: false, //小动物是否开始跑步
					},
					{
						key: 5,
						name: '马',
						enName: 'Horse',
						onEnd: false,
						margin: 630,
						time: 1,
						pm: 0,
						money: 0,
						speed: 1, //小动物跑步速度
						paopao: false, //小动物是否开始跑步
					},
					{
						key: 6,
						name: '猪',
						enName: 'Pig',
						onEnd: false,
						margin: 630,
						time: 1,
						pm: 0,
						money: 0,
						speed: 1, //小动物跑步速度
						paopao: false, //小动物是否开始跑步
					},
				],
				userinfo: {
					integral: 0
				},
				loadUserData: false, //是否加载过数据
				phList: [] //跑步排行
			};
		},
		onLoad(option) {
			if (option.token) {
				// 保存token；
				uni.setStorageSync('token', option.token)
			}
			// 初始化跑步
			this.init();
		},
		onShow() {
			console.log(this.urlFile);
			// 获取用户数据
			this.getUserInfo();
		},
		onReady: function(option) {
			let that = this;
			setTimeout((e) => {
				uni.createSelectorQuery().select(".topBox").fields({
					size: true,
				}, (e) => {
					that.heightMath.bannerHeight = e.height;
				}).exec();
				uni.createSelectorQuery().select(".bottomBox").fields({
					size: true,
				}, (e) => {
					that.heightMath.bottomHeight = e.height;
				}).exec();
				uni.createSelectorQuery().select(".container").fields({
					size: true,
				}, (e) => {
					that.heightMath.pageHeight = e.height;
					that.pageWidth = e.width;
				}).exec();
			}, 50)
		},
		methods: {
			// 刷新游戏数据
			gameRefresh() {
				// 保证只加载一次游戏数据
				if (this.userinfo.uid && !this.loadUserData) {
					this.loadUserData = true;
					// 获取游戏数据
					this.gameDetail();
				}
			},
			// 测试结束游戏
			// stopGame() {
			// 	// 清除倒计时
			// 	clearInterval(this.initPaopao.getGameData)
			// 	// 保存第一名数据
			// 	this.initPaopao.winXdw = 1
			// 	this.initPaopao.winMoney = 100
			// 	// 结束游戏
			// 	this.onEndGame();
			// },

			// 排行榜遮罩层事件
			phbMask(e) {
				console.log();
				if (e.show == false) {
					console.log("结果");
					if (this.initPaopao.winMoney > 0) {
						this.initPaopao.winStatus = 1
					} else {
						this.initPaopao.winStatus = 2
					}
					console.log("结果", this.initPaopao.winStatus);
				}
			},
			// 定时获取游戏结果
			getGameData() {
				gameGameLast().then((e) => {
					if (e.data.last_open.length > 0) {
						// 清除倒计时
						clearInterval(this.initPaopao.getGameData)
						// 保存第一名数据
						this.initPaopao.winXdw = e.data.last_open[0];
						this.initPaopao.winMoney = e.data.my
						this.phShow = true; //显示排行
						// 结束游戏
						this.onEndGame();
					}
				}).catch((e) => {
					console.log(e);
				})
			},

			// 获取当前进行中的游戏基础数据
			gameDetail() {
				gameDetail().then((e) => {
					try {
						// 下一次场游戏预计开始时间
						this.initPaopao.timeStart = e.data.last_game.time * 1000 + e.data.time_span * 1000 - 1000;
						for (let i = 0; i < this.list.length; i++) {
							this.list[i].winNum = e.data.times[i + 1];
						}
						const data = (new Date()).getTime();
						// 判断是否已经倒计时结束开始游戏
						if (data - this.initPaopao.timeStart < 0) {
							// 显示倒计时弹窗
							this.initPaopao.isClose = false;
						} else {
							// 关闭倒计时弹窗
							this.initPaopao.isClose = true;
							// 游戏开始
							this.startGame()
						}
						// 当前参与游戏的用户数量
						this.initPaopao.userNum = e.data.join_member
						// 保存投的积分
						this.initPaopao.money = +e.data.join_price

						// 保存投注信息
						const join = e.data.join
						for (let i = 0; i < join.length; i++) {
							this.list[join[i].num - 1].money = (+join[i].ticket) * this.initPaopao.money
						}

					} catch (e) {
						console.log(e, '错误');
						//TODO handle the exception
					}

				}).catch((e) => {
					console.log(e);
				})
			},
			// 获取用户信息
			getUserInfo() {
				getUserInfo().then((e) => {
					this.userinfo = e.data;
					this.userinfo.integral = +e.data.integral;
					this.gameRefresh();
				}).catch((e) => {
					console.log(e);
				})
			},
			// 初始化右侧距离
			init() {
				// 初始化右侧距离
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].margin = this.initPaopao.marginSt
				}
			},
			// 结果展示
			// 初始化游戏
			initGame() {
				clearInterval(this.initPaopao.game);
				// 初始化游戏进度
				this.initPaopao.gameState = 0;
				// 初始化获取积分弹窗
				this.initPaopao.winStatus = 0;
				// 初始化获取的资金
				this.initPaopao.winMoney = 0;
				// 初始化允许投注
				this.initPaopao.isClose = false;
				// 初始化获取游戏信息
				this.gameDetail();
				for (var i = 0; i < this.list.length; i++) {
					let item = this.list[i]
					item.onEnd = false;
					item.time = 0;
					item.margin = this.initPaopao.marginSt;
					item.money = 0;
				}
			},
			// 游戏开始
			startGame() {
				// 设置当前游戏状态为跑步中
				this.initPaopao.gameState = 1;
				// 设置背景观众席开始动画
				this.initPaopao.onBgAnimation = true;
				// 游戏倒计时显示隐藏
				this.initPaopao.isClose = true;
				// 开始调用跑步
				this.runGame();
				// 开始调用获取游戏数据
				this.getGameData()
				// 清除倒计时
				clearInterval(this.initPaopao.getGameData)
				// 定时获取游戏数据
				this.initPaopao.getGameData = setInterval(() => {
					this.getGameData()
				}, 20000)
			},
			// 小动物跑步结束后执行方法
			onEndGame() {
				this.endGame().then(() => {
					// 显示排行榜
					this.initPaopao.phShow = true;
					// 复制数组
					const ar = this.list.map((e) => {
						return e
					})
					// 更新列表显示正确的排行榜
					this.$set(this, 'list', ar)
				})
			},
			// 小动物跑步结束
			endGame() {
				return new Promise((ok, erro) => {
					const that = this;
					try {
						clearInterval(that.initPaopao.game);
						// 保存当前第一名
						const one = that.initPaopao.winXdw;
						const Paopao = that.initPaopao;
						for (let i = 0; i < that.list.length; i++) {
							const item = that.list[i]
							// 随机跑步距离
							if (one == item.key) {
								item.margin = Paopao.marginEnd;
								item.time = Paopao.baseTime
							} else {
								// 保障除开第一名外其他动物距离终点比第一名远
								item.margin = Math.floor(Math.random() * 530) + 150;
								item.time = Math.ceil(Math.random() * 3) + Paopao.baseTime;
							}
							// 设置第一名的排名
							if (item.key == one) {
								item.pm = 1
							}
						}
						// 用于保存除开第一名外的当前排名位置
						const arr = that.list.map((e) => {
							return e;
						}).sort((e, b) => {
							return e.margin - b.margin
						}).filter((item, index, arr) => {
							return item.key != one;
						});
						// 保证第一名已跑到头部
						setTimeout(() => {
							// 设置当前游戏已经结束
							Paopao.gameState = 2;
							// 保存多少时间后最后一名到达终点
							let timeEnd = 0
							for (let i = 0; i < that.list.length; i++) {
								const item = that.list[i]
								// 随机跑步距离
								item.onEnd = true;
								item.time = item.margin / 300 * 2;
								// 关闭动物跑步
								setTimeout((e) => {
									item.paopao = false;
								},item.time*1000)
								// 判断是否为最后一名到达终点
								if (timeEnd < item.time) {
									timeEnd = item.time
								}
								// 初始化最初距离
								item.margin = Paopao.marginEnd;
								// 保存每个动物的当前排名
								for (let s = 0; s < arr.length; s++) {
									if (arr[s].key == item.key) {
										item.pm = s + 2
									}
								}
							}
							// 判断最后一个小动物是否跑完
							setTimeout((e) => {
								ok()
							}, timeEnd * 1000 + 1000)
						}, 1500)
					} catch (e) {
						erro(e)
						//TODO handle the exception
					}
				})
			},
			// 游戏跑动中的距离
			runGame() {
				// 计算小动物跑步
				this.randomObj()
				clearInterval(this.initPaopao.game)
				// 循环计算小动物跑步
				this.initPaopao.game = setInterval((e) => {
					this.randomObj()
				}, 5000)
			},
			// 随机小动物跑步及动画时间
			randomObj() {
				for (var i = 0; i < this.list.length; i++) {
					// 保存当前距离，用于计算跑步速度
					const actionMargin = this.list[i].margin;

					// 随机新跑步距离
					this.list[i].margin = Math.floor(Math.random() * 530) + 100;
					this.list[i].paopao = true;
					// 判断是否减速
					if (this.list[i].margin > actionMargin) {
						this.list[i].speed = (this.list[i].margin - actionMargin) / this.list[i].margin + 0.5;
					} else {
						this.list[i].speed = 0.5 - (actionMargin-this.list[i].margin ) / actionMargin*0.5;
					}
					// 随机跑步速度
					this.list[i].time = Math.ceil(Math.random() * 3) + this.initPaopao.baseTime;
				}
			},
			// 选中的要投票的小动物
			checkedItem(ind) {
				this.initPaopao.checked = ind
			},
			// 开始竞猜投票
			onStart() {
				if (this.userinfo.integral - this.initPaopao.money < 0) {
					uni.showModal({
						title: '错误',
						content: '您的积分余额不足无法参与竞猜',
						showCancel: false,
					});
					return
				} else {
					// 增加投注金额
					this.list[this.initPaopao.checked - 1].money += this.initPaopao.money;
					this.userinfo.integral -= this.initPaopao.money;

				}
				// 游戏
				gameSetCu({
					num: this.initPaopao.checked,
					ticket: 1,
				}).then((e) => {
					console.log(e, '返回');
				}).catch((e) => {
					console.log(e);
				})
			}
		}
	};
</script>

<style lang="scss">
	@keyframes bgA {
		from {
			background-position: 0 0;
		}

		to {
			background-position: -1316rpx 0;
		}
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.buttomBox {
		padding-top: 10rpx;

		.leftIcon {
			width: 120rpx;
			margin-right: 20rpx;
		}

		.buttom {
			flex-grow: 1;
			border-radius: 20rpx;
			height: 110rpx;
			font-weight: bold;
			overflow: hidden;

			.buttomLeft {
				background: linear-gradient(0deg, #F5B231, #F5CA31);
				height: 100%;
				justify-content: center;
				min-width: 150rpx;

				.name {
					text-align: center;
					font-size: 24rpx;
				}

				.num {
					font-size: 48rpx;
					text-align: center;
				}
			}

			.buttomRight {
				flex-grow: 1;
				color: #FFFFFF;
				height: 100%;
				padding: 0 20rpx;
				background: linear-gradient(0deg, #E9254E, #F4869D);

				.left {
					font-size: 24rpx;
					line-height: 1.5;
				}

				.cont {
					height: 40rpx;
					width: 2px;
					background-color: #FFFFFF;
					margin-right: 40rpx;
				}

				.right {
					font-size: 60rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.content {
		background: linear-gradient(0deg, #F2977C, #FFCBBC);
		padding-top: 10rpx;
		position: relative;

		.saidao {
			transition: margin-right 1s linear;
			// position: absolute;
			// right: 170rpx;
			// top: 0;
			width: 30rpx;
			z-index: 1;
			margin-top: -660rpx;
			float: right;
			margin-right: 170rpx;
		}

		.listItem {
			.line {
				background: #FFFFFF;
				opacity: 0.6;
				width: 100%;
				height: 10rpx;
			}

			.itemBox {
				height: 100rpx;
				overflow: hidden;
				position: relative;
				z-index: 5;

				.indexItem {
					position: absolute;
					left: 150rpx;
					top: 0;
					height: 100%;
					transition: left 1s linear;

					.leftI {
						width: 4px;
						height: 60rpx;
						background-color: #FFFFFF;
					}

					.LeftInd {
						line-height: 1;
						margin: 0 30rpx;
						color: #FFFFFF;
						font-size: 60rpx;
						font-weight: bold;
					}
				}

				.levelBox {
					padding: 5rpx 50rpx;
					width: 400rpx;
					height: 100rpx;
					float: right;
					margin-right: 100%;
					transition: margin-right 0.3s ease-out;

					&.win {
						background: linear-gradient(90deg, rgba(255, 113, 143, 0), #F5B231, rgba($color: #F5CA31, $alpha: 0.72), rgba(255, 113, 143, 0));
					}

					&.noWin {
						background: linear-gradient(90deg, rgba(255, 113, 143, 0), #FF718F, rgba(255, 113, 143, 0.72), rgba(255, 113, 143, 0));
					}

					.levelLeft {
						align-items: stretch;
						height: 90rpx;

						.imgAvBox {
							border: 2px solid #FFFFFF;
							border-radius: 999rpx;
							padding: 10rpx;
							z-index: 1;

							&.win {
								background-color: rgba($color: #F5CA31, $alpha: 1);
							}

							&.noWin {
								background-color: rgba(255, 113, 143, 1);
							}

							.imgAv {
								width: 70rpx;
							}
						}

						.rightTIp {
							height: 100%;
							border-bottom: 90rpx solid #FFFFFF;
							border-right: 45rpx solid rgba($color: #FFFFFF, $alpha: 0);
						}

						.levelContent {
							width: 150rpx;
							margin-left: -45rpx;
							align-self: stretch;
							height: 100%;
							background-color: #FFFFFF;
							color: #7B3C0E;
							font-weight: bold;

							.levelItemName {
								padding-left: 45rpx;
								font-size: 28rpx;
								line-height: 50rpx;

								&.win {
									background: linear-gradient(90deg, rgba($color: #F5CA31, $alpha: 0.72), rgba(255, 113, 143, 0));
								}

								&.noWin {
									background: linear-gradient(90deg, rgba(255, 113, 143, 0.72), rgba(255, 113, 143, 0));
								}
							}

							.levelItemEnName {
								padding-left: 45rpx;
								font-size: 20rpx;
								line-height: 1.5;
							}
						}
					}

					.levelRight {
						font-size: 60rpx;
						font-weight: bold;
						color: #FFFFFF;
						text-shadow: 0px 3rpx 7rpx rgba(0, 0, 0, 0.52);
					}
				}

				.rightImgAv {
					transition: margin-right 1s linear;
					margin-right: 50rpx;
					margin-left: 60rpx;
					float: right;
					height: 100%;
					z-index: 1;

					.imgAv {
						width: 90rpx;
					}

					.amdImg {
						width: 60px;
						height: 60px;
						background-size: auto 60px;
						animation-name: paopao;
						animation-duration: 1s;
						animation-timing-function: steps(13);
						animation-iteration-count: infinite;
						animation-play-state: paused;
					}
				}
			}
		}
	}

	.bottomBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-image: url(../../static/img/ganme01/bottomBg.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-color: #F2977C;
		color: #7B3C0E;
		font-weight: bold;
		line-height: 1;
		padding: 0 20rpx;
		padding-bottom: 30rpx;
		z-index: 99;

		.backMask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba($color: #000000, $alpha: 0.3);
		}

		.bottomTitle {
			padding: 30rpx 5rpx;

			.titleLeft {
				.titleRtip {
					width: 60rpx;
					margin-right: 10rpx;
				}

				.title {
					font-size: 38rpx;
					margin-right: 10rpx;
				}

				.tip {
					font-size: 28rpx;
				}
			}

			.titleRight {
				.rightIcon {
					width: 30rpx;
					margin-right: 5rpx;
				}

				.rightNum {
					font-size: 35rpx;
				}
			}
		}

		.bottoItemList {
			flex-wrap: wrap;

			.item {
				width: 225rpx;
				height: 110rpx;
				border: 3px solid #FFFFFF;
				border-radius: 15rpx;
				padding: 0 10rpx;
				margin-bottom: 20rpx;
				position: relative;

				&.itemchecked {
					border-color: #FF2553;
				}

				.itemIcon {
					width: 90rpx;
				}

				.nameBox {
					.name {
						font-size: 28rpx;
					}

					.nameTip {
						font-size: 20rpx;
					}
				}

				.topMoneyTip {
					padding: 0 15rpx;
					border-radius: 50rpx;
					position: absolute;
					top: -15rpx;
					height: 35rpx;
					right: 20rpx;
					background-color: $color-red;

					.topMoneyTipIcon {
						width: 24rpx;
						margin-right: 10rpx;
					}

					.itemMoney {
						color: $font-color-white;
						font-size: 24rpx;
						line-height: 1;
					}
				}
			}
		}
	}

	.container {
		line-height: 1;
		background-color: #F2977C;

		.userBg {
			z-index: 60;
			position: relative;
			margin-top: -50rpx;
			height: 130rpx;
			background-image: url(../../static/img/ganme01/pp.png);
			background-size: auto 130rpx;
			background-repeat: repeat-x;
			animation: bgA 8s infinite linear;
			animation-play-state: paused;
		}

		.topBox {
			position: relative;
			line-height: 0;

			.topImgBg {
				width: 750rpx;
			}

			.leftGz {
				width: 1.8rem;
				line-height: 1.3;
				background: #FFFFFF;
				opacity: 0.8;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				position: absolute;
				left: 0;
				bottom: 10rpx;
				color: $font-color;
				padding: 20rpx 10rpx;
			}

			.moneyIcon,
			.jlBox {
				height: 50rpx;
				line-height: 1;
				// min-width: 180rpx;
				border-radius: 50rpx 0px 0px 50rpx;
				padding: 0 20rpx;
				position: absolute;
				background-color: #7B3C0E;
				right: 0;

				.icon {
					width: 30rpx;
					margin-right: 10rpx;
					height: 30rpx;
				}
			}

			.moneyIcon {
				color: $font-color;
				background: #FAF9F4;
				opacity: 0.8;
				bottom: 80rpx;
			}

			.jlBox {
				color: #FFFFFF;
				bottom: 10rpx;
			}
		}

	}

	@keyframes paopao {
		100% {
			// background-position: -585px;
			background-position: -780px;
		}
	}
</style>