2024-7-8

pages/game/index.vue

@@ -1,6 +1,39 @@
 <template>
-	<view>
+	<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>
 
@@ -8,7 +41,8 @@
 	export default {
 		data() {
 			return {
-				
+				// 图片数量
+				imgNum:4
 			}
 		},
 		methods: {
@@ -17,6 +51,90 @@
 	}
 </script>
 
-<style>
-
+<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>

pages/user/ship.vue

@@ -19,7 +19,7 @@
 				<view class="item flex" @click="item.hide=false">
 					<view class="itemLeft">
 						<view class="name flex-start">
-							<image class="nameTip margin-r-10" src="../../static/user/ship/star.png" mode="scaleToFill">
+							<image class="nameTip margin-r-10" src="../../static/user/star.png" mode="scaleToFill">
 							</image>
 							<text>
 								体验飞船
@@ -348,7 +348,7 @@
 			}
 			.item {
 				padding: 10rpx;
-				background-image: url("../../static/user/ship/listbg.png");
+				background-image: url("../../static/user/listbg.png");
 				background-size: 100% 100%;
 				color: #FFFFFF;
 				font-weight: bold;