uniapp写h5的登录页,需要样式好看一点的
时间: 2024-06-08 15:05:13 浏览: 13
可以使用以下方法实现一个样式较好看的登录页:
1. 使用flex布局,将登录框水平居中,使其看起来更加美观。
2. 使用渐变背景色,可以使用CSS3的linear-gradient属性,来创建一个颜色渐变效果。
3. 使用阴影效果,可以使用box-shadow属性,来给登录框添加阴影效果,增加立体感。
4. 使用动画效果,可以使用CSS3的animation属性,来给登录框添加动画效果,如渐隐渐现、翻转等效果。
5. 使用图标和图片,可以使用一些符号或者图片来增加登录页面的可读性和吸引力。
以下是一个示例代码:
```
<template>
<div class="login-page">
<form class="login-form">
<h2>用户登录</h2>
<div class="form-field">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" />
</div>
<div class="form-field">
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" />
</div>
<button class="btn-login">登录</button>
</form>
</div>
</template>
<style scoped>
.login-page {
background: linear-gradient(to bottom, #7f7fd5, #86a8e7, #91eae4);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-form {
background-color: #fff;
width: 400px;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.form-field {
margin-bottom: 20px;
}
.form-field label {
display: inline-block;
width: 100px;
}
.form-field input {
width: 100%;
padding: 5px;
border: none;
border-bottom: 1px solid #ccc;
}
.btn-login {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.btn-login:hover {
background-color: #0056b3;
}
</style>
```
效果如下图所示:
![login-page-demo](https://img-blog.csdnimg.cn/20210426144623916.png)