login.vue 3.65 KB

<template>
	<div class="content">
		<div class="ebg">
			<img src="@/assets/images/common/login-bg.png">
		</div>
		<div class="top-space"></div>
		<div class="box">
			<!-- 帐密登陆 -->
			<div v-if="type == 1" class="login">
				<div class="login-tit">平安壹賬通</div>
				<div class="login-nav">
					<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer active">账密登录</div>
					<div class="login-nav-v-line">|</div>
					<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer">動態密碼登录</div>
				</div>
				<div class="gird-g form">
					<div class="pure-u-1 form-item">
						<div class="label">
							<img src="@/assets/images/login/icon-login-user.png"> 账号
						</div>
						<div class="ipt-wrap">
							<input placeholder="請輸入證件號/一账通用户名/手机号" class="ipt" type="text">
						</div>
					</div>
					<div class="pure-u-1 form-item">
						<div class="label">
							<img src="@/assets/images/login/icon-login-password.png"> 密码
						</div>
						<div class="ipt-wrap">
							<input placeholder="輸入登錄密碼" class="ipt" type="text">
						</div>
					</div>
					<div class="pure-u-1 form-item">
						<div class="ipt-wrap">
							<input placeholder="請輸入驗證碼" class="ipt ipt-verify" type="text">
							<div class="ipt verify-btn pointer">5136</div>
						</div>
					</div>
				</div>
				<div class="login-protocol">
					<img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">同意
					<span @click="onProtocolHandler()" class="protocol pointer">《平安一账通会员服务协议》</span>
				</div>
				<div @click="onSubmitHandler()" class="login-submit pointer">登入</div>
				<div class="login-func">
					<div @click="onRegisterHandler()" class="login-func-btn pointer">註冊</div>
					<div @click="onForgetHandler()" class="login-func-btn pointer">忘記密碼</div>
				</div>
			</div>

			<!-- OTP登陆 -->
			<div v-if="type == 2" class="login">
				<div class="login-tit">平安壹賬通</div>
				<div class="login-nav">
					<div @click="onLoginTypeHandler(1)" class="login-nav-tit text-r pointer">账密登录</div>
					<div class="login-nav-v-line">|</div>
					<div @click="onLoginTypeHandler(2)" class="login-nav-tit pointer active">動態密碼登录</div>
				</div>
				<div class="gird-g form">
					<div class="pure-u-1 form-item">
						<div class="label">
							<img src="@/assets/images/login/icon-login-phone.png"> 手機號
						</div>
						<div class="ipt-wrap">
							<input placeholder="手機號" class="ipt" type="text">
						</div>
					</div>
					<div class="pure-u-1 form-item">
						<div class="label">
							<img src="@/assets/images/login/icon-login-message.png"> 驗證碼
						</div>
						<div class="ipt-wrap">
							<div class="ipt ipt2">
								<input placeholder="驗證碼" class="ipt-code" type="text">
								<div class="veri-btn pointer">獲取驗證碼</div>
							</div>
						</div>
					</div>
				</div>
				<div class="login-protocol">
					<img @click="onCheckHandler()" class="check pointer" src="@/assets/images/login/login-check.png">同意
					<span @click="onProtocolHandler()" class="protocol pointer">《平安一账通会员服务协议》</span>
				</div>
				<div @click="onSubmitHandler()" class="login-submit pointer">登入</div>
				<div class="login-func">
					<div @click="onRegisterHandler()" class="login-func-btn pointer">註冊</div>
					<div @click="onForgetHandler()" class="login-func-btn pointer">忘記密碼</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script src="./login.js"></script>
<style lang="scss" scoped>
@import "./login.scss";
</style>