<template>
	<div class="bg">
		<!-- 中间主体登录 -->
		<div class="center flex align-center justify-between">
			<!-- 左侧图片 -->
			<div class="center-l flex align-center justify-center">
				<div class="center-l-cont">
					<div class="center-l-cont-title">
						亿职赞招聘系统
					</div>
					<div class="center-l-cont-img flex align-center justify-center">
						<el-image style="width: 384px; height: 253px" src="/images/login/loginIcon.png" fit="cover" />
					</div>
				</div>
			</div>
			<!-- 右侧登录 -->
			<div class="center-r">
				<blockquote v-if="isEq == false">
					<!-- 切换登录类型 -->
					<!-- <div class="center-r-tabs flex align-center justify-center">
						<div class="center-r-tabs-center flex align-center">
							<div :class="current==index?'active':''"
								class="center-r-tabs-item flex align-center justify-center" @click="selectIndex(index)"
								v-for="(item,index) in list" :key="index">
								{{item}}
							</div>
							<div class="center-r-tabs-item-active"
								:style="current==0?'transform: translateX(0)':'transform: translateX(182px)'">
							</div>
						</div>
					</div> -->
					<!-- 手机号登录 -->
					<blockquote v-if="isFind == false && isZhuce == false">
						<div style="margin-top: 60px;" class="center-r-title flex align-center justify-center">
							<div class="center-r-title-box flex align-center justify-between">
								<div class="center-r-title-box-l">
									手机号登录
								</div>
								<!-- <div class="center-r-title-box-r" @click="isEq = true">
									<el-image style="width: 46px; height: 46px" class="center-r-title-box-r-img"
										src="/images/login/erQr.png" fit="cover" />
								</div> -->
							</div>
						</div>
						<!-- 账号 -->
						<div class="center-r-inp flex align-center justify-center">
							<div class="center-r-inp-box">
								<el-input class="inputClass" size="large" v-model="userName" placeholder="请输入手机号" />
							</div>

						</div>
						<!-- 密码 -->
						<div class="center-r-inp flex align-center justify-center" style="margin-top: 22px;">
							<div class="center-r-inp-box">
								<el-input class="inputClass" size="large" type="password" show-password
									v-model="passWord" placeholder="请输入登录密码" />
							</div>

						</div>
						<!-- 登录按钮 -->
						<div class="center-r-submit flex align-center justify-center">
							<div @click="login()" class="center-r-submit-box flex align-center justify-center">
								登录
							</div>
						</div>
						<!-- 忘记密码/快速注册 -->
						<div class="center-r-zc flex align-center justify-center">
							<div class="center-r-zc-box flex align-center justify-between">
								<div class="center-r-zc-box-i" @click="isFind = true;selectLoginType();">
									重置密码
								</div>
								<div class="center-r-zc-box-i" @click="isZhuce = true;selectLoginType();">
									快速注册
								</div>
							</div>
						</div>
						<!-- 隐私政策/协议 -->
						<div class="center-r-xy flex align-center justify-center">
							<div class="center-r-xy-box flex align-center justify-center">
								<el-checkbox class="checkBox" v-model="checked" style="margin-right: 10px;"
									size="large" />
								登录即代表同意
								<span @click="openAgree('隐私政策',176)">《隐私政策》</span>
								和
								<span @click="openAgree('用户服务协议',177)">《用户服务协议》</span>
							</div>
						</div>
					</blockquote>
					<!-- 找回密码 -->
					<blockquote v-if="isFind == true && isZhuce == false">
						<div class="center-r-title flex align-center justify-center">
							<div class="center-r-title-box flex align-center justify-between">
								<div class="center-r-title-box-l"
									style="border-bottom: 4px solid #00DD9A;height: 100%;">
									重置密码
								</div>
							</div>
						</div>
						<!-- 手机号 -->
						<div class="center-r-item flex align-center justify-center">
							<div class="center-r-item-box flex align-center justify-between">
								<div class="center-r-item-box-l flex align-center">
									手机号
								</div>
								<div class="center-r-item-box-r">
									<el-input class="inputClass" size="large" v-model="userName"
										placeholder="可用于登录或找回密码" />
								</div>
							</div>
						</div>
						<!-- 验证码 -->
						<div class="center-r-item flex align-center justify-center">
							<div class="center-r-item-box flex align-center justify-between">
								<div class="center-r-item-box-l flex align-center">
									验证码
								</div>
								<div class="center-r-item-box-r" style="width: 188px;">
									<el-input class="inputClass" size="large" v-model="code" placeholder="请输入验证码" />
								</div>
								<div @click="sendCode()" v-if="isSendCode == false"
									class="center-r-item-box-rs flex align-center justify-center">
									获取验证码
								</div>
								<div v-else style="background-color: #f2f2f2;color: #999999;"
									class="center-r-item-box-rs flex align-center justify-center">
									已发送{{totalSeconds}}
								</div>
							</div>
						</div>
						<!-- 新密码 -->
						<div class="center-r-item flex align-center justify-center">
							<div class="center-r-item-box flex align-center justify-between">
								<div class="center-r-item-box-l flex align-center">
									新密码
								</div>
								<div class="center-r-item-box-r">
									<el-input class="inputClass" size="large" type="password" show-password
										v-model="passWord" placeholder="请设置新密码" />
								</div>
							</div>
						</div>
						<!-- 立即重置 -->
						<div class="center-r-submit flex align-center justify-center">
							<div @click="forgetPwd()" class="center-r-submit-box flex align-center justify-center">
								立即重置
							</div>
						</div>
						<!-- 手机号登录/快速注册 -->
						<div class="center-r-zc flex align-center justify-center" style="margin-bottom: 86px;">
							<div class="center-r-zc-box flex align-center justify-between">
								<div class="center-r-zc-box-i" @click="isFind = false">
									手机号登录
								</div>
								<div class="center-r-zc-box-i" @click="isZhuce = true">
									快速注册
								</div>
							</div>
						</div>
					</blockquote>
					<!-- 注册 -->
					<blockquote v-if="isZhuce == true">
						<div class="center-r-title flex align-center justify-center">
							<div class="center-r-title-box flex align-center justify-between">
								<div class="center-r-title-box-l"
									style="border-bottom: 4px solid #00DD9A;height: 100%;">
									快速注册
								</div>
								<div style="height: 100%;font-size: 13px;color: #999999;" class="flex align-center">
									已有账号？
									<el-text style="color: #00DD9A;cursor: pointer;"
										@click="isFind = false;isZhuce = false;">登录</el-text>
								</div>
							</div>
						</div>
						<!-- 用户名 -->
						<!-- <div class="center-r-item flex align-center justify-center">
							<div class="center-r-item-box flex align-center justify-between">
								<div class="center-r-item-box-l flex align-center">
									用户名
								</div>
								<div class="center-r-item-box-r">
									<el-input class="inputClass" size="large" v-model="nikName" placeholder="请设置用户名" />
								</div>
							</div>
						</div> -->
						<!-- 手机号 -->
						<div class="center-r-item flex align-center justify-center margin-top-20">
							<div class="center-r-item-box flex align-center justify-between">
								<div class="center-r-item-box-l flex align-center">
									手机号
								</div>
								<div class="center-r-item-box-r">
									<el-input class="inputClass" size="large" v-model="userName"
										placeholder="可用于登录或找回密码" />
								</div>
							</div>
						</div>
						<!-- 密码 -->
						<div class="center-r-item flex align-center justify-center margin-top-20">
							<div class="center-r-item-box flex align-center justify-between">
								<div style="letter-spacing: 10px;" class="center-r-item-box-l flex align-center">
									密码
								</div>
								<div class="center-r-item-box-r">
									<el-input class="inputClass" size="large" type="password" show-password
										v-model="passWord" placeholder="请设置登录密码" />
								</div>
							</div>
						</div>
						<!-- 验证码 -->
						<div class="center-r-item flex align-center justify-center margin-top-20">
							<div class="center-r-item-box flex align-center justify-between">
								<div class="center-r-item-box-l flex align-center">
									验证码
								</div>
								<div class="center-r-item-box-r" style="width: 188px;">
									<el-input class="inputClass" size="large" v-model="code" placeholder="请输入验证码" />
								</div>
								<div @click="sendCode()" v-if="isSendCode == false"
									class="center-r-item-box-rs flex align-center justify-center">
									获取验证码
								</div>
								<div v-else style="background-color: #f2f2f2;color: #999999;"
									class="center-r-item-box-rs flex align-center justify-center">
									已发送{{totalSeconds}}
								</div>
							</div>
						</div>
						<!-- 邀请码 -->
						<!-- <div class="center-r-item flex align-center justify-center margin-top-20">
							<div class="center-r-item-box flex align-center justify-between">
								<div class="center-r-item-box-l flex align-center">
									邀请码
								</div>
								<div class="center-r-item-box-r">
									<el-input class="inputClass" size="large" v-model="invitation"
										placeholder="请填写邀请码（选填）" />
								</div>
							</div>
						</div> -->
						<!-- 注册 -->
						<div @click="registApp()" class="center-r-submit flex align-center justify-center">
							<div style="letter-spacing: 4px;"
								class="center-r-submit-box flex align-center justify-center">
								注册
							</div>
						</div>
						<!-- 隐私政策/协议 -->
						<div style="margin-top: 14px;" class="center-r-xy flex align-center justify-center">
							<div class="center-r-xy-box flex align-center justify-center">
								<el-checkbox class="checkBox" v-model="checked" style="margin-right: 10px;"
									size="large" />
								登录即代表同意
								<span @click="openAgree('隐私政策',176)">《隐私政策》</span>
								和
								<span @click="openAgree('用户服务协议',177)">《用户服务协议》</span>
							</div>
						</div>
					</blockquote>
				</blockquote>
				<!-- 扫码登录 -->
				<div class="qrLogin" v-else>
					<div class="qrLogin-title flex align-center justify-center">
						<div class="qrLogin-title-box">亿职赞微信扫码登录</div>
						<div class="qrLogin-title-line"></div>
					</div>
					<!-- 切换账号登录 -->
					<div class="qrLogin-qh flex align-center justify-center">
						<div @click="isEq = false" class="qrLogin-qh-box flex align-center justify-end">
							<el-image style="width: 95px; height: 95px" class="qrLogin-qh-box-img"
								src="/images/login/zhanghao.png" fit="cover" />
						</div>
					</div>
					<!-- 二维码 -->
					<div class="qrLogin-qr flex align-center justify-center">
						<div class="qrLogin-qr-box">
							<img style="width: 100%;height: 100%;" :src="loginqr" alt="" srcset="" />
						</div>
					</div>
					<!-- 提示 -->
					<div class="qrLogin-tips flex align-center justify-center">
						<div class="qrLogin-tips-box flex align-center">
							<el-image style="width: 25px; height: 25px;margin-right: 10px;" class="qrLogin-qh-box-img"
								src="/images/login/sao.png" fit="cover" />
							打开<el-text class="qrLogin-tips-box-app">微信</el-text> 扫一扫登录
						</div>
					</div>

				</div>



			</div>
		</div>

		<!-- 协议弹窗 -->
		<agreement :title="title" v-if="dialogAgreements" :dialogAgreements="dialogAgreements" :typeid="typeid"
			@closeAgree="closeAgree" />
		<!-- 扫码登录绑定手机号 -->
		<el-dialog top="20vh" @close="closeFrom" v-model="dialogVisiblePhone" title="绑定手机号" width="30%"
			:before-close="handleClose">
			<div class="bind">
				<div class="bind-tips" style="color: #00DD9A;">
					*为保障您的账号安全，请绑定手机号
				</div>
				<div class="bind-from">
					<el-form ref="formRef" :model="form" style="width: 100%;margin-top: 20px;">
						<el-form-item label="手机号" prop="phone" :rules="[
					        { required: true, message: '请输入手机号' },
					      ]">
							<el-input class="inputClass" size="large" v-model.number="form.phone" type="text"
								placeholder="请输入手机号" />
						</el-form-item>
						<el-form-item label="验证码" prop="msg" :rules="[
						    { required: true, message: '请输入验证码' },
						  ]">
							<div style="width: 100%;" class="flex align-center justify-between">
								<el-input class="inputClass" size="large" v-model.number="form.msg" type="text"
									placeholder="请输入验证码" />
								<el-button :disabled="isSendmsg" @click="geBindMsg()" type="primary"
									style="margin-left: 20px;height: 46px;width: 100px;">
									{{isSendmsg?msgCode:'获取验证码'}}
								</el-button>
							</div>

						</el-form-item>
					</el-form>
				</div>
			</div>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisiblePhone = false">取消</el-button>
					<el-button @click="bindPhone()" type="primary">
						确认
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import agreement from '../../components/agreement/agreement.vue'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	export default {
		components: {
			agreement
		},
		data() {
			return {
				form: {
					phone: '',
					msg: '',
					wxOpenId: '',
				},
				dialogVisiblePhone: false,
				title: '',
				typeid: '',
				dialogAgreements: false,
				size: 300, //二维码大小
				isEq: false, //是否二维码登录
				isFind: false, //是否找回密码
				checked: false, //是否同意隐私政策于用户协议
				isSendCode: false, //是否发送验证码码
				isZhuce: false, //是否注册
				totalSeconds: 59, //发送验证码倒计时
				current: 0, //登录类型 0:求职 1:招聘
				intervalId: null, //定时器
				list: ['我要找工作', '我要招聘'],
				nikName: '', //用户名
				userName: '', //账号
				passWord: '', //密码
				code: '', //验证码
				invitation: '', //邀请码
				qrColor: {
					'background': '#ffffff'
				},
				screenHeight: 0, //屏幕高度
				loginqr: '', //登录二维码
				intimer: null, //二维码登录定时器
				intimerMsg: null, //绑定手机号验证码定时器
				msgCode: 59, //绑定手机号倒计时
				isSendmsg: false, //是否发送验证码
			}
		},
		mounted() {
			if (localStorage.getItem('inviterCode')) {
				this.invitation = localStorage.getItem('inviterCode')
			}
			this.screenHeight = window.innerHeight
			// this.getWxLoginQr()
		},
		methods: {
			// 更新用户类型
			getUserType(){
				this.$Request.post('/app/user/updateUser',{userType:1},{type: 'json'}).then(res => {
					if (res.code == 0) {
						console.log(res)
					}
				})
			},
			//关闭绑定手机号的回调
			closeFrom() {
				this.form = {
					phone: '',
					msg: '',
					wxOpenId: '',
				}
				this.isSendmsg = false
				this.msgCode = 59
				clearInterval(this.intimerMsg)
				this.intimerMsg = null
			},
			//绑定手机号
			bindPhone() {
				let formRef = this.$refs.formRef
				formRef.validate((valid) => {
					if (valid) {
						this.$Request.post('/app/Login/bindUser', this.form).then(res => {
							if (res.code == 0) {
								//存储用户登录凭证token
								localStorage.setItem('token', res.token)
								localStorage.setItem('userId', res.user.userId)
								this.dialogVisiblePhone = false
								// clearInterval(this.intimer)
								// this.intimer = null
								if (res.user.userType == 1) { //用户
									this.$router.push({
										name: 'index',
									})
								} else { //企业
									this.$router.push({
										name: 'indexCompany',
									})
								}
							}
						})
					}
				})
			},
			//获取绑定手机号验证码
			geBindMsg() {
				if (!this.form.phone) {
					ElMessage({
						message: '请输入手机号',
						type: 'info',
						duration: 1500,
						offset: this.screenHeight / 2
					})
					return
				}
				this.$Request.get('/app/Login/sendMsg/' + this.form.phone + '/bind').then(res => {
					if (res.code == 0) {

						this.isSendmsg = true
						this.intimerMsg = setInterval(() => {
							if (this.msgCode > 0) {
								this.msgCode--;
							} else {
								// 倒计时结束后清除定时器,把状态修改为发送,倒计时恢复60秒
								clearInterval(this.intimerMsg);
								this.isSendmsg = false
								this.msgCode = 59
							}
						}, 1000);
					} else {
						ElMessage({
							message: res.msg,
							type: 'error',
							duration: 1500,
							offset: this.screenHeight / 2
						})
					}
				})
			},
			//获取登录二维码
			getWxLoginQr() {
				let data = {
					tempId: Math.round(new Date().getTime() / 1000).toString()
				}
				this.$Request.get('/weixin/api/loginQr', {
					params: data
				}).then(res => {
					if (res.code == 0 && res.data) {
						this.loginqr = res.data
						this.intimer = setInterval(() => {
							this.getWxEq(data)
						}, 1000)
					}
				})
			},
			//定时获取扫码登录结果
			getWxEq(data) {
				this.$Request.get('/app/Login/getUser', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						clearInterval(this.intimer)
						this.intimer = null
						if (res.user.phone) {
							//存储用户登录凭证token
							localStorage.setItem('token', res.token)
							localStorage.setItem('userId', res.user.userId)
							if (res.user.userType == 1) { //用户
								this.$router.push({
									name: 'index',
								})
							} else { //企业
								this.$router.push({
									name: 'indexCompany',
								})
							}
						} else {
							this.form.wxOpenId = res.user.wxOpenId
							this.dialogVisiblePhone = true

						}


					}
				})
			},
			selectLoginType() {
				clearInterval(this.intervalId);
				this.isSendCode = false
				this.totalSeconds = 60
			},
			openAgree(title, typeid) {
				this.title = title
				this.typeid = typeid
				this.dialogAgreements = true
			},
			closeAgree(data) {
				this.dialogAgreements = data
			},
			//注册
			registApp() {
				// if (!this.nikName) {
				// 	ElMessageBox.alert('请输入用户名', '提示', {
				// 		confirmButtonText: '确认',
				// 	})
				// 	return
				// }
				if (!this.userName) {
					ElMessageBox.alert('请输入手机号', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.passWord) {
					ElMessageBox.alert('请输入密码', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.code) {
					ElMessageBox.alert('请输入验证码', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.checked) {
					ElMessageBox.alert('请阅读并同意《隐私政策》和《用户服务协议》', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				let data = {
					userName: this.userName,
					phone: this.userName,
					password: this.passWord,
					// invitation: this.invitation,
					platform: 'pc',
					msg: this.code
				}
				this.$Request.post('/app/Login/registApp', data).then(res => {
					if (res.code == 0) {
						this.getUserType();
						//存储用户登录凭证token
						localStorage.setItem('token', res.token)
						localStorage.setItem('userId', res.user.userId)
						ElMessage({
							message: '注册成功',
							type: 'success',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						setTimeout(() => {
							clearInterval(this.intimer)
							this.intimer = null
							this.$router.push({
								name: 'index',
							})
						}, 1500)
					} else {
						ElMessageBox.alert(res.msg, '提示', {
							confirmButtonText: '确认'
						})
					}
				})
			},
			//修改密码
			forgetPwd() {
				if (!this.userName) {
					ElMessageBox.alert('请输入账号', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.code) {
					ElMessageBox.alert('请输入验证码', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.passWord) {
					ElMessageBox.alert('请输入新密码', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				let data = {
					phone: this.userName,
					msg: this.code,
					pwd: this.passWord
				}
				this.$Request.post('/app/Login/forgetPwd', data).then(res => {
					if (res.code == 0) {
						ElMessageBox.alert('已重置密码，请使用新密码登录', '提示', {
							confirmButtonText: '确认',
							callback: () => {
								this.isFind = false;
								this.isZhuce = false;
							}
						})

					} else {
						ElMessageBox.alert(res.msg, '提示', {
							confirmButtonText: '确认'
						})
					}
				})
			},
			// 登录
			login() {
				if (!this.userName) {
					ElMessageBox.alert('请输入手机号', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.passWord) {
					ElMessageBox.alert('请输入密码', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.checked) {
					ElMessageBox.alert('请阅读并同意《隐私政策》和《用户服务协议》', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				let data = {
					phone: this.userName,
					password: this.passWord
				}
				this.$Request.post('/app/Login/loginApp', data).then(res => {
					if (res.code == 0) {
						//存储用户登录凭证token
						localStorage.setItem('token', res.token)
						localStorage.setItem('userId', res.user.userId)
						clearInterval(this.intimer)
						this.intimer = null
						if (res.user.userType == 1) { //用户
							this.$router.push({
								name: 'index',
							})
						} else { //企业
							this.$router.push({
								name: 'indexCompany',
							})
						}

					} else {
						ElMessageBox.alert(res.msg, '提示', {
							confirmButtonText: '确认',
						})
					}
				})


			},
			startCountdown() {
				this.isSendCode = true
				this.intervalId = setInterval(() => {
					if (this.totalSeconds > 0) {
						this.totalSeconds--;
					} else {
						// 倒计时结束后清除定时器,把状态修改为发送,倒计时恢复60秒
						clearInterval(this.intervalId);
						this.isSendCode = false
						this.totalSeconds = 59
					}
				}, 1000);
			},
			//发送验证码
			sendCode() {

				if (!this.userName) {
					ElMessageBox.alert('请输入手机号', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (this.isZhuce) { //注册
					this.$Request.get("/app/Login/sendMsg/" + this.userName + "/1").then(res => {
						if (res.code == 0) {
							this.startCountdown()
						} else {
							ElMessageBox.alert(res.msg, '提示', {
								confirmButtonText: '确认',
							})
						}
					})
				} else { //重置
					this.$Request.get("/app/Login/sendMsg/" + this.userName + "/forget").then(res => {
						if (res.code == 0) {

							this.startCountdown()
						} else {
							ElMessageBox.alert(res.msg, '提示', {
								confirmButtonText: '确认',
							})
						}
					})
				}


			},
			/**
			 * @param {Number} index 选择的索引
			 * 选择tabs
			 */
			selectIndex(index) {
				this.current = index
			},

		}
	}
</script>

<style scoped>
	.inputClass /deep/.el-input__inner {
		height: 44px;
	}

	.inputClass /deep/.el-input__wrapper {
		border: 1px solid #dcdddf;
		box-shadow: none;
	}

	.inputClass /deep/.is-focus {
		border: 1px solid #06E1AB;
		box-shadow: none;
	}

	:deep(.el-input__wrapper:hover) {
		border: 1px solid #06E1AB;
		box-shadow: none;
	}

	.checkBox /deep/.el-checkbox__inner:hover {
		border: 1px solid #06E1AB;
		box-shadow: none;
	}

	.checkBox /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #06E1AB;
		border-color: #06E1AB;
	}

	:deep(.el-dialog) {
		border-radius: 14px !important;
	}

	:deep(.el-dialog__body) {
		padding-top: 10px !important;

	}

	:deep(.el-dialog__header) {
		background: linear-gradient(45deg, #f2fffa, #FFFFFF);
		border-radius: 14px 14px 0 0;
	}
</style>
<style lang="scss">
	//定义宽度变量
	$primary-width: 182px;

	.margin-top-20 {
		margin-top: 20px !important;
	}

	.active {
		color: #FFFFFF;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		background-color: #F1FFFD;
		position: relative;
	}

	.center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1008px;
		height: auto;
		background: linear-gradient(180deg, #03E4AA 0%, #11CFB3 100%);
		border-radius: 24px;
	}

	.center-l {
		width: 496px;
		height: 100%;
		background: linear-gradient(180deg, #03E4AA 0%, #11CFB3 100%);
		border-radius: 24px 0 0 24px;
	}

	.center-r {
		width: calc(100% - 496px);
		height: 100%;
		background-color: #FFFFFF;
		border-radius: 0 24px 24px 0;
	}

	.center-l-cont {
		width: 100%;
	}

	.center-l-cont-title {
		width: 100%;
		text-align: center;
		font-size: 32px;
		font-weight: 900;
		color: #FFFFFF;
		margin-bottom: 57px;
	}

	.center-l-cont-img {
		width: 100%;
		height: 254px;
	}

	.center-r-tabs {
		width: 100%;
		margin-top: 86px;

		.center-r-tabs-center {
			width: calc($primary-width * 2);
			height: 45px;
			background-color: #F8F8F8;
			border-radius: 8px;
			color: #666666;
			font-size: 18px;
			position: relative;

		}

		.center-r-tabs-item {
			width: $primary-width;
			height: 100%;
			cursor: pointer;
			transition: transform 0.3s ease; // 添加过渡效果
			z-index: 99999;

		}

		.center-r-tabs-item-active {
			width: $primary-width;
			height: 100%;
			position: absolute;
			background-color: #06E1AB;
			border-radius: 6px;
			transition: transform 0.3s ease; // 添加过渡效果
		}
	}

	.center-r-item {
		width: 100%;
		height: 44px;
		margin-top: 30px;

		.center-r-item-box {
			width: calc($primary-width * 2);
			height: 100%;
		}

		.center-r-item-box-l {

			color: #333333;
			font-size: 14px;
			font-weight: 400;
		}

		.center-r-item-box-r {
			width: 300px;
			height: 100%;
		}

		.center-r-item-box-rs {
			width: 100px;
			height: 100%;
			background-color: #00DD9A;
			color: #ffffff;
			border-radius: 6px;
			font-weight: 400;
			cursor: pointer;
			font-size: 14px;
		}
	}

	.center-r-title {
		width: 100%;
		height: 46px;
		margin-top: 26px;

		.center-r-title-box {
			width: calc($primary-width * 2);
			height: 100%;
			border-bottom: 2px solid #EBFFF9;
		}

		.center-r-title-box-l {
			color: #333333;
			font-size: 14px;
			font-weight: 500;
		}

		.center-r-title-box-r {
			cursor: pointer;

			.center-r-title-box-r-img:hover {
				content: url("/images/login/erQr_s.png");
			}
		}
	}

	.center-r-inp {
		width: 100%;
		height: 44px;
		margin-top: 40px;

		.center-r-inp-box {
			width: calc($primary-width * 2);
			height: 100%;
		}
	}

	.center-r-submit {
		width: 100%;
		height: 44px;
		margin-top: 22px;

		.center-r-submit-box {
			width: calc($primary-width * 2);
			height: 100%;
			background-color: #00DD9A;
			border-radius: 6px;
			color: #ffffff;
			font-size: 16px;
			cursor: pointer;
		}
	}

	.center-r-zc {
		width: 100%;
		margin-top: 10px;

		.center-r-zc-box {
			width: calc($primary-width * 2);
			height: 100%;

			.center-r-zc-box-i:hover {
				color: #00DD9A;
			}

			.center-r-zc-box-i {
				color: #999999;
				font-size: 13px;
				cursor: pointer;
			}
		}
	}

	.center-r-xy {
		width: 100%;
		margin-top: 32px;
		margin-bottom: 86px;

		.center-r-xy-box {
			width: calc($primary-width * 2);
			height: 100%;
			color: #999999;
			font-size: 14px;

			span {
				color: #00DD9A;
				cursor: pointer;
			}
		}
	}

	.qrLogin {
		width: 100%;

		.qrLogin-title {
			width: 100%;
			margin-top: 45px;
			position: relative;
		}

		.qrLogin-title-box {
			// width: calc($primary-width * 2);
			color: #333333;
			font-size: 20px;
			font-weight: 500;
		}

		.qrLogin-title-line {
			position: absolute;
			width: 34px;
			height: 4px;
			background-color: #00DD9A;
			top: 100%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.qrLogin-qh {
			width: 100%;
			height: 95px;
			margin-top: 20px;

			.qrLogin-qh-box {
				width: calc($primary-width * 2);
				height: 95px;
			}

			.qrLogin-qh-box-img {
				cursor: pointer;
			}

			.qrLogin-qh-box-img:hover {
				content: url("/images/login/zhanghao_s.png");
			}
		}

		.qrLogin-qr {
			width: 100%;
			height: 300px;

			.qrLogin-qr-box {
				width: 300px;
				height: 300px;
			}
		}

		.qrLogin-tips {
			width: 100%;
			color: #333333;
			margin-top: 20px;
			margin-bottom: 69px;

			.qrLogin-tips-box {
				font-size: 18px;


			}

			.qrLogin-tips-box-app {
				font-size: 20px;
			}
		}
	}
</style>