2024-7-9

pages.json

@@ -44,12 +44,10 @@
 			}
 		}
 	],
-	"subPackages": [
-		{
+	"subPackages": [{
 			"root": "pages/set",
 			"name": "set",
-			"pages": [
-				{
+			"pages": [{
 					"path": "phone",
 					"style": {
 						"navigationBarTitleText": "绑定手机"
@@ -72,8 +70,7 @@
 		{
 			"root": "pages/public",
 			"name": "public",
-			"pages": [
-				{
+			"pages": [{
 					"path": "forget",
 					"style": {
 						"navigationBarTitleText": "忘记密码",
@@ -121,14 +118,12 @@
 		{
 			"root": "pages/user",
 			"name": "user",
-			"pages": [
-				{
-					"path": "about",
-					"style": {
-						"navigationBarTitleText": "隐私协议"
-					}
+			"pages": [{
+				"path": "about",
+				"style": {
+					"navigationBarTitleText": "隐私协议"
 				}
-			]
+			}]
 		}
 	],
 	"globalStyle": {
@@ -145,6 +140,11 @@
 		"backgroundColor": "#ffffff",
 		"list": [{
 				"pagePath": "pages/index/index",
+				"iconPath": "static/tabBar/tab-00.png",
+				"selectedIconPath": "static/tabBar/tab-00-current.png",
+				"text": "首页"
+			}, {
+				"pagePath": "pages/index/game",
 				"iconPath": "static/tabBar/tab-01.png",
 				"selectedIconPath": "static/tabBar/tab-01-current.png",
 				"text": "盲盒"

pages/index/game.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/index/happly.vue

@@ -20,33 +20,41 @@
 			</view>
 		</view>
 		<view class="navModel">
-			<view class="bgBox ">
+			<view class="bg">
+				
+			<view class="bgBox " v-for="item in 23">
 				<view class="line1 flex">
-					<view class="minImg">
-						
+					<view class="minImg" v-for="item in 30">
+
 					</view>
 				</view>
 				<view class="line2 flex">
-					<view class="minImg">
-						
+					<view class="minImg" v-for="item in 30">
+
 					</view>
 				</view>
 			</view>
-			<view class="conetntText">
-				航行中发现星球
+			<view class="bgO">
+				
 			</view>
-			<view class="modelBox flex">
-				<view class="model">
-					<image class="modelImg1" src="../../static/index/happly/model1.png" mode="scaleToFill"></image>
-				</view>
-				<view class="model">
-					<image class="modelImg2" src="../../static/index/happly/model2.png" mode="scaleToFill"></image>
-				</view>
-				<view class="model">
-					<image class="modelImg3" src="../../static/index/happly/model3.png" mode="scaleToFill"></image>
+			</view>
+			<view class="navModelContent">
+				<view class="conetntText">
+					航行中发现星球
 				</view>
-				<view class="model">
-					<image class="modelImg4" src="../../static/index/happly/model4.png" mode="scaleToFill"></image>
+				<view class="modelBox flex">
+					<view class="model">
+						<image class="modelImg1" src="../../static/index/happly/model1.png" mode="scaleToFill"></image>
+					</view>
+					<view class="model">
+						<image class="modelImg2" src="../../static/index/happly/model2.png" mode="scaleToFill"></image>
+					</view>
+					<view class="model">
+						<image class="modelImg3" src="../../static/index/happly/model3.png" mode="scaleToFill"></image>
+					</view>
+					<view class="model">
+						<image class="modelImg4" src="../../static/index/happly/model4.png" mode="scaleToFill"></image>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -74,13 +82,14 @@
 	.page {
 		min-height: calc(100vh - var(--window-bottom));
 		background-image: url("../../static/index/happly/happlyTop.png");
+		background-repeat: no-repeat;
 		background-size: 100% auto;
-		background-color: #090705;
+		background-color: rgb(16, 16, 16);
 	}
 
 	.conetntNumBox {
 		color: rgb(72, 72, 72);
-		padding: 570rpx 0 130rpx 110rpx;
+		padding: 570rpx 0 110rpx 110rpx;
 		font-weight: bold;
 	}
 
@@ -109,53 +118,89 @@
 	}
 
 	.navModel {
-		background-color: rgb(20, 20, 20);
+		background-color: rgb(16, 16, 16);
 		padding: 30rpx 10rpx 50rpx 25rpx;
 		position: relative;
-		.conetntText{
-			text-align: center;
-			font-weight: 800;
-			font-size: 33rpx;
-			color: #5A5A5A;
-			padding-bottom: 50rpx;
-		}
-		.bgBox{
-			.minImg{
-				width: 4px;
-				height: 4px;
-				transform:rotate(0.5turn);
-				background-color: rgba(36, 36, 36, 1);
+		.bg{
+			position: relative;
+			.bgO{
+				position: relative;
+				margin-top: -630rpx;
+				height: 610rpx;
+				width: 700rpx;
+				border-radius: 100%;
+				background-color:rgb(20, 20, 20) ;
 			}
-		}
-		.modelBox{
-			flex-wrap: wrap;
-			align-items: flex-end;
-			.model {
-				&:nth-child(2) {
-					padding-right: 10rpx;
-				}
-			
-				.modelImg1 {
-					width: 337rpx;
-					height: 229rpx;
-				}
+			.bgBox {
+				padding-right: 20rpx;
 			
-				.modelImg2 {
-					width: 351rpx;
-					height: 205rpx;
+				.line1 {
+					padding-right: 12rpx;
+					padding-bottom: 6rpx;
 				}
 			
-				.modelImg3 {
-					width: 358rpx;
-					height: 202rpx;
+				.line2 {
+					padding-left: 12rpx;
+					padding-bottom: 6rpx;
 				}
 			
-				.modelImg4 {
-					width: 356rpx;
-					height: 201rpx;
+				.minImg {
+					width: 4px;
+					height: 4px;
+					transform: rotate(45deg);
+					background-color: rgba(36, 36, 36, 1);
 				}
 			}
 		}
+
 		
+
+		.navModelContent {
+			position: absolute;
+			top: 50rpx;
+			left: 25rpx;
+			right: 10rpx;
+			bottom: 50rpx;
+
+			.conetntText {
+				text-align: center;
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #5A5A5A;
+				padding-bottom: 50rpx;
+				padding-top: 15rpx;
+			}
+
+			.modelBox {
+				flex-wrap: wrap;
+				align-items: flex-end;
+
+				.model {
+					&:nth-child(2) {
+						padding-right: 10rpx;
+					}
+
+					.modelImg1 {
+						width: 337rpx;
+						height: 229rpx;
+					}
+
+					.modelImg2 {
+						width: 351rpx;
+						height: 205rpx;
+					}
+
+					.modelImg3 {
+						width: 358rpx;
+						height: 202rpx;
+					}
+
+					.modelImg4 {
+						width: 356rpx;
+						height: 201rpx;
+					}
+				}
+			}
+		}
 	}
 </style>