美化登录页和引导页

package-lock.json

@@ -1,16 +1,24 @@
 {
+  "name": "MiniPrograms",
+  "lockfileVersion": 2,
   "requires": true,
-  "lockfileVersion": 1,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@escook/request-miniprogram": "^0.2.1"
+      }
+    },
+    "node_modules/@escook/request-miniprogram": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
+      "integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ=="
+    }
+  },
   "dependencies": {
     "@escook/request-miniprogram": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
       "integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ=="
-    },
-    "crypto-js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
-      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     }
   }
 }

pages.json

@@ -54,7 +54,8 @@
 				"path": "guide/guide",
 				"style": {
 					"enablePullDownRefresh": false,
-					"navigationStyle": "custom"
+					"navigationStyle": "custom",
+					"disableScroll": true
 				}
 			}
 		]

subpkg/guide/guide.vue

@@ -3,7 +3,7 @@
 		<!-- 标题 -->
 		<view class="tips">
 			<view class="title">选择您的孩子</view>
-			<button class="detail" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-show="!show">点击获取您的孩子信息</button>
+			<button class="detail" plain="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-show="!show">点击获取您的孩子信息</button>
 		</view>
 		
 		<!-- 孩子选择界面 -->
@@ -17,7 +17,8 @@
 				</view>
 			</view>
 		</view>
-		
+		<!-- 动画 -->
+		<view class="ocean"></view>
 	</view>
 </template>
 
@@ -52,27 +53,6 @@
 				})
 			},
 			
