<template>
	<view>
		<view style="color: #000;">
			<tn-nav-bar backgroundColor="#fff" :bottomShadow="false">登录</tn-nav-bar>
			<view :style="{height: tobheight+'px'}"></view>
		</view>
		<block>
			<view class="signin">
				<!-- 注册账户 -->
			</view>
			<view class="site_logo">
				<image class="weixin" :src="appInfo.site_logo_path" mode="aspectFill"></image>
			</view>
			<view class="site_name">{{appInfo.site_name}}</view>
			<view class="detailed">
				<view class="">欢迎畅游{{appInfo.site_name}}</view>
				<view class="">登录后，可免费获得问答及优惠套餐等服务</view>
			</view>
			<u-popup :show="showlogin" mode="bottom" :round="10" closeable @close="showlogin = false;showVicode=false">
				<!-- <u-popup :show="true" mode="bottom" :round="10" closeable @close="showlogin = false"> -->
				<view class="container">
					<view class="textl_ogin">
						{{showlogon&&!showVicode?'账号密码登录':showlogon&&showVicode?'手机号验证码登录':'账号密码注册'}}
					</view>
					<!-- 账号密码登录 -->
					<view class="login">
						<view class="" v-if="showlogon&&!showVicode">
							<view class="input u-flex align-center">
								<u-icon name="phone-fill" color="#207CF7" size="24"></u-icon>
								<input class="vs-flex-item" v-model="accountLogin.account" :maxlength="11"
									placeholder="请输入账号" />
							</view>
							<view class="input u-flex align-center">
								<u-icon name="lock-fill" color="#207CF7" size="24"></u-icon>
								<input class="vs-flex-item" type="text" :password="password"
									v-model="accountLogin.password" placeholder="请输入登录密码"
									placeholder-class="input-placeholder" />
								<u-icon @click="password = !password" :name="password ? 'eye-off' : 'eye-fill'"
									color="#207CF7" size="18"></u-icon>
							</view>
							<view class="changeWay" style="padding-left: 60rpx;color: #207CF7;"
								@click="showVicode=true">
								手机号验证码登录
							</view>
						</view>

						<!-- 验证码登录，新增 -->
						<view class="" v-if="showlogon&&showVicode">
							<view class="input u-flex align-center">
								<u-icon name="phone-fill" color="#207CF7" size="24"></u-icon>
								<input class="vs-flex-item" v-model="accountLogin.mobile" :maxlength="11"
									placeholder="请输入手机号" />
							</view>
							<view v-if="true" class="input u-flex align-center">
								<u-icon name="account-fill" color="#207CF7" size="24"></u-icon>
								<input class="vs-flex-item" v-model="accountLogin.code" :maxlength="11"
									placeholder="验证码" />
								<view class="" style="width: 250rpx;">
									<u-button style="width: 250rpx;" color='#207CF7' class="custom-style"
										@tap="getCode('code')">
										{{tips}}</u-button>
								</view>
							</view>
							<view class="changeWay" style="padding-left: 60rpx;color: #207CF7;"
								@click="showVicode=false">
								账号密码登录
							</view>
						</view>



						<view class="" v-if="!showlogon">
							<view class="input u-flex align-center">
								<u-icon name="account-fill" color="#207CF7" size="24"></u-icon>
								<input class="vs-flex-item" v-model="accountLogin.account" :maxlength="11"
									placeholder="请输入账号" />
							</view>
							<!-- 	<view class="input u-flex align-center">
								<u-icon name="phone-fill" color="#207CF7" size="24"></u-icon>
								<input class="vs-flex-item" v-model="accountLogin.mobile" :maxlength="11"
									placeholder="请输入手机号" />
							</view>
							<view v-if="true" class="input u-flex align-center">
								<u-icon name="account-fill" color="#207CF7" size="24"></u-icon>
								<input class="vs-flex-item" v-model="accountLogin.code" :maxlength="11"
									placeholder="验证码" />
								<view class="" style="width: 250rpx;">
									<u-button style="width: 250rpx;" color='#207CF7' class="custom-style"
										@tap="getCode('code')">
										{{tips}}</u-button>
								</view>
							</view> -->

							<view class="input u-flex align-center">
								<u-icon name="lock-fill" color="#207CF7" size="24"></u-icon>
								<input class="vs-flex-item" type="text" :password="password"
									v-model="accountLogin.password" placeholder="请输入登录密码"
									placeholder-class="input-placeholder" />
								<u-icon @click="password = !password" :name="password ? 'eye-off' : 'eye-fill'"
									color="#207CF7" size="18"></u-icon>
							</view>
							<view class="input u-flex align-center">
								<u-icon name="lock-fill" color="#207CF7" size="24"></u-icon>
								<input class="vs-flex-item" type="text" :password="twopassword" v-model="password2"
									placeholder="请再次确认登录密码" placeholder-class="input-placeholder" />
								<u-icon @click="twopassword = !twopassword" :name="twopassword ? 'eye-off' : 'eye-fill'"
									color="#207CF7" size="18"></u-icon>
							</view>
						</view>
					</view>
					<view @click="getlogin()" hover-class="hoversubmit" class="signinnow">{{showlogon?'立即登录':'立即注册'}}
					</view>
				</view>
				<view class="wrap">
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="" @start="" ref="uCode" @change="codeChange"></u-code>

				</view>
			</u-popup>
			<!-- #ifdef MP-WEIXIN -->
			<view class="flxe justify-center">
				<view class="grant" @click="showAuthorizationModal = true">
					<u-icon name="weixin-fill" color="#ffffff" size="26"></u-icon>
					<view class="dlu">微信授权登录</view>
				</view>
				<!-- <button class="getbutton" open-type="getPhoneNumber" @getphonenumber="getphone"></button> -->
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<block v-if="appInfo.h5_run_mode">
				<block v-if="appInfo.h5_run_mode == 1">
					<view v-if="platform == 'wxOfficialAccount'" class="flxe justify-center">
						<view class="grant" @click="thirdLogin('wechat')">
							<u-icon name="weixin-fill" color="#ffffff" size="26"></u-icon>
							<view class="dlu">微信授权登录</view>
						</view>
					</view>
					<view v-if="appInfo.is_account&&appInfo.is_account==1" class="flxe justify-center">
						<view class="grants" @click="showlogon = true,showlogin = true">
							<u-icon name="account-fill" color="#207CF7" size="26"></u-icon>
							<view class="dlu">账号密码登录</view>
						</view>
					</view>
					<view v-if="appInfo.is_account&&appInfo.is_account==1" @click="showlogon = false,showlogin = true"
						class="toregister flxe justify-center">未注册账号？点击去注册></view>
				</block>
				<block v-if="appInfo.h5_run_mode == 2">
					<view class="flxe justify-center">
						<view class="grants" @click="showlogon = true,showlogin = true">
							<u-icon name="account-fill" color="#207CF7" size="26"></u-icon>
							<view class="dlu">账号密码登录</view>
						</view>
					</view>
					<view @click="showlogon = false,showlogin = true" class="toregister flxe justify-center">
						未注册账号？点击去注册></view>
				</block>

				<!-- 微信授权登录修改 -->
				<block v-if="appInfo.h5_run_mode == 3">
					<view v-if="platform == 'wxOfficialAccount'" class="flxe justify-center">
						<view class="grant" @click="thirdLogin('wechat')">
							<u-icon name="weixin-fill" color="#ffffff" size="26"></u-icon>
							<view class="dlu">微信授权登录</view>
						</view>
					</view>
					<block v-if="platform == 'H5'">
						<view class="flxe justify-center">
							<view class="grants" @click="showlogon = true,showlogin = true">
								<u-icon name="account-fill" color="#207CF7" size="26"></u-icon>
								<view class="dlu">账号密码登录</view>
							</view>
						</view>
						<view @click="showlogon = false,showlogin = true" class="toregister flxe justify-center">
							未注册账号？点击去注册></view>
					</block>
				</block>
			</block>

			<block v-else>
				<view v-if="platform == 'wxOfficialAccount'" class="flxe justify-center">
					<view class="grant" @click="thirdLogin('wechat')">
						<u-icon name="weixin-fill" color="#ffffff" size="26"></u-icon>
						<view class="dlu">微信授权登录</view>
					</view>
				</view>
				<block v-if="platform == 'H5'">
					<view class="flxe justify-center">
						<view class="grants" @click="showlogon = true,showlogin = true">
							<u-icon name="account-fill" color="#207CF7" size="26"></u-icon>
							<view class="dlu">账号密码登录</view>
						</view>
					</view>
					<view @click="showlogon = false,showlogin = true" class="toregister flxe justify-center">
						未注册账号？点击去注册></view>
				</block>
			</block>
			<!-- #endif -->
			<!-- <view class="">{{appInfo.h5_run_mode}}</view> -->
			<view @tap="agree = true" class="flxe align-center justify-center" style="margin-top: 50rpx;">
				<u-icon name="checkmark-circle-fill" :color="agree?'#207CF7':'#ededed'" size="16"></u-icon>
				<view class="clause">我已阅读并同意：<view @tap.stop="agreement('privacy')" style="color: #207CF7;">《隐私政策》
					</view>和<view @tap.stop="agreement('use')" style="color: #207CF7;">《使用协议》</view>
				</view>
			</view>
		</block>

		<!-- <view class="" style="color:$them-color;">
			123456
		</view> -->
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
		<tnui-wx-user-info v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></tnui-wx-user-info>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import wechat from '@/common/wechat/wechat';
	import TnuiWxUserInfo from '@/components/tnui-wx-user-info/tnui-wx-user-info';
	export default {
		components: {
			TnuiWxUserInfo
		},
		data() {
			return {
				showVicode: false,

				agree: true,
				showAuthorizationModal: false,
				tobheight: 45,
				platform: this.$platform.get(),
				spm: '',
				spmplatform: 0,
				iviteInfo: `?uniacid=${uni.getStorageSync('uniacid')}&spm=`,

				h5_runmode: ['wxOfficialAccount', 'H5'],
				isLoading: true,
				showlogin: false,
				password: true,
				twopassword: true,
				accountLogin: {
					account: '',
					password: '',

					mobile: '',
					code: ''
				},
				password2: '',
				showlogon: true,
				route: '',

				isClicked: false,



				tips: '获取验证码',
				// refCode: null,
				seconds: 60,
				// register:0
			}
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'isLogin'])
		},
		onLoad(option) {
			// console.log(option);
			const that = this;
			that.isLoading = false
			if (that.platform == 'wxMiniProgram') {
				var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight
				var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop
				that.tobheight = (menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height)
			}
			console.log(that.appInfo.h5_run_mode, that.platform);
			// #ifdef H5
			const {
				code,
				state,
				scope
			} = option;
			that.option = option;
			if (code && scope !== 'snsapi_base') {
				that.$http('wechat.wechatAuth', {
					code: option.code
				}, ).then(res => {
					// console.log(res);				
					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: that.appInfo.site_name
						});
						that.$store.dispatch('getUserInfo', res.data.token);
						// if(!res.data.phone){

						// 	that.showAuthorizationModal = true;
						// }else{
						uni.showToast({
							title: '登录成功'
						})
						setTimeout(function() {
							if (uni.getStorageSync('token') && uni.getStorageSync('uniacid')) {
								let shareInfo = `uniacid=${uni.getStorageSync('uniacid')}&spm=` + that
									.$store.getters.userInfo.id +
									'.1.0.' + (['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(
										that.platform) + 1) + '.1'

								uni.setStorageSync('shareInfo', shareInfo)
								console.log('我的分享链接信息----------------------2：', shareInfo);
							}


							const value = uni.getStorageSync('route');
							// console.log(value);
							if (value) {
								if (value == '/pages/chat/chat' || value == '/pages/template/detail' ||
									value == '/pages/painting/draw') {
									uni.reLaunch({
										url: value,
									})
									uni.removeStorageSync('route');
									return;
								}
								that.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App']
									.indexOf(that.platform) + 1;
								that.spm = that.$store.getters.userInfo.id + '.1.0.' + that.spmplatform +
									'.1';

								that.iviteInfo = that.iviteInfo + that.spm
								console.log('邀请分享信息：', that.$store.getters.userInfo, that.spmplatform, that
									.spm);
								uni.redirectTo({
									url: value + that.iviteInfo
								})
								uni.removeStorageSync('route');
							} else {
								this.isClicked = false
								// uni.switchTab({
								// 	url: '/pages/user/user'
								// })
								that.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App']
									.indexOf(that.platform) + 1;
								that.spm = that.$store.getters.userInfo.id + '.1.0.' + that.spmplatform +
									'.1';

								that.iviteInfo = that.iviteInfo + that.spm
								console.log('邀请分享信息：', that.$store.getters.userInfo, that.spmplatform, that
									.spm);
								uni.redirectTo({
									url: '/pages/user/user' + that.iviteInfo
								})
							}
						}, 1000);
						// }


					}
				});
			}
			// #endif

		},
		methods: {
			...mapActions(['getUserInfo']),
			codeChange(text) {
				this.tips = text;
			},
			async getCode(type) {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.accountLogin.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return;
				}
				if (!phoneReg.test(this.accountLogin.mobile)) {
					uni.showToast({
						title: '手机号不合法',
						icon: 'none'
					})
					return
				}
				// sendCode({
				// 	mobile: this.accountLogin.mobile
				// })
				// console.log('验证码返回值', res);
				if (this.$refs.uCode.canGetCode) {
					let res = await this.$http('user.code', {
						mobile: this.accountLogin.mobile,
						event: type
					})
					if (res.code == 0) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.hideLoading();
						uni.$u.toast(res.msg);
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},



			async thirdLogin(provider) {
				if (!this.agree) {
					this.$u.toast('请同意用户协议');
					return false;
				}
				// console.log(provider)
				const that = this;
				let user = '';
				// uni.showLoading({
				// 	title:'登录中...'
				// })
				switch (provider) {
					case 'wechat':
						// 防止多次重复点击登录按钮
						if (this.isClicked) {
							return this.$u.toast('登录中请勿重复点击登录按钮');
						} else {
							this.isClicked = true
							user = await wechat.login();
						}
						break;
					default:
						break;
				}
				// #ifdef MP-WEIXIN
				if (user) {
					// that.avatarUrl = user.avatarUrl;
					// that.nickName = user.nickName;
					// that.closeAuthModal();
					that.getUserInfo();


				}
				if (user.errMsg == 'getUserProfile:fail auth deny') {
					// this.mobilelogin = false;
					uni.showToast({
						title: '已取消登录',
						icon: 'none'
					})
				} else {
					that.shgfgh()
				}
				// #endif
			},
			// memberadd_coin(){
			// 	this.$http('member.add_coin',{type:'register'}).then(res=>{
			// 		if (res.code === 0) {
			// 			that.shgfgh()
			// 		}
			// 	})
			// },
			updatedUserInfoEvent(e) {

				// console.log(e);
				// uni.showToast({
				// 	title:'已取消登录',
				// 	icon:'none'
				// })
				// uni.navigateBack({
				// })
			},
			getlogin() {
				// let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				// if (!this.accountLogin.mobile) {
				// 	uni.showToast({
				// 		title: '请输入手机号',
				// 		icon: 'none'
				// 	})
				// 	return;
				// }
				// if (!phoneReg.test(this.accountLogin.mobile)) {
				// 	uni.showToast({
				// 		title: '手机号不合法',
				// 		icon: 'none'
				// 	})
				// 	return
				// }


				let parm = {}
				if (this.showlogon && !this.showVicode) {
					if (!this.accountLogin.account) {
						uni.showToast({
							title: '请输入账号',
							icon: 'none'
						})
						return;
					}
					if (!uni.$u.test.rangeLength(this.accountLogin.account, [4, 16])) {
						uni.showToast({
							title: '账号不能低于4位和高于16位',
							icon: 'none'
						})
						return;
					}
					if (!this.accountLogin.password) {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						})
						return;
					}
					if (!uni.$u.test.rangeLength(this.accountLogin.password, [4, 16])) {
						uni.showToast({
							title: '密码不能低于4位和高于16位',
							icon: 'none'
						})
						return;
					}

					if (/.*[\u4e00-\u9fa5]+.*$/.test(this.accountLogin.password)) {
						uni.showToast({
							title: '密码不能含有汉字',
							icon: 'none'
						})
						return;
					}
					if (!uni.$u.test.enOrNum(this.accountLogin.password) || !uni.$u.test.enOrNum(this.password2)) {
						uni.showToast({
							title: '密码只能是字母和数字',
							icon: 'none'
						})
						return;
					}

					// let parm = {}
					parm['account'] = this.accountLogin.account
					parm['password'] = this.accountLogin.password
					console.log('登录注册参数：', parm);
				} else if (this.showlogon && this.showVicode) {
					let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
					if (!this.accountLogin.mobile) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						})
						return;
					}
					if (!phoneReg.test(this.accountLogin.mobile)) {
						uni.showToast({
							title: '手机号不合法',
							icon: 'none'
						})
						return
					}
					if (!this.accountLogin.code) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						})
						return;
					}
					// let parm = {}
					parm['phone'] = this.accountLogin.mobile
					parm['code'] = this.accountLogin.code
					console.log('登录注册参数：', parm);
				} else {
					// if (!this.accountLogin.code) {
					// 	uni.showToast({
					// 		title: '请输入验证码',
					// 		icon: 'none'
					// 	})
					// 	return;
					// }
					if (!this.accountLogin.account) {
						uni.showToast({
							title: '请输入账号',
							icon: 'none'
						})
						return;
					}
					if (!uni.$u.test.rangeLength(this.accountLogin.account, [4, 16])) {
						uni.showToast({
							title: '账号不能低于4位和高于16位',
							icon: 'none'
						})
						return;
					}
					if (!this.accountLogin.password) {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						})
						return;
					}
					if (!uni.$u.test.rangeLength(this.accountLogin.password, [4, 16])) {
						uni.showToast({
							title: '密码不能低于4位和高于16位',
							icon: 'none'
						})
						return;
					}

					if (/.*[\u4e00-\u9fa5]+.*$/.test(this.accountLogin.password)) {
						uni.showToast({
							title: '密码不能含有汉字',
							icon: 'none'
						})
						return;
					}
					if (!uni.$u.test.enOrNum(this.accountLogin.password) || !uni.$u.test.enOrNum(this.password2)) {
						uni.showToast({
							title: '密码只能是字母和数字',
							icon: 'none'
						})
						return;
					}
					if (!this.showlogon && !this.password2) {
						uni.showToast({
							title: '请再次确认密码',
							icon: 'none'
						})
						return;
					}
					if (!this.showlogon && this.accountLogin.password != this.password2) {
						uni.showToast({
							title: '两次密码不相同,请重新确认',
							icon: 'none'
						})
						return;
					}
					// let parm = {}
					parm['account'] = this.accountLogin.account
					// parm['code'] = this.accountLogin.code
					parm['password'] = this.accountLogin.password
					console.log('登录注册参数：', parm);
				}
				let that = this
				this.$http(this.showlogon && !this.showVicode ? 'user.login' : this.showlogon && this.showVicode ?
					'user.newLogin' : 'user.register', parm).then(res => {
					if (res.code === 0) {
						var z = this.showlogon ? '登录成功' : '注册登录成功'

						this.$store.dispatch('getUserInfo', this.showlogon && !this.showVicode ? res.data.user
							.token : this.showlogon && this.showVicode ? res.data.token : res.data.token);


						uni.showToast({
							title: z
						})
						setTimeout(function() {
							// uni.switchTab({
							// 	url:'/pages/user/user'
							// })

							// 生成固定通过链接分享信息
							if (uni.getStorageSync('token') && uni.getStorageSync('uniacid')) {
								let shareInfo = `uniacid=${uni.getStorageSync('uniacid')}&spm=` + that
									.$store.getters.userInfo.id +
									'.1.0.' + (['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(
										that.platform) + 1) + '.1'

								uni.setStorageSync('shareInfo', shareInfo)
								console.log('我的分享链接信息----------------------2：', shareInfo);
							}


							const value = uni.getStorageSync('route');
							// console.log(value);
							if (value) {
								if (value == '/pages/chat/chat' || value == '/pages/painting/draw' ||
									value == '/pages/user/member/member') {
									uni.reLaunch({
										url: value,
									})
									uni.removeStorageSync('route');
									return;
								}
								if (value.indexOf('/pages/template/detail') > -1) {
									uni.reLaunch({
										url: value,
									})
									uni.removeStorageSync('route');
									return;
								}


								that.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App']
									.indexOf(that.platform) + 1;
								that.spm = that.$store.getters.userInfo.id + '.1.0.' + that.spmplatform +
									'.1';

								that.iviteInfo = that.iviteInfo + that.spm
								console.log('邀请分享信息：', that.$store.getters.userInfo, that.spmplatform, that
									.spm);
								uni.redirectTo({
									url: value + that.iviteInfo
								})

								uni.removeStorageSync('route');
							} else {
								// uni.switchTab({
								// 	url: '/pages/user/user'
								// })

								that.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App']
									.indexOf(that.platform) + 1;
								that.spm = that.$store.getters.userInfo.id + '.1.0.' + that.spmplatform +
									'.1';

								that.iviteInfo = that.iviteInfo + that.spm
								console.log('邀请分享信息：', that.$store.getters.userInfo, that.spmplatform, that
									.spm);
								uni.redirectTo({
									url: '/pages/user/user' + that.iviteInfo
								})
							}
						}, 2000);
					} else {
						// var z = this.showlogon?'登录失败':'注册登录失败'
						// uni.showToast({
						// 	title:z,
						// 	icon:'none'
						// })
					}
				})
			},
			shgfgh() {
				let that = this;

				// setTimeout(function(){

				uni.showToast({
					title: '登录成功'
				})
				setTimeout(function() {
					// uni.navigateBack()
					this.isClicked = false
					uni.switchTab({
						url: '/pages/user/user'
					})
				}, 1000);

				// },2000);
			},
			agreement(e) {
				uni.navigateTo({
					url: './public/agreement?type=' + e
				})
			},
			// 绑定手机号
			async getphone(e) {
				let that = this;
				// uni.showLoading({
				// 	title:'绑定中...'
				// })
				let res = await wechat.getPhoneNumber(e.detail);
				// console.log(res)
				if (res.code === 0) {
					// uni.showToast({
					// 	title:that.cur?'绑定成功':'登录成功',
					// 	duration:1500
					// })
					// that.whether = true;
					// that.$store.commit('userInfo',res.data)
					// uni.navigateTo({
					// 	url:'/pages/public/webview?url=https://y.iduomi.cc/api/wechat_login.html'
					// })
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .tn-custom-nav-bar-class .tn-custom-nav-bar {
		z-index: 1 !important;
	}

	.signin {
		font-weight: 700;
		font-size: 20px;
		color: #101010;
		margin: 45rpx 76rpx 76rpx;

	}

	.site_logo {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.weixin {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}

	.site_name {
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		margin-top: 30rpx;
		font-weight: bold;
	}

	.detailed {
		color: #999;
		font-size: 28rpx;
		margin-top: 80rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.grant {
		background: linear-gradient(to right, $tc, $tc2);
		border: 1px solid #207CF7;
		width: 80%;
		height: 42px;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-top: 180rpx;
		position: relative;

		.dlu {
			padding-left: 12rpx;
		}

		.button {
			position: absolute;
			width: 100%;
			height: 80rpx;
			opacity: 0;
		}
	}

	.toregister {
		font-size: 26rpx;
		margin-top: 16rpx;
		color: #c7c7cc;
	}

	.grants {
		// background:linear-gradient(to right,#199063,#26C47D);
		border: 1px solid #207CF7;
		// background: #fff;
		width: 80%;
		height: 42px;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #207CF7;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-top: 38rpx;
		position: relative;

		.dlu {
			padding-left: 12rpx;
		}

		.button {
			position: absolute;
			width: 100%;
			height: 80rpx;
			opacity: 0;
		}
	}

	.clause {
		display: flex;
		justify-content: center;
		font-size: 26rpx;
		color: #c7c7cc;

		margin-left: 12rpx;
	}

	.getbutton {
		position: absolute;
		width: 100%;
		height: 80rpx;
		opacity: 0;
		margin-top: 180rpx;
	}

	.container {
		margin-top: 60rpx;

		.bg {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 400rpx;
			margin-bottom: 80rpx;
		}

		.topimg {
			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.textl_ogin {
			font-size: 40rpx;
			margin: 0 60rpx 50rpx;
			font-weight: bold;
		}

		.login {
			margin-bottom: 80rpx;
		}

		.signinnow {
			background: #207CF7;
			font-size: 34rpx;
			color: #fff;
			margin: 0 60rpx 40rpx;
			text-align: center;
			line-height: 90rpx;
			height: 90rpx;
			border-radius: 16rpx;
			font-weight: bold;
		}

		.input {
			// width: 630rpx;
			height: 100rpx;
			padding: 0 30rpx;
			background: #f7f7f7;
			border-radius: 16rpx;
			flex-direction: row;
			// margin-left: 60rpx;
			// margin-bottom: 40rpx;
			margin: 0 60rpx 40rpx;
			font-style: normal;
			font-size: 30rpx;
			font-family: Droid Sans Fallback;

			&-icon {
				width: 30rpx;
				height: 38rpx;
			}
		}

		.hoversubmit {
			background: #F7F7F7;
			color: #ACACB3;
		}

		.vs-flex-item {
			flex: 1;
			margin-left: 16rpx;
		}
	}
</style>