634 lines
		
	
	
		
			15 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			634 lines
		
	
	
		
			15 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <template> | |||
|  | 	<view class="flex-col page"> | |||
|  | 		<!-- <image src="/static/common/img/16530269846087107196.png" class="image" /> --> | |||
|  | 		<u-navbar title="注册"></u-navbar> | |||
|  | 		<view class="flex-col group"> | |||
|  | 			<text class="text">手机号注册</text> | |||
|  | 			<view class="flex-col group_7"> | |||
|  | 				<view class="flex-col"> | |||
|  | 					<!-- <text class="text_1">手机号</text> --> | |||
|  | 					<view class="text-wrapper flex-row view" style="padding: 0"> | |||
|  | 						<u-input type="number" v-model="userName" placeholder="请输入手机号" maxlength="11" :disabled="disabled" /> | |||
|  | 						 | |||
|  | 					</view> | |||
|  | 				</view> | |||
|  | 				<view class="flex-col group_6" v-show="showCap"> | |||
|  | 					<view class="text-wrapper flex-row view" style="padding: 0"> | |||
|  | 						<u-input type="text" v-model="captchaCode" placeholder="请输入图形验证码" /> | |||
|  | 						<image :src="captchaImg" class="captcha-img" @click="refreshCaptcha" /> | |||
|  | 					</view> | |||
|  | 				</view> | |||
|  | 				<view class="flex-col group_6"> | |||
|  | 					<!-- <text class="text_1">短信验证码</text> --> | |||
|  | 					<view class="text-wrapper flex-row view" style="padding: 0"> | |||
|  | 						<u-input type="text" v-model="passWord" placeholder="请输入短信验证码"  /> | |||
|  | 						<u-button style='background:transparent;' class="custom-style" :disabled="!(send == '获取验证码')" @click="sendCode">{{ send }} | |||
|  | 						</u-button> | |||
|  | 					</view> | |||
|  | 				</view> | |||
|  | 			</view> | |||
|  | 			<u-button class="flex-col items-center text-wrapper_1" throttle-time="1000" type="primary" shape="circle" | |||
|  | 				@click="login"><text class="text_7">注册</text></u-button> | |||
|  | 				<view class="justify-center group_1"> | |||
|  | 					<text class="text_8">已有账号</text> | |||
|  | 					<navigator class="text_9" url="/pages/login/login/login">立即登录</navigator> | |||
|  | 				</view> | |||
|  | 			<!-- <view class="flex-row group_2"> | |||
|  | 				<u-checkbox-group class="section_1" :size="34"> | |||
|  | 					<u-checkbox v-model="agreement"> </u-checkbox> | |||
|  | 				</u-checkbox-group> | |||
|  | 				<view class="group_3"> | |||
|  | 					<text class="text_10">已阅读并同意</text> | |||
|  | 					<text class="text_11">《用户服务协议》</text> | |||
|  | 					<text class="text_12">&</text> | |||
|  | 					<text class="text_13">《用户隐私保护政策》</text> | |||
|  | 				</view> | |||
|  | 			</view> --> | |||
|  | 		</view> | |||
|  | 		<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips> | |||
|  | 		<u-toast ref="uToast" /> | |||
|  | 	</view> | |||
|  | </template> | |||
|  | 
 | |||
