<template>
	<div
		id="__h5cnt"
		class="home-bg"
		:style="{'background-image':`url(${compProps.bgImg.val})`}"
	>
		<div class="logo">
			<img :src="compProps.logo.val"/>
		</div>
		<div class="product-slogan" :style="{color:compProps.sloganFontColor.val,'--sloganFontColor':compProps.sloganFontColor.val}">
			{{compProps.productSlogan.val}}
		</div>
		<img @click="open" :src="compProps.lotteryBtn.val" alt="" class="open tada">
		<div class="text-center" :style="{color:compProps.tipsTextFontColor.val}">{{compProps.tipsText.val}}</div>
		<img :src="compProps.productImg.val" alt="" class="product-img">
		<img :src="compProps.fwImage.val" alt="" class="fwImage">
		<div v-if="isRunEnv" ref="codeResult" class="code-result" v-html="antifakeIfo"></div>
		<div v-else ref="codeResult" class="code-result" :style="{color:compProps.actFontColor.val}">
			<p>首次扫码时间：<span>2019-11-11 11:11:11</span></p>
			<p>
				<span>查询数码：</span><span>1234567890123456</span>
			</p>
			<p :style="{color:compProps.fwColor.val}">本次为第1次查询</p>
		</div>
		<div class="rule" @click="showRule" :style="{color:compProps.tipsRuleLabelFontColor.val}">
			<i class="el-icon-warning-outline"></i>
			<span>活动规则</span>
		</div>
		<div class="popup" v-if="popupVisible">
			<div class="popup-cnt">
				<div class="winning-hb" v-if="hbVisible">
					<div style="padding-top: 1.6em;">
						<p class="p1">恭喜您获得</p>
						<p class="p2">{{this.lotteryInfo.AwardsName.replace('现金红包','')}}</p>
					</div>
					<p class="p3">{{this.lotteryInfo.GiftUnitPoints}}</p>
					<div class="p4" v-html="this.lotteryInfo.AwardsReamrk"></div>
				</div>
				<div class="error" :style="{'background-color':compProps.bgColor.val}" v-if="errorVisible">
					<div class="error-top" v-html="error">
						<!--					<p>您来晚了</p>-->
						<!--					<p>红包已被领走！</p>-->
					</div>
					<img class="error-product" :src="compProps.tipsErrorProductImg.val">
				</div>
				<div class="exchange" :style="{'background-color':compProps.bgColor.val}" v-if="exchangeVisible">
					<img class="gxn" src="http://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xiaoqiaojiu/gxn.png">
					<p class="t1">{{this.lotteryInfo.AwardsName}}</p>
					<div class="exchange-cnt">
						<img class="exchange-product" :src="compProps.tipsProductImg.val">
						<img class="gxn-bg" src="http://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xiaoqiaojiu/gxn-bg.png">
					</div>
					<div class="t2" v-html="this.lotteryInfo.AwardsReamrk"></div>
				</div>
				<div class="rule-box" :style="{'background-color':compProps.bgColor.val}" v-if="ruleVisible">
					<div class="rule-top">
						<img class="icon2" @click="close" src="http://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xiaoqiaojiu/icon2.png">
						<span>活动规则</span>
					</div>
					<div class="rule-cnt" v-html="actRuleContent"></div>
				</div>
				<div class="register" :style="{'background-color':compProps.bgColor.val}" v-if="registerVisible">
					<div class="register-title">
						<p :style="{color:compProps.sloganFontColor.val}">验证手机号</p>
					</div>
					<div class="register-item">
						<img class="mobile-icon" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/heiqiaojiu/mobile.png">
						<span>手机号</span>
						<input type="tel" maxlength="11" v-model="mobile"/>
					</div>
					<div class="register-item">
						<img class="yzm-icon" src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/heiqiaojiu/yzm.png">
						<span>验证码</span>
						<input type="tel" maxlength="6" style="width: 35%" v-model="smscode"/>
						<span class="get-sms-code" ref="getSMSCode" @click="getSMSCode">获取验证码</span>
					</div>
					<div class="register-btn" @click="register">
						<p>确认</p>
					</div>
				</div>
				<img v-if="ewmVisible" style="width: 150px;margin: auto;display: block;"
					 :src="compProps.qrCode.val"
				>
				<img class="close" @click="close" src="http://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xiaoqiaojiu/del.png">
			</div>
		</div>
		<img class="kefu" src="@/assets/img/kefu.png"
			 onclick="window.location.href = 'https://webchat.7moor.com/wapchat.html?accessId=c17a7770-1643-11ea-892e-b7a27189217f&fromUrl=%E6%AF%9B%E9%93%BA%E6%B4%BB%E5%8A%A8%E5%AE%A2%E6%9C%8D&urlTitle=%E6%AF%9B%E9%93%BA%E6%B4%BB%E5%8A%A8%E5%AE%A2%E6%9C%8D'">
	</div>
