| | |
| | | <div class="logins_content"> |
| | | <div class="login_forms"> |
| | | <div class="top_forms"> |
| | | <el-input :placeholder="placeholder" size="medium" v-model="phone" maxlength="10" clearable |
| | | @input="handleInput()"> |
| | | <template slot="prepend">+91</template> |
| | | <div class="forms_title">{{ placeholder }}</div> |
| | | <el-input |
| | | :placeholder="$t('请输入')" |
| | | :size="medium" |
| | | v-model="phone" |
| | | clearable |
| | | @input="handleInput()" |
| | | > |
| | | </el-input> |
| | | |
| | | <el-input style="margin-top: 0.46rem" show-password :placeholder="$t('hj19')" size="medium" |
| | | v-model="userPassword" @input="handleInput()"> |
| | | <div class="forms_title">{{ $t("Password") }}</div> |
| | | <el-input |
| | | :placeholder="$t('hj19')" |
| | | :size="medium" |
| | | v-model="userPassword" |
| | | clearable |
| | | @input="handleInput()" |
| | | > |
| | | </el-input> |
| | | <el-input style="margin-top: 0.46rem" show-password :placeholder="$t('hj20')" size="medium" |
| | | v-model="rePassword" @input="handleInput()"> |
| | | |
| | | <div class="forms_title">{{ $t("hj20") }}</div> |
| | | <el-input |
| | | :placeholder="$t('请输入')" |
| | | :size="medium" |
| | | v-model="rePassword" |
| | | clearable |
| | | @input="handleInput()" |
| | | > |
| | | </el-input> |
| | | <el-input style="margin-top: 0.46rem" :placeholder="$t('hj21')" size="medium" v-model="userName" clearable |
| | | @input="handleInput()"> |
| | | |
| | | <div class="forms_title">{{ $t("hj21") }}</div> |
| | | <el-input |
| | | :placeholder="$t('请输入')" |
| | | :size="medium" |
| | | v-model="userName" |
| | | clearable |
| | | @input="handleInput()" |
| | | > |
| | | </el-input> |
| | | </div> |
| | | <div class="radio-con" style="display: flex; align-items: center; font-size: 14px"> |
| | | <van-checkbox v-model="checked">{{ |
| | | $t("我已閱讀並同意") |
| | | }}</van-checkbox> |
| | | <span @click="gotoxy" style="color: #c4d600">{{ |
| | | $t("《用戶服務協議》") |
| | | }}</span> |
| | | <div |
| | | class="radio-con" |
| | | style="display: flex; align-items: center; font-size: 14px" |
| | | > |
| | | <van-checkbox v-model="checked" @change="handleInput()"> |
| | | {{ $t("我已閱讀並同意") }} |
| | | </van-checkbox> |
| | | <span @click="gotoxy" style="color: #0e7ddd"> |
| | | {{ $t("《用戶服務協議》") }} |
| | | </span> |
| | | </div> |
| | | <div class="bottom_btns" :class="btnClass ? 'on' : 'off'"> |
| | | <van-button type="info" :disabled="!btnClass" class="butn" @click="gook">{{ $t("立即注册") }}</van-button> |
| | | <van-button |
| | | type="info" |
| | | :disabled="!btnClass" |
| | | class="butn" |
| | | @click="gook" |
| | | >{{ $t("立即注册") }}</van-button |
| | | > |
| | | |
| | | <van-button type="info" class="butn_2" plain @click="$router.push('/login')"> |
| | | <!-- <van-button |
| | | type="info" |
| | | class="butn_2" |
| | | plain |
| | | @click="$router.push('/login')" |
| | | > |
| | | {{ $t("已有賬號?") + $t("馬上登錄") }} |
| | | </van-button> |
| | | |
| | | <!-- <div class="register" @click="$router.push('/login')"> |
| | | {{ $t("已有賬號?") |
| | | }}<span style="color: #c4d600">{{ $t("馬上登錄") }}</span> |
| | | </div> --> |
| | | </van-button> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | code: "", |
| | | userPassword: "", |
| | | btnClass: false, |
| | | rePassword: "" |
| | | rePassword: "", |
| | | medium: "medium", |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | this.userPassword !== "" && |
| | | this.phone !== "" && |
| | | this.userPassword == this.rePassword && |
| | | this.userName != "" |
| | | this.userName != "" && |
| | | this.checked |
| | | ) { |
| | | this.btnClass = true; |
| | | } else { |
| | | this.btnClass = false; |
| | | } |
| | | }, |
| | | |
| | | async gook() { |
| | | if (this.phone.length == 0) { |
| | | Notify({ type: "warning", message: this.$t("hj28") }); |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | @green: #c4d600; |
| | | @green: #0e7ddd; |
| | | @Black1: #13161e; |
| | | |
| | | .register { |
| | | font-style: normal; |
| | |
| | | font-weight: 500; |
| | | font-size: 0.48rem; |
| | | line-height: 0.66667rem; |
| | | color: #14181f; |
| | | margin-left: 0.53333rem; |
| | | padding: 0.6rem 0.6rem 0; |
| | | } |
| | | |
| | | .login_page { |
| | |
| | | flex: 1; |
| | | width: 100%; |
| | | height: 9.7436rem; |
| | | margin-top: 0.4359rem; |
| | | background: #fff; |
| | | padding: 0.4rem 0.6rem 0; |
| | | border-top-left-radius: 0.26667rem; |
| | | border-top-right-radius: 0.26667rem; |
| | | |
| | |
| | | width: 100%; |
| | | height: 2.0513rem; |
| | | display: flex; |
| | | |
| | | padding: 0.6rem 0.6rem 0; |
| | | align-items: center; |
| | | font-size: 0.7023rem; |
| | | color: #000; |
| | | font-weight: 600 !important; |
| | | |
| | | >span { |
| | | > span { |
| | | font-weight: 600 !important; |
| | | } |
| | | } |
| | |
| | | |
| | | border-top-left-radius: 0.26667rem; |
| | | border-top-right-radius: 0.26667rem; |
| | | padding: 0.34667rem 0.4rem; |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | |
| | | .forms_title { |
| | | font-size: 0.3rem; |
| | | margin-top: 0.5rem; |
| | | margin-bottom: 0.2rem; |
| | | font-weight: 300; |
| | | opacity: 0.7; |
| | | } |
| | | |
| | | .user_name, |
| | | .password { |
| | | width: 100%; |
| | |
| | | // background: #1e1e1e; |
| | | border-radius: 0.3564rem; |
| | | |
| | | >input { |
| | | > input { |
| | | width: 100%; |
| | | height: 100%; |
| | | padding-left: 0.3564rem; |
| | |
| | | /deep/.el-input__inner { |
| | | width: 100%; |
| | | height: 70px; |
| | | background-color: rgb(246, 246, 247) !important; |
| | | // background: #1e1e1e; |
| | | // border-radius: 8px; |
| | | font-size: 0.45rem !important; |
| | | border: none; |
| | | background-color: @Black1 !important; |
| | | font-size: 0.3rem !important; |
| | | border: @Black1 solid 1px; |
| | | color: #fff; |
| | | border-bottom: rgba(#fff, 0.7) solid 1px; |
| | | } |
| | | |
| | | .bottom_btns { |
| | |
| | | border-radius: 8px; |
| | | color: @green; |
| | | border-color: @green; |
| | | margin-top: .4rem; |
| | | margin-top: 0.4rem; |
| | | } |
| | | |
| | | .mes { |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | >span { |
| | | > span { |
| | | font-size: 0.3046rem; |
| | | color: #000; |
| | | background-color: #fff; |
| | |
| | | width: 3rem; |
| | | height: 3.5769rem; |
| | | |
| | | >img { |
| | | > img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |