<template>
|
<div>
|
<div class="pam-consultant-login">
|
<div class="pam-consultant-login__header">顧問登入</div>
|
<div class="pam-consultant-login__title mt-20">帳號</div>
|
<div class="position-r mt-10">
|
<input type="text"
|
:model="loginDto.account"
|
class="pam-consultant-login__input"
|
placeholder="輸入eService帳號">
|
<div class="position-a text--primary cursor--pointer" @click="cookieAccount">
|
<i :class="[isRemember ? 'icon-checkbox-1' : 'icon-checkbox','pr-5']"></i>
|
記住
|
</div>
|
</div>
|
<div class="pam-consultant-login__title mt-25">
|
<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="position-a cursor--pointer" @click="isShowPassword = !isShowPassword">
|
<i :class="[isShowPassword ? 'icon-eye-1 fs-25' : 'icon-eye' , 'text--primary']"></i>
|
</div>
|
</div>
|
<div class="pam-consultant-login__title mt-25">
|
<div>驗證碼</div>
|
<div class="text--dark-blue fs-16 cursor--pointer" @click="regenerate">重新產生</div>
|
</div>
|
<div class="mt-10" style="display:flex;justify-content:space-between ">
|
<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 class="pam-consultant-login__confirmBlock">
|
<button class="pam-consultant-login__confirm mt-10" @click="login">送出</button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component } from 'vue-property-decorator';
|
|
@Component({
|
layout:'home'
|
})
|
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('cookie');
|
}
|
}
|
|
forgetPassword():void{
|
console.log('forget password');
|
}
|
|
regenerate():void{
|
console.log('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;
|
}
|
.position-a{
|
position: absolute;
|
display: flex;
|
align-items: center;
|
top: 15px;
|
right: 15px;
|
}
|
.pam-consultant-login{
|
width: 336px;
|
margin: 40px auto 30px auto;
|
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;
|
padding: 0px 10px;
|
}
|
&__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;
|
}
|
&__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>
|
