baiyuApp/pages/auth/login.vue

<template>
	<view>
		<view class="content x-c">
			<image class="backImg" @tap="goBack()" src="../../static/images/icon_close.png"></image>
			<view class="pageTop  x-c">
				<view class="head x-c">
					登录即可体验完整功能
				</view>
				<!-- <view class="logintype" @click="changeType">{{type==0?'用短信验证码登录':'用密码登录'}}</view> -->
				<view class="logintype" v-if="isSms">
					<view :class="current==0 ? 'logintype-item active':'logintype-item'" @click="changeType(0)">用密码登录
					</view>
					<view :class="current==1 ? 'logintype-item active':'logintype-item'" @click="changeType(1)">用短信验证码登录
					</view>
				</view>
				<view class="loginBox">
					<view class="login-item">
						<view class="input-account">
							<input v-model="userName" placeholder="手机号登录" type="number" maxlength="11" />
						</view>
						<view class="line"></view>
					</view>
					<view class="login-item" v-show="current==0">
						<view class="input-pwd">
							<input v-model="password" placeholder="密码" type="password" />
						</view>
						<view class="line"></view>
					</view>
					<view class="login-item" v-show="current==1">
						<view class="input-yzcode x-bc">
							<input v-model="code" placeholder="验证码" type="number" />
							<view style="color:#666;flex-shrink: 0;" @click="sendSms">
								{{coolDown==0 ? '获取验证码': `${coolDown}秒后重试`}}
							</view>
						</view>
						<view class="line"></view>
					</view>
					<view class="btns">
						<view class="login-btn" @click="login">登录</view>
					</view>
					<view class="reg-box x-bc" v-if="isSms">
						<view class="reg-btn" @click="goToRegister()">注册账号</view>
						<view class="reg-btn" @click="goToFindPass()">忘记密码</view>
					</view>
				</view>
			</view>
			<view class="pageBottom" v-if="isApp && isAgreePrivacy">
				<view class="tips y-f"> — 快捷登录 — </view>
				<view class="menu x-ac">
					<view v-if="wxIsInstalled" @tap="loginWeixin">
						<image src="/static/image/login/weixin.png"></image>
					</view>
					<view v-if="isIos" @tap="quickAppleLogin">
						<image src="/static/image/login/apple.png"></image>
					</view>
					<!-- <view><image src="/static/image/login/qq.png"></image></view>
						 <view><image src="/static/image/login/weibo.png"></image></view>  -->
				</view>
			</view>

			<view class="checkbox">
				<view class="checkbox-icon" @tap="handleAgree">
					<image src="../../static/image/login/radio_default.png" v-show="!agree"></image>
					<image src="../../static/image/login/radio_choose.png" v-show="agree"></image>
				</view>
				<view>我已阅读并同意<text @tap="goToWeb(0)">《用户协议》</text><text @tap="goToWeb(1)">《隐私政策》</text> 并使用本机号码登录</view>
			</view>

		</view>
	</view>

</template>

<script>
	import {
		quickWechatLogin
	} from "@/utils/login.js"
	import {
		login,
		loginByWeChat,
		getUserInfo,
		loginByApple,
		setPhone,
		sendCode,
		loginByPhone,
		isSmsVerification
	} from '@/api/user'
	export default {
		data() {
			return {
				userName: "",
				password: "",
				registrationID: "",
				unionid: "",
				userPhone: "",
				loginType: 0,
				isApp: false,
				agree: false,
				isAgreePrivacy: false,
				isIos: false,
				from: '',
				source: '',
				appleKey: "",
				wxIsInstalled: false,
				current: 0,
				coolDown: 0,
				timer: null,
				btnLoading: false,
				code: '',
				list: ['用密码登录', '用短信验证码登录'],
				isSms: false,
			}
		},
		onLoad(option) {
			// #ifdef APP-PLUS
			this.isIos = plus.os.name == "iOS"
			this.isApp = true;
			if (this.isIos) {
				this.wxIsInstalled = this.$checkWechatInstalled();
			} else {
				this.wxIsInstalled = true;
			}
			this.source = this.isIos ? "iOS" : plus.runtime.channel || 'app';
			// #endif
			this.from = option.from || ''
			let that = this;
			uni.$on('getRegistrationID', function(data) {
				that.registrationID = data;
			});
			uni.hideLoading();
			// if(!this.$isLogin()) {
			// 	this.$showLoginPage()
			// } 
		},
		onShow() {
			if (this.$isLogin()) {
				this.goPage()
			}
			// #ifdef APP-PLUS
			this.isAgreePrivacy = plus.runtime.isAgreePrivacy();
			if (this.isAgreePrivacy) {
				this.getRegistrationID();
			}
			// #endif
			this.isSmsVerificationFun()
		},
		onUnload() {
			uni.$off('getRegistrationID');
		},
		mounted() {

		},
		methods: {
			async isSmsVerificationFun() {
				const res = await isSmsVerification()
				if (res.code == 200) {
					this.isSms = res.isSmsVerification == 1 ? true : false
				} else {
					if (!res.msg) return
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			changeType(e) {
				console.log("changeType=[===]", e)
				this.current = this.current == 0 ? 1 : 0
			},
			initUniverify() {
				const callback = (res) => {
					// 获取一键登录弹框协议勾选状态
					univerifyManager.getCheckBoxState({
						success(res) {
							if (res.state) {
								// 关闭一键登录弹框
								univerifyManager.close()
							}
						}
					})
				}
				// 订阅自定义按钮点击事件
				univerifyManager.onButtonsClick(callback);
				// 取消订阅自定义按钮点击事件
				univerifyManager.offButtonsClick(callback);
			},
			login() {
				if (this.current == 1) {
					this.loginByPhone()
					return
				}
				if (this.$isEmpty(this.userName)) {
					uni.showToast({
						title: "请输入帐号",
						icon: 'none',
					});
					return
				}
				if (this.$isEmpty(this.password)) {
					uni.showToast({
						title: "请输入密码",
						icon: 'none',
					});
					return
				}
				if (!uni.$u.test.mobile(this.userName)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: 'none',
					});
					return
				}
				if (!this.agree) {
					uni.showToast({
						title: "请同意相关协议",
						icon: 'none'
					});
					return
				}
				let data = {
					phone: this.userName,
					password: this.password,
					jpushId: this.registrationID,
					loginType: 1,
					source: this.source
				};
				let that = this;
				uni.showLoading({
					title: "处理中..."
				});
				console.log("qxj login", data);
				login(data).then(res => {
						uni.hideLoading();
						if (res.code == 200 && res.users && Object.prototype.toString.call(res.users) ==
							'[object Array]') {
							uni.setStorageSync('requestParam', data)
							uni.setStorageSync('wechatList', res.users)
							this.goPage();
							return
						}
						if (res.code == 200) {
							// #ifdef APP-PLUS
							if (res.isNew) {
								quickWechatLogin(true, res.phone);
								return;
							}
							// #endif
							uni.setStorageSync('AppToken', res.token);
							uni.setStorageSync('userInfo', JSON.stringify(res.user));
							uni.$emit('refreshIM');
							uni.$emit('showHealthButler');
							that.goPage();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {
						uni.hideLoading();
						console.log("qxj rej:" + JSON.stringify(rej));
					}
				);
			},
			quickAppleLogin() {
				let that = this;
				if (!this.agree) {
					uni.showToast({
						title: "请同意相关协议",
						icon: 'none'
					});
					return
				}
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (res.provider.indexOf('apple')) {
							uni.login({
								provider: 'apple',
								success: function(loginRes) {
									that.appleKey = loginRes.authResult.openid
									that.loginByAppleAct(loginRes.authResult)

								},
								fail: function(err) {
									console.log(err);
									// 登录授权失败
									// err.code错误码参考`授权失败错误码(code)说明`
								}
							});
						}
					}
				});
			},
			async loginByAppleAct(authResult) {
				let loginDevice = ''
				if (this.$isAgreePrivacy()) {
					const info = await uni.getPushClientId();
					uni.setStorageSync("registrationID", info.cid);
					this.registrationID = info.cid;
					let devinfo = await uni.getDeviceInfo();
					if (devinfo != null) {
						loginDevice += devinfo.deviceBrand ? devinfo.deviceBrand : "";
						loginDevice += devinfo.deviceModel ? " " + devinfo.deviceModel : "";
						loginDevice += devinfo.system ? " " + devinfo.system : "";
					}
				}
				const params = {
					loginDevice: loginDevice,
					jpushId: this.registrationID,
					source: this.source,
					appleKey: authResult.openid
				};
				uni.showLoading({
					title: '请稍候...'
				})
				loginByApple(params).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						if (res.user != null) {
							uni.hideLoading();
							uni.setStorageSync('AppToken', res.token);
							uni.setStorageSync('userInfo', JSON.stringify(res.user));
							uni.closeAuthView();
							uni.$emit('refreshIM');
							uni.$emit('showHealthButler');
							uni.$emit('refreshUserInfo', {});
							// this.$navBack();
							this.goPage()
						} else {
							if (res.isNew) {
								this.bindMobile('apple');
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}


				}).catch(() => {
					uni.hideLoading()
				})
			},
			loginWeixin() {
				if (!this.agree) {
					uni.showToast({
						title: "请同意相关协议",
						icon: 'none'
					});
					return
				}
				quickWechatLogin(false)
				return
				uni.login({
					provider: "weixin",
					onlyAuthorize: true,
					success: async (res) => {
						let that = this;
						uni.showLoading({
							title: "处理中..."
						});
						const params = {
							code: res.code,
							jpushId: this.registrationID,
							source: this.source
						};
						this.loginByWeChatAct(params);
					},
					fail: (err) => {
						console.log('qxj loginWeixin fail:', JSON.stringify(err));
						if (err.code == 1000) { // 未开通
							uni.showModal({
								title: '登录失败',
								content: `${err.errMsg}\n，错误码：${err.code}`,
								confirmText: '开通指南',
								cancelText: '确定',
								success: (res) => {
									if (res.confirm) {
										setTimeout(() => {
											plus.runtime.openWeb(
												'https://ask.dcloud.net.cn/article/37965'
											)
										}, 500)
									}
								}
							});
							return;
						}
						// 一键登录预登陆失败
						if (err.code == '30005') {
							uni.showModal({
								showCancel: false,
								title: '预登录失败',
								content: err.errMsg
							});
							return;
						}
						// 一键登录用户关闭验证界面
						if (err.code != '30003') {
							uni.showModal({
								showCancel: false,
								title: '登录失败',
								content: JSON.stringify(err)
							});
						}
					},
					complete: () => {

					}
				});

			},

			doUniverify(authResult) {
				uniCloud.callFunction({
					name: 'loginByMobile', // 你的云函数名称
					data: {
						access_token: authResult.access_token, // 客户端一键登录接口返回的access_token
						openid: authResult.openid // 客户端一键登录接口返回的openid
					}
				}).then(res => {
					uni.closeAuthView();
					if (res.result.errCode == 0) {
						this.userName = res.result.phoneNumber;
					} else {
						uni.showToast({
							title: res.result.message,
							icon: 'none'
						});
					}

				}).catch(err => {
					// 处理错误
					console.error('调用云函数失败:', err);
					// 详细记录错误信息
					console.error('错误信息:', err.errMsg);
				})
			},
			loginByWeChatAct(params) {
				loginByWeChat(params).then(res => {
						if (res.code == 200) {
							if (res.user != null) {
								uni.hideLoading();
								uni.setStorageSync('AppToken', res.token);
								uni.setStorageSync('userInfo', JSON.stringify(res.user));
								uni.closeAuthView();
								uni.$emit('refreshIM');
								uni.$emit('showHealthButler');
								uni.$emit('refreshUserInfo', {});
								// this.$navBack();
								this.goPage()
							} else {
								this.unionid = res.unionid;
								if (res.isNew) {
									this.bindMobile();
								}
							}
						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {}
				);
			},
			bindMobile(type) {
				let that = this;
				// #ifdef APP-PLUS
				const uniLogin = () => {
					uni.login({
						provider: 'univerify',
						univerifyStyle: { // 自定义登录框样式
							fullScreen: false,
							authButton: {
								"title": "绑定手机号",
								"normalColor": "#2583EB",
								"highlightColor": "#2583EB",
							},
							privacyTerms: {
								"defaultCheckBoxState": true, // 条款勾选框初始状态 默认值： true
								"isCenterHint": false, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)
								"uncheckedImage": "", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
								"checkedImage": "", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
								"checkBoxSize": 18, // 可选 条款勾选框大小
								"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB
								"termsColor": "#2583EB", //  协议文字颜色 默认值： #5496E3
								"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
								"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
								"privacyItems": [ // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效

								]
							},
						},
						success(res) {
							console.log("qxj univerify login:" + JSON.stringify(res
								.authResult)); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
							if (type == 'apple') {
								that.loginByUniverify(res.authResult, 3);
							} else {
								that.loginByUniverify(res.authResult, 1);
							}
						},
						fail(res) {
							uni.hideLoading();
							uni.showToast({
								title: "一键登录失败请检查网络和SIM卡是否可用",
								icon: 'none',
								position: 'bottom'
							});
							//setTimeout(function() {
							uni.navigateTo({
								url: "/pages/auth/login"
							});
							//}, 1800);
							//}
							//登录失败
							console.log("qxj failRes:" + JSON.stringify(res));

						}
					});
				};
				if (this.isIos) {
					uni.preLogin({
						provider: 'univerify',
						success(res) { //预登录成功 显示一键登录选项
							console.log("预登录成功");
							uniLogin();
						},
						fail(res) { // 预登录失败
							// 不显示一键登录选项（或置灰）
							// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
							uni.hideLoading();
							if (res.errCode == 30005 || res.errMsg.includes("无SIM卡")) {
								uni.navigateTo({
									url: "/pages/auth/bindMobile?appleKey=" + that.appleKey
								});
							}
						}
					});

				} else {
					uniLogin();
				}

				// #endif

				// #ifdef H5
				uni.navigateTo({
					url: "/pages/auth/login"
				});
				// #endif
			},
			loginByUniverify(authResult, type) {
				uniCloud.callFunction({
					name: 'loginByMobile', // 你的云函数名称
					data: {
						access_token: authResult.access_token, // 客户端一键登录接口返回的access_token
						openid: authResult.openid // 客户端一键登录接口返回的openid
					}
				}).then(res => {
					console.log("qxj doUniverify:", JSON.stringify(res));
					if (res.result.errCode == 0) {
						this.userPhone = res.result.phoneNumber;
						if (type == 3) {
							// 苹果登录
							this.setPhoneAct(3, this.userPhone, this.unionid);
						} else {
							this.setPhoneAct(1, this.userPhone, this.unionid);
						}
					} else {
						uni.showToast({
							title: res.result.message,
							icon: 'none'
						});
					}
				}).catch(err => {
					// 处理错误
					console.error('调用云函数失败:', err);
					// 详细记录错误信息
					console.error('错误信息:', err.errMsg);

				})
			},
			setPhoneAct(type, phone, unionId) {
				let params = {
					phone: phone,
					unionId: unionId,
				};
				if (type == 3) {
					params = {
						phone: phone,
						unionId: unionId,
						appleKey: this.appleKey
					};
				}
				setPhone(params).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.setStorageSync('AppToken', res.token);
							uni.setStorageSync('userInfo', JSON.stringify(res.user));
							uni.closeAuthView();
							uni.$emit('refreshIM');
							this.goPage()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							uni.closeAuthView();
						}
					},
					rej => {}
				);
			},
			getRegistrationID() {
				this.registrationID = uni.getStorageSync("registrationID");
				if (this.registrationID == null || this.registrationID == "") {
					uni.getPushClientId({
						success: res => {
							uni.setStorageSync("registrationID", res.cid);
							this.registrationID = res.cid
						}
					});
				}
			},
			goBack() {
				uni.$emit('showHealthButler');
				// this.$navBack();
				uni.redirectTo({
					url: "/pages/auth/loginIndex"
				})
			},
			handleAgree() { // 同意
				this.agree = !this.agree
				if (this.isIos) {
					if (this.agree) {
						plus.runtime.agreePrivacy()
						this.getRegistrationID();
					} else {
						plus.runtime.disagreePrivacy();
					}
				}
			},
			goToWeb(index) {
				uni.setStorageSync('url', index == 0 ? getApp().globalData.userAgreement : getApp().globalData
					.privacyPolicy);
				uni.navigateTo({
					url: "/pages/index/h5"
				})
			},
			goPage() {
				let pages = getCurrentPages();
				let url = pages[pages.length - 1];
				const wechatList = uni.getStorageSync('wechatList')
				if (wechatList) {
					return uni.navigateTo({
						url: '/pages/auth/wechatList'
					})
				}
				let openUrl = uni.getStorageSync("openUrl");
				if (openUrl) {
					uni.navigateTo({
						url: openUrl,
						success: function(res) {
							uni.removeStorageSync("openUrl")
						}
					})
				} else {
					this.$updateMsgDot();
					this.$setSource();
					uni.reLaunch({
						// url: '../course/index',
						url: '/pages_im/pages/conversation/conversationList/index',
						animationType: 'none',
						animationDuration: 2000
					});
					return;
					if (pages.length == 1) {
						uni.reLaunch({
							// url: '../course/index',
							url: '/pages_im/pages/conversation/conversationList/index',
							//url: '../course/video/living-app',
							animationType: 'none',
							animationDuration: 2000
						});
					} else {
						//this.$navBack();
					}
				}
			},
			goToRegister() {
				this.$navTo('./register');
			},
			goToFindPass() {
				this.$navTo('./findpass');
			},
			sendSms() {
				if (this.coolDown > 0) {
					return
				}
				if (!uni.$u.test.mobile(this.userName)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: 'none',
					});
					return
				}
				this.coolDown = 60;
				sendCode({
					phone: this.userName
				}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '验证码已发送',
								icon: 'none',
							});
							this.coolDown = 60;
							this.timer = setInterval(() => {
								this.coolDown--;
								if (this.coolDown === 0) {
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000);
						} else {
							this.timer && clearInterval(this.timer);
							this.coolDown = 0
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
						}
					},
					rej => {
						this.timer && clearInterval(this.timer);
						this.coolDown = 0;
					}).catch(() => {
					this.timer && clearInterval(this.timer);
					this.coolDown = 0;
				})
			},
			loginByPhone() {
				if (!uni.$u.test.mobile(this.userName)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: 'none',
					});
					return
				}
				if (this.$isEmpty(this.code)) {
					uni.showToast({
						title: "请输入验证码",
						icon: 'none',
					});
					return
				}
				if (!this.agree) {
					uni.showToast({
						title: "请同意相关协议",
						icon: 'none'
					});
					return
				}
				let data = {
					phone: this.userName,
					code: this.code,
					jpushId: this.registrationID,
					source: this.source
				};
				let that = this;
				uni.showLoading({
					title: "处理中..."
				});
				loginByPhone(data).then(res => {
						uni.hideLoading();
						if (res.code == 200 && res.users && isArray(res.users)) {
							uni.setStorageSync('requestParam', data)
							uni.setStorageSync('wechatList', res.users)
							that.goPage();
							return
						}
						if (res.code == 200) {
							// #ifdef APP-PLUS
							if (res.isNew) {
								quickWechatLogin(true, res.phone);
								return;
							}
							// #endif
							uni.setStorageSync('AppToken', res.token);
							uni.setStorageSync('userInfo', JSON.stringify(res.user));
							uni.$emit('refreshIM');
							uni.$emit('showHealthButler');
							that.goPage();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					rej => {
						uni.hideLoading();
						console.log("qxj rej:" + JSON.stringify(rej));
					}
				)
			}
		},
		beforeDestroy() { // 组件卸载时清掉定时器，防止内存泄漏
			this.timer && clearInterval(this.timer);
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #ffffff;
	}

	.logintype {
		font-size: 16px;
		color: #2583EB;
		padding: 24rpx;
		text-align: left;
		width: 100%;
		background-color: transparent;
		display: flex;
		align-items: center;
		box-sizing: border-box;

		&-item {
			flex: 1;
			margin: 0 16rpx;
			padding: 16rpx;
			text-align: center;
			border-radius: 8rpx;
			color: #333;
			background-color: transparent;
		}

		.active {
			background-color: #2583EB !important;
			color: #fff !important;
		}
	}

	.input-yzcode {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 40rpx;
		border: solid 0rpx #efefef;
		height: 80rpx;
		width: 100%;
		background: url(/static/image/login/cz_icon.png) no-repeat 0 center;
		background-size: 30rpx 30rpx;
		background-position: 30rpx;
	}

	.other-login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80rpx;
		background: rgba(229, 138, 0, 0.08);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2583EB;
		border: 2rpx solid #2583EB;
		margin-top: 30rpx;

		&::after {
			border: none;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: calc(100vh);
		width: 100%;
		position: relative;
		// justify-content: space-between;
		//padding-top: calc(100% - 32vh);
	}

	.backImg {
		position: absolute;
		left: 30rpx;
		top: 40px;
		height: 30rpx;
		width: 30rpx;
	}

	.pageTop {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.content .head {
		text-align: center;
		width: 100%;
		height: 100rpx;
		// background:url(/static/image/login/top_bg.png) no-repeat 0 center;
		background-size: cover;
		box-sizing: border-box;
		font-size: 36rpx;
		font-weight: bold;
		color: #666;
	}

	.content .head image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.2);
	}

	.title {
		color: #141414;
		margin: 50upx 0upx 30upx 0rpx;
		font-size: 38rpx;
		font-weight: 500;
	}

	.desc {
		color: #686866;
		padding: 0 0 30rpx 0rpx;
		font-size: 28rpx;
	}

	.loginBox {
		padding: 0 10px 30rpx;
		width: calc(100%);
		background: #FDFDFD;
		z-index: 10;
		position: relative;

		.login-item p {
			text-align: left;
		}

		.line {
			height: 0.5rpx;
			background-color: #efefef;
			margin-top: 10rpx;
		}

		.input-account {
			margin-top: 20rpx;
			margin-bottom: 0rpx;
			border-radius: 40rpx;
			border: solid 0rpx #efefef;
			height: 80rpx;
			width: 100%;
			background: url(/static/account.png) no-repeat 0 center;
			background-size: 30rpx 30rpx;
			background-position: 30rpx;
		}

		.input-pwd {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 40rpx;
			border: solid 0rpx #efefef;
			height: 80rpx;
			width: 100%;
			background: url(/static/password.png) no-repeat 0 center;
			background-size: 30rpx 30rpx;
			background-position: 30rpx;
		}

		input {
			margin-left: 80rpx;
			height: 80rpx;
			line-height: 80rpx
		}

		.reg-box {
			padding-bottom: 20rpx;
			margin: 0 10px;

			.reg-btn {
				font-size: 16px;
				color: #2583EB;
			}
		}
	}

	.btns {
		margin: 60rpx 0rpx;
	}

	.login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80rpx;
		background: linear-gradient(to right, #2583EB 0%, #2583EB 100%);
		background: -moz-linear-gradient(to right, #2583EB 0%, #2583EB 100%);
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.pageBottom {
		height: 220rpx;
		width: 75%;
		display: flex;
		flex-direction: column;
		position: absolute;
		bottom: 100rpx;
	}

	.tips {
		color: #999;
		font-size: 32rpx;
	}

	.menu {
		margin-top: 30rpx;

		image {
			width: 96rpx;
			height: 96rpx;
		}
	}


	.checkbox {
		margin: 20rpx;
		margin-top: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 38rpx;
		text-align: left;

		text {
			color: #2583EB;
		}

		&-icon {
			flex-shrink: 0;
			margin-right: 12rpx;

			image {
				height: 24rpx;
				width: 24rpx;
			}
		}
	}
</style>