生成一个登录界面vue代码
时间: 2024-02-02 21:59:09 浏览: 18
<template>
<div class="login">
<form>
<h2>Login</h2>
<div class="form-group">
<label>Username</label>
<input type="text" v-model="username" placeholder="Enter username" required />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" v-model="password" placeholder="Enter password" required />
</div>
<button type="submit" class="btn btn-primary" @click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// TODO: implement login logic
}
}
}
</script>
<style scoped>
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
width: 100%;
padding: 10px;
border-radius: 5px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
}
</style>