小程序开发-好看的登录样式
在学习小程序的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
});
}
},
最终效果如下: