<template>
|
<div class="login-container">
|
<div class="login-form-container">
|
<div class="login-form">
|
<Card>
|
<div class="login-header">用户登录</div>
|
</Card>
|
<Form ref="user" :model="user" :rules="userRules" style="margin: 20px;">
|
<FormItem prop="name">
|
<Input type="text" v-model="user.name" placeholder="请输入用户名">
|
<Icon type="ios-person-outline" slot="prepend"></Icon>
|
</Input>
|
</FormItem>
|
<FormItem prop="password">
|
<Input type="password" v-model="user.password" placeholder="请输入密码">
|
<Icon type="ios-lock-outline" slot="prepend"></Icon>
|
</Input>
|
</FormItem>
|
<FormItem>
|
<Checkbox v-model="user.remember">记住密码</Checkbox>
|
</FormItem>
|
<FormItem style="text-align:right">
|
<Button type="primary" long @click="handleSubmit('user')">登录</Button>
|
</FormItem>
|
</Form>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data(){
|
return {
|
user: {
|
name: 'admin',
|
password: 'admin',
|
remember: true
|
},
|
userRules: {
|
name: [
|
{ required: true, message: '用户名不能为空'}
|
],
|
password: [
|
{ required: true, message: '密码不能为空'}
|
]
|
}
|
}
|
},
|
methods: {
|
handleSubmit(name) {
|
this.$refs[name].validate((valid) => {
|
if (valid) {
|
this.$store.commit('setLogin', true);
|
this.$store.commit('setUserName', this.user.name);
|
this.$router.push('/index');
|
} else {
|
this.$Message.error('登录失败！用户名/密码错误');
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.login-header{
|
padding: 0 16px;
|
height: 36px;
|
line-height: 36px;
|
font-size: 20px;
|
font-weight: bold;
|
letter-spacing: 4px;
|
color: #000000;
|
border-radius: 3px;
|
text-align: center;
|
}
|
.login-container {
|
height: 100vh;
|
background-image: -webkit-linear-gradient(47deg, #007FF0 0%, #006EDF 28%, #0044BC 76%, #003DAC 100%);
|
background-image: linear-gradient(47deg, #007FF0 0%, #006EDF 28%, #0044BC 76%, #003DAC 100%);
|
}
|
.login-form-container {
|
padding-top: 80px;
|
height: 100%;
|
}
|
.login-form {
|
margin: 0 auto;
|
width: 400px;
|
padding-bottom: 16px;
|
background-color: #FFFFFF;
|
}
|
</style>
|
