perf[Login Form]: optimize eye icon style (#1545)

* optimiz: eye icon style for login form

* change eye-open svg
This commit is contained in:
Yuga Sun
2019-01-23 11:18:02 +08:00
committed by 花裤衩
parent ac8eddf3d7
commit 8cf279fbe1
2 changed files with 18 additions and 11 deletions

View File

@@ -1,11 +1,11 @@
<template>
<div class="login-container">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
<div class="title-container">
<h3 class="title">{{ $t('login.title') }}</h3>
<lang-select class="set-language"/>
<h3 class="title">
{{ $t('login.title') }}
</h3>
<lang-select class="set-language" />
</div>
<el-form-item prop="username">
@@ -26,18 +26,21 @@
<svg-icon icon-class="password" />
</span>
<el-input
:type="passwordType"
v-model="loginForm.password"
:type="passwordType"
:placeholder="$t('login.password')"
name="password"
auto-complete="on"
@keyup.enter.native="handleLogin" />
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
{{ $t('login.logIn') }}
</el-button>
<div style="position:relative">
<div class="tips">
@@ -45,11 +48,15 @@
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
<div class="tips">
<span style="margin-right:18px;">{{ $t('login.username') }} : editor</span>
<span style="margin-right:18px;">
{{ $t('login.username') }} : editor
</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
</div>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{ $t('login.thirdparty') }}</el-button>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">
{{ $t('login.thirdparty') }}
</el-button>
</div>
</el-form>
@@ -60,7 +67,6 @@
<br>
<social-sign />
</el-dialog>
</div>
</template>