用vue3写一个页面精美的内容丰富带背景图的登陆页面
时间: 2023-10-21 12:03:33 浏览: 140
一个绚丽的登陆页面模板
3星 · 编辑精心推荐
以下是一个使用 Vue3 写的页面精美的内容丰富带背景图的登录页面:
```html
<template>
<div class="login-container">
<div class="background"></div>
<div class="login-card">
<div class="logo">
<img src="./assets/logo.png" alt="Logo">
<h2>LOGIN</h2>
</div>
<form class="login-form" @submit.prevent="login">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" v-model="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" v-model="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
// 登录逻辑
}
}
};
</script>
<style scoped>
.login-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('./assets/background.jpg');
background-size: cover;
opacity: 0.5;
z-index: -1;
}
.login-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
padding: 40px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.logo {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.logo img {
width: 50px;
height: 50px;
margin-right: 10px;
}
.logo h2 {
font-size: 24px;
font-weight: bold;
color: #333;
}
.login-form {
display: flex;
flex-direction: column;
width: 100%;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
label {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
input {
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
border-radius: 4px;
border: none;
background-color: #2ecc71;
color: #fff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
button:hover {
background-color: #27ae60;
}
</style>
```
这个登录页面使用了背景图片,让页面看起来更加精美。在样式方面,使用了圆角、阴影、渐变等效果,使页面看起来更加美观。同时,使用了 Logo 和自适应的表单布局,让页面看起来更加专业和贴近实际应用场景。
阅读全文