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

@ -0,0 +1 @@
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

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>