|  | <script> | |||
|  | 	import md5 from "js-md5"; | |||
|  | 	export default { | |||
|  | 		data() { | |||
|  | 			return { | |||
|  | 				show: false, | |||
|  | 				userName: "", | |||
|  | 				passWord: "", | |||
|  | 				agreement: false, | |||
|  | 				send: "获取验证码", | |||
|  | 				disabled: false, | |||
|  | 				captchaCode: "", // 图形验证码
 | |||
|  | 				captchaImg: "", // 验证码图片
 | |||
|  | 				captchaId: "", // 验证码ID
 | |||
|  | 				showCap: false, | |||
|  | 			}; | |||
|  | 		}, | |||
|  | 		onLoad(e) { | |||
|  | 			// this.refreshCaptcha();
 | |||
|  | 		}, | |||
|  | 		methods: { | |||
|  | 			// 刷新验证码
 | |||
|  | 			refreshCaptcha() { | |||
|  | 				const timestamp = Date.now(); | |||
|  | 				this.captchaId = timestamp; | |||
|  | 				uni.request({ | |||
|  | 					url: 'http://sl.vrgon.com:8003/api/Token/Captcha?id=' + timestamp, | |||
|  | 					method: 'GET', | |||
|  | 					responseType: 'arraybuffer', | |||
|  | 					headers: { | |||
|  | 						'Accept': '*/*', | |||
|  | 					}, | |||
|  | 					success: (res) => { | |||
|  | 						if (res.statusCode === 200 && res.data) { | |||
|  | 							// res.data 是 ArrayBuffer 类型,将其转换为 Blob
 | |||
|  | 							const blob = new Blob([res.data], { type: 'image/gif' }); // 根据实际图片类型调整
 | |||
|  | 							const reader = new FileReader(); | |||
|  | 							reader.onload = () => { | |||
|  | 								// 将 Blob 读取为 Data URL (Base64 编码的图片)
 | |||
|  | 								this.captchaImg = reader.result; | |||
|  | 							}; | |||
|  | 							reader.onerror = (e) => { | |||
|  | 								console.error("FileReader error:", e); | |||
|  | 								this.$refs.uToast.show({ | |||
|  | 									title: '图片转换失败', | |||
|  | 									type: "error", | |||
|  | 								}); | |||
|  | 							}; | |||
|  | 							reader.readAsDataURL(blob); | |||
|  | 						} else { | |||
|  | 							console.error('获取验证码失败,状态码或数据异常:', res); | |||
|  | 							this.$refs.uToast.show({ | |||
|  | 								title: '获取验证码失败', | |||
|  | 								type: "error", | |||
|  | 							}); | |||
|  | 						} | |||
|  | 					}, | |||
|  | 					fail: (err) => { | |||
|  | 						console.error('验证码请求失败:', err); | |||
|  | 						this.$refs.uToast.show({ | |||
|  | 							title: '获取验证码失败,请检查网络或CORS设置', | |||
|  | 							type: "error", | |||
|  | 						}); | |||
|  | 					} | |||
|  | 				}); | |||
|  | 			}, | |||
|  | 			// 获取验证码
 | |||
|  | 			sendCode() { | |||
|  | 				var reg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$", "g"); //手机号
 | |||
|  | 				if (this.userName === "" || !reg.test(this.userName)) { | |||
|  | 					this.$refs.uToast.show({ | |||
|  | 						title: "请输入正确的手机号码", | |||
|  | 						type: "error", | |||
|  | 					}); | |||
|  | 					return; | |||
|  | 				} | |||
|  | 				 | |||
|  | 				// if (!this.captchaCode) {
 | |||
|  | 				// 	this.$refs.uToast.show({
 | |||
|  | 				// 		title: "请输入图形验证码",
 | |||
|  | 				// 		type: "error",
 | |||
|  | 				// 	});
 | |||
|  | 				// 	return;
 | |||
|  | 				// }
 | |||
|  | 				 | |||
|  | 				// 生成13位时间戳
 | |||
|  | 				const timestamp = Date.now(); | |||
|  | 				// 生成签名
 | |||
|  | 				const base64Key = btoa('xiaoyout!#@12345'); | |||
|  | 				const signStr = this.userName + timestamp + base64Key; | |||
|  | 				const sign = md5(signStr); | |||
|  | 
 | |||
|  | 				this.$u.apiList.GetPhoneValidateCode({ | |||
|  | 					phone: this.userName, | |||
|  | 					t: timestamp.toString(), | |||
|  | 					sign: sign, | |||
|  | 					captchaCode: this.showCap ? this.captchaCode : ''	, | |||
|  | 					captchaId: this.showCap ? this.captchaId.toString() : '' | |||
|  | 				}).then((res)=>{ | |||
|  | 					//中间数字加密
 | |||
|  | 					// let result =this.userName.replace(this.userName.substring(3,7),"****")
 | |||
|  | 					// this.userName = result
 | |||
|  | 					this.disabled = true | |||
|  | 					// this.$tips("发送成功");
 | |||
|  | 					this.$refs.uToast.show({ | |||
|  | 					title: "发送成功", | |||
|  | 					type: "success", | |||
|  | 				}); | |||
|  | 					var second = 60; | |||
|  | 					this.send = second + "秒后重试"; | |||
|  | 					var time = setInterval(() => { | |||
|  | 						this.send = second + "秒后重试"; | |||
|  | 						second--; | |||
|  | 						if (second <= 0) { | |||
|  | 							this.disabled = false | |||
|  | 							this.send = "获取验证码"; | |||
|  | 							clearInterval(time); | |||
|  | 						} | |||
|  | 					}, 1000); | |||
|  | 				}) | |||
|  | 				.catch((err)=>{ | |||
|  | 					console.log('err-----',err) | |||
|  | 					if(err?.data?.needcap && !this.showCap) { | |||
|  | 						this.showCap = true | |||
|  | 						this.$refs.uToast.show({ | |||
|  | 							title: '请输入图形验证码', | |||
|  | 							type: "error", | |||
|  | 						}); | |||
|  | 						this.refreshCaptcha() | |||
|  | 						return | |||
|  | 					}  | |||
|  | 					this.$refs.uToast.show({ | |||
|  | 						title: err.error, | |||
|  | 						type: "error", | |||
|  | 					}); | |||
|  | 					this.refreshCaptcha() | |||
|  | 				}) | |||
|  | 			}, | |||
|  | 			 | |||
|  | 			login() { | |||
|  |         // uni.navigateTo({
 | |||
|  | 				// 			url: "/pages/login/confirmPwd/confirmPwd?phone="+this.userName,
 | |||
|  | 				// 		});
 | |||
|  |         // return
 | |||
|  | 				var reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$", "g"); //手机号
 | |||
|  | 				if (this.userName === "" || !reg.test(this.userName)) { | |||
|  | 				//   this.$tips("请输入正确的手机号码", "error");
 | |||
|  | 				  this.$refs.uToast.show({ | |||
|  | 					title: "请输入正确的手机号码", | |||
|  | 					type: "error", | |||
|  | 				}); | |||
|  | 				  return; | |||
|  | 				} | |||
|  | 				if (this.passWord === "") { | |||
|  | 					// return this.$tips("请输入验证码", "error");
 | |||
|  | 					return this.$refs.uToast.show({ | |||
|  | 					title: "请输入验证码", | |||
|  | 					type: "error", | |||
|  | 				}); | |||
|  | 				} | |||
|  | 				// if (!this.agreement) {
 | |||
|  | 				// 	return this.$tips("请同意用户服务协议及用户隐私保护政策", "error");
 | |||
|  | 				// }
 | |||
|  | 				const data = { | |||
|  | 					phone:this.userName, | |||
|  | 					code : this.passWord | |||
|  | 				} | |||
|  | 				this.$u.apiList.IsPhoneCode(data).then((res)=>{ | |||
|  | 					setTimeout(() => { | |||
|  | 						uni.navigateTo({ | |||
|  | 							url: "/pages/login/confirmPwd/confirmPwd?phone="+this.userName+"&code="+this.passWord, | |||
|  | 						}); | |||
|  | 					}, 1000); | |||
|  | 				}) | |||
|  | 				.catch((err)=>{ | |||
|  | 					// this.$tips(err.error, "error");
 | |||
|  | 					this.$refs.uToast.show({ | |||
|  | 						title: err.error, | |||
|  | 						type: "error", | |||
|  | 					}); | |||
|  | 				}) | |||
|  | 				 | |||
|  | 			}, | |||
|  | 		}, | |||
|  | 	}; | |||
|  | </script> | |||
|  | 
 | |||
