Browse Source

商户用户登录页面内容的添加及布局调整优化

master
W夏日 2 years ago
parent
commit
2fb5f0ed88
  1. 19
      pages/merchant-login/merchant-login.wxml
  2. 86
      pages/merchant-login/merchant-login.wxss

19
pages/merchant-login/merchant-login.wxml

@ -1,2 +1,21 @@
<view class="page-bg"> <view class="page-bg">
<view class="login-copy-content">
<image class="login-copy-style" mode="aspectFill" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/login-copy.png"></image>
</view>
<view class="input-mobile-phone">
<input class="phone-input" bindinput= "" name="phone" placeholder="请输入手机号" value="" />
</view>
<view class="input-validation">
<input class="mobile-verification" bindinput= "" name="phone" placeholder="请输入短信验证码" value="" />
<button class="verification-button">获取验证码</button>
</view>
<button class="login-button">登 录</button>
<view class="consent-agreement">
<view class="radio-style" bindtap='checkedTap'>
<radio checked="{{checked1}}"></radio>
</view>
<span class="agree-style">我同意</span>
<span class="orangeColor" catchtap="readFile" data-url="" data-txt="使用条款">《排队支付用户服务协议》</span>
<span class="orangeColor" catchtap="readFile" data-url="" data-txt="隐私政策">《隐私保护协议》</span>
</view>
</view> </view>

86
pages/merchant-login/merchant-login.wxss

@ -1,4 +1,88 @@
page{ page{
background: #f7f7f7;
background: #fff;
}
.page-bg{
width: 750rpx;
height: 1492rpx;
background: url("https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/Login-bg.png") no-repeat center center;
background-size:cover;
padding: 0 30rpx;
}
image.login-copy-style{
width: 364rpx;
height: 200rpx;
background-size:cover;
margin: 90rpx 0;
}
.input-mobile-phone{
display: flex;
justify-content: left;
align-items: center;
width: 690rpx;
height: 88rpx;
background: #fff;
border-radius: 100rpx;
padding: 0 40rpx;
margin-bottom: 40rpx;
}
input.phone-input{
width: 690rpx;
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #999;
}
.input-validation{
display: flex;
justify-content: space-between;
align-items: center;
width: 690rpx;
height: 88rpx;
background: #fff;
border-radius: 100rpx;
padding: 0 40rpx;
margin-bottom: 40rpx;
}
input.mobile-verification{
width: 400rpx;
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #999;
}
button.verification-button{
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #454545;
background: none;
border-radius: 100rpx;
border: 1rpx solid #fff;
margin: 0;
}
button{
border: none;
}
button.login-button{
width: 690rpx;
height: 88rpx;
line-height: 88rpx;
font-family: "Microsoft YaHei";
font-size: 30rpx;
color: #fff;
font-weight: bold;
background: #F52F3E;
border-radius: 100rpx;
margin-top: 90rpx;
border: none;
}
.consent-agreement{
display: flex;
justify-content: center;
align-items: center;
margin-top: 36rpx;
}
.agree-style{
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #999;
margin-left: 10rpx;
} }
Loading…
Cancel
Save