<template>
|
<div>
|
<div class="pam-consultant-login">
|
<div class="pam-consultant-login__header pam-paragraph">顧問登入</div>
|
<div class="pam-paragraph">
|
<div class="pam-consultant-login__title">帳號</div>
|
<div class="position-r mt-10">
|
<input type="text"
|
:model="loginDto.account"
|
class="pam-consultant-login__input"
|
placeholder="輸入eService帳號">
|
<div class="pam-consultant-login__inputIcon text--primary cursor--pointer"
|
@click="cookieAccount">
|
<i :class="[isRemember ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i>
|
記住
|
</div>
|
</div>
|
</div>
|
<div class="pam-paragraph">
|
<div class="pam-consultant-login__title ">
|
<div>密碼</div>
|
<div class="text--primary fs-16 cursor--pointer"
|
@click="forgetPassword">忘記密碼？</div>
|
</div>
|
<div class="position-r mt-10">
|
<input :type="[isShowPassword ? 'text' : 'password']"
|
:model="loginDto.password"
|
class="pam-consultant-login__input"
|
placeholder="輸入eService密碼">
|
<div class="pam-consultant-login__inputIcon cursor--pointer"
|
@click="isShowPassword = !isShowPassword">
|
<i :class="[isShowPassword ? 'icon-eye-1 fs-25' : 'icon-eye' , 'text--primary']"></i>
|
</div>
|
</div>
|
</div>
|
<div class="pam-paragraph">
|
<div class="pam-consultant-login__title">
|
<div>驗證碼</div>
|
<div class="text--dark-blue fs-16 cursor--pointer"
|
@click="regenerateCode">重新產生</div>
|
</div>
|
<div class="pam-consultant-login__verifyBlock mt-10">
|
<div class="w-55">
|
<input type="text"
|
:modal="loginDto.verificationCode"
|
class="pam-consultant-login__input">
|
</div>
|
<div class="pam-consultant-login__verifyImg"></div>
|
</div>
|
</div>
|
<div class="pam-consultant-login__confirmBlock pam-paragraph">
|
<button class="pam-consultant-login__confirm cursor--pointer"
|
@click="login">送出</button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {
|
Vue,
|
Component
|
} from 'vue-property-decorator';
|
|
@Component({
|
layout: 'default'
|
})
|
export default class ConsultantLogin extends Vue {
|
isRemember = false;
|
isShowPassword = false;
|
loginDto = {
|
account: '',
|
password: '',
|
verificationCode: '',
|
}
|
|
|
login(): void {
|
console.log('login');
|
}
|
|
cookieAccount(): void {
|
this.isRemember = !this.isRemember;
|
if (this.isRemember) {
|
console.log('sotre account');
|
}
|
}
|
|
forgetPassword(): void {
|
console.log('forget password');
|
}
|
|
regenerateCode(): void {
|
console.log('call api regenerate verificationCode')
|
}
|
}
|
|
</script>
|
<style lang="scss"
|
scoped>
|
.mt-20 {
|
margin-top: 20px;
|
}
|
|
.mt-25 {
|
margin-top: 25px;
|
}
|
|
.w-55 {
|
width: 55% !important;
|
}
|
|
.position-r {
|
position: relative;
|
}
|
|
.pam-consultant-login {
|
margin: auto;
|
width: 336px;
|
font-size: 20px;
|
color: $PRIMARY_BLACK;
|
|
&__header {
|
text-align: center;
|
font-size: 24px;
|
font-weight: bold;
|
letter-spacing: 1.2;
|
color: $PRIMARY_BLACK;
|
}
|
|
&__title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
&__input {
|
width: 100%;
|
outline: 0;
|
border: 1px solid #CCCCCC;
|
border-radius: 10px;
|
font-size: 20px;
|
height: 50px;
|
padding: 10px 90px 10px 15px;
|
overflow: auto;
|
box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
|
&Icon {
|
position: absolute;
|
display: flex;
|
align-items: center;
|
top: 15px;
|
right: 15px;
|
}
|
}
|
|
&__verifyBlock {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
&__verifyImg {
|
width: 126px;
|
border: 1px black solid;
|
}
|
|
&__confirmBlock {
|
display: flex;
|
justify-content: center;
|
}
|
|
&__confirm {
|
color: $PRIMARY_WHITE;
|
width: 80px;
|
height: 50px;
|
border-radius: 30px;
|
border: 1px solid $LIGHT_GREY;
|
background-color: $PRIMARY_RED;
|
}
|
}
|
|
</style>
|
