小程式開發——手機号驗證碼登入頁面

最終做出頁面效果：

login.wxml

<view class="main_candidate">
	
	<view class="inputbox flex">
		<text class="input-label">手機号</text>
		<input name="name" placeholder="請輸入手機号" bindinput="inputName" class="primary"/>
	</view>
	<view class="inputbox flex">
		<text class="input-label">驗證碼</text>
		<input name="code" placeholder="請輸入驗證碼"  class="primary"/>
		<button class="getCode" bindtap="sendVerifyCode">發送驗證碼</button>
	</view>
	<button class="login" form-type="submit">立即登入</button>
	<view class="register">
			<text bindtap="register">沒有賬号？去注冊</text>
	</view>
	
</view>
           

login.wxss

.input-label {
  color: #888;
  font-size: 12pt;
  height: 25rpx;
  line-height: 25rpx;
  padding: 0 25rpx;
  border-right: 1px solid #d8d8d8; 
}
.main_candidate{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  margin-top: 30px;
}
.inputbox{
  padding-left: 6px;
  box-sizing: border-box;
  border-bottom: 1px solid #dadada;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  background-color: #fff;
}
.flex{
  border-radius: 5px;
  border: 2px solid #f4f4f4;
  display: flex;
  align-items: center;
  margin: 40rpx 0;
}
.primary{
  flex:1;
}
.inputbox button{
  width: 110px; 
  height: 38px;
  color:#fff;
  background-color: #5dd5c8;
  font-size: 16px; 
}
.login{
  margin-top: 20px;
  background-color: #5dd5c8;
  color: #fff;
  font-size: 20px;
}
.register{
  color: blue;
  font-size: 16px;
  margin: 0 auto;
  width: 40%;
  margin-top: 10px;
}