小程序实战Flex布局(6) 通用的登录界面布局
2018-03-22 本文已影响193人
Arison
效果
image.pnglogin.wxml
<view class='container_login'>
<view class='header'>
<image src='{{headerimg}}' class='header-img'></image>
</view>
<view class='content'>
<view class='input'>
<view class='account'>
<text>账号 </text>
<view class='line'></view>
<input></input>
</view>
<view class='password'>
<text>密码 </text>
<view class='line'></view>
<input password='true'></input>
</view>
</view>
<view class='commit'>
<button>登 录</button>
</view>
</view>
<view class='footer'>
<view class='userTip'>
<text>忘记密码</text>
<text>新用户注册</text>
</view>
</view>
</view>
login.wxss
/* pages/login/login.wxss */
page {
height: 100%;
}
.container_login {
display: flex;
height:100%;
width: 100;
flex-direction: column;
align-items: center;
background-color: #f8f8f8;
}
.header {
width: 100%;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.header-img{
width: 80px;
height: 80px;
border: 1px solid gainsboro;
border-radius: 50%;
}
.content {
width: 100%;
}
.content .input {
width: 100%;
background: #fff;
}
.input text{
font-size: 15px;
}
.input input{
flex: 1;
}
.line{
height: 15px;
margin: 5px 5px 5px 10px;
border-left: 1px solid gainsboro;
}
.account {
display: flex;
padding: 8px;
align-items: center;
border-bottom: 1px solid lightgray;
}
.password {
padding: 8px;
display: flex;
align-items: center;
}
.commit button {
margin: 10px 20px 10px 20px;
background: #5da3ed;
font-size: 15px;
color: white;
}
.footer {
width: 100%;
}
.userTip {
width: 100%;
display: flex;
justify-content: space-between;
}
.userTip text {
margin-left: 20px;
margin-right: 20px;
font-size: 13px;
color: #5da3ed;
}