</template>

<script>
	import apiHelper from '@/assets/js/apiHelper.js'
	import mobileInit from '@/assets/js/mobile-init.js'
	import eventBus from '@/assets/js/eventBus.js'
	import {toast, loading} from './LayerLite'
	import wx from "weixin-js-sdk";

	let timerCount = 59

	export default {
		name: 'Home',
		props: ['comp', 'cfg', 'selectedPage'],
		data() {
			return {
				env: '',
				error: '',
				popupVisible: false,
				hbVisible: false,
				errorVisible: false,
				exchangeVisible: false,
				ruleVisible: false,
				registerVisible: false,
				antifakeIfo: '',
				lotteryInfo: {},
				mobile: '',
				smscode: '',
				ewmVisible: false
			}
		},
		computed: {
			compProps() {
				return this.comp.props
			},
			popupType() {
				const {popupType = ''} = this.comp
				return popupType
			},
			isRunEnv() {
				return this.sup8._def.env.run.val === this.sup8.env.val
			},
			isPreviewEnv() {
				return this.sup8._def.env.preview.val === this.sup8.env.val
			},
			actRuleContent() {
				try {
					return decodeURIComponent(this.compProps.actRuleContent.val)
				} catch (e) {
					return this.compProps.actRuleContent.val || ''
				}
			},
		},
		watch: {
			popupType() {
				this.close(true)
				switch (this.popupType) {
					case 'error':
						this.popupVisible = this.errorVisible = true
						this.error = '<p>您来晚了</p><p>红包已被领走！</p>'
						break
					case 'winning1':
						this.popupVisible = this.hbVisible = true
						this.lotteryInfo = {
							AwardsName: '特等奖',
							GiftUnitPoints: 888,
						}
						break
					case 'winning2':
						this.popupVisible = this.hbVisible = true
						this.lotteryInfo = {
							AwardsName: '一等奖',
							GiftUnitPoints: 88,
						}
						break
					case 'winning3':
						this.popupVisible = this.hbVisible = true
						this.lotteryInfo = {
							AwardsName: '二等奖',
							GiftUnitPoints: 8.8,
						}
						break
					case 'winning4':
						this.popupVisible = this.hbVisible = true
						this.lotteryInfo = {
							AwardsName: '三等奖',
							GiftUnitPoints: 0.88,
						}
						break
					case 'winning5':
						this.popupVisible = this.exchangeVisible = true
						this.lotteryInfo = {
							AwardsName: '2元换购',
						}
						break
					case 'rule':
						this.popupVisible = this.ruleVisible = true
						break
					case 'register':
						this.popupVisible = this.registerVisible = true
						break
				}
			}
		},
		methods: {
			//检查是否有注册页
			checkRegisterPage() {
				const {pages = []} = this.cfg
				return pages.findIndex(item => item.type === '3-2') >= 0
			},
			//提交注册
			register() {
				const userInfo = this.getUserInfo()
				if (this.mobile.length === 0) {
					toast('请输入手机号')
					return
				}
				if (!/^\d{11}$/.test(this.mobile)) {
					toast('请输入正确的手机号')
					return
				}
				if (this.smscode.length === 0) {
					toast('请输入短信验证码')
					return
				}
				if (!/^\d{6}$/.test(this.smscode)) {
					toast('输入的短信验证码不正确，请重新输入')
					return
				}
				loading.open()
				apiHelper.activityRegister(userInfo, (res) => {
						loading.close()
						if (res.flag) {
							toast(res.msg)
							this.sup8.context.userId = res.data
							this.participationActivity()
						} else {
							toast(res.msg)
						}
					},
					() => {
						loading.close()
						toast('网络开小差了，请稍后再试')
					}
				)
			},
			//获取短信验证码
			getSMSCode() {
				if (timerCount !== 59) return
				const getSMSCode = this.$refs.getSMSCode
				let eno = this.sup8.context.eno
				if (this.mobile.length === 0) {
					toast('请输入手机号')
					return
				}
				if (!/^\d{11}$/.test(this.mobile)) {
					toast('请输入正确的手机号')
					return
				}
				loading.open()
				apiHelper.getVerificationCode(eno, this.mobile, (res) => {
					loading.close()
					if (res.flag) {
						getSMSCode.innerHTML = `${timerCount--}秒`
						let timer = setInterval(() => {
							getSMSCode.innerHTML = `${timerCount}秒`
							if (timerCount === 0) {
								getSMSCode.innerHTML = '获取验证码'
								clearInterval(timer)
								timerCount = 59
							} else {
								timerCount--
							}
						}, 1000)
					} else {
						toast(res.msg)
					}
				}, () => {
					loading.close()
					toast('网络开小差了，请稍后再试')
				})
			},
			//获取用户信息
			getUserInfo() {
				const {context, codeInfo, h5Template = {ActivityId: ''}, urlparams} = this.sup8
				const geo = !!context.geo ? context.geo.addressComponent : {}
				const userinfo = {
					Address: `${geo.country}${geo.province}${geo.city}${geo.district}${geo.street}${geo.street_number}`,
					IsRegister: this.checkRegisterPage(),
					Location: context.channel,
					WeChat: context.wxUser,
					DigitCode: codeInfo.Code,
					ActivityId: h5Template.ActivityId,
					EnterpriseNo: codeInfo.EnterpriseNo,
					UserId: context.userId,
					WebBrowser: navigator.userAgent,
					Mobile: this.mobile,
					MsgCode: this.smscode,
					Channel: urlparams.channel,
					Vcode: this.sup8.__VCODE,
					LabelNo: urlparams.labelno
				}
				return JSON.stringify(userinfo)
			},
			close(force = false) {
				//显示二维码时点击关闭
				if (this.ewmVisible) {
					this.popupVisible = this.ewmVisible = false
					wx.closeWindow()
				}

				//显示中奖时点击关闭
				if (this.hbVisible || this.exchangeVisible || this.errorVisible) {
					this.errorVisible = this.exchangeVisible = this.hbVisible = false
					this.popupVisible = this.ewmVisible = !!this.compProps.qrCode.val
				}

				//显示规则、注册弹窗时点击关闭
				if (this.ruleVisible || this.registerVisible) {
					this.popupVisible = this.ruleVisible = this.ruleVisible = false
				}
			},
			//点击开
			open() {
				if (this.isPreviewEnv) {
					this.popupVisible = this.errorVisible = true
					this.error = '<p>您来晚了</p><p>红包已被领走！</p>'
				}
				if (!this.isRunEnv) {
					return
				}
				//校验是否有注册
				if (!this.sup8.context.userId) {
					this.popupVisible = this.registerVisible = true
				} else {
					this.participationActivity()
				}
			},
			//抽奖
			participationActivity() {
				this.close()
				loading.open()
				apiHelper.participationActivity(this.getUserInfo(), (res) => {
					loading.close()
					this.popupVisible = true
					if (res.flag) {
						const {IsNewJoin, WiningRecords} = res.data
						const {GiftType, AwardsName, RecordUser, AwardsReamrk} = this.lotteryInfo = WiningRecords[0]
						this.lotteryInfo['AwardsReamrk'] = decodeURIComponent(AwardsReamrk)
						if (this.sup8.context.userId !== RecordUser && GiftType !== '3') {
							this.error = '<p>您来晚了</p><p>红包已被领走！</p>'
							this.errorVisible = true
							return
						}
						//如果奖项名称中包含‘现金红包’则按照红包UI处理
						if (AwardsName.indexOf('现金红包') > -1) {
							this.hbVisible = true
						} else {
							if (GiftType === '3') {
								this.exchangeVisible = true
							} else if (GiftType === '2') {
								this.hbVisible = true
								if (!IsNewJoin) {
									this.lotteryInfo['AwardsReamrk'] = '<p>红包已被领取</p><p>请到微信钱包查看</p>'
								}
							}
						}
					} else {
						this.error = res.errorCode === '2' ? '<p>非常遗憾，本次未中奖</p><p>下次再接再厉哦！</p>' : decodeURIComponent(res.msg)
						this.errorVisible = true
					}
				}, () => {
					loading.close()
					toast('网络开小差了，请稍后再试')
				})
			},
			//显示活动规则
			showRule() {
				this.popupVisible = this.ruleVisible = true
			},
			//防伪结果添加样式颜色
			formatAntifakeIfo(info) {
				this.antifakeIfo = info
				this.$nextTick(() => {
					const children = this.$refs.codeResult.children
					Array.from(children).map(item => {
						if (item.className === 'fwp1') {
							item.style.color = this.compProps.actFontColor.val
						}
						if (item.className === 'fwp2') {
							item.style.color = this.compProps.fwColor.val
						}
					})
				})
			},
			//获取防伪结果
			getAntifakeInfo() {
				const {codeInfo, UA, context} = this.sup8
				if (this.compProps.fwSource.val === 'getAntifakeInfo') {//防伪来源超8
					loading.open('一大波红包正在赶来...')
					apiHelper.getAntifakeInfo(
						codeInfo.EnterpriseNo,
						codeInfo.ProductId,
						codeInfo.Code,
						context.geo.latitude + ',' + context.geo.longitude ||
						UA.ip.cip,
						context.decodestatus,
						codeInfo.LabelNo,
						codeInfo.SkuLogisticCode,
						(res) => {
							this.$nextTick(() => {
								if (res.flag) {
									this.formatAntifakeIfo(res.data.Content)
								}
								loading.close()
							})
						},
						() => {
							loading.close()
							toast('网络开小差了，请稍后再试')
						}
					)
				} else if (this.compProps.fwSource.val === 'checkJtzCode') {//防伪来源CCN
					apiHelper.checkJtzCode(codeInfo.Code, (res) => {
							if (res.flag) {
								this.formatAntifakeIfo(res.data.Content)
							}
						},
						() => {
							loading.close()
							toast('网络开小差了，请稍后再试')
						}
					)
				} else if (this.compProps.fwSource.val === 'checkHqCode') {//防伪来源黑荞
					loading.open()
					apiHelper.checkHqCode(codeInfo.Code, this.sup8.__VCODE, 1, (res) => {
							this.$nextTick(() => {
								if (res.flag) {
									const t = `<p style="padding:3px 0;color:${this.compProps.fwColor.val}">本次为第${res.data.Num}次扫码</p>`
									this.antifakeIfo = `<p style="color:${this.compProps.actFontColor.val}">${codeInfo.Code}</p>${t}`
								} else {
									toast(res.msg)
								}
								loading.close()
							})
						},
						() => {
							loading.close()
							toast('网络开小差了，请稍后再试')
						}
					)
				}
			},
			//数据初始化
			init() {
				//校验是否注册
				loading.open()
				apiHelper.checkIsRegister(this.getUserInfo(),
					(res) => {
						loading.close()
						if (res.flag) {
							const {UserId = null} = res.data
							this.sup8.context.userId = UserId
						}
						this.getAntifakeInfo()
					},
					() => {
						loading.close()
						toast('网络开小差了，请稍后再试')
					}
				)
			},
		},
		created: function () {
			const that = this
			that.mergeCompProps(that.comp)

			switch (that.sup8.env) {
				case that.sup8._def.env.design:
					that.env = '设计器模式'
					this.envType = 'design'
					break
				case that.sup8._def.env.preview:
					that.env = '预览模式'
					break
				case that.sup8._def.env.run:
					that.env = '运行模式'
					break
				default:
					break
			}
		},
		mounted() {
			// console.log(this.comp)
			// console.log(this.sup8)
			// console.log(this.cfg)
			console.log(this.compProps)
			this.$nextTick(() => {
				mobileInit()
				document.documentElement.style.fontSize = '35px';
			})
			if (this.isRunEnv) {
				if (this.sup8.context.geo) {
					this.init()
				} else {
					eventBus.subscribe('gpsDone', data => {
						this.init()
					})
				}
			}
		}
	}
