//页面部分
<template>
<view class="page">
<!--头部banner-->
<view class="banner">
<image lazy-load="true" class="item-left-img" mode="aspectFill" src="../../static/images/home-banner.png"></image>
</view>
<!--form表单-->
<view class="form-container">
<!--输入手机号-->
<view class="form-cell">
<view class="form-main">
<input v-if="!showYzm" @input="bindValue" :value="mobile" type="number" data-key="mobile" class="form-normal form-phone"
:placeholder="i18n.z664"></input>
</view>
</view>
<!--输入验证码-->
<view class="form-cell-container">
<view class="form-cell">
<view class="form-main">
<input v-if="!showYzm" :value="code" @input="bindValue" data-key="code" type="number" class=" form-normal form-code"
:placeholder="i18n.z665" maxlength="6"></input>
</view>
</view>
<view :class="'form-btn ' + (codeClickAble ? 'form-btn-active' : '')" @tap="getCode">{{counterMsg}}</view>
</view>
</view>
<!--登录-->
<ma-full-btn v-if="!submitClickAble" class="form-submit" :content="i18n.z666" types="gray"></ma-full-btn>
<!-- #ifdef MP -->
<button v-if="submitClickAble" open-type="getUserInfo" @getuserinfo="formSubmit" class="submit-btn-b">{{i18n.z666}}</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button v-if="submitClickAble" @click="formSubmit" class="submit-btn-b">{{i18n.z666}}</button>
<!-- #endif -->
<view class="tips">{{i18n.z667}}<text @tap="navigateToServiceRules" class="common-red-color">{{i18n.z668}}</text>
</view>
<view class="bottom-tips" v-if="!isReginster" @tap="toLoginPassword">
<view class="bottom-tips-center">{{i18n.z669}}</view>
</view>
<view class="bottom-tips" v-if="isReginster" @tap="toLoginRegister">
<view class="bottom-tips-center">{{i18n.z670}}</view>
</view>
</view> </template>
//css部分
.banner, .banner image{
width: 100%;
height: 310rpx;
}
/***
表单部分
*/
.form-container{
padding: 100rpx 30rpx 80rpx;
}
.form-cell-container{
display: flex;
flex-direction: row;
height:92rpx;
justify-content:center;
align-items:center;
margin-bottom: 30rpx;
border-bottom: 1rpx solid #e9e9e9;
}
.form-cell{
border-bottom: 1rpx solid #e9e9e9;
display: flex;
flex-direction: row;
height: 90rpx;
border-radius: 2rpx;
margin-bottom: 30rpx;
flex: 1;
box-sizing:border-box;
}
.form-cell-container .form-cell{
margin-bottom: 0;
border-bottom: none;
}
.form-icon{
width: 80rpx;
display: flex;
align-items: center;
justify-content: center;
}
.form-icon1 image{
width: 29rpx;
height: 44rpx;
}
.form-icon2 image{
width: 36rpx;
height: 42rpx;
}
.form-main{
flex: 1;
display: flex;
flex-direction: row;
}
.form-phone{
height: 90rpx;
}
.form-code{
height: 90rpx;
flex: 1;
}
.form-btn{
width:170rpx;
background:#eaeaea;
color:#ababab;
font-size:26rpx;
line-height:60rpx;
height:60rpx;
text-align:center;
border-radius:10rpx;
}
.form-btn-active{
background: #E73D3D;
color: #FBFBFB;
}
.tips{
font-size: 24rpx;
color: #ABABAB;
text-align: center;
line-height: 1;
margin-top: 16rpx;
}
.submit-btn-b{
margin: 0 30rpx;
background: #E73D3D;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
font-size: 36rpx;
color: #FBFBFB;
}
.bottom-tips{
height: 0;
border-bottom: 1rpx solid #dadada;
position: relative;
margin-top: 50rpx;
margin-right: 30rpx;
margin-left: 30rpx;
}
.bottom-tips-center{
width: 230rpx;
position: absolute;
left: 50%;
height: 40rpx;
line-height: 40rpx;
text-align: center;
background: #ffffff;
font-size: 24rpx;
margin-left: -115rpx;
margin-top: -20rpx;
top: 20%;
}
