<view class="container">  
  <view class="login-icon">  
    <image class="login-img" src="../images/loginLog.jpg"></image>  
  </view>  
  <view class="login-from">  
  
    <!--賬號-->  
    <view class="inputView">  
      <image class="nameImage" src="../images/name.png"></image>  
      <label class="loginLab">賬號</label>  
      <input class="inputText" placeholder="請輸入賬號" bindinput="phoneInput" />  
    </view>  
    <view class="line"></view>  
  
    <!--密碼-->  
    <view class="inputView">  
      <image class="keyImage" src="../images/key.png"></image>  
      <label class="loginLab">密碼</label>  
      <input class="inputText" password="true" placeholder="請輸入密碼" bindinput="passwordInput" />  
    </view>  
  
    <!--按鈕-->  
    <view class="loginBtnView">  
      <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登入</button>  
    </view>  
  </view>  
</view>  
 

樣式程式碼：

page{  
  height: 100%;  
}  
  
.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;  
}  
 

js程式碼：

Page({  
  data: {  
    phone: '',  
    password:''  
  },  
  
// 獲取輸入賬號  
  phoneInput :function (e) {  
    this.setData({  
      phone:e.detail.value  
    })  
  },  
  
// 獲取輸入密碼  
  passwordInput :function (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    
      })    
    }    
  }  
})