paopao/pages/index/index.vue

<template>
	<view class="container">
		<!-- 头部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>55555</text>
			</view>
			<view class="jlBox flex">
				<image class="icon" src="../../static/img/ganme01/iconjlu.png" mode="scaleToFill"></image>
				<text>
					记录>
				</text>
			</view>
		</view>
		<!-- 头部bannerEnd -->
		<view class="content" :style="{height:contentHeight+'px'}">
			<view class="listItem" v-for="(item,index) in list">
				<view class="line" v-if="index>0"></view>
				<view class="itemBox">
					<!-- 名次排行 -->
					<!-- 右侧头像 -->
					<view class="rightImgAv flex">
						<image class="imgAv" :src="`../../static/img/ganme01/xdw0${index+1}.png`" mode="widthFix">
						</image>
					</view>
					<!-- 右侧头像END -->
					<!-- 左侧详情 -->
					<view class="levelBox flex" :class="{noWin:index!=winIndex,win:index==winIndex}" :style="{marginRight:item.onEnd?0:''}">
						<view class="levelLeft flex">
							<view class="imgAvBox flex" :class="{noWin:index!=winIndex,win:index==winIndex}">
								<image class="imgAv" :src="`../../static/img/ganme01/xdw0${index+1}.png`"
									mode="widthFix">
								</image>
							</view>
							<view class="levelContent">
								<view class="levelItemName" :class="{noWin:index!=winIndex,win:index==winIndex}">
									{{item.name}}
								</view>
								<view class="levelItemEnName">
									{{item.enName}}
								</view>
							</view>
							<view class="rightTIp">

							</view>
						</view>
						<view class="levelRight">
							{{index}}
						</view>
					</view>
					<!-- 左侧详情END -->
					<!-- 名次排行END -->
				</view>
			</view>
			<image class="saidao" v-if="gameStart" src="../../static/img/ganme01/saidao.png" mode="widthFix"></image>
		</view>
		<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">
						猜对得5倍积分
					</view>
				</view>
				<view class="titleRight flex">
					<image class="rightIcon" src="../../static/img/ganme01/iconrw.png" mode="widthFix"></image>
					<view class="rightNum">
						12
					</view>
				</view>
			</view>
			<!-- 底部标题END -->
			<!-- 动物列表 -->
			<view class="bottoItemList flex">
				<view v-for="(item,index) in list" class="item flex" @click="checkedItem(item.key)"
					:class="{itemchecked: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>
			</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">
								10
							</view>
						</view>
					</view>
					<view class="buttomRight flex">
						<view class="left">
							<view class="tip">
								消耗10积分
							</view>
							<view class="tip">
								才对可得50积分
							</view>
						</view>

						<view class="right flex" @click="onStart">
							<view class="cont">
							</view>
							<view>
								竞猜
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			contentHeight() {
				return this.heightMath.pageHeight - this.heightMath.bottomHeight - this.heightMath.bannerHeight + this
					.heightMath.cMathNum / this.pageWidth * 750
			}
		},
		data() {
			return {
				gameStart: false, //判断游戏是否结束
				winIndex: 0, //当前游戏排名第一的人
				checked: 1, //当前选中的要投票的人物
				heightMath: {
					pageHeight: 0,
					bannerHeight: 0,
					bottomHeight: 0,
					cMathNum: 30,
				},
				pageWidth: 0,
				list: [{
						key: 1,
						name: '小老虎',
						enName: 'Tiger',
						onEnd:false,
					},
					{
						key: 2,
						name: '大熊猫',
						enName: 'Panda',
						onEnd:false,
					},
					{
						key: 3,
						name: '小柴犬',
						enName: 'Shiba Inu',
						onEnd:false,
					},
					{
						key: 4,
						name: '小兔子',
						enName: 'Rabbit',
						onEnd:false,
					},
					{
						key: 5,
						name: '小鸭子',
						enName: 'Duck',
						onEnd:false,
					},
					{
						key: 6,
						name: '大棕熊',
						enName: 'Bear',
						onEnd:false,
					},
				]
			};
		},
		onReady: function(option) {
			console.log('渲染完毕');
			let that = this;
			setTimeout((e) => {
				uni.createSelectorQuery().select(".topBox").fields({
					size: true,
				}, (e) => {
					that.heightMath.bannerHeight = e.height;
					console.log(e, '返回结果')
				}).exec();
				uni.createSelectorQuery().select(".bottomBox").fields({
					size: true,
				}, (e) => {
					that.heightMath.bottomHeight = e.height;
					console.log(e, '返回结果2')
				}).exec();
				uni.createSelectorQuery().select(".container").fields({
					size: true,
				}, (e) => {
					that.heightMath.pageHeight = e.height;
					that.pageWidth = e.width;
					console.log(e, '返回结果3')
				}).exec();
			}, 50)
		},

		onShow: function() {



		},
		methods: {
			// 选中的要投票的小动物
			checkedItem(ind) {
				this.checked = ind
			},
			// 开始竞猜
			onStart(){
				this.gameStart = true;
				const num = Math.floor(Math.random()*6);
				this.list[num].onEnd = true;
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 0;
		min-height: 100%;
	}

	.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 {
					font-size: 24rpx;
				}

				.num {
					font-size: 48rpx;
				}
			}

			.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 {
			position: absolute;
			right: 170rpx;
			top: 0;
			width: 30rpx;
		}
		.listItem {
			.line {
				background: #FFFFFF;
				opacity: 0.6;
				width: 100%;
				height: 10rpx;
			}

			.itemBox {
				height: 100rpx;
				overflow: hidden;
				.levelBox {
					padding: 5rpx 50rpx;
					width: 400rpx;
					height: 100rpx;
					float: right;
					margin-right: 100%;
					transition:all 1s 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 {
					margin-right: 50rpx;
					margin-left: 60rpx;
					float: right;
					height: 100%;
					.imgAv {
						width: 90rpx;
					}
				}
			}
		}
	}

	.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;

		.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;

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

				.itemIcon {
					width: 90rpx;
				}

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

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

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

		.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 {
				line-height: 1;
				min-width: 180rpx;
				border-radius: 50rpx 0px 0px 50rpx;
				padding: 10rpx 20rpx;
				position: absolute;
				background-color: #7B3C0E;
				right: 0;

				.icon {
					width: 30rpx;
					height: 30rpx;
				}
			}

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

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

	}
</style>