<template>
	<div id="login">
		<div id="login_wrapper" v-if="!isMobile">
			<img class="login-bg" src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_bg.png" alt />
			<img class="login-icon" src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_logo.png" alt />
			<!-- <el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-position="right"
				label-width="0px"
				class="demo-ruleForm"
				id="login-container"
				@submit.native.prevent
			>
				<el-form-item>
					<h1
						style="
							font-size: 38px;
							text-align: center;
							color: #333;
							margin-bottom: 30px;
						"
					>
						运营管理系统
					</h1>
				</el-form-item>
				<el-form-item prop="account">
					<el-input
						type="text"
						v-model="ruleForm.account"
						auto-complete="off"
						placeholder="请输入用户名"
					>
					</el-input>
				</el-form-item>
				<el-form-item prop="checkPass" v-if="visible">
					<el-input
						type="password"
						v-model="ruleForm.checkPass"
						auto-complete="off"
						placeholder="请输入密码"
					>
					</el-input>
				</el-form-item>
				<el-form-item prop="checkPass" v-else>
					<el-input
						type="text"
						v-model="ruleForm.checkPass"
						auto-complete="off"
						placeholder="请输入密码"
					>
					</el-input>
				</el-form-item>
				<div class="remember-cont">
					<el-checkbox v-model="checked" class="remember"
						>保持登录状态</el-checkbox
					>
					<div class="warn-check-tip" v-show="checked">
						<i class="el-icon-warning"/>
						勾选表示信任此设备，系统将不会自动退出该设备，使用公用电脑请勿勾选！
					</div>
				</div>
				<el-form-item>
					<el-button
						type="primary"
						size="medium"
						@click.native="handleSubmit2"
						:loading="logining"
						class="submit_btn"
						>登录</el-button
					>
				</el-form-item>
			</el-form> -->
			<div class="login-box" id="login-container" v-if="activeModel!=='forgetPassModel'">
				<div class="fixed-login-wrapper">

				<h1 style="font-size: 38px;text-align: center;color: #333;margin-bottom: 30px;">
					运营管理系统
				</h1>
				<el-tabs v-model="activeModel">
					<!-- <el-tab-pane label="账号登录" name="ordinaryModel">
						<OrdinaryModel ref="ordinaryModel"
							:loginCheck="loginCheck"
							:accountCheck="accountCheck"
							@clearnHint="clearnHint"
							@changeModel="changeModel('forgetPassModel')"
						/>
					</el-tab-pane>
					<el-tab-pane label="手机号登录" name="mobileModel">
						<MobileModel ref="mobileModel"
							:areaCode="areaCode"
						/>
					</el-tab-pane> -->

					<OrdinaryModel ref="ordinaryModel"
							:loginCheck="loginCheck"
							:accountCheck="accountCheck"
							@clearnHint="clearnHint"
							@changeModel="changeModel('forgetPassModel')"
							v-show="activeModel=='ordinaryModel'"
					/>

					<MobileModel ref="mobileModel"
							:areaCode="areaCode"
							v-show="activeModel=='mobileModel'"
					/>

					<EmailModel ref="emailModel" v-show="activeModel=='emailModel'"/>
				</el-tabs>
				<el-button
					type="primary"
					size="medium"
					@click.native="handleLogin"
					:loading="logining"
					class="submit_btn"
					>登录</el-button>
					<div class="another-login-type">
						<div class="another-type-hint">
							<div class="type-hint-line"></div>
							<div class="type-hint-text">其他登录方式</div>
							<div class="type-hint-line"></div>
						</div>
						<div class="another-type">
							<div class="login-type-box">
								<div class="login-type-item" @click="activeModel='ordinaryModel';handleClick({name:'ordinaryModelMobile'})"
								v-show="activeModel!=='ordinaryModel'">
									<img src="~@/assets/img/icons/account-login-type.png">
									<span>账号登录</span>
								</div>
								<div class="login-type-item" @click="activeModel='mobileModel';handleClick({name:'mobileModelMobile'})"
								v-show="activeModel!=='mobileModel'">
									<img src="~@/assets/img/icons/phone-login-type.png">
									<span>手机号登录</span>
								</div>
								<div class="login-type-item" v-show="activeModel!=='emailModel'" 
								@click="activeModel='emailModel';handleClick({name:'emailModelMobile'})">
									<img src="~@/assets/img/icons/email-login-type.png">
									<span>邮箱登录</span>
								</div>
							</div>
							<!-- <div class="login-type-item"
							@click="activeModel='emailModel';handleClick({name:'emailModel'})">
								<img src="~@/assets/img/icons/email-login-type.png">
								<span>邮箱登录</span>
							</div> -->
						</div>
					</div>
				</div>
			</div>
			<div class="login-box" v-else>
				<div class="fixed-login-wrapper">
					<ForgetPassModel 
						ref="forgetPassModel"
						:autoAccount="$refs.ordinaryModel?$refs.ordinaryModel.form.account:''"
						@changeModel="changeModel('ordinaryModel')"/>
				</div>	
			</div>
		</div>

		<!-- 移动端的登录页面跟移动ETA的一模一样 单独整一份 -->
		<div id="login_wrapper_mobile" v-else>
			<template v-if="activeModel!=='forgetPassModel'">
				<div class="login-logo">
					<img src="https://hzstatic.hzinsights.com/static/hz_crm_web/imgs/login_logo.png" >
				</div>
				<div class="login-title">sign in to continue</div>
				<OrdinaryModel ref="ordinaryModelMobile"
					:loginCheck="loginCheck"
					:accountCheck="accountCheck"
					:isMobile="isMobile"
					@clearnHint="clearnHint"
					@changeModel="changeModel('forgetPassModel')"
					v-show="activeModel=='ordinaryModel'"
				/>
				<MobileModel ref="mobileModelMobile"
					:areaCode="areaCode" :isMobile="isMobile" 
					v-show="activeModel=='mobileModel'"
				/>
				<EmailModel ref="emailModelMobile" :isMobile="isMobile" v-show="activeModel=='emailModel'" />

				<el-button type="primary" @click.native="handleLogin" 
				:loading="logining" class="submit_btn_mobile">登录</el-button>
				<div class="login-type-box">
					<div class="login-type-item" @click="activeModel='ordinaryModel';handleClick({name:'ordinaryModelMobile'})"
					v-show="activeModel!=='ordinaryModel'">
						<img src="~@/assets/img/icons/account-login-type.png">
						<span>账号密码登录</span>
					</div>
					<div class="login-type-item" @click="activeModel='mobileModel';handleClick({name:'mobileModelMobile'})"
					v-show="activeModel!=='mobileModel'">
						<img src="~@/assets/img/icons/phone-login-type.png">
						<span>手机号登录</span>
					</div>
					<div class="login-type-item" v-show="activeModel!=='emailModel'" 
					@click="activeModel='emailModel';handleClick({name:'emailModelMobile'})">
						<img src="~@/assets/img/icons/email-login-type.png">
						<span>邮箱登录</span>
					</div>
				</div>
			</template>
			<div class="login-box" v-else>
				<!-- 忘记密码就不重新搞了，太麻烦了，就写一起吧 -->
				<ForgetPassModel 
					ref="forgetPassModelMobile"
					:isMobile="isMobile" 
					:autoAccount="$refs.ordinaryModelMobile?$refs.ordinaryModelMobile.form.account:''"
					@changeModel="changeModel('ordinaryModel')"/>
			</div>
		</div>

		<!-- 验证弹窗 -->
		<el-dialog
			class="check-dialog"
			:visible.sync="isCheckDialogShow"
			:close-on-click-modal="false"
			:modal-append-to-body="false"
			width="30%"
			@close="isCheckDialogShow = false"
			>
			<el-tabs v-model="checkActiveModel" @tab-click="handleClick">
				<el-tab-pane label="手机号验证" name="checkMobileModel">
						<MobileModel ref="checkMobileModel"
							:areaCode="areaCode"
						/>
					</el-tab-pane>
					<el-tab-pane label="邮箱验证" name="checkEmailModel">
						<EmailModel ref="checkEmailModel"/>
					</el-tab-pane>
			</el-tabs>
			<span slot="footer" class="dialog-footer">
				<el-button 
					type="primary" 
					:loading="checkLogining"
					@click="submitCheck">提 交</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { userLogin , departInterence } from '@/api/api.js'
import http from '@/api/http.js'
import md5 from '@/utils/md5.js'
import EmailModel from "./login_manage/EmailModel.vue"
import ForgetPassModel from "./login_manage/ForgetPassModel.vue"
import MobileModel from "./login_manage/MobileModel.vue"
import OrdinaryModel from "./login_manage/OrdinaryModel.vue"
export default {
	components: { OrdinaryModel, MobileModel, EmailModel, ForgetPassModel },
	data() {
		return {
			b: new http.Base64(),
			logining: false, //登录loadding
			ruleForm: {
				account: '',
				checkPass: '',
			},
			rules: {
				account: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur',
					},
				],
				checkPass: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					},
				],
			},
			checked: false, //是否保持登录状态
			visible: true, //密码输入类型

			activeModel: 'ordinaryModel',
			/* form check 错误提示标识*/
			loginCheck:false, //账号或密码错误
			accountCheck:false,//账号异常：多次输错密码、长时间未登录
			accountForbidden:false,//账号被禁用
			mobileCheck:false,//手机号未绑定
			emailCheck:false,//邮箱未绑定
			areaCode:[],

			isCheckDialogShow:false,
			checkActiveModel:'checkMobileModel',
			isMobile:false
		}
	},
	computed:{
		activeModelForm(){
			return this.isMobile?this.activeModel+'Mobile':this.activeModel
		},
		ordinaryModelForm(){
			return this.isMobile?'ordinaryModelMobile':'ordinaryModel'
		},
		mobileModelForm(){
			return this.isMobile?'mobileModelMobile':'mobileModel'
		},
		emailModelForm(){
			return this.isMobile?'emailModelMobile':'emailModel'
		}
	},
	watch:{
		isMobile(value){
			// 移动端变PC或相反的情况监听
			// 重新获取验证码
			this.$nextTick(()=>{
				// console.log(this.activeModelForm);
				if((this.activeModel=="mobileModel" || this.activeModel=="emailModel")&&
				(!this.$refs[this.activeModelForm].picSrc))
				this.$refs[this.activeModelForm].getCodePic()
			})
		}
	},
	created() {
		this.keyupSubmit() //回车登录
		/* let userAccount = localStorage.getItem('account') || null
		let userCheckPass = localStorage.getItem('checkPass') || null
		if (userAccount) {
			this.ruleForm.account = this.b.decode(userAccount)
			this.ruleForm.checkPass = this.b.decode(userCheckPass)
			this.checked = true;
		} */
		this.getPhoneCode();//获取手机号区号
	},
	mounted(){
		this.getRememberedInfo()
		this.isMobile=!(window.innerWidth>650)
		window.addEventListener('resize',this.setIsMobile)
	},
	beforeDestroy() {
		window.removeEventListener('resize',this.setIsMobile)
	},
	methods: {
		setIsMobile(){
			this.isMobile=!(window.innerWidth>650)
		},
		keyupSubmit() {
			//回车登录
			document.onkeydown = e => {
				let keyval = window.event.keyCode
				if (keyval === 13) {
					//this.handleSubmit2()
					!this.logining&&this.handleLogin()
				}
			}
		},
		handleSubmit2() {
			//登录
			let that = this
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					that.logining = true
					var loginParams = {
						Username: that.ruleForm.account,
						Password: md5.hex_md5(that.ruleForm.checkPass),
						IsRemember: this.checked
					}
					userLogin(loginParams).then(async res => {
						if (res.Ret === 200) {
							localStorage.setItem('auth', res.Data.Authorization)
							localStorage.setItem('userName', res.Data.RealName)
							localStorage.setItem('Role', res.Data.RoleTypeCode)
							localStorage.setItem('RoleIdentity', res.Data.SysRoleTypeCode)
							localStorage.setItem('RoleType', res.Data.ProductName)
							localStorage.setItem('ManageType', res.Data.Authority)
							localStorage.setItem('AdminId', res.Data.AdminId)
              localStorage.setItem('AdminName',res.Data.AdminName)
							if (this.checked) {
								localStorage.setItem(
									'account',
									this.b.encode(this.ruleForm.account)
								)
								localStorage.setItem(
									'checkPass',
									this.b.encode(this.ruleForm.checkPass)
								)
							} else {
								localStorage.removeItem('account')
								localStorage.removeItem('checkPass')
							}

							let path = await this.getOtherRolePath('myCalendar');
							// switch(res.Data.RoleTypeCode) {
							// 	case 'rai_researcher':
							// 	case 'ficc_researcher':
							// 	case 'researcher': 
							// 		path = '/reportlist';
							// 		break
							// 	case 'compliance': //合规
							// 		path = '/contractapprovallist';
							// 		break
							// 	case 'special_researcher': //特邀研究员
							// 		path = '/dataList';
							// 		break
							// 	case 'special_ficc_seller' : 
							// 		path = '/meetingCalendar';
							// 		break
							// 	default: 
							// 		path = await this.getOtherRolePath('myCalendar')
							// }
							this.$router.push({path})
						}
						that.logining = false
					})
				}
			})
		},
		changePass(value) {
			//密码输入格式切换
			this.visible = !(value === 'show')
		},
		getOtherRolePath(pathVal){
			return departInterence.getMenu().then(res => {
				let resolvePath=''
				if(res.Ret === 200) {
					let menuList = res.Data.List||[];
					if(!menuList.length){
						this.$message.error('该账号没有任何菜单权限,请联系管理员')
						return
					}
					// 是否已经拿到菜单信息
					sessionStorage.setItem('hasGetMenu','true')
					sessionStorage.setItem('MenuList',JSON.stringify(menuList));
					/* 是否有数据报表权限 */
					this.$store.commit('SET_DATA_AUTH',menuList.some(item => item.name === '报表统计'))

					for (let i = 0; i < menuList.length; i++) {
						const element = menuList[i];
						const arr=menuList[i].children||[]
						if(arr.some(it => it.path == pathVal)){
							resolvePath='/'+pathVal
							break
						}
					}
					return resolvePath || '/'+menuList[0].children[0].path
				}
				return '/'+pathVal
			})
		},
		getPhoneCode(){
			departInterence.getPhoneAreaCode().then(res=>{
				if(res.Ret!==200) return 
				this.areaCode = res.Data||[]
			})
		},
		handleClick(tab) {
			//调用对应model的init方法
			this.$refs[tab.name]&&this.$refs[tab.name].modelInit()
			this.$refs[tab.name]&&this.$refs[tab.name].$refs.modelForm.clearValidate()
			if(tab.name==='ordinaryModel'){
				this.$nextTick(()=>{
					this.getRememberedInfo()
				})
			}
		},
		changeModel(model){
			this.activeModel = model
			if(model!=='forgetPassModel'){
				this.$nextTick(()=>{
					this.getRememberedInfo()
				})
			}
		},
		handleLogin(){
			//先进行判空的表单验证
			this.$refs[this.activeModelForm].$refs.modelForm.validate((valid)=>{
				if(valid){
					this.logining = true
					//根据activeName 调用不同的登陆接口
					//账号密码
						if(this.activeModel==='ordinaryModel'){
							this.ordinaryModelLogin()
						}
					//手机号登录
						if(this.activeModel==='mobileModel'){
							this.mobileModelLogin()
						}
					//邮箱登录
						if(this.activeModel==='emailModel'){
							this.emailModelLogin()
						}
				}
			})
		},
		submitCheck(){
			this.$refs[this.checkActiveModel].$refs.modelForm.validate((valid)=>{
				if(valid){
					this.checkLogining = true
					if(this.checkActiveModel==='checkMobileModel'){
						this.mobileModelLogin('checkMobileModel')
					}else{
						this.emailModelLogin('checkEmailModel')
					}
				}
			})
		},
		ordinaryModelLogin(){
			const {account,checkPass,checked} = this.$refs[this.ordinaryModelForm].form
			departInterence.userLogin({
				LoginType:1,
				Username:account,
				Password:md5.hex_md5(checkPass)
			}).then(res=>{
				//this.logining = false
				//账号异常 将accountCheck置为true
				if(res.Ret===4011){
					this.accountCheck = true
					this.isCheckDialogShow = true
					this.$nextTick(()=>{
						this.$refs[this.checkActiveModel].getCodePic()
					})
				}
				//账号密码错误 将loginCheck置为true
				if(res.Ret===4012){
					this.loginCheck = true
				}
				if(res.Ret!==200){
					this.logining = false
					return 
				}
				//登录成功，若设置了保存密码，在localStorage内存储一个时间戳
				if(checked){
					this.setLoginDate(1)
					localStorage.setItem("account", this.b.encode(account));
					localStorage.setItem("checkPass", this.b.encode(checkPass));
				}else {
					this.setLoginDate(0)
					localStorage.removeItem("account");
					localStorage.removeItem("checkPass");
				}
				this.setLoginInfo(res)
				this.loginSys(res)
			})
		},
		mobileModelLogin(model=this.mobileModelForm){
			const {mobile,checkCode} = this.$refs[model].form
			departInterence.userLogin({
				LoginType:2,
				Mobile:mobile,
				VerifyCode:checkCode,
				TelAreaCode:this.$refs[model].areaCodeSelect,
			}).then(res=>{
				if(res.Ret!==200){
					//刷新图形验证码
					this.$refs[model].getCodePic()
					this.$refs[model].form.picCode = ''
					model===this.mobileModelForm&&(this.logining = false)
					model!==this.mobileModelForm&&(this.checkLogining = false)
					return
				}
				this.setLoginInfo(res)
				this.loginSys(res)
			})
		},
		emailModelLogin(model=this.emailModelForm){
			const {email,checkCode} = this.$refs[model].form
			departInterence.userLogin({
				LoginType:3,
				Email:email,
				VerifyCode:checkCode,
			}).then(res=>{
				if(res.Ret!==200){
					//刷新图形验证码
					this.$refs[model].getCodePic()
					this.$refs[model].form.picCode = ''
					model===this.emailModelForm&&(this.logining = false)
					model!==this.emailModelForm&&(this.checkLogining = false)
					return
				}
				this.setLoginInfo(res)
				this.loginSys(res)
			})
		},
		clearnHint(){
			this.loginCheck = false
			this.accountCheck = false
		},
		setLoginDate(type){
			if(type===0){
				localStorage.removeItem('timeKey')
			}else{
				localStorage.setItem('timeKey',Date.now())
			}

		},
		//判断timeKey有没有过期，目前设定的是60天，也就是5184000秒
		checkTimeKey(timeKey){
			const nowKey = Date.now()
			return Math.floor((nowKey-timeKey)/1000)<5184000
		},
		//存储登录的信息
		setLoginInfo(res){
			localStorage.setItem("auth", res.Data.Authorization);
			localStorage.setItem("userName", res.Data.RealName);
			localStorage.setItem("Role", res.Data.RoleTypeCode);
			localStorage.setItem("RoleIdentity", res.Data.SysRoleTypeCode);
			localStorage.setItem("RoleType", res.Data.ProductName);
			localStorage.setItem("ManageType", res.Data.Authority);
			localStorage.setItem("AdminId", res.Data.AdminId);
			localStorage.setItem("AdminName", res.Data.AdminName);
		},
		//根据角色判断应该进入系统的哪个页面，进入系统
		async loginSys(res){
			let path = await this.getOtherRolePath('myCalendar');
			path&&this.$router.push({ path });
			this.loading = false
			this.checkLogining = false
		},
		//获取用户记住的账号密码 如果有
		getRememberedInfo(){
			const timeKey = localStorage.getItem("timeKey")
			if(timeKey&&this.checkTimeKey(Number(timeKey))){
				let userAccount = localStorage.getItem("account") || null;
				let userCheckPass = localStorage.getItem("checkPass") || null;
				if (userAccount) {
					this.$refs.ordinaryModel.form = {
						account:this.b.decode(userAccount),
						checkPass:this.b.decode(userCheckPass),
						checked:true
					}
				}
			}
		}
	},
    destroyed(){
        document.onkeydown = null
    }
}
</script>
<style lang="scss">
#login{
	.el-tabs__nav {
		width: 100%;
		display: flex;
	}
	.el-tabs__item{
		font-size: 18px;
		flex: 1;
		text-align: center;
	}
	.check-dialog{
		.el-dialog{
			border-radius: 8px;
			.el-dialog__header{
				background-color: transparent;
				.el-dialog__headerbtn>i{
					color: #C0C4CC;
				}
			}
			.el-input{
				width:100%;
			}
			.el-dialog__footer{
				text-align: center;
			}
		}
	}
}
</style>
<style lang="scss" scoped>
#login {
	width: 100%;
	height: 100%;
	background: #fff;
	position: relative;
	overflow: hidden;
	overflow-y: auto;
	#login_wrapper {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		position: relative;
		.login-bg {
			position: absolute;
			top: 50px;
			left: 50px;
			height: calc(100% - 100px);
			max-width: 50%;
		}

		.login-icon {
			position: absolute;
			top: 44px;
			right: 40px;
		}

		.login-r-b {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 8%;
		}

	}
	#login-container,.login-box{
		width: 31%;
		
		box-sizing: border-box;
		border-radius: 10px;
		position: absolute;
		top: 18%;
		right: 14%;
		z-index: 100;
		font-size: 30px;
		.fixed-login-wrapper {
			width: 460px;
			margin: 0 auto;
		}
		input::-webkit-input-placeholder {
			color: #595959 !important;
		}
		.remember {
			margin: 0px 0 20px;
		}
		.submit_btn {
			width: 100%;
			height: 50px;
			background: #007eff;
			font-size: 16px;
			border-radius: 5px;
			// margin-top: 30px;
		}
		.el-input input {
			width: 100%;
			height: 40px;
			color: #333333;
			font-size: 16px;
		}
		.el-input-group__append,
		.el-input-group__prepend {
			background-color: rgba(255, 255, 255, 0.8);
			color: rgb(51, 51, 51);
			border: none;
		}
		.el-input.el-input-group.el-input-group--prepend input {
			background-color: rgba(255, 255, 255, 0.8);
			color: rgb(51, 51, 51);
			border: none;
		}
		.el-checkbox__label {
			color: rgb(51, 51, 51);
			font-size: 14px;
		}
		.el-checkbox__input.is-checked + .el-checkbox__label {
			color: rgb(51, 51, 51);
			font-size: 14px;
		}
		.el-form-item__content .el-input-group,
		.el-form-item__label,
		.el-tag .el-icon-close {
			padding-bottom: 5px;
			vertical-align: middle;
			border-bottom: 1px solid #eaeaea;
		}
		.el-button--primary {
			background: #007eff !important;
			border: none;
		}
		.el-form-item__content {
			padding-bottom: 5px;
		}
		.el-form-item {
			margin-bottom: 30px;
		}

		.another-login-type{
			margin-top: 45px;
			.another-type-hint{
				display: flex;
				align-items: center;
				.type-hint-line{
					flex: 1;
					height: 1px;
					background-color: #C0C4CC;
				}
				.type-hint-text{
					font-size: 18px;
					color: #999999;
					padding: 0 20px;
				}
			}
			.another-type{
				.login-type-box {
					display: flex;
					justify-content: center;
					gap: 10%;
				}
				.login-type-item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 20px;
					cursor: pointer;
					img{
						height: 40px;
						width: 40px;
						margin-bottom: 4px;
					}
					span{
						font-size: 16px;
						color: #666666;
					}
				}
			}
		}
	}
	@media screen and (max-width:1201px) {
		.login-bg { display: none; }
		#login-container ,.login-box{
				width: 70%;
				top:15%;
				left: 50%;
				transform: translateX(-50%);
			}
	}
	@media screen and (max-width:650px) {
		#login_wrapper_mobile{
			// display: block;
			padding: 15% 40px 20px;
			.login-logo{
				margin-bottom: 30px;
				img{
					width: 250px;
				}
			}
			.login-title{
				font-size: 14px;
				color: #999999;
			}
			.submit_btn_mobile{
				height: 44px;
				width: 100%;
				border-radius: 44px;
			}
			.login-type-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 54%;
				margin: 0 auto;
				.login-type-item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 50px;
					img{
						height: 40px;
						width: 40px;
						margin-bottom: 4px;
					}
					span{
						font-size: 12px;
						color: #666666;
					}
				}
			}
		}
	}
	// .remember-cont {
	// 	position: relative;
	// 	margin-bottom: 20px;
	// 	.warn-check-tip {
	// 		position: absolute;
	// 		min-width: 300px;
	// 		left: 130px;
	// 		top: 0;
	// 		padding: 2px 10px;
	// 		border: 1px solid #D1433A;
	// 		background: #FFEAE9;
	// 		color: #B72E18;
	// 		font-size: 14px;
	// 	}
	// }
}
</style>

