index.vue
1.98 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
<div class="login-container">
<a-form :form="form" class="login-form" @submit="handleSubmit">
<a-form-item class="form-item logo">
logo
</a-form-item>
<a-form-item class="form-item">
<a-input v-decorator="rules.userName" placeholder="请输入用户名">
<a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item class="form-item">
<a-input v-decorator="rules.password" placeholder="请输入密码" type="password">
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item class="form-item">
<a-button type="primary" style="width:100%" html-type="submit">登录</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
userName: '',
password: '',
formLayout: 'horizontal',
form: this.$form.createForm(this, { name: 'coordinated' }),
rules: {
userName: ['userName', { rules: [{ required: true, message: '请输入用户名!' }] }],
password: ['password', { rules: [{ required: true, message: '请输入密码!' }] }],
}
}
},
methods: {
// 登录
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
this.$router.push({ path: '/dashboard/home' })
}
});
}
}
}
</script>
<style lang="less" scoped>
.login-container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
background: #f0f2f5;
width: 100%;
background-image: url("../../assets/images/login-bg.svg");
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100%;
.login-form {
width: 400px;
margin: 250px auto 0;
.logo{
text-align: center;
}
}
}
</style>