微信小程序登陆界面login.wxml :
view class='container '
view class='login-icon '
imageclass=' log in-img ' src=' ./images/logi nlog.jpg '/image
/view
view class='login-from '！ -帐户-
view class='inputView '
imageclass=' name image ' src=' ./images/name.png '/image
label class='loginLab '帐户/label
input class=' input text ' placeholder='请输入帐户'
bindinput='phoneInput' /
/view
view class='line'/view！ -密码-
view class='inputView '
imageclass=' key image ' src=' ./images/key.png '/image
label class='loginLab '密码/label
请输入input class=' input text ' password=' true ' placeholder='密集
代码' bindinput='passwordInput' /
/view！ -按钮-
view class='loginBtnView '
button class=' log in BTN ' type=' primary ' size=' { primary size } }
loading={ { loading } } ' plain={ { plain } } ' disabled={ { disabled } }
bindtap='login '登录/button
/view
/view
/viewlogin.wxss :
page{
height: 100%；
} .container {
height: 100%；
显示： Flex；
flex-direction: column； padding: 0；
盒尺寸： border-box；
背景色： # f2f2f 2
()注册图bbdbwb/
. login-icon{
flex: none；
}
. login-img{
width: 750rpx；
()表单中平静的饼干/
. login-from {
margin-top: 20px；
flex :自动；
height:100%；
} .inputView {
背景色： # fff；
line-height: 44px；
}
cxdcjl/
. nameImage， keyImage {
玛姬- left : 22px；
width: 14px；
height: 14px
} .loginLab {
margin: 15px 15px 15px 10px；
color: #545454；
font-size: 14px
}
. inputText {
flex :区块；
浮点：轻型；
文本对齐： right；
margin-right: 22px；
margin-top: 11px；
color: #cccccc；
font-size: 14px } .line {
width: 100%；
height: 1px；
背景色： # cccccc；
margin-top: 1px；
}
axdsg/
. loginBtnView {
width: 100%；
height :自动；
背景色： # f2f2f 2；
margin-top: 0px；
玛姬- bottom : 0px；
padding-bottom: 0px；
} .loginBtn {
width: 80%；
margin-top: 35px；
}login.js :
page({ ()
数据： {
phone: '，
password: ' '
、//获取输入帐户
phone input :功能(e ) {
this.setData({ (
phone:e.detail.value
() )
、//获取输入密码
密码输入：功能(e ) {
this.setData({ (
password:e.detail.value
()、
//登录
login: function () {
if (this.data.phone.length==0||this.data.password.length==
0 ) {
wx.showToast({ (
title: '用户名和密码不能为空'，
icon: 'loading '，
duration: 2000
() )
}else {
//此处修改为跳转页面
wx.showToast({ (
title:“登录成功”、
icon: 'success '，
duration: 2000
() )
}
}
() )
只有这个登录页面，剩下的页面可以点击我的主页下载
key.png
loginLog.jpg
name.png