-			// //获取用户信息事件
-			// async getUserInfo() {
-			// 	console.log(uni.getStorageSync('parentinfo'));
-			// 	  if (!uni.getStorageSync('parentinfo')) {
-			// 		await uni.getUserProfile({
-			// 			desc: '获取您的基本信息',
-			// 			success: infoRes => {
-			// 				 if (infoRes.errMsg === 'getUserProfile:ok') {
-			// 					this.updateParentInfo(infoRes.userInfo)
-			// 					this.show = true
-			// 				  } else {
-			// 					uni.$showMsg('获取不到您的基本信息!')
-			// 				  }
-			// 			 },
-			// 			fail: err => {
-			// 				console.log('getUserInfo-error', JSON.stringify(err))
-			// 			}
-			// 		});
-			// 	 }
-			// },
-			
 			//判断用户基本信息是否存在
 			hasParentInfo(){
 				if(uni.getStorageSync('parentdetail'))
@@ -112,22 +92,34 @@
 		
 		.tips {
 			width: 100%;
-			padding-top: 180rpx;
-			padding-left: 80rpx;
 			display: flex;
 			flex-direction: column;
-			margin-bottom: 80rpx;
+			z-index: 99;
 		
 			.title {
+				padding-top: 180rpx;
+				padding-left: 40rpx;
 				line-height: 70rpx;
+				margin-bottom: 60rpx;
 				font-weight: bold;
-				font-size: 50rpx;
+				font-size: 60rpx;
+				color: #4169E1;
+				background-image: linear-gradient(to right, #506AE7, #87CEFA);
+				background-clip: text;//裁剪成文字的前景色
+				color: transparent;//文字颜色变成透明
+				text-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.05);
 			}
 			.detail{
-				line-height: 70rpx;
+				line-height: 100rpx;
 				font-weight: bold;
-				font-size: 50rpx;
-				margin-top: 100rpx;
+				font-size: 45rpx;
+				border-radius: 200rpx;
+				position: relative;
+				margin: 180rpx auto;//relative相对定位居中
+				border: none;
+				color: #FFFFFF;
+				background: linear-gradient(to right, #506AE7, #87CEFA);
+				box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
 			}
 		}
 		.children-item{
@@ -137,26 +129,29 @@
 				justify-content: center;
 				align-items: center;
 				flex-wrap: wrap;//元素换行
+
 				
 				.item{
-					margin: 10px;
-					padding: 10px;
+					margin: 10rpx 20rpx 20rpx 20rpx;
+					padding: 20rpx;
 					display: flex;
 					flex-direction: column;
 					justify-content: center;
 					align-items: center;
 					background-color: #FFFFFF;
-					border-radius: 10px;
-					width: 140px;
-					height: 160px;
+					border-radius: 20rpx;
+					width: 280rpx;
+					height: 320rpx;
+					z-index: 99;
 					
 					.item-text{
 						margin: -7rpx 0 20rpx 20rpx;
 						width: 100%;
 						line-height: 40rpx;
 						font-weight: bold;
-						font-size: 30rpx;
+						font-size: 35rpx;
 						color: #696969;
+						
 					}
 					.avatar-box{
 						.item-avatar{
@@ -168,4 +163,54 @@
 			}
 		}
 	}
+	.ocean {
+	    display: flex;
+		margin-top: -600rpx;
+	    width: 1800rpx;
+	    height: 1800rpx;
+	    background-color: #4169E1;
+	    border-radius: 50%;
+	
+	    &::before,
+	    &::after {
+	        content: "";
+	        position: absolute;
+					margin-top: 870rpx;
+	        width: 1600rpx;
+	        height: 1600rpx;
+	        top: 0;
+	        left: 50%;
+					border-radius: 43%;
+	        background-color: #fafafa;
+	        transform: translate(-50%, -70%) rotate(0);
+	        animation: rotate 6s linear infinite;
+	        z-index: 2;
+	    }
+	
+	    &::after {
+					border-radius: 46%;
+	        background-color: #fafafa;
+					opacity: 0.7;
+	        transform: translate(-50%, -70%) rotate(0);
+	        animation: rotate 10s linear -5s infinite;
+	        z-index: 3;
+	    }
+			&::after {
+					border-radius: 40%;
+			    background-color: #fafafa;
+					opacity: 0.5;
+			    transform: translate(-50%, -70%) rotate(0);
+			    animation: rotate 10s linear -5s infinite;
+			    z-index: 3;
+			}
+			
+	}
+	
+	@keyframes rotate {
+	    50% {
+	        transform: translate(-50%, -73%) rotate(180deg);
+	    } 100% {
+	        transform: translate(-50%, -70%) rotate(360deg);
+	    }
+	}
 </style>

subpkg/login/login.vue

@@ -11,8 +11,7 @@
 			</view>
 		
 			<view class="form-box">
-				<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn">微信一键登录</button> -->
-				<button @click="getUserInfo" class="btn">微信一键登录</button>
+				<button @click="getUserInfo" class="btn" plain="true">微信一键登录</button>
 				<view class="other">
 					<text class="other-text-left">账号密码登录</text>
 					<text class="other-text-right" style="color:#4169E1;">
@@ -70,25 +69,6 @@
 				this.updateToken(loginResult.data.miniappData)
 			},
 			
-			// //获取用户手机号
-			// async getPhoneNumber(e) {
-			// 	if (e.detail.errMsg !== "getPhoneNumber:ok") {
-			// 		//用户决绝授权  
-			// 		return uni.$showMsg('拒绝手机授权，获取不到您的信息!')
-			// 	} else {
-			// 		await this.getToken()
-			// 		if (this.token) {
-			// 			let proof = await new WXBizDataCrypt('wx5705da8747c77cfe', this.token.session_key)
-			// 			let numData = await proof.decryptData(e.detail.encryptedData, e.detail.iv)
-			// 			console.log(numData.phoneNumber)
-			// 			// const parentDetailData = await uni.$http.post('',numData.phoneNumber)
-			// 			// this.updateParentDetail(parentDetailData)
-			// 			await uni.redirectTo({
-			// 				url: '/subpkg/guide/guide'
-			// 			})
-			// 		}
-			// 	}
-			// },
 			//获取用户信息事件
 			async getUserInfo() {
 					await uni.getUserProfile({
@@ -197,6 +177,7 @@
 				width: 100%;
 				height: 100rpx;
 				border-radius: 100rpx;
+				border: none;
 				color: #FFFFFF;
 				font-weight: bold;
 				background: linear-gradient(to right, #506AE7, #87CEFA);
@@ -217,14 +198,16 @@
 				}
 	
 				.other-text-left {
-					margin-left: 2px;
-					margin-top: 10px;
+					margin-left: 4rpx;
+					margin-top: 20rpx;
 					color: #FFFFFF;
+					font-weight: bold;
 				}
 	
 				.other-text-right {
-					margin-right: 2px;
-					margin-top: 10px;
+					margin-right: 4rpx;
+					margin-top: 20rpx;
+					font-weight: bold;
 				}
 			}
 		}
@@ -234,8 +217,8 @@
 	
 	.ocean {
 	    display: flex;
-			margin-top: -600rpx;
-			margin-left: -520rpx;
+		margin-top: -600rpx;
+		margin-left: -520rpx;
 	    width: 1800rpx;
 	    height: 1800rpx;
 	    background-color: #4169E1;