用vue写一个漂亮的登录界面代码
时间: 2024-03-08 11:49:15 浏览: 58
好的,以下是一个简单的登录界面的Vue代码示例:
```vue
<template>
<div class="login-container">
<h2 class="title">Welcome to My App</h2>
<form class="login-form">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" v-model="username" placeholder="Enter your username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" placeholder="Enter your password">
</div>
<button class="btn" @click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// perform login logic here
}
}
}
</script>
<style scoped>
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f1f1f1;
}
.title {
font-size: 2rem;
margin-bottom: 1rem;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fff;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
label {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
input {
padding: 0.5rem;
font-size: 1.2rem;
border: none;
border-radius: 0.5rem;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.btn {
padding: 0.5rem 1rem;
font-size: 1.2rem;
border: none;
border-radius: 0.5rem;
background-color: #007bff;
color: #fff;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover {
background-color: #0069d9;
}
</style>
```
这个示例包含一个简单的登录表单,具有响应式设计和漂亮的样式。当用户点击登录按钮时,它会调用一个名为 `login` 的方法,你可以在该方法中执行登录逻辑。