twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-08 01:17:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: login page

Browse Source
This commit is contained in:
xiaoxian521 2021-11-06 19:47:57 +08:00
parent ef1c47bac5
commit 3a1f28667b
2 changed files with 65 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/style/login.css
View File

@ -40,10 +40,10 @@
} }
.login-form h2 { .login-form h2 {
font-size: 2.9rem;
text-transform: uppercase; text-transform: uppercase;
margin: 15px 0; margin: 15px 0;
color: #999; color: #999;
font: bold 200% Consolas, Monaco, monospace;
} }
.input-group { .input-group {

68
src/views/login.vue
View File

@ -51,8 +51,37 @@ function onPwdBlur() {
<div class="login-box"> <div class="login-box">
<div class="login-form"> <div class="login-form">
<img src="/@/assets/login/avatar.svg" class="avatar" /> <img src="/@/assets/login/avatar.svg" class="avatar" />
<h2>Pure Admin</h2> <h2
<div class="input-group user focus"> v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 100
}
}"
>
Pure Admin
</h2>
<div
class="input-group user focus"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 200
}
}"
>
<div class="icon"> <div class="icon">
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
</div> </div>
@ -67,7 +96,21 @@ function onPwdBlur() {
/> />
</div> </div>
</div> </div>
<div class="input-group pwd focus"> <div
class="input-group pwd focus"
v-motion
:initial="{
opacity: 0,
y: 100
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 300
}
}"
>
<div class="icon"> <div class="icon">
<i class="fa fa-lock"></i> <i class="fa fa-lock"></i>
</div> </div>
@ -82,7 +125,24 @@ function onPwdBlur() {
/> />
</div> </div>
</div> </div>
<button class="btn" @click="onLogin">登录</button> <button
class="btn"
v-motion
:initial="{
opacity: 0,
y: 10
}"
:enter="{
opacity: 1,
y: 0,
transition: {
delay: 400
}
}"
@click="onLogin"
>
登录
</button>
</div> </div>
</div> </div>
</div> </div>