<template>
|
<div class="login-container">
|
<el-card class="login-card">
|
<h2>交通统计报表审核系统</h2>
|
<el-form ref="form" :model="form" :rules="rules">
|
<el-form-item prop="username">
|
<el-input v-model="form.username" placeholder="用户名" @keyup.enter.native="login"></el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input v-model="form.password" type="password" placeholder="密码" @keyup.enter.native="login"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="login" style="width:100%">登 录</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: 'Login',
|
data() {
|
return {
|
form: { username: '', password: '' },
|
rules: {
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
}
|
}
|
},
|
methods: {
|
login() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.$router.push('/dashboard')
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5; }
|
.login-card { width: 400px; }
|
.login-card h2 { text-align: center; margin-bottom: 30px; }
|
</style>
|
