update 登录页
This commit is contained in:
@@ -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;
|
||||
});
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user