微信小程序 账号密码 和 手机号 验证码 登录

账号密码页面

<!--pages/login/login.wxml-->
<view class="container">
<view class="login-from">
  <form method="post" catchsubmit="formSubmit">
    <!--账号-->
    <view class="inputView">
      <label class="loginLab">账号</label>
      <input class="inputText" name="username" value="admin" placeholder="请输入账号"  />
    </view>
    <view class="line"></view>
    <!--密码-->
    <view class="inputView">
      <label class="loginLab">密码</label>
      <input class="inputText" password="true" name="password" value="admin" placeholder="请输入密码"  />
    </view>
    <!--按钮-->
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" size="{
    {primarySize}}" loading="{
    {loading}}" plain="{
    {plain}}"
        disabled="{
    {disabled}}"  form-type="submit">登录</button>
    </view>
  </form>
</view>
</view>

/* pages/login/login.wxss */
page{
    
  height: 100%; 
 } 
 .container {
    
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  padding: 0; 
  box-sizing: border-box; 
  /* background-color: rgb(156, 23, 78) */
 } 
 /*登录图片*/
 .login-icon{
    
  flex: none; 
 } 
 .login-img{
    
  width: 750rpx;
  height: 400rpx;
 } 
 /*表单内容*/
 .login-from {
    
  margin-top: 20px; 
  flex: auto; 
  height:100%; 
 } 
 .inputView {
    
  /* background-color: #fff;  */
  line-height: 45px; 
  border-radius:20px;
   border:1px solid #999999;
 } 
 /*输入框*/
 .nameImage, .keyImage {
    
  margin-left: 22px; 
  width: 18px; 
  height: 16px
 } 
 .loginLab {
    
  margin: 15px 15px 15px 10px; 
  color: #545454; 
  font-size: 14px
 } 
 .inputText {
    
  flex: block; 
  float: right; 
  text-align: right; 
  margin-right: 22px; 
  margin-top: 11px;
  color: #cccccc; 
  font-size: 14px
 } 
 .line {
    
  margin-top: 8px; 
 } 
 /* .line { 
  width: 100%; 
  height: 1px; 
  background-color: #cccccc; 
  margin-top: 1px; 
 }  */
  
 /*按钮*/
 .loginBtnView {
    
  width: 100%; 
  height: auto; 
  /* background-color:#DCDCDC;  */