xc/pages/game/index.vue

<template>
	<view class="game">
		<view class="backImg">
			<navigator url="/pages/index/happly" open-type="reLaunch">
			<image class="back" src="../../static/icon/fanhui.png" mode=""></image>
			</navigator>
		</view>
		<scroll-view scroll-y="true" class="scroll" >
			<view class="centerBox flex position-relative">
				<view class="centerItem">
					<view class="gameList position-relative" v-for="(item,index) in imgNum">
						<image class="gameImgBg" :src="`../../static/game/juedou/game${(2*index+1)}.png`" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="tipImgBox">
					<view class="conentTipImg" :style="{
						top:`${(index)*276+106}rpx`
					}" v-for="(item,index) in imgNum">
						
					</view>
				</view>
				<view class="centerItem">
					<view class="gameList position-relative" v-for="(item,index) in imgNum">
						<image class="gameImgBg" :src="`../../static/game/juedou/game${(2*index+2)}.png`" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="footer flex">
			<image class="leftImg" src="../../static/game/juedou/footerLeft.png" mode="scaleToFill"></image>
			<view class="footerCenter">
				
			</view>
			<image class="rightImg" src="../../static/game/juedou/footerRight.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 图片数量
				imgNum:4
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.game{
		min-height: 100vh;
		background-color: rgb(80, 49, 47);
		// padding-top: calc(var(--status-bar-height) + 500rpx);
	}
	.backImg{
		padding: 40rpx 0rpx 0 30rpx;
		background-image: url("../../static/game/juedou/gameBanner.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		height: 398rpx;
		.back{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.centerBox{
		flex-wrap: wrap;
		margin: 0 26rpx;
		background-color:rgb(59, 33, 33);
		padding: 0 18rpx;
		.tipImgBox{
			.conentTipImg{
				background-color: rgb(159,81,53);
				// border: 1px solid #FFF;
				width: 50rpx;
				height: 50rpx;
				border-radius: 14rpx;
				transform:rotateX(30deg) rotateZ(45deg) ;
				position: absolute;
				left: 324rpx;
			}
		}
		
		.centerItem{
			line-height: 0;
			padding: 20rpx 18rpx 0rpx 18rpx;
			box-shadow:inset 0px -5px 10px 3px rgba(106,41,25, 1) ;
			&:nth-child(1){
				padding-right: 30rpx;
			}
			&:nth-child(3){
				padding-left: 30rpx;
			}
			.gameList{
				border: 2px solid rgba(127,71,36, .7);
				border-radius: 10rpx;
				overflow: hidden;
				margin-bottom: 40rpx;
				.gameImgBg{
					width:267rpx ;
					height: 226rpx;
				}
			}
		}
	}
	.scroll{
		height: calc(100vh - 170rpx - 398rpx);
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 170rpx;
		background-image: url("../../static/game/juedou/gameBottom.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		padding: 0 30rpx;
		.footerCenter{
			background-image: url("../../static/game/juedou/touru.png");
			background-repeat: no-repeat;
			background-size: 100% auto;
			height:114rpx ;
			width: 260rpx;
		}
		.leftImg{
			width: 78rpx;
			height: 104rpx;
		}
		.rightImg{
			width: 82rpx;
			height: 106rpx;
		}
	}
</style>