</script>
<style scoped>
	.home-bg {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
		display: flex;
		flex-flow: column;
		/*justify-content: center;*/
		justify-content: space-evenly;
		overflow: hidden;
		position: relative;
	}

	.logo {
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.logo img {
		width: 100%;
		display: block;
	}

	.product-slogan {
		border-color: rgb(0, 78, 151);
		color: rgb(0, 78, 151);
		font-size: 0.28em;
		width: 60%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		--sloganFontColor: rgba(0, 0, 0, 0);
	}

	.product-slogan:after, .product-slogan:before {
		content: '';
		display: block;
		flex: 1;
		box-sizing: border-box;
		height: 1px;
		border-color: inherit;
		border-style: inherit;
		border-width: 1px 0 0;
		background-color: var(--sloganFontColor);
		opacity: 0.5;
	}

	.product-slogan:after {
		margin-left: 15px;
	}

	.product-slogan:before {
		margin-right: 15px;
	}

	.open {
		width: 100%;
		display: block;
		margin: 0 auto;
	}

	@keyframes tada {
		0% {
			-webkit-transform: scale3d(1, 1, 1);
			-ms-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
		10%,
		20% {
			-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
			-ms-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
			transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
		}
		30%,
		50%,
		70%,
		90% {
			-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
			-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
			transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		}
		40%,
		60%,
		80% {
			-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
			-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
			transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		}
		100% {
			-webkit-transform: scale3d(1, 1, 1);
			-ms-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	.tada {
		animation: tada 1s ease both;
		-webkit-animation: tada 1s ease both infinite;
	}

	.product-img {
		width: 100%;
		display: block;
		margin: 0 auto;
	}

	.fwImage {
		width: 100%;
		display: block;
		margin: 0 auto;
	}

	.rule {
		font-size: .25em;
		text-align: center;
		padding-bottom: 5px;
	}

	.rule i, .rule span {
		display: inline-block;
	}

	.rule span {
		text-decoration: underline;
	}

	.text-center {
		font-size: .25em;
		color: #004e97;
		text-align: center;
	}

	.popup {
		position: absolute;
		background: rgba(0, 0, 0, .7);
		z-index: 1000;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.winning-hb {
		background: url("https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xiaoqiaojiu/winning/bg.png") no-repeat;
		width: 6em;
		height: 6em;
		background-size: 100% 100%;
		position: relative;
		text-align: center;
		margin: auto;
	}

	.p1 {
		color: #b29859;
		font-size: 0.45em;
	}

	.p2 {
		color: #b29859;
		font-size: 0.45em;
	}

	.p3 {
		color: #b51626;
		line-height: 1;
		font-size: 1em;
		font-weight: 700;
		padding-left: 0.3em;
	}

	.p3:after {
		content: '￥';
		font-size: 1rem;
	}

	.p4 {
		color: #fb9da0;
		font-size: 0.28em;
		height: 4.5em;
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.close {
		width: 20px;
		height: 20px;
		display: block;
		margin: 10px auto;
	}

	.error {
		width: 4em;
		height: 4.8em;
		background-image: url("https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xiaoqiaojiu/error-bg.png");
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 5px;
		text-align: center;
		position: relative;
		margin: auto;
	}

	.error-top {
		color: #ffffff;
		font-size: .35rem;
		height: 4.8em;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 0 1em;
	}

	.error-product {
		max-height: 3.2em;
		transform: translateX(-50%);
		position: absolute;
		bottom: 0.1em;
	}

	.code-result {
		font-size: .25em !important;
		text-align: center;
	}

	.exchange {
		width: 5.8em;
		height: 6.8em;
		background-image: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xiaoqiaojiu/change-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 5px;
		text-align: center;
		position: relative;
		margin: auto;
		color: #ffffff;
	}

	.exchange-cnt {
		position: absolute;
		top: 1.8em;
		width: 100%;
		text-align: center;
	}

	.exchange-product {
		position: relative;
		z-index: 1;
		max-height: 3.8em;
	}

	.gxn {
		width: 100px;
		position: absolute;
		left: 50%;
		margin-left: -50px;
		margin-top: -15px;
	}

	.t1 {
		font-size: 0.35em;
		padding-top: 2em;
	}

	.t2 {
		font-size: 0.3em;
		color: #3b3b3b;
		font-weight: bold;
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		height: 4em;
		flex-direction: column;
		justify-content: center;
		display: flex;
	}

	.gxn-bg {
		width: 100%;
		position: absolute;
		left: 0;
	}

	.rule-box {
		width: 6em;
		height: 10em;
		background-image: url("https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xiaoqiaojiu/rule-bg.png");
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 5px;
		color: #ffffff;
		margin: auto;
	}

	.rule-top {
		height: 13%;
		display: flex;
		align-items: center;
	}

	.rule-top > span {
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 1px;
		vertical-align: middle;
	}

	.rule-top > img {
		width: 32px;
		vertical-align: middle;
		margin: 0 10px 0 25px;
	}

	.rule-cnt {
		max-height: 80%;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		color: #000000;
		padding: 15px 3%;
	}

	.popup-cnt {
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}

	.register {
		width: 5.8em;
		height: 6.5em;
		background-image: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/xiaoqiaojiu/change-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 5px;
		text-align: center;
		position: relative;
		margin: auto;
		color: #ffffff;
	}

	.register-title {
		height: 1.5em;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: .8em;
	}

	.register-title > p {
		font-size: 0.4em;
	}

	.register-item {
		width: 5.39em;
		height: 0.9em;
		background: #f0f8ff;
		border-radius: 5px;
		display: flex;
		align-items: center;
		overflow: hidden;
		margin: .3em auto;
	}

	.register-item > img {
		margin: 0.05em 0.2em 0 0.2em;
	}

	.mobile-icon {
		width: 0.24em;
	}

	.yzm-icon {
		width: 0.26em;
	}

	.register-item > span {
		font-size: 0.25em;
		color: #0e3055;
		margin-right: 0.5em;
	}

	.register-item > input {
		font-size: 0.25em;
		color: #0e3055;
		border: none;
		width: 50%;
		outline: none;
		background: none;
	}

	.get-sms-code {
		color: #d55e6e !important;
	}

	.register-btn {
		margin: 0.66em auto;
		width: 5.39em;
		height: 0.9em;
		border-radius: 5px;
		background: #0e3055;
		text-align: center;
	}

	.register-btn > p {
		color: #ffffff;
		font-size: 0.36em;
		line-height: 2.4;
	}

	.kefu {
		width: 1.72em;
		position: absolute;
		right: -0.1em;
		bottom: 0.8em;
	}
</style>
<style>
	.rule-cnt p {
		line-height: 1.8;
		color: #303030;
		font-weight: 400;
	}

	.code-result p {
		margin: 0;
	}
</style>
