微信小程序简单登陆页面

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

小程序登陆页面

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

我想要达到的结果

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

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;
}

最终效果

用form+input和简单的css即可达到这个效果，如果不想打开小程序跳转到其他页面再跳转到登录页面的话，可以在app.json里面的pages配置里面把登录页的路径挪到第一位