2024-7-9

pages.json

@@ -7,7 +7,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"enablePullDownRefresh": true,
+				// "enablePullDownRefresh": true,
 				// #ifdef MP
 				"navigationStyle": "custom",
 				// #endif
@@ -19,10 +19,25 @@
 				"navigationBarTitleText": "星辰"
 			}
 		},
+		{
+			"path": "pages/index/game",
+			"style": {
+				// "enablePullDownRefresh": true,
+				// #ifdef MP
+				"navigationStyle": "custom",
+				// #endif
+				// #ifndef MP
+				"app-plus": {
+					"titleNView": false
+				},
+				// #endif
+				"navigationBarTitleText": "盲盒"
+			}
+		},
 		{
 			"path": "pages/index/happly",
 			"style": {
-				"enablePullDownRefresh": true,
+				// "enablePullDownRefresh": true,
 				// #ifdef MP
 				"navigationStyle": "custom",
 				// #endif
@@ -31,7 +46,7 @@
 					"titleNView": false
 				},
 				// #endif
-				"navigationBarTitleText": "星辰"
+				"navigationBarTitleText": "娱乐"
 			}
 		},
 		{

pages/index/game.vue

@@ -1,8 +1,194 @@
 <template>
+	<view class="page">
+		<view class="item item-white-bg position-relative">
+			<view class="title flex">
+				<image class="next" src="../../static/index/game/titlenext.png" mode=""></image>
+				<view class="name">
+				盲盒详情
+				</view>
+				<image class="next tar" src="../../static/index/game/titlenext.png" mode=""></image>
+			</view>
+			<view class="tip-text">
+				限量发售 售完为止
+			</view>
+			<view class="type flex">
+				<view class="typeitem">
+					<text>发售价格：</text>
+					<text class="text">21U</text>
+				</view>
+				<view class="typeitem">
+					<text>发售总量：</text>
+					<text class="text">1222个</text>
+				</view>
+			</view>
+			<view class="type flex">
+				<view class="typeitem">
+					<text>探索周期：</text>
+					<text class="text">45天</text>
+				</view>
+				<view class="typeitem">
+					<text>每日产出：</text>
+					<text class="text">5个矿石</text>
+				</view>
+			</view>
+			<view class="buttom">
+				立即购买
+			</view>
+			<image class="tipImgRadius tiptop tipleft"  src="../../static/index/game/tipimg.png" mode="scaleToFill"></image>
+			<image class="tipImgRadius tiptop tipright"  src="../../static/index/game/tipimg.png" mode="scaleToFill"></image>
+			<image class="tipImgRadius tipbottom tipleft"  src="../../static/index/game/tipimg.png" mode="scaleToFill"></image>
+			<image class="tipImgRadius tipbottom tipright"  src="../../static/index/game/tipimg.png" mode="scaleToFill"></image>
+		</view>
+		<view class="item-white-bg flex mygame">
+			<view class="left flex">
+				<image class="tipimg" src="../../static/index/game/mhtip.png" mode="scaleToFill"></image>
+				<view class="tiptext">
+					我的盲盒
+				</view>
+			</view>
+			<view class="right flex">
+				<view class="nextright text-linear-gradient">
+					查看详情
+				</view>
+				<image class="nextimg" src="../../static/index/game/opennext.png" mode="scaleToFill"></image>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-</script>
+	export default {
+		data() {
+			return {
+
+			};
+		},
+		onLoad(options) {
 
-<style>
+		},
+		onShow() {},
+		methods: {
+
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	.page {
+		min-height: calc(100vh - var(--window-bottom));
+		background-image: url("../../static/index/game/pageBg.png");
+		background-repeat: no-repeat;
+		background-size: 100% auto;
+		padding-top: 1050rpx;
+		line-height: 1;
+		background-color: rgba(2, 8,43, 1);
+		padding-bottom: 30rpx;
+	}
+	.item-white-bg{
+		border-radius: 30rpx;
+		border: 2px solid #FFF;
+		box-shadow:inset 0 5rpx 1px 0px rgba(100, 35, 192, .5);
+		background-image: linear-gradient(#f6f0ff, #d2bfef);
+	}
+	.item{
+		margin: 0 50rpx 30rpx 50rpx;
+		padding: 40rpx;
+		padding-bottom: 60rpx;
+		.tipImgRadius{
+			width: 20rpx;
+			height: 20rpx;
+			position: absolute;
+			&.tiptop{
+				top: 20rpx;
+			}
+			&.tipleft{
+				left: 20rpx;
+			}
+			&.tipbottom{
+				bottom: 20rpx;
+			}
+			&.tipright{
+				right: 20rpx;
+			}
+		}
+		.title{
+			justify-content: center;
+			color: #FFF;
+			font-size: 40rpx;
+			font-weight: bold;
+			border-radius: 100rpx;
+			padding: 20rpx 0;
+			line-height: 1;
+			background-image: linear-gradient(to right,rgba(138,97,194,1), #2c324e);
+			box-shadow:inset 0 5rpx 10rpx 1px rgba(255, 255,255, .6);
+			margin: 0 40rpx;
+			margin-top: -80rpx;
+			.name{
+				padding: 0 30rpx;
+			}
+			.next{
+				height: 26rpx;
+				width: 60rpx;
+				&.tar{
+					transform: rotate(180deg);
+				}
+			}
+		}
+		.tip-text{
+			text-align: center;
+			font-weight: bold;
+			font-size: 34rpx;
+			color: #1C1C36;
+			padding: 40rpx 0;
+		}
+		.type{
+			padding: 0 20rpx;
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #1C1C36;
+			padding-bottom: 30rpx;
+			.typeitem{
+				width: 50%;
+				.text{
+					color: #5E379E;
+				}
+			}
+		}
+		.buttom{
+			margin-top: 20rpx;
+			border-radius: 20rpx;
+			text-align: center;
+			padding: 20rpx;
+			font-weight: 500;
+			font-size: 31rpx;
+			color: #FFFFFF;
+			background-image: linear-gradient(#533492, #7b40bf);
+		}
+	}
+	.mygame{
+		margin: 0 50rpx;
+		padding: 20rpx 40rpx;
+		.left{
+			.tipimg{
+				width: 65rpx;
+				height: 60rpx;
+			}
+			.tiptext{
+				padding-left: 10rpx;
+				font-weight: bold;
+				font-size: 34rpx;
+				color: #1C1C36;
+			}
+		}
+		.right{
+			.nextright{
+				font-weight: 400;
+				font-size: 25rpx;
+				margin-right: 10rpx;
+			}
+			.nextimg{
+				width: 10rpx;
+				height: 19rpx;
+			}
+		}
+	}
 </style>

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 首页 -->
 	<view class="page">
-		<image class="topBanner" src="../../static/index/topBanner.png" mode="scaleToFill"></image>
+		<image class="topBanner" src="../../static/index/index/topBanner.png" mode="scaleToFill"></image>
 		<view class="content-list">
 			<view class="item">
 				<view class="flex item-user">
@@ -15,7 +15,7 @@
 							</view>
 							<view class="user-money flex">
 								<view class="tipImg">
-									<image class="vipTip" src="../../static/index/icon01.png" mode="scaleToFill">
+									<image class="vipTip" src="../../static/index/index/icon01.png" mode="scaleToFill">
 									</image>
 								</view>
 								<view class="money">
@@ -25,24 +25,24 @@
 						</view>
 					</view>
 					<view class="item-rigt-user">
-						<image class="item-right-vip" src="../../static/index/vip.png" mode="scaleToFill"></image>
+						<image class="item-right-vip" src="../../static/index/index/vip.png" mode="scaleToFill"></image>
 					</view>
 				</view>
 				<view class="item-user-model flex">
 					<view class="model">
-						<image class="model-image model1" src="../../static/index/model1.png" mode="scaleToFill"></image>
+						<image class="model-image model1" src="../../static/index/index/model1.png" mode="scaleToFill"></image>
 						<view class="model-name">
 							能量
 						</view>
 					</view>
 					<view class="model">
-						<image class="model-image model2" src="../../static/index/model2.png" mode="scaleToFill"></image>
+						<image class="model-image model2" src="../../static/index/index/model2.png" mode="scaleToFill"></image>
 						<view class="model-name">
 							飞船
 						</view>
 					</view>
 					<view class="model">
-						<image class="model-image model3" src="../../static/index/model3.png" mode="scaleToFill"></image>
+						<image class="model-image model3" src="../../static/index/index/model3.png" mode="scaleToFill"></image>
 						<view class="model-name">
 							好友
 						</view>
@@ -51,10 +51,10 @@
 
 				<view class="flex function-type">
 					<view class="function-block">
-						<image class="type1" src="../../static/index/type2.png" mode=""></image>
+						<image class="type1" src="../../static/index/index/type2.png" mode=""></image>
 					</view>
 					<view class="function-block">
-						<image class="type2" src="../../static/index/type1.png" mode=""></image>
+						<image class="type2" src="../../static/index/index/type1.png" mode=""></image>
 					</view>
 				</view>
 
@@ -83,6 +83,7 @@
 	.page {
 		background-image: linear-gradient(#5d34ff, #e0d8ff);
 		min-height: calc(100vh - var(--window-bottom));
+		padding-bottom: 30rpx;
 	}
 
 	.topBanner {

static/css/cmy.css

@@ -549,3 +549,22 @@
 .position-relative {
 	position: relative;
 }
+
+.background-linear-gradient{
+	border-bottom: 1px solid transparent;
+	background-clip: padding-box, border-box;
+	background-origin: padding-box, border-box;
+	background-image: linear-gradient(270deg, #0C0815, #24212B), linear-gradient(to right, #36323D, rgba(33, 30, 42, .3));
+}
+.text-linear-gradient{
+	background: linear-gradient(to right, #7B40BF 100% 0%, #533492 100%);
+	background-clip: text;
+	color: rgba(0, 0, 0, 0);
+}
+
+.border-linear-gradient{
+	border: 2px solid transparent;
+	background-clip: padding-box, border-box;
+	background-origin: padding-box, border-box;
+	background-image: linear-gradient(to right, rgb(12, 8, 21), rgb(12, 8, 21)), linear-gradient(90deg, #8F41E9, #578AEF);
+}