| | |
| | | <template> |
| | | <div class="register"> |
| | | <div class="top" @click="$router.go(-1)"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)" alt=""> |
| | | </div> |
| | | <!-- <Step :step="1"></Step>--> |
| | | <div class="title textColor" style="margin-bottom: 0;padding-bottom: 0">{{ $t('注册') }}</div> |
| | | <div style="color: #999999;font-size: 14px;margin: 5px 0 30px 0">{{ $t('欢迎来到')}}ALOKEX</div> |
| | | <div class="register"> |
| | | <div class="top" @click="$router.go(-1)"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)" |
| | | alt=""> |
| | | </div> |
| | | <!-- <Step :step="1"></Step>--> |
| | | <div class="title textColor" style="margin-bottom: 0;padding-bottom: 0">{{ $t('注册') }}</div> |
| | | <div style="color: #999999;font-size: 14px;margin: 5px 0 30px 0">{{ $t('欢迎来到')}}ALOKEX</div> |
| | | |
| | | <div class="flex re-tab" style="border-bottom: #ccc 1px solid;"> |
| | | <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)" v-if="false">{{ $t('账号') }}</div> |
| | | <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}</div> |
| | | <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)" v-if="false">{{ $t('手机号') }}</div> |
| | | </div> |
| | | <div style="font-size: 14px"> |
| | | {{ getRegType(activeIndex, true) }} |
| | | </div> |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="getRegType(activeIndex, false)" |
| | | v-model.trim="username" |
| | | :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon"/> |
| | | <div class="flex re-tab" style="border-bottom: #ccc 1px solid;"> |
| | | <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)" v-if="false"> |
| | | {{ $t('账号') }}</div> |
| | | <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }} |
| | | </div> |
| | | <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)" v-if="false"> |
| | | {{ $t('手机号') }}</div> |
| | | </div> |
| | | <div style="font-size: 14px"> |
| | | {{ getRegType(activeIndex, true) }} |
| | | </div> |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" |
| | | :placeholderText="getRegType(activeIndex, false)" v-model.trim="username" :area="isArea" |
| | | :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" /> |
| | | |
| | | <div style="font-size: 14px"> |
| | | {{ $t('设置密码') }} |
| | | </div> |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="$t('密码(6-12个字符)')" v-model="password" typeText="password"/> |
| | | <div style="font-size: 14px"> |
| | | {{ $t('确认密码') }} |
| | | </div> |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="$t('请确认密码')" v-model="repassword" typeText="password"/> |
| | | <div style="font-size: 14px"> |
| | | <div style="font-size: 14px"> |
| | | {{ $t('设置密码') }} |
| | | </div> |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" |
| | | :placeholderText="$t('密码(6-12个字符)')" v-model="password" typeText="password" /> |
| | | <div style="font-size: 14px"> |
| | | {{ $t('确认密码') }} |
| | | </div> |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" |
| | | :placeholderText="$t('密码(6-12个字符)')" v-model="repassword" typeText="password" /> |
| | | |
| | | <div style="font-size: 14px"> |
| | | {{ $t('资金密码') }} |
| | | </div> |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" |
| | | :placeholderText="$t('请输入密码')" v-model="safeword" typeText="password" /> |
| | | <div style="font-size: 14px"> |
| | | {{ $t('确认资金密码') }} |
| | | </div> |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" |
| | | :placeholderText="$t('请确认密码')" v-model="re_safeword" typeText="password" /> |
| | | <!-- 邮箱验证码 --> |
| | | <div style="display: flex; align-items: center; margin-top: 20px;"> |
| | | <ExInput |
| | | style="border: #bbb 1px solid; border-radius: 3px; padding: 0; padding-bottom: 10px; margin-right: 10px;width: 253px;" |
| | | :placeholderText="$t('请输入邮箱验证码')" v-model="emailVerificationCode" typeText="text" /> |
| | | <div style="background-color: #007BFF; color: white; border-radius: 3px; padding: 6px 12px; font-size: 14px;" |
| | | @click="sendVerificationCode"> |
| | | {{ time==0? $t('获取验证码'):time }} |
| | | </div> |
| | | </div> |
| | | <!-- <div style="font-size: 14px"> |
| | | {{ $t('邀请码(选填)') }} |
| | | </div> |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="$t('请输入邀请码')" v-model="invitCode" :clearBtn="false"/> |
| | | <div class="protocol textColor"> |
| | | <i @click="agreeProt"> |
| | | <img v-show="agree" src="../../assets/image/login/prot2.png" alt=""/> |
| | | <img v-show="!agree" src="../../assets/image/login/prot1.png" alt=""/> |
| | | </i> |
| | | {{ $t('我已阅读并同意') }}<span class="colorMain" @click="$router.push('/TermsOfService?serviceTerm=1')">{{ |
| | | <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="$t('请输入邀请码')" v-model="invitCode" :clearBtn="false"/> --> |
| | | <div class="protocol textColor" style="margin-top: 20px;"> |
| | | <i @click="agreeProt"> |
| | | <img v-show="agree" src="../../assets/image/login/prot2.png" alt="" /> |
| | | <img v-show="!agree" src="../../assets/image/login/prot1.png" alt="" /> |
| | | </i> |
| | | {{ $t('我已阅读并同意') }}<span class="colorMain" @click="$router.push('/TermsOfService?serviceTerm=1')">{{ |
| | | $t('服务条款') |
| | | }}</span> |
| | | </div> |
| | | <div class="btn btnMain" @click="register">{{ $t('注册') }}</div> |
| | | <div class="noTips textColor">{{ $t('已有账号') }}<span class="colorMain" @click="$router.push('/login')"> |
| | | {{ $t('去登录') }}</span> |
| | | </div> |
| | | <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list> |
| | | </div> |
| | | <div class="btn btnMain" @click="register">{{ $t('注册') }}</div> |
| | | <div class="noTips textColor">{{ $t('已有账号') }}<span class="colorMain" @click="$router.push('/login')"> |
| | | {{ $t('去登录') }}</span> |
| | | </div> |
| | | <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list> |
| | | |
| | | <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail" |
| | | @close="show = false;" sliderText='' :successText="$t('验证通过!')" :failText="$t('验证失败,请重试')"/> |
| | | <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail" |
| | | @close="show = false;" sliderText='' :successText="$t('验证通过!')" :failText="$t('验证失败,请重试')" /> |
| | | |
| | | <div>{{ msg }}</div> |
| | | </div> |
| | | <div>{{ msg }}</div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import {Popup} from "vant"; |
| | | import ExInput from "@/components/ex-input"; |
| | | import Step from "./step.vue"; |
| | | import Axios from "@/API/login.js"; |
| | | import {mapActions, mapGetters} from 'vuex'; |
| | | import {GET_USERINFO} from '@/store/const.store'; |
| | | import nationalityList from '../authentication/components/nationalityList.vue' |
| | | import Vcode from "vue-puzzle-vcode"; |
| | | import img1 from "../../assets/image/slider/1.png"; |
| | | import img2 from "../../assets/image/slider/2.png"; |
| | | import {getStorage} from '@/utils/utis' |
| | | import { |
| | | Popup |
| | | } from "vant"; |
| | | import ExInput from "@/components/ex-input"; |
| | | import Step from "./step.vue"; |
| | | import Axios from "@/API/login.js"; |
| | | import { |
| | | mapActions, |
| | | mapGetters |
| | | } from 'vuex'; |
| | | import { |
| | | GET_USERINFO |
| | | } from '@/store/const.store'; |
| | | import nationalityList from '../authentication/components/nationalityList.vue' |
| | | import Vcode from "vue-puzzle-vcode"; |
| | | import img1 from "../../assets/image/slider/1.png"; |
| | | import img2 from "../../assets/image/slider/2.png"; |
| | | import { |
| | | getStorage |
| | | } from '@/utils/utis' |
| | | |
| | | export default { |
| | | props: {}, |
| | | components: { |
| | | [Popup.name]: Popup, |
| | | ExInput, |
| | | Step, |
| | | nationalityList, |
| | | Vcode |
| | | }, |
| | | data() { |
| | | return { |
| | | show: false, |
| | | msg: '', |
| | | type: 3,// 1手机 2 邮箱 3账号 |
| | | agree: false, |
| | | username: '', |
| | | password: "", |
| | | repassword: '', |
| | | invitCode: '',//邀请码 |
| | | activeIndex: 1, |
| | | typeText: "password", |
| | | isArea: false, |
| | | dialCode: 0, //电话号前缀 |
| | | icon: '', |
| | | img1, |
| | | img2, |
| | | } |
| | | }, |
| | | mounted() { |
| | | let usercode = getStorage('usercode') |
| | | if (usercode) { |
| | | this.invitCode = usercode; |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapGetters({ |
| | | theme: 'home/theme' |
| | | }), |
| | | }, |
| | | methods: { |
| | | ...mapActions('user', [GET_USERINFO]), |
| | | getRegType(activeIndex, bFlag) { |
| | | switch (activeIndex) { |
| | | case 0: |
| | | return bFlag ? this.$t('账号') : this.$t('请输入账号'); |
| | | case 1: |
| | | return bFlag ? this.$t('邮箱') : this.$t('请输入邮箱'); |
| | | case 2: |
| | | return bFlag ? this.$t('手机号') : this.$t('请输入手机号'); |
| | | } |
| | | }, |
| | | onClose() { |
| | | console.log('onClose') |
| | | }, |
| | | onSuccess() { |
| | | console.log('onSuccess') |
| | | this.registerApi(); |
| | | this.show = false; |
| | | }, |
| | | onFail() { |
| | | this.msg = '' |
| | | }, |
| | | onRefresh() { |
| | | this.msg = '' |
| | | }, |
| | | onSelectArea() { |
| | | this.openBtn(); |
| | | }, |
| | | //打开国家列表底部弹窗 |
| | | openBtn() { |
| | | this.$refs.controlChild.open(); |
| | | }, |
| | | //获取到当前选中国家的code值 |
| | | getName(params) { |
| | | this.icon = params[1]; |
| | | this.dialCode = params[2]; |
| | | }, |
| | | agreeProt() { |
| | | this.agree = !this.agree |
| | | }, |
| | | register() { |
| | | // if (this.activeIndex == 0){ |
| | | // let match = this.username.search(/@/); |
| | | // if (this.username == '' || match == -1) { |
| | | // this.$toast(this.$t('请输入正确的邮箱地址')); |
| | | // return |
| | | // } |
| | | // }else{ |
| | | // if (this.username == '' ) { |
| | | // this.$toast(this.$t('请输入手机号')); |
| | | // return |
| | | // } |
| | | // } |
| | | switch (this.activeIndex) { |
| | | case 0: { |
| | | if (this.username == '') { |
| | | this.$toast(this.$t('请输入账号')); |
| | | return; |
| | | } |
| | | if (this.username.length < 6 || this.username.length > 30) { |
| | | this.$toast(this.$t('账号长度必须6-30位')); |
| | | return; |
| | | } |
| | | break; |
| | | } |
| | | case 1: { |
| | | let match = this.username.search(/@/); |
| | | if (this.username == '' || match == -1) { |
| | | this.$toast(this.$t('请输入正确的邮箱地址')); |
| | | return; |
| | | } |
| | | break; |
| | | } |
| | | case 2: { |
| | | if (this.username == '') { |
| | | this.$toast(this.$t('请输入手机号')); |
| | | return; |
| | | } |
| | | break; |
| | | } |
| | | } |
| | | if (this.password == '') { |
| | | this.$toast(this.$t('请输入密码')); |
| | | return |
| | | } |
| | | if (this.invitCode == '') { |
| | | this.$toast(this.$t('请输入邀请码')); |
| | | return |
| | | } |
| | | if (this.password.length < 6) { |
| | | this.$toast(this.$t('密码(6-12个字符)')); |
| | | return |
| | | } |
| | | if (this.repassword !== this.password) { |
| | | this.$toast(this.$t('密码不一致')); |
| | | return |
| | | } |
| | | if (!this.agree) { |
| | | this.$toast(this.$t('请同意服务条款')); |
| | | return |
| | | } |
| | | this.show = true |
| | | }, |
| | | changeIndex(index) { |
| | | this.activeIndex = index; |
| | | switch (index) { |
| | | case 0: |
| | | case 1: { |
| | | this.isArea = false; |
| | | break; |
| | | } |
| | | case 2: { |
| | | this.isArea = true; |
| | | break; |
| | | } |
| | | } |
| | | }, |
| | | registerApi() { |
| | | switch (this.activeIndex) { |
| | | case 0: { |
| | | this.type = 3; |
| | | break; |
| | | } |
| | | case 1: { |
| | | this.type = 2; |
| | | break; |
| | | } |
| | | case 2: { |
| | | this.type = 1; |
| | | break; |
| | | } |
| | | } |
| | | Axios.registerUser({ |
| | | username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username : `${this.dialCode}${this.username}`, |
| | | password: this.password, |
| | | re_password: this.repassword, |
| | | type: this.type, |
| | | usercode: this.invitCode, |
| | | }).then((res) => { |
| | | this.$toast(this.$t('注册成功')); |
| | | setTimeout(()=>{ |
| | | this.$router.push('/login') |
| | | },1500) |
| | | return; |
| | | // this.GET_USERINFO(res.data) |
| | | // if (this.activeIndex == 0) { |
| | | // this.$router.push('/setFond') |
| | | // } else { |
| | | // this.$router.push({name: 'verify', |
| | | // query: { |
| | | // type: this.activeIndex, |
| | | // account: this.activeIndex == 1 ? this.username : `${this.dialCode}${this.username}` |
| | | // } |
| | | // }) |
| | | // } |
| | | }).catch((error) => { |
| | | if (error.code === 'ECONNABORTED') { |
| | | this.$toast(this.$t('网络超时!')); |
| | | } else if (error.msg !== undefined) { |
| | | this.$toast(this.$t(error.msg)); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | export default { |
| | | props: {}, |
| | | components: { |
| | | [Popup.name]: Popup, |
| | | ExInput, |
| | | Step, |
| | | nationalityList, |
| | | Vcode |
| | | }, |
| | | data() { |
| | | return { |
| | | show: false, |
| | | msg: '', |
| | | type: 3, // 1手机 2 邮箱 3账号 |
| | | agree: false, |
| | | username: '', |
| | | password: "", |
| | | repassword: '', |
| | | invitCode: '', //邀请码 |
| | | re_safeword: '', |
| | | safeword: '', |
| | | activeIndex: 1, |
| | | typeText: "password", |
| | | isArea: false, |
| | | dialCode: 0, //电话号前缀 |
| | | emailVerificationCode: '', //邮箱验证码 |
| | | icon: '', |
| | | time: 0, |
| | | img1, |
| | | img2, |
| | | } |
| | | }, |
| | | mounted() { |
| | | let usercode = getStorage('usercode') |
| | | if (usercode) { |
| | | this.invitCode = usercode; |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapGetters({ |
| | | theme: 'home/theme' |
| | | }), |
| | | }, |
| | | methods: { |
| | | ...mapActions('user', [GET_USERINFO]), |
| | | sendVerificationCode() { |
| | | |
| | | Axios.sendVerifyCode({ |
| | | target: this.username, |
| | | }).then((res) => { |
| | | this.time = 30; |
| | | this.timer = setInterval(() => { |
| | | if (this.time > 0) { |
| | | this.time = this.time - 1 |
| | | } else { |
| | | this.time = 0; |
| | | clearInterval(this.timer) |
| | | } |
| | | }, 1000); |
| | | }).catch((error) => { |
| | | if (error.code === 'ECONNABORTED') { |
| | | this.$toast(this.$t('网络超时!')); |
| | | } else if (error.msg !== undefined) { |
| | | this.$toast(this.$t(error.msg)); |
| | | } |
| | | }); |
| | | }, |
| | | getRegType(activeIndex, bFlag) { |
| | | switch (activeIndex) { |
| | | case 0: |
| | | return bFlag ? this.$t('账号') : this.$t('请输入账号'); |
| | | case 1: |
| | | return bFlag ? this.$t('邮箱') : this.$t('请输入邮箱'); |
| | | case 2: |
| | | return bFlag ? this.$t('手机号') : this.$t('请输入手机号'); |
| | | } |
| | | }, |
| | | onClose() { |
| | | console.log('onClose') |
| | | }, |
| | | onSuccess() { |
| | | console.log('onSuccess') |
| | | // this.save_email() |
| | | this.registerApi(); |
| | | |
| | | this.show = false; |
| | | }, |
| | | onFail() { |
| | | this.msg = '' |
| | | }, |
| | | onRefresh() { |
| | | this.msg = '' |
| | | }, |
| | | onSelectArea() { |
| | | this.openBtn(); |
| | | }, |
| | | //打开国家列表底部弹窗 |
| | | openBtn() { |
| | | this.$refs.controlChild.open(); |
| | | }, |
| | | //获取到当前选中国家的code值 |
| | | getName(params) { |
| | | this.icon = params[1]; |
| | | this.dialCode = params[2]; |
| | | }, |
| | | agreeProt() { |
| | | this.agree = !this.agree |
| | | }, |
| | | register() { |
| | | // if (this.activeIndex == 0){ |
| | | // let match = this.username.search(/@/); |
| | | // if (this.username == '' || match == -1) { |
| | | // this.$toast(this.$t('请输入正确的邮箱地址')); |
| | | // return |
| | | // } |
| | | // }else{ |
| | | // if (this.username == '' ) { |
| | | // this.$toast(this.$t('请输入手机号')); |
| | | // return |
| | | // } |
| | | // } |
| | | switch (this.activeIndex) { |
| | | case 0: { |
| | | if (this.username == '') { |
| | | this.$toast(this.$t('请输入账号')); |
| | | return; |
| | | } |
| | | if (this.username.length < 6 || this.username.length > 30) { |
| | | this.$toast(this.$t('账号长度必须6-30位')); |
| | | return; |
| | | } |
| | | break; |
| | | } |
| | | case 1: { |
| | | let match = this.username.search(/@/); |
| | | if (this.username == '' || match == -1) { |
| | | this.$toast(this.$t('请输入正确的邮箱地址')); |
| | | return; |
| | | } |
| | | break; |
| | | } |
| | | case 2: { |
| | | if (this.username == '') { |
| | | this.$toast(this.$t('请输入手机号')); |
| | | return; |
| | | } |
| | | break; |
| | | } |
| | | } |
| | | if (this.password == '') { |
| | | this.$toast(this.$t('请输入密码')); |
| | | return |
| | | } |
| | | // if (this.invitCode == '') { |
| | | // this.$toast(this.$t('请输入邀请码')); |
| | | // return |
| | | // } |
| | | if (this.password.length < 6) { |
| | | this.$toast(this.$t('密码(6-12个字符)')); |
| | | return |
| | | } |
| | | if (this.repassword !== this.password) { |
| | | this.$toast(this.$t('密码不一致')); |
| | | return |
| | | } |
| | | if (!this.agree) { |
| | | this.$toast(this.$t('请同意服务条款')); |
| | | return |
| | | } |
| | | this.show = true |
| | | }, |
| | | changeIndex(index) { |
| | | this.activeIndex = index; |
| | | switch (index) { |
| | | case 0: |
| | | case 1: { |
| | | this.isArea = false; |
| | | break; |
| | | } |
| | | case 2: { |
| | | this.isArea = true; |
| | | break; |
| | | } |
| | | } |
| | | }, |
| | | save_email() { |
| | | Axios.save_email({ |
| | | email: this.username, |
| | | verifcode: this.emailVerificationCode, |
| | | }).then((res) => { |
| | | |
| | | }).catch((error) => { |
| | | if (error.code === 'ECONNABORTED') { |
| | | this.$toast(this.$t('网络超时!')); |
| | | } else if (error.msg !== undefined) { |
| | | this.$toast(this.$t(error.msg)); |
| | | } |
| | | }); |
| | | }, |
| | | registerApi() { |
| | | switch (this.activeIndex) { |
| | | case 0: { |
| | | this.type = 3; |
| | | break; |
| | | } |
| | | case 1: { |
| | | this.type = 2; |
| | | break; |
| | | } |
| | | case 2: { |
| | | this.type = 1; |
| | | break; |
| | | } |
| | | } |
| | | Axios.registerUser({ |
| | | username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username : |
| | | `${this.dialCode}${this.username}`, |
| | | password: this.password, |
| | | re_password: this.repassword, |
| | | type: this.type, |
| | | verifcode: this.emailVerificationCode, |
| | | safeword: this.safeword, |
| | | re_safeword: this.re_safeword, |
| | | // usercode: this.invitCode, |
| | | }).then((res) => { |
| | | this.$toast(this.$t('注册成功')); |
| | | setTimeout(() => { |
| | | this.$router.push('/login') |
| | | }, 1500) |
| | | return; |
| | | // this.GET_USERINFO(res.data) |
| | | // if (this.activeIndex == 0) { |
| | | // this.$router.push('/setFond') |
| | | // } else { |
| | | // this.$router.push({name: 'verify', |
| | | // query: { |
| | | // type: this.activeIndex, |
| | | // account: this.activeIndex == 1 ? this.username : `${this.dialCode}${this.username}` |
| | | // } |
| | | // }) |
| | | // } |
| | | }).catch((error) => { |
| | | if (error.code === 'ECONNABORTED') { |
| | | this.$toast(this.$t('网络超时!')); |
| | | } else if (error.msg !== undefined) { |
| | | this.$toast(this.$t(error.msg)); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .register { |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | padding: 32px; |
| | | font-size: 26px; |
| | | } |
| | | .register { |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | padding: 32px; |
| | | font-size: 26px; |
| | | } |
| | | |
| | | .top { |
| | | padding-left: 18px; |
| | | padding-top: 18px; |
| | | .top { |
| | | padding-left: 18px; |
| | | padding-top: 18px; |
| | | |
| | | img { |
| | | width: 37px; |
| | | height: 37px; |
| | | } |
| | | } |
| | | img { |
| | | width: 37px; |
| | | height: 37px; |
| | | } |
| | | } |
| | | |
| | | .title { |
| | | font-weight: 700; |
| | | font-size: 52px; |
| | | margin-top: 54px; |
| | | margin-bottom: 66px; |
| | | } |
| | | .title { |
| | | font-weight: 700; |
| | | font-size: 52px; |
| | | margin-top: 54px; |
| | | margin-bottom: 66px; |
| | | } |
| | | |
| | | .re-tab { |
| | | margin-bottom: 44px; |
| | | .re-tab { |
| | | margin-bottom: 44px; |
| | | |
| | | div { |
| | | padding: 0 36px; |
| | | height: 68px; |
| | | line-height: 68px; |
| | | text-align: center; |
| | | border-radius: 8px; |
| | | margin-right: 20px; |
| | | } |
| | | div { |
| | | padding: 0 36px; |
| | | height: 68px; |
| | | line-height: 68px; |
| | | text-align: center; |
| | | border-radius: 8px; |
| | | margin-right: 20px; |
| | | } |
| | | |
| | | .active { |
| | | @include themify() { |
| | | background: themed("tab_background"); |
| | | } |
| | | .active { |
| | | @include themify() { |
| | | background: themed("tab_background"); |
| | | } |
| | | |
| | | |
| | | @include themify() { |
| | | color: themed("text_color"); |
| | | } |
| | | @include themify() { |
| | | color: themed("text_color"); |
| | | } |
| | | |
| | | border-bottom: #1976d2 2px solid; |
| | | color: #1976d2 !important; |
| | | padding-bottom: 20px; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | border-radius: 0; |
| | | } |
| | | } |
| | | border-bottom: #1976d2 2px solid; |
| | | color: #1976d2 !important; |
| | | padding-bottom: 20px; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | border-radius: 0; |
| | | } |
| | | } |
| | | |
| | | .forget { |
| | | color: #1D91FF; |
| | | font-size: 24px; |
| | | line-height: 28px; |
| | | } |
| | | .forget { |
| | | color: #1D91FF; |
| | | font-size: 24px; |
| | | line-height: 28px; |
| | | } |
| | | |
| | | .btn { |
| | | color: #fff; |
| | | height: 88px; |
| | | line-height: 88px; |
| | | text-align: center; |
| | | font-size: 32px; |
| | | margin-top: 40px; |
| | | border-radius: 10px; |
| | | } |
| | | .btn { |
| | | color: #fff; |
| | | height: 88px; |
| | | line-height: 88px; |
| | | text-align: center; |
| | | font-size: 32px; |
| | | margin-top: 40px; |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | .noTips { |
| | | margin-top: 48px; |
| | | } |
| | | .noTips { |
| | | margin-top: 48px; |
| | | } |
| | | |
| | | .protocol { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 30px; |
| | | .protocol { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 30px; |
| | | |
| | | i { |
| | | width: 30px; |
| | | height: 30px; |
| | | margin-right: 18px; |
| | | i { |
| | | width: 30px; |
| | | height: 30px; |
| | | margin-right: 18px; |
| | | |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |
| | | </style> |