用uniapp写一个美观好看的登录界面,要求输入框有图标,总体页面美观大气
时间: 2023-05-22 08:05:30 浏览: 683
。非常感谢您的提问!UniApp是一个非常流行的开源框架,它可以让开发人员使用Vue.js编写跨平台的移动应用程序,这里向您推荐一种实现好看登录界面的方法:
```
<template>
<div class="login-container">
<div class="icon-container">
<img src="./assets/images/logo.png" alt="logo">
</div>
<form class="login-form">
<div class="input-container">
<i class="icon icon-user"></i>
<input type="text" placeholder="请输入用户名" />
</div>
<div class="input-container">
<i class="icon icon-password"></i>
<input type="password" placeholder="请输入密码" />
</div>
<button class="login-button">登录</button>
</form>
</div>
</template>
<script>
export default {
name: 'LoginPage'
}
</script>
<style scoped>
.login-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background-color: #f5f5f5;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
}
.icon {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 10px;
background-repeat: no-repeat;
background-position: center;
}
.icon-user {
background-image: url(./assets/images/user.png);
}
.icon-password {
background-image: url(./assets/images/password.png);
}
.login-form {
width: 100%;
max-width: 420px;
padding: 30px;
box-sizing: border-box;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.input-container {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
input {
flex: 1;
width: 0;
height: 40px;
padding-left: 10px;
font-size: 16px;
border: none;
background-color: transparent;
outline: none;
}
input::placeholder {
color: #999;
}
.login-button {
width: 100%;
height: 50px;
margin-top: 30px;
font-size: 18px;
color: #fff;
background-color: #5d9cec;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color .2s;
}
.login-button:hover {
background-color: #4a89dc;
}
</style>
```
在这个模板中,我们使用了Flex布局,通过两个嵌套的div标签、form标签和相关CSS样式来完成登录界面的布局,并使用了assets文件夹下的图片文件作为图标,其中,对于输入框添加了一些样式,使得客户端呈现出良好的用户体验。