微信小程序实战之登录页面制作（5）

发布时间：2020-12-14 20:18:07 所属栏目：资源来源：网络整理

导读：提供一个登录页的案例，供同学们使用项目效果图：目录结构：图片资源： name.png key.png loginLog.jpg login.wxml： view class="inputView" image class="nameImage" src="../images/name.png" label class="loginLab"账号 view class="inputView" imag

提供一个登录页的案例，供同学们使用

项目效果图：

目录结构：

图片资源：

name.png

key.png

loginLog.jpg

<view class="inputView">
<image class="keyImage" src="../images/key.png">
<label class="loginLab">密码

<view class="loginBtnView">
<button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录

.container {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
background-color: #f2f2f2
}

/登录图片/
.login-icon{
flex: none;
}
.login-img{
width: 750rpx;
}

/表单内容/
.login-from {
margin-top: 20px;
flex: auto;
height:100%;
}

.inputView {
background-color: #fff;
line-height: 44px;
}
/输入框/
.nameImage,.keyImage {
margin-left: 22px;
width: 14px;
height: 14px
}

.loginLab {
margin: 15px 15px 15px 10px;
color: #545454;
font-size: 14px
}
.inputText {
flex: block;
float: right;
text-align: right;
margin-right: 22px;
margin-top: 11px;
color: #cccccc;
font-size: 14px
}

.line {
width: 100%;
height: 1px;
background-color: #cccccc;
margin-top: 1px;
}
/按钮/
.loginBtnView {
width: 100%;
height: auto;
background-color: #f2f2f2;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
}

.loginBtn {
width: 80%;
margin-top: 35px;
}

运行结果

：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!