update 登录页

This commit is contained in:
2021-05-30 17:18:50 +08:00
parent 7cef14c7fd
commit 2cfd7bdb05
3 changed files with 122 additions and 21 deletions

View File

@@ -1,25 +1,51 @@
<template>
<a-form-model :model="form" @submit="handleSubmit" @submit.native.prevent layout="inline">
<a-form-model-item>
<a-input placeholder="Username" v-model="form.user">
<a-icon slot="prefix" style="color:rgba(0,0,0,.25)" type="user" />
</a-input>
</a-form-model-item>
<a-form-model-item>
<a-input placeholder="Password" type="password" v-model="form.password">
<a-icon slot="prefix" style="color:rgba(0,0,0,.25)" type="lock" />
</a-input>
</a-form-model-item>
<a-form-model-item>
<a-button
:disabled="form.user === '' || form.password === ''"
:loading="loading"
html-type="submit"
type="primary"
>Log in</a-button>
</a-form-model-item>
</a-form-model>
<div class="yo-login">
<div class="yo-login--placeholder">
<container mode="container-sm">
<a-form-model :model="form" @submit="handleSubmit" @submit.native.prevent>
<a-form-model-item
:class="{ 'yo-login--label': !focus.user && !form.user }"
:colon="false"
label="用户名"
>
<a-input
@blur="focus.user = false"
@focus="focus.user = true"
size="large"
v-model="form.user"
/>
</a-form-model-item>
<a-form-model-item
:class="{ 'yo-login--label': !focus.password && !form.password }"
:colon="false"
label="密码"
>
<a-input-password
@blur="focus.password = false"
@focus="focus.password = true"
size="large"
v-model="form.password"
/>
</a-form-model-item>
<a-form-model-item class="mt-lg">
<a-button
:disabled="form.user === '' || form.password === ''"
:loading="loading"
block
html-type="submit"
size="large"
type="primary"
>登录</a-button>
</a-form-model-item>
</a-form-model>
</container>
</div>
</div>
</template>
<style lang="less" scoped>
@import '~@/assets/style/login';
</style>
<script>
import { doLogin } from '@/common/login';
@@ -31,6 +57,10 @@ export default {
user: '',
password: '',
},
focus: {
user: false,
password: false,
},
};
},
methods: {
@@ -39,7 +69,7 @@ export default {
doLogin({
account: this.form.user,
password: this.form.password,
}).finally(() => {
}).catch(() => {
this.loading = false;
});
},