写一个vue的后管理系统的登录页面
时间: 2023-10-25 17:09:21 浏览: 30
以下是一个简单的 Vue 后台管理系统登录页面示例:
```html
<template>
<div class="login-box">
<h1>后台管理系统登录</h1>
<form>
<input type="text" placeholder="用户名" v-model="username">
<input type="password" placeholder="密码" v-model="password">
<button type="submit" @click.prevent="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// TODO: 处理登录逻辑
}
}
}
</script>
<style scoped>
.login-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
}
h1 {
font-size: 2rem;
margin-bottom: 2rem;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input {
width: 300px;
height: 40px;
margin-bottom: 1rem;
padding: 0 1rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
button {
width: 300px;
height: 40px;
margin-top: 1rem;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}
</style>
```
此示例包含一个简单的表单,用于输入用户名和密码并触发登录操作。根据实际情况,你可以在 `login` 方法中添加实际的登录逻辑。