微信小程序|登录界面的框架搭建

<view class="container">
<text>欢迎来到一日三餐</text>
 
<input type="number" bindblur="getPhone" placeholder="请输入手机号" class="phone_number"></input>
<view class="code">
<input type="number" bindblur="getCode" placeholder="请输入验证码" class="code_number"></input>
<button class="btn_code">获取验证码</button>
</view>
<view>
<button bindtap="login" class="btn_login">登录</button>
</view>
 
</view>

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30rpx;
}
text{
  font-size: 40rpx;
  display: flex;
  justify-content: center;
}
input{
  border: 2rpx solid #FFC125;
  height: 90rpx;
  border-radius: 12rpx;
padding-left: 16rpx;
}
.phone_number{
  margin: 16rpx 0;
}
.code{
  display: flex;
  flex-direction: row;
  margin-bottom: 16rpx;
  width: 100%;
}
.btn_code{
background-color:  #FFC125;
color: white;
font-size: 32rpx;
}
.code_number{
  flex: 1;
}
.btn_login{
  background-color: teal;
  color: white;
  font-size: 30rpx;
}