<template>
	<view style="background-color: #fff;">
		<!-- <z-nav-bar :shadow="false"></z-nav-bar> -->
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="logo_bg">
			<text>您好，<br>欢迎来到 疯子读书</text>
			<image src="../../static/icon/login_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
			<image src="../../static/icon/login_icon_2.png" mode="aspectFit" class="icon_hua_2"></image>
		</view>
		<view class="register_page">



			<view class="login_method">
				<view class="title" :class="{ active: type == 2000 }" v-if="type == 2000">验证码登录/注册</view>
				<view class="title" :class="{ active: type == 1000 }" v-if="type == 1000">密码登录</view>
				<!-- <view class="title" :class="{ active: type == 2000 }" @click="type = 2000">验证码登录/注册</view>
				<view class="title" :class="{ active: type == 1000 }" @click="type = 1000">密码登录</view> -->
			</view>

				<!-- 验证码登录 -->
				<view v-if="type == 2000">
					<view class="flexbox" style=" margin-top: 50rpx;">
						<view class="input_tit emaPho" style="margin-top: 0; margin-right: 20rpx;">
							<view @click="brand=3000" :class="{ active: brand == 3000 }">手机号</view>
							<span>/</span>
							<view @click="brand=4000" :class="{ active: brand == 4000 }">邮箱</view>
						</view>
					</view>
					<!-- 带区号手机号 -->
					<view class="flexbox" v-if="brand == 3000" style="margin:36rpx 0; justify-content: space-between;">
						<!-- <view class="triangle borderBottom phoneNumberInput" style="width: 150rpx;">
						<input type="number" v-model="quCode" placeholder="区号" placeholder-class="grey" />
						
					</view> -->
						<view class="quhao">
							<uni-data-select class="myselect" placeholder="请选择区号" v-model="quCode"
								:localdata="quCodeList" style="height: 30rpx !important;"
								@change="quChange"></uni-data-select>
						</view>
						<view class="triangle borderBottom phoneNumberInput"
							:clasfs="[type == 1000 ? 'left_triangle': 'right_triangle']">
							<input type="number" v-model="phone" @input="onInput" placeholder="请输入您的手机号"
								placeholder-class="grey" />
						</view>
					</view>

					<!-- 不带区号 -->
					<!-- <view class="triangle borderBottom phoneNumberInput input_box"
					:clasfs="[type == 1000 ? 'left_triangle': 'right_triangle']">
					<input type="number" v-model="phone" @input="onInput" placeholder="请输入您的手机号" placeholder-class="grey" />
				</view> -->

					<!-- 邮箱 -->
					<view class="input_box" v-if="brand == 4000">
						<input v-model="email" placeholder="请输入您的邮箱" placeholder-class="grey" @input="onInput" />
					</view>
					<view class="input_tit">验证码</view>
					<view class="input_box">
						<input v-model="code" placeholder="请输入您的验证码" placeholder-class="grey" @input="onInput"
							maxlength="6" @confirm="onSubmit" />
						<button class="active" @click="onSetCode">{{ codeText }}</button>
					</view>
				</view>

				<!-- 密码登录 -->
				<view v-if="type == 1000">
					<!-- 手机号/邮箱 -->
					<view class="input_tit" style=" margin-top: 80rpx;">手机号 / 邮箱</view>
					<view class="input_box">
						<input v-model="phoneEmail" placeholder="请输入您的手机号或者邮箱" placeholder-class="grey"
							@input="onInput" />
					</view>
					<view class="input_tit">密码</view>
					<view class="input_box">
						<input class="input_item" v-model="password" @input="onInput" :password="!isSee"
							placeholder="请输入密码" placeholder-class="grey" @confirm="onSubmit" />
						<image v-if="isSee" src="../../static/icon/ic_logon_display.png" mode="aspectFit"
							@click="isSee = false">
						</image>
						<image v-else-if="!isSee" src="../../static/icon/ic_logon_hide.png" mode="aspectFit"
							@click="isSee = true">
						</image>
					</view>
				</view>

				<view class="protocol_box">
					<view class="select" :class="{active: agree}" @click="agree = !agree"></view>
					我已同意
					<!-- <text @click="plus.runtime.openURL('https://main.nuttyreading.com/agreement.html')">《用户协议》</text> -->
					<!-- <text @click="onPageJump('/pages/user/protocol')">《用户协议》</text> -->
					<span class="highlight" @click="yhxyShow=true">《用户协议》</span>
					和
					<span class="highlight" @click="yszcShow=true">《隐私协议》</span>
					<!-- <text @click="onPageJump('/pages/user/protocol')">《隐私协议》</text>-->
				</view>
				<view class="btn_box">
					<button @click="onSubmit" class="active" v-if="btnShow">登 录</button>
					<button v-else>登 录</button>
				</view>
				<!-- <view class="password_register" style="margin: 0 auto; text-align: center; display: block;">
				<button @click="onPageJump('/pages/user/register')">注册账号</button>
				<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码？</text>
			</view> -->
				<view class="third_party_login_box" v-if="iosHide">
					<view class="third_party_title"><text>第三方登录</text></view>
					<view class="third_party_content">
						<image src="../../static/icon/ic_login_health.png" @click="onHealthLogin" mode="aspectFit">
						</image>
					</view>
				</view>

				<view class="qie_huan" style="display: flex; justify-content: center;">
					<view style="width: 30%;" @click="type = 1000" v-if="type == 2000">密码登录</view>
					<view style="width:50%; display: flex; justify-content:space-between;" v-if="type == 1000">
						<text @click="type = 2000">验证码登录</text>
						<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码？</text>
						<!-- <text @click="resetPassWord()">忘记密码</text> -->
					</view>
				</view>

				<view class="youKeL" style="margin-bottom: 80rpx;">
					<view @click="onPageJump('/pages/user/visitor')">免登陆体验</view>
				</view>
	

			<z-popup v-model="HealthOpen" type="center" :hideOnBlur="false">
				<view class="popup_box">
					<view class="popup_title">
						<view>
							<image src="../../static/icon/ic_login_health.png" mode="aspectFit"></image>
							一路健康用户 - 登录
						</view>
					</view>
					<view class="popup_content">
						<view class="input_tit">账号</view>
						<view class="input_box triangle" :class="[type == 1000 ? 'left_triangle': 'right_triangle']">
							<input type="text" v-model="health_phone" placeholder="请输入您的一路健康账号"
								placeholder-class="grey" />
						</view>
						<view class="input_tit">密码</view>
						<view class="input_box">
							<input class="input_item" v-model="health_password" :password="!isSee_H" placeholder="请输入密码"
								placeholder-class="grey" @confirm="onSubmit_Health" />
							<image v-if="isSee_H" src="../../static/icon/ic_logon_display.png" mode="aspectFit"
								@click="isSee_H = false">
							</image>
							<image v-else-if="!isSee_H" src="../../static/icon/ic_logon_hide.png" mode="aspectFit"
								@click="isSee_H = true">
							</image>
						</view>
					</view>
					<view class="popup_footer">
						<view @click="HealthOpen = false">取消</view>
						<view @click="onSubmit_Health">确定</view>
					</view>
				</view>
			</z-popup>

			<!-- #ifdef APP-PLUS -->
			<!-- <view class="third_party_login_box" v-if="isIos && system >= 13">6
				<view class="third_party_title"><text>第三方登录</text></view>
				<view class="third_party_content">
					<image src="../../static/icon/ic_login_weixin.png" v-if="isWeixin" @click="onWxAppLogin"
						mode="aspectFit"></image>
					<image src="../../static/icon/ic_login_ios.png" v-if="isIos && system >= 13" @click="onAppleLogin"
						mode="aspectFit"></image>
				</view>
			</view> -->
			<!-- #endif -->

			<u-popup :show="yhxyShow" title='用户协议' :round="10" @close="yhxyShow=false">
				<view class="tanchu">
					<view class="dp_title" v-html="yhxyText.title"></view>
					<view class="dp_content" v-html="yhxyText.content"></view>
					<!-- <yhxyPage></yhxyPage> -->
				</view>
			</u-popup>

			<u-popup :show="yszcShow" title='隐私政策' :round="10" @close="yszcShow=false">
				<view class="tanchu">
					<view class="dp_title" v-html="yszcText.title"></view>
					<view class="dp_content" v-html="yszcText.content"></view>
					<!-- <yszcPage></yszcPage> -->
				</view>
			</u-popup>

		</view>

	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import md5 from '@/plugins/md5';
	// import yhxyPage from '@/pages/agreement/yhxyPage.vue';
	// import yszcPage from '@/pages/agreement/yszcPage.vue';


	// import localuserxieyi from '@/static/json/userAndyinsiP.json'
	// import localyinsixieyi from '@/static/json/yinsiP.json'
	var clear;
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import socket from '@/config/socket';
	export default {
		// components: {
		// 	yhxyPage,
		// 	yszcPage
		// },
		data() {
			return {
				type: 2000,
				brand: 3000,
				isSee: false,
				code: '',
				// phone: '15022449475',
				// phone: '18047689535',
				phone: '',
				email: '',
				phoneEmail: '',
				password: '',
				// phoneEmail: '2227572976@qq.com',
				// password: 'zm123456',
				//验证码
				codeText: '获取验证码',
				//验证码已发
				readonly: false,
				btnShow: true,
				agree: false,
				isIos: true,
				isWeixin: true,
				system: 13,
				clearTime: null,
				HealthOpen: false,
				// health_phone: '13333333333',
				// health_password: '123456',
				health_phone: '',
				health_password: '',
				isSee_H: false,
				yhxyShow: false,
				yszcShow: false,
				yhxyText: {},
				yszcText: {},
				quShow: false,
				quCodeList: [], // 国家区域码
				quCode: 86,

			};
		},
		//第一次加载
		onLoad(e) {
			
			// #ifdef APP-PLUS
			this.isIos = (plus.os.name == "iOS");
			let systemInfo = uni.getSystemInfoSync();
			this.system = parseFloat(systemInfo['system'].replace(/[a-zA-Z]/g, ""));
			this.isWeixin = plus.runtime.isApplicationExist({
				pname: 'com.tencent.mm',
				action: "weixin://"
			});
			// #endif
		},
		//页面显示
		onShow() {
			this.closeMusic()
			this.getCountyCode()
			this.getSettlement()
		},
		//方法
		methods: {
			...mapMutations(['setUserInfo']),
			...mapMutations(['setHealthMes']),
			closeMusic(){
				this.$music.setCloseBgm()    // 关闭音频
				uni.setStorage({
                    key: 'playVisible',
                    data: false,
                    success: function () {
                        console.log('success');
                    }
                }); this.setUserInfo({'playVisible':false})
			},
			// 获取国家区域编码
			getCountyCode() {
				$http.request({
						url: "book/baseArea/getAllBaseArea",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						// console.log(res,'区域码')
						if (res.code == 0 && res.baseAreas.length > 0) {
							//	this.quCodeList = res.baseAreas
							this.quCodeList = res.baseAreas.map(item => {
								let obj = {
									'text': item.title + ' (+' + item.code + ')',
									'value': item.code,
								}
								return obj
							})
							// console.log('改变格式后',this.quCodeList)						
						} else {
							this.quCodeList = []
							// this.totalPage = 0
						}
					}).catch(e => {
						console.log(e, 'e')
					});
			},
			// 获取协议内容
			getSettlement() {
				this.$http
					.post('sys/agreement/getPrivacyDetail')
					.then(res => {
						this.yszcText = res.privacy
						this.yszcText.content = this.yszcText.content.replace(/<h5>/g,
							'<view style="font-weight: bold;font-size: 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">'
						);
						this.yszcText.content = this.yszcText.content.replace(/<\/h5>/g, '</view>');

					}).catch((e) => {
						console.log(e, 'e')
					})
				this.$http
					.post('sys/agreement/getUserDetail')
					.then(res => {
						this.yhxyText = res.user
						this.yhxyText.content = this.yhxyText.content.replace(/<h5>/g,
							'<view style="font-weight: bold;font-size: 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">'
						);
						this.yhxyText.content = this.yhxyText.content.replace(/<\/h5>/g, '</view>');
					}).catch((e) => {
						console.log(e, 'e')
					})
			},



			quChange(e) {
				console.log(e, 'e')
			},
			// 修改密码
			resetPassWord() {
				console.log('重置密码')
				uni.navigateTo({
					url: "/pages/home/shop/goodsDetail"
				})
			},


			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onInput() {
				// this.clearTime && clearTimeout(this.clearTime)
				// this.clearTime = setTimeout(() => {
				// 	if (this.type == 2000) {
				// 		if (this.phone && this.code) {
				// 			this.btnShow = true;
				// 		} else {
				// 			this.btnShow = false;
				// 		}
				// 	} else {
				// 		if (this.phone && this.password) {
				// 			this.btnShow = true;
				// 		} else {
				// 			this.btnShow = false;
				// 		}
				// 	}
				// }, 500);
			},
			//验证码按钮文字状态
			getCodeState() {
				clear && clearInterval(clear);
				const _this = this;
				this.readonly = true;
				this.codeText = '60S';
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText = s + 'S';
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = '获取验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			// 发送验证码
			onSetCode() {
				if (this.readonly) {
					return;
				}

				if (!this.agree) {
					uni.showToast({
						title: '请先同意《用户协议》和《隐私协议》',
						icon: 'none'
					});
					return;
				}

				if (this.brand == 3000) {
					if (!this.phone) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						return;
					}
					if (this.quCode == null || this.quCode == 86) { // 如果没选择国家code，默认是中国大陆
						if (!this.$base.phoneRegular.test(this.phone)) {
							uni.showToast({
								title: '手机格式不正确',
								icon: 'none'
							});
							return;
						}
						console.log(this.quCode, '选择的区段')
					}
					this.$http
						.get('book/user/sms/sendcode', {
							phone: this.phone,
							areaCode: this.quCode,
							type: 2000
						})
						.then(res => {
							uni.showToast({
								title: '验证码发送成功',
								icon: 'none'
							});
							this.getCodeState();
						});
				} else {
					if (!this.email) {
						uni.showToast({
							title: '请输入邮箱',
							icon: 'none'
						});
						return;
					}
					if (!this.$base.mailRegular.test(this.email)) {
						uni.showToast({
							title: '邮箱格式不正确',
							icon: 'none'
						});
						return;
					}
					this.$http
						.get('book/user/getMailCaptcha', {
							email: this.email
						})
						.then(res => {
							uni.showToast({
								title: '验证码发送成功',
								icon: 'none'
							});
							this.getCodeState();
						});
				}


			},

			// 手机密码登录
			onSubmit() {
				if (!this.agree) {
					uni.showToast({
						title: '请先同意《用户协议》和《隐私协议》',
						icon: 'none'
					});
					return;
				}

				let httpData = {};
				if (this.type == 2000) {
					if (this.brand == 3000) {
						if (!this.phone) {
							uni.showToast({
								title: '请输入手机号',
								icon: 'none'
							});
							return;
						}
						if (this.quCode == null || this.quCode == 86) {
							if (!this.$base.phoneRegular.test(this.phone)) {
								uni.showToast({
									title: '手机格式不正确',
									icon: 'none'
								});
								return;
							}
						}
						httpData.tel = this.phone;
					} else {
						if (!this.email) {
							uni.showToast({
								title: '请输入邮箱',
								icon: 'none'
							});
							return;
						}
						if (!this.$base.mailRegular.test(this.email)) {
							uni.showToast({
								title: '邮箱格式不正确',
								icon: 'none'
							});
							return;
						}
						httpData.tel = this.email;
					}
					if (!this.code) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						});
						return;
					}
					httpData.code = this.code;

					this.$http
						.get('book/user/registerOrLogin', httpData)
						.then(res => {
							res.userInfo.token = res.token.token;
							this.setUserInfo(res.userInfo);
							// socket.init();
							uni.showToast({
								title: '登录成功',
								duration: 1000,
							});
						



							setTimeout(() => {
								uni.switchTab({
									url: '/pages/peanut/home'
								});
							}, 1000);
						});
				} else {
					if (!this.phoneEmail) {
						uni.showToast({
							title: '请输入手机号或邮箱',
							icon: 'none'
						});
						return;
					}
					if (!this.password) {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						});
						return;
					}
					// httpData.password = md5(this.password);
					httpData.password = this.password;
					httpData.phone = this.phoneEmail;
					this.$http
						.post('book/user/login', httpData)
						.then(res => {
							res.userInfo.token = res.token.token;
							this.setUserInfo(res.userInfo);
							// socket.init();
							uni.showToast({
								title: '登录成功',
								duration: 1000,
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/peanut/home'
								});
							}, 1000);
						});
				}
			},

			// 一路健康APP登录进入
			onSubmit_Health() {
				if (!this.health_phone) {
					uni.showToast({
						title: '请输入一路健康账号',
						icon: 'none'
					});
					return;
				}

				if (!this.health_password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

				let healthData = {};
				healthData.phone = this.health_phone;
				healthData.password = this.health_password

				this.$http
					.post('book/user/getEverhealthInfo', healthData)
					.then(res => {
						this.setHealthMes(res.everhealthInfo);
						if (res.userInfo) {
							res.userInfo.token = res.token.token;
							this.setUserInfo(res.userInfo);
							uni.showToast({
								title: '登录成功',
								duration: 1000,
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/peanut/home'
								});
							}, 1000);
						} else {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/user/healthLog'
								});
							}, 600);
							uni.showToast({
								title: '账号验证成功',
								duration: 600,
							});
						}

						// if (!IsPhoneHealth) {
						// 	setTimeout(() => {
						// 		uni.navigateTo({
						// 			url: '/pages/user/healthLog'
						// 		});
						// 	}, 600);
						// 	uni.showToast({
						// 		title: '验证成功',
						// 		duration: 600,
						// 	});
						// } else {
						// 	uni.showModal({
						// 		title: '提示',
						// 		content: '验证您的一路健康账号成功，请问您要通过该账户登录花生吗？',
						// 		success: function(res) {
						// 			if (res.confirm) {
						// 				this.setUserInfo(res.userInfo);
						// 				// socket.init();
						// 				uni.switchTab({
						// 					url: "/pages/home/home"
						// 				});
						// 			} else if (res.cancel) {
						// 				console.log('用户点击取消');
						// 			}
						// 		}
						// 	});

						// }

					});

			},

			// 一路健康APP登录
			onHealthLogin() {
				if (!this.agree) {
					uni.showToast({
						title: '请先同意《用户协议》和《隐私协议》',
						icon: 'none'
					});
					return;
				}
				this.HealthOpen = true
			},

			// 微信APP登录
			onWxAppLogin() {
				uni.login({
					provider: 'weixin',
					success: res => {
						uni.getUserInfo({
							success: (info) => {
								this.userInfo = info.userInfo;
								if (res.authResult.openid && res.authResult.unionid) {
									this.$http
										.post('api/open/v1/login', {
											wxAppOpenId: res.authResult.openid,
											unionid: res.authResult.unionid,
											nickname: this.userInfo.nickName,
											headImg: this.userInfo.avatarUrl
										})
										.then(data => {
											this.setUserInfo({
												openId: res.authResult.openid,
												unionid: res.authResult.unionid,
												...data,
											});
											if (data.thirdLoginSuccess) {
												socket.init();
												uni.showToast({
													title: '登录成功',
													duration: 2000
												});
												// 跳转底部导航
												
												
												setTimeout(() => {
													// uni.switchTab({
													// 	url: "/pages/home/home"
													// });
													uni.switchTab({
													                url: "/pages/home/home",
													                success: function () {
													                  let page = getCurrentPages()[0];													                 
													                  page.$vm.requestAll();
													                },
													              });
												}, 1000);
											} else {
												uni.showModal({
													title: '提示',
													content: '您还未绑定手机号，请先绑定~',
													confirmText: '去绑定',
													cancelText: '再逛会',
													success: res => {
														if (res.confirm) {
															uni.redirectTo({
																url: '/pages/user/bindPhone'
															});
														}
													}
												});
											}
										});
								} else {
									uni.showToast({
										title: '点击无效，请再次点击',
										icon: "none"
									});
								}
							},
							fail: () => {
								console.log("未授权");
							}
						})
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			// 苹果登录
			onAppleLogin() {
				uni.login({
					provider: 'apple',
					success: loginRes => {
						uni.getUserInfo({
							provider: 'apple',
							success: userInfoRes => {
								if (userInfoRes.userInfo.identityToken) {
									this.$http
										.post('api/open/v1/ios_login', {
											identityToken: userInfoRes.userInfo.identityToken
										})
										.then(data => {
											this.setUserInfo(data);
											if (data.thirdLoginSuccess) {
												socket.init();
												uni.showToast({
													title: '登录成功',
													duration: 2000
												});
												setTimeout(() => {
													// uni.switchTab({
													// 	url: "/pages/home/home"
													// });
													uni.switchTab({
													                url: "/pages/home/home",
													                success: function () {
													                  let page = getCurrentPages()[0];													                 
													                  page.$vm.requestAll();
													                },
													              });
												}, 1000);
											} else {
												uni.showModal({
													title: '提示',
													content: '您还未绑定手机号，请先绑定~',
													confirmText: '去绑定',
													cancelText: '再逛会',
													success: res => {
														if (res.confirm) {
															uni.redirectTo({
																url: '/pages/user/bindPhone'
															});
														}
													}
												});
											}
										});
								}
							}
						})
					},
					fail: err => {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						})
					}
				})
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.phoneNumberInput {
		width: calc(100% - 160rpx);
		// width: 100%;
		height: 67rpx;

		input {
			font-size: 28rpx;
			margin: 20rpx 0;
		}
	}

	.borderBottom {
		border-bottom: 1px solid #efeef4;
	}

	.flexbox {
		display: flex;
	}

	.quhao {
		height: 50rpx;
		width: 290rpx;
		margin: 12rpx 15rpx 0 0;


	}



	.myselect {
		height: 50rpx !important;

		/deep/.uni-select {
			font-size: 24rpx;
		}

		/deep/.uni-select__selector-item {
			font-size: 24rpx;
		}
	}



	.highlight {
		color: $themeColor;
	}

	.tanchu {
		padding: 40rpx 30rpx 40rpx 30rpx;
		position: relative;





	}

	.logo_bg {
		background-image: url('@/static/icon/login_bg.png');
		// background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 25vh;
		position: relative;

		text {
			font-size: 45upx;
			line-height: 65rpx;
			position: absolute;
			bottom: 110rpx;
			left: 60rpx;
			color: #fff;
			letter-spacing: 6rpx;
		}

		.icon_hua_1 {
			position: absolute;
			bottom: 60rpx;
			left: 245rpx;
			width: 150rpx;
			height: 150rpx;
			opacity: 0.08;
		}

		.icon_hua_2 {
			position: absolute;
			bottom: 10rpx;
			right: 30rpx;
			width: 250rpx;
			height: 250rpx;
			opacity: 0.15;
		}
	}

	.register_page {
		padding: calc(var(--status-bar-height)) 60rpx 50rpx 60rpx;
		background-color: #fff;
		min-height: 75vh;

		.login_method {

			// display: flex;
			justify-content: space-between;
			padding: 0 96rpx;
			// padding-bottom: 5rpx;
			text-align: center;

			.title {
				margin: 0 auto;
				font-size: 40rpx;
				letter-spacing: 3rpx;
				color: #666;

				&.active {
					position: relative;
					color: $themeColor;
					padding-bottom: 35rpx;
					font-weight: bold;
				}

				&.active::after {
					bottom: 0;
					left: 50%;
					transform: translateX(-50%) translateY(-50%);
					position: absolute;
					content: '';
					width: 150rpx;
					height: 6rpx;
					background-color: $themeColor;
				}
			}
		}


		.left_triangle {
			&::before {
				left: 140rpx;
			}

			&::after {
				left: 140rpx;
			}
		}

		.right_triangle {
			&::before {
				left: 470rpx;
			}

			&::after {
				left: 470rpx;
			}
		}

		.input_tit {
			margin-top: 20rpx;
			font-size: 34rpx;
			font-weight: bold;
			color: #54a966;
		}

		.emaPho {}

		.emaPho>view {
			display: inline-block;
			padding: 10rpx 0;
			color: #888;
		}

		.emaPho>view.active {
			color: #54a966;
			padding: 10rpx 10rpx;
			border-bottom: 2px solid #54a966;
			font-weight: bold;
		}

		.emaPho>span {
			display: inline-block;
			margin: 0 30rpx;
			color: #ccc;
		}

		.input_box {
			display: flex;
			align-items: center;
			border-radius: 8rpx;
			border-bottom: solid 2rpx #efeef4;
			margin: 30rpx 0;

			image {
				width: 36rpx;
				height: 24rpx;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				height: 70rpx;
			}

			.input_item {
				font-size: 28rpx;
				border: 0px;
				flex: 1;
				background-color: #f8f9fb;
				height: 70rpx;
				width: 100%;
				outline: none;
				//margin-left: 32rpx;
			}

			button {
				height: 60rpx;
				background-color: #f8f9fb;
				font-size: 28rpx;
				padding: 0 14rpx;
				color: $themeColor;
				line-height: 60rpx;
				margin-left: 20rpx;
				//margin-right: 40rpx;
			}

			.grey {
				color: #999999;
			}
		}

		.btn_box {
			margin-top: 40rpx;

			button {
				font-size: 32rpx;
				background-color: #e5e5e5;
				color: #fff;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;

				&.active {
					@include theme('btn_bg') color: #fff;
				}
			}
		}

		.password_register {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			//text-align: center;

			text {
				font-size: 28rpx;
				color: #333333;
				//text-decoration: underline;
			}
		}

		.protocol_box {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			font-size: 28rpx;
			color: #333333;

			.select {
				width: 36rpx;
				height: 36rpx;
				background-image: url("../../static/icon/ic_gender_unselected.png");
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 100% auto;
				margin-right: 15rpx;

				&.active {
					background-image: url("../../static/icon/ic_agreed.png");
				}
			}

			>text {
				color: $themeColor;
			}
		}
	}

	.station {
		height: 230rpx;
	}

	.third_party_login_box {
		position: fixed;
		bottom: 60rpx;
		width: 100%;
		left: 0;
		padding: 0 30rpx;

		.third_party_title {
			display: flex;
			align-items: center;

			&:before,
			&:after {
				content: '';
				flex: 1;
				height: 2rpx;
				background-color: #f5f5f5;
			}

			text {
				font-size: 24rpx;
				color: #999999;
				flex-shrink: 0;
				padding: 0 20rpx;
			}
		}

		.third_party_content {
			margin-top: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 80upx;
				height: 80upx;
				margin: 0 20rpx;
			}
		}
	}

	.popup_box {
		width: 600upx;
		border-radius: 10rpx;

		.popup_title {
			display: flex;
			justify-content: center;
			height: 88upx;
			line-height: 88upx;

			view {
				align-items: center;
				font-size: 30upx;
				display: flex;

				image {
					width: 50upx;
					height: 50upx;
					margin: 0 20rpx 0 0;

				}
			}
		}

		.popup_content {
			padding: 30rpx 40rpx;
		}

		.popup_footer {
			display: flex;
			justify-content: center;

			view {
				width: 45%;
				flex-shrink: 0;
				text-align: center;
				font-size: 28upx;
				color: #999;
				line-height: 70upx;
				margin: 0 0 30rpx 0;
			}

			view:last-child {
				background-color: $themeColor;
				color: #fff;
				border-radius: 50rpx;
			}
		}
	}


	.dp_title {
		font-size: 36rpx;
		margin-bottom: 50rpx;
		color: #555;
		text-align: center;
		font-weight: bold;
	}

	.dp_content {
		max-height: 1000rpx;
		overflow-y: scroll;
		font-size: 28rpx;
		color: #555;
		line-height: 45rpx;

		.dp_con1 {
			font-weight: bold;
			font-size: 32rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		// 	.dp_con2 {
		// 		font-size: 30rpx;
		// 		margin-top: 10rpx;
		// 		margin-bottom: 10rpx;
		// 	}

	}

	.qie_huan {
		font-size: 26rpx;
		margin: 20rpx 0 0 0;
		text-align: center;
	}

	.comTy {
		font-size: 28rpx;
		line-height: 46rpx;
		text-align: left;
	}

	.youKeL {
		display: flex;
		justify-content: center;
		margin: 30rpx 0 0 0;
		font-size: 26rpx;
		color: #54a966;

		view {
			font-weight: bold;
			border: 1px solid #54a966;
			border-radius: 10rpx;
			padding: 5rpx 15rpx;
		}
	}
</style>