微信小程序简单登陆页面

Question

问题遇到的现象和发生背景

小程序登陆页面

用代码块功能插入代码，请勿粘贴截图

我想要达到的结果

效果如图，不需要跳转页面，只用这一页

Answer 1

wxml文件

<view class="content">
  <view class="input-box">
    <text>用户名：</text>
    <input type="text" />
  </view>
  <view class="input-box">
    <text>密码：</text>
    <input type="password" />
  </view>
  <view class="button">登录</view>
</view>

wxss文件

.content{
  padding: 20rpx;
  width: 70%;
  margin: auto;
}
.input-box{
  display: flex;
  margin-bottom: 10rpx;
}
.input-box text{
  flex: 1;
  text-align: right;
}
.input-box input{
  flex: 3;
}
input{
  border: 1px solid #000000;
}
.button{
  border: 1px solid #000000;
  color: #000000;
  text-align: center;
  padding: 10rpx;
}

最终效果