一、示例

二、示例代码

1.wxml

<!--pages/login.wxml-->
<!-- 登录注册文字 -->
<view class="title">{{TitleText}}</view>
<!-- 登录框 -->
<view class="inputBox">
    <input type="text" placeholder="请输入用户名" data-id="user" bindinput="getinput" value="{{userValue}}" placeholder-style="color:#ccc8c8"/>
</view>
<view class="inputBox">
    <input type="text" placeholder="请输入密码" data-id="password" bindinput="getinput" value="{{passwordValue}}" placeholder-style="color:#ccc8c8"/>
</view>
<!-- 登录注册按钮 共用 -->
<view class="btn">
    <van-button type="primary" round block color="#40ae36" disabled="{{btnState}}" bind:tap="login">{{btnText}}</van-button>
</view>

<!-- 新用户去注册 -->
<view class="toRegister" bind:tap="changes">
    <view class="btntTip">{{Totext}}</view>
    <van-icon name="arrow" size="16rpx" />
</view>
<!-- 其他登录方式 -->
<view class="bottom" wx:if="{{TitleText=='登录'}}">
    <view class="tip">其他登录方式</view>
    <image src="/images/帮助.png" mode="" />
</view>

2.scss代码 部分

.title{
  margin: 100rpx 0 54rpx 54rpx;
  font-size: 48rpx;
  font-weight: 400;
  color: #262424;
}
.inputBox{
  border-bottom: 1rpx solid #f0f0f0;
  margin: 0 60rpx;
}
input{
  height: 110rpx;
}
.btn{
  margin: 50rpx 60rpx 0;
}
.toRegister{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
}