小程序開發-好看的登錄樣式

在學習小程序的demo中看到一個挺漂亮的登錄頁面樣式

先保存下來，后面有需要的時候用...

主要代碼

login.wxml:

<form class="login-form">
  <view class="input-group {{userid_focus ? 'active' : ''}}">
    <text class="input-label">帳號</text>
    <input type="number" cursor-spacing="30" id="userid" maxlength="7" placeholder="請輸入賬號名" bindinput="useridInput" bindfocus="inputFocus" bindblur="inputBlur" />
  </view>
  <view class="input-group {{passwd_focus ? 'active' : ''}}">
    <text class="input-label">密碼</text>
    <input password="true" cursor-spacing="30" id="passwd" placeholder="初始密碼為身份證后6位" bindinput="passwdInput" bindfocus="inputFocus" bindblur="inputBlur" />
  </view>
</form>

login.wxss:

.login-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.input-group {
  display: flex;
  align-items: center;
  padding: 25rpx 10rpx;
  margin: 40rpx 3%;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #f4f4f4;
  transition: all .25s ease-in-out;
}
.input-group.active {
  border: 2px solid #7acfa6;
}
.input-label {
  color: #888;
  font-size: 13pt;
  height: 25rpx;
  line-height: 25rpx;
  padding: 0 25rpx;
  border-right: 1px solid #d8d8d8; 
}
.input-group input,
.input-group picker {
  flex: 1;
  font-size: 13pt;
  min-height: 52rpx;
  height: 52rpx;
  line-height: 52rpx;
  padding: 0 25rpx;
}

login.js處理input事件

inputFocus: function(e){
  if(e.target.id == 'userid'){
    this.setData({
      'userid_focus': true
    });
  }else if(e.target.id == 'passwd'){
    this.setData({
      'passwd_focus': true
    });
  }
},
inputBlur: function(e){
  if(e.target.id == 'userid'){
    this.setData({
      'userid_focus': false
    });
  }else if(e.target.id == 'passwd'){
    this.setData({
      'passwd_focus': false
    });
  }
},

最終效果如下：