|  | <style scoped lang="scss"> | |||
|  | 	.custom-style { | |||
|  | 		color: #3CB5FB !important; | |||
|  | 		padding: 0 !important; | |||
|  | 		height: 70rpx !important; | |||
|  | 		line-height: 60rpx !important; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.custom-style::after { | |||
|  | 		border: none; | |||
|  | 	} | |||
|  | 
 | |||
|  | 	.page { | |||
|  | 		padding-bottom: 0.015rem; | |||
|  | 		background-color: rgb(255, 255, 255); | |||
|  | 		overflow-y: auto; | |||
|  | 		width: 100%; | |||
|  | 		overflow-x: hidden; | |||
|  | 		height: 100%; | |||
|  | 
 | |||
|  | 		.image { | |||
|  | 			flex-shrink: 0; | |||
|  | 			align-self: flex-start; | |||
|  | 			width: 102%; | |||
|  | 		} | |||
|  | 
 | |||
|  | 		.group { | |||
|  | 			padding: 0.7rem 0.29rem; | |||
|  | 
 | |||
|  | 			.text { | |||
|  | 				align-self: left; | |||
|  | 				// color: rgb(46, 155, 255);
 | |||
|  | 				color: #000; | |||
|  | 				font-size: 0.22rem; | |||
|  | 				font-family: PingFang; | |||
|  | 				line-height: 0.17rem; | |||
|  | 				font-weight: 600; | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.group_7 { | |||
|  | 				margin-top: 0.29rem; | |||
|  | 
 | |||
|  | 				.text-wrapper { | |||
|  | 					border: solid 2rpx #dcdfe6; | |||
|  | 					border-radius: 100rpx; | |||
|  | 					background: #f6f8fa; | |||
|  | 				} | |||
|  | 
 | |||
|  | 				.group_6 { | |||
|  | 					margin-top: 0.2rem; | |||
|  | 				} | |||
|  | 
 | |||
|  | 				.text_1 { | |||
|  | 					margin-left: 0.01rem; | |||
|  | 					align-self: flex-start; | |||
|  | 					color: rgb(51, 51, 51); | |||
|  | 					font-size: 0.15rem; | |||
|  | 					font-family: PingFang; | |||
|  | 					line-height: 0.14rem; | |||
|  | 				} | |||
|  | 
 | |||
|  | 				.view { | |||
|  | 					display: flex; | |||
|  | 					align-items: center; | |||
|  | 					margin-top: 20rpx; | |||
|  | 					padding: 20rpx 50rpx !important; | |||
|  | 				} | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.text_6 { | |||
|  | 				margin-left: 0.01rem; | |||
|  | 				margin-top: 0.13rem; | |||
|  | 				align-self: flex-start; | |||
|  | 				color: rgb(25, 140, 255); | |||
|  | 				font-size: 0.13rem; | |||
|  | 				font-family: PingFang; | |||
|  | 				line-height: 0.13rem; | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.text-wrapper_1 { | |||
|  | 				margin: 50rpx 0rpx 40rpx; | |||
|  | 				padding: 50rpx 0 50rpx; | |||
|  | 				// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
 | |||
|  | 				background: #3cb4fb; | |||
|  | 				box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34); | |||
|  | 				border-radius: 100rpx; | |||
|  | 
 | |||
|  | 				.text_7 { | |||
|  | 					color: rgb(255, 255, 255); | |||
|  | 					font-size: 32rpx; | |||
|  | 					font-family: PingFang; | |||
|  | 					line-height: 32rpx; | |||
|  | 				} | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.group_1 { | |||
|  | 				margin-top: 0.12rem; | |||
|  | 
 | |||
|  | 				.text_8 { | |||
|  | 					color: rgb(102, 102, 102); | |||
|  | 					font-size: 0.14rem; | |||
|  | 					font-family: PingFang; | |||
|  | 					line-height: 0.13rem; | |||
|  | 				} | |||
|  | 
 | |||
|  | 				.text_9 { | |||
|  | 					margin-left: 0.035rem; | |||
|  | 					color: rgb(25, 140, 255); | |||
|  | 					font-size: 0.14rem; | |||
|  | 					font-family: PingFang; | |||
|  | 					line-height: 0.13rem; | |||
|  | 				} | |||
|  | 			} | |||
|  | 
 | |||
|  | 			.group_2 { | |||
|  | 				margin-top: 0.36rem; | |||
|  | 				justify-content: center; | |||
|  | 
 | |||
|  | 				.section_1 { | |||
|  | 					flex-shrink: 0; | |||
|  | 					width: 0.17rem; | |||
|  | 				} | |||
|  | 
 | |||
|  | 				.group_3 { | |||
|  | 					margin-left: 0.11rem; | |||
|  | 					height: 0.18rem; | |||
|  | 					line-height: 0.18rem; | |||
|  | 					font-size: 0; | |||
|  | 
 | |||
|  | 					.text_10 { | |||
|  | 						color: rgb(153, 153, 153); | |||
|  | 						font-size: 0.11rem; | |||
|  | 						font-family: PingFang; | |||
|  | 					} | |||
|  | 
 | |||
|  | 					.text_11 { | |||
|  | 						color: rgb(25, 140, 255); | |||
|  | 						font-size: 0.11rem; | |||
|  | 						font-family: PingFang; | |||
|  | 					} | |||
|  | 
 | |||
|  | 					.text_12 { | |||
|  | 						color: rgb(102, 102, 102); | |||
|  | 						font-size: 0.11rem; | |||
|  | 						font-family: PingFang; | |||
|  | 					} | |||
|  | 
 | |||
|  | 					.text_13 { | |||
|  | 						color: rgb(25, 140, 255); | |||
|  | 						font-size: 0.11rem; | |||
|  | 						font-family: PingFang; | |||
|  | 					} | |||
|  | 				} | |||
|  | 			} | |||
|  | 		} | |||
|  | 
 | |||
|  | 		.captcha-img { | |||
|  | 			width: 200rpx; | |||
|  | 			height: 70rpx; | |||
|  | 			margin-right: 20rpx; | |||
|  | 		} | |||
|  | 	} | |||
|  | </style> | |||
|  | 
 | |||
|  | 
 | |||
|  | 
 | |||
|  | <!-- <template> | |||
|  |   <view class="flex-col page"> | |||
|  |     <view class="flex-col group"> | |||
|  |       <text class="text">注册账号</text> | |||
|  |       <view class="flex-col group_1"> | |||
|  |         <view class="flex-col group_2"> | |||
|  |           <u-select | |||
|  |             @click="show = true" | |||
|  |             :mode="'single-column'" | |||
|  |             v-model="show" | |||
|  |             :list="shoolList" | |||
|  |             @confirm="confirm" | |||
|  |             @cancel="cancel" | |||
|  |           ></u-select> | |||
|  |           <view class="justify-between section_1" @click="show = true"> | |||
|  |             <text | |||
|  |               :style="{ color: this.shoolname !== '' ? '#000' : '#c1c4cc' }" | |||
|  |               >{{ this.shoolname != "" ? this.shoolname : "请选择学校" }}</text | |||
|  |             > | |||
|  |             <image | |||
|  |               src="/static/common/img/select.png" | |||
|  |               class="image_1" | |||
|  |             /> | |||
|  |           </view> | |||
|  |           <view class="text-wrapper flex-col"> | |||
|  |             <u-input | |||
|  |               v-model="userName" | |||
|  |               type="text" | |||
|  |               placeholder="请输入用户名" | |||
|  |             /> | |||
|  |           </view> | |||
|  |           <view class="text-wrapper flex-col view_1"> | |||
|  |             <u-input | |||
|  |               v-model="passWord" | |||
|  |               type="password" | |||
|  |               placeholder="请输入密码" | |||
|  |             /> | |||
|  |           </view> | |||
|  |           <view class="text-wrapper flex-col"> | |||
|  |             <u-input | |||
|  |               v-model="twopassWord" | |||
|  |               type="password" | |||
|  |               placeholder="请确认密码" | |||
|  |             /> | |||
|  |           </view> | |||
|  |         </view> | |||
|  |         <view class="flex-row group_3"> | |||
|  |           <view class="flex-col text-wrapper_1"> | |||
|  |             <u-input | |||
|  |               v-model="Code" | |||
|  |               type="text" | |||
|  |               placeholder="请输入验证码" | |||
|  |             /> | |||
|  |             <text class="text_6"></text> | |||
|  |           </view> | |||
|  |           <view class="flex-col items-end text-wrapper_2"> | |||
|  |             <text>6789</text> | |||
|  |           </view> | |||
|  |         </view> | |||
|  |       </view> | |||
|  |       <view> | |||
|  |         <u-button  class="flex-col items-center text-wrapper_3" @click="register" :throttle-time='1000'>注册</u-button> | |||
|  |       </view> | |||
|  |     </view> | |||
|  |   </view> | |||
|  | </template> | |||
|  | 
 | |||
|  | <script> | |||
|  | export default { | |||
|  |   data() { | |||
|  |     return { | |||
|  |       show: false, | |||
|  |       userName: "", | |||
|  |       passWord: "", | |||
|  |       twopassWord: "", | |||
|  |       Code: "", | |||
|  |       shoolname: "", | |||
|  |       shoolList: [ | |||
|  |         { | |||
|  |           value: "1", | |||
|  |           label: "学校一", | |||
|  |         }, | |||
|  |         { | |||
|  |           value: "2", | |||
|  |           label: "学校二", | |||
|  |         }, | |||
|  |         { | |||
|  |           value: "3", | |||
|  |           label: "学校三", | |||
|  |         }, | |||
|  |         { | |||
|  |           value: "4", | |||
|  |           label: "学校四", | |||
|  |         } | |||
|  |       ], | |||
|  |     }; | |||
|  |   }, | |||
|  |   onLoad(e) { | |||
|  |     ; | |||
|  |   }, | |||
|  |   methods: { | |||
|  |     confirm(e) { | |||
|  |       this.shoolname = ""; | |||
|  |       e.map((val, index) => { | |||
|  |         this.shoolname += this.shoolname == "" ? val.label : "-" + val.label; | |||
|  |       }); | |||
|  |     }, | |||
|  |     cancel(e) { | |||
|  |       ; | |||
|  |     }, | |||
|  |     register(){ | |||
|  |       uni.showLoading({ | |||
|  |         title: '注册中' | |||
|  |       }); | |||
|  | 
 | |||
|  |       setTimeout(()=>{ | |||
|  |         uni.hideLoading(); | |||
|  |          uni.showToast({ | |||
|  |         title: '注册成功', | |||
|  |         duration: 2000 | |||
|  |       }); | |||
|  |       },1000) | |||
|  |       | |||
|  |     } | |||
|  |   }, | |||
|  | }; | |||
|  | </script> | |||
|  | 
 | |||
|  | <style scoped lang="css"> | |||
|  | .text-wrapper { | |||
|  |   margin-top: 0.095rem; | |||
|  |   padding: 0.03rem 0.17rem; | |||
|  |   background-color: rgb(246, 247, 250); | |||
|  |   border-radius: 0.1rem; | |||
|  | } | |||
|  | .text_2 { | |||
|  |   margin-left: 0.17rem; | |||
|  | } | |||
|  | .page { | |||
|  |   padding: 0.045rem 0 1.5rem; | |||
|  |   background-color: rgb(255, 255, 255); | |||
|  |   width: 100%; | |||
|  |   height: 100%; | |||
|  |   overflow-y: auto; | |||
|  | } | |||
|  | .image { | |||
|  |   margin-left: 0.26rem; | |||
|  |   margin-right: 0.23rem; | |||
|  |   width: 3.27rem; | |||
|  |   height: 0.09rem; | |||
|  | } | |||
|  | .group { | |||
|  |   margin-top: 0.72rem; | |||
|  |   padding-left: 0.34rem; | |||
|  |   padding-right: 0.31rem; | |||
|  | } | |||
|  | .text { | |||
|  |   margin-left: 0.045rem; | |||
|  |   color: rgb(0, 0, 0); | |||
|  |   font-size: 0.24rem; | |||
|  |   line-height: 0.23rem; | |||
|  |   letter-spacing: 0.024rem; | |||
|  |   white-space: nowrap; | |||
|  | } | |||
|  | .group_1 { | |||
|  |   margin-top: 0.67rem; | |||
|  | } | |||
|  | .text-wrapper_3 { | |||
|  |   margin-top: 0.54rem; | |||
|  |   padding: 0.13rem 0; | |||
|  |   color: rgb(255, 255, 255); | |||
|  |   font-size: 0.15rem; | |||
|  |   line-height: 0.14rem; | |||
|  |   letter-spacing: 0.03rem; | |||
|  |   white-space: nowrap; | |||
|  |   background-color: rgba(46, 155, 255, 0.5); | |||
|  |   border-radius: 0.1rem; | |||
|  | } | |||
|  | .group_2 { | |||
|  |   color: rgb(193, 196, 204); | |||
|  |   font-size: 0.15rem; | |||
|  |   line-height: 0.14rem; | |||
|  |   white-space: nowrap; | |||
|  | } | |||
|  | .group_3 { | |||
|  |   margin-top: 0.08rem; | |||
|  | } | |||
|  | .section_1 { | |||
|  |   padding: 0.13rem 0.17rem; | |||
|  |   background-color: rgb(246, 247, 250); | |||
|  |   border-radius: 0.1rem; | |||
|  | } | |||
|  | .view_1 { | |||
|  |   margin-top: 0.09rem; | |||
|  | } | |||
|  | .text-wrapper_1 { | |||
|  |   padding: 0 0.17rem; | |||
|  |   flex: 1 1 auto; | |||
|  |   color: rgb(193, 196, 204); | |||
|  |   font-size: 0.15rem; | |||
|  |   line-height: 0.14rem; | |||
|  |   white-space: nowrap; | |||
|  |   background-color: rgb(246, 247, 250); | |||
|  |   border-radius: 0.1rem; | |||
|  |   height: 0.4rem; | |||
|  | } | |||
|  | .text-wrapper_2 { | |||
|  |   margin-left: 0.08rem; | |||
|  |   padding: 0.14rem 0.1rem ; | |||
|  |   color: rgb(106, 134, 241); | |||
|  |   font-size: 0.18rem; | |||
|  |   line-height: 0.14rem; | |||
|  |   letter-spacing: 0.036rem; | |||
|  |   white-space: nowrap; | |||
|  |   background-color: rgba(211, 220, 255, 0.5); | |||
|  |   border-radius: 0.1rem; | |||
|  |   height: 0.4rem; | |||
|  | } | |||
|  | .image_1 { | |||
|  |   margin-right: 0.035rem; | |||
|  |   margin-top: 0.05rem; | |||
|  |   width: 0.14rem; | |||
|  |   height: 0.09rem; | |||
|  | } | |||
|  | .text_6 { | |||
|  |   margin-left: 0.17rem; | |||
|  | } | |||
|  | </style> --> |