|
|
@@ -0,0 +1,729 @@
|
|
|
+<template>
|
|
|
+ <div class="business-enter">
|
|
|
+ <div class="banner"></div>
|
|
|
+ <div class="section-01">
|
|
|
+ <img src="/images/bussinessEnter/banner02.png" alt="">
|
|
|
+ <div class="register">
|
|
|
+ <div class="reg-box">
|
|
|
+ <div v-show="goNextStep" class="reg-content">
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="text" class="form-control phone"
|
|
|
+ placeholder="手机号码"
|
|
|
+ v-model="enterprise.mobile"
|
|
|
+ maxlength="11"
|
|
|
+ :class="{'err': !mobileChecked}"
|
|
|
+ @blur="checkMobile(enterprise.mobile)"/>
|
|
|
+ <span class="help-list" v-text="mobileErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="text" class="form-control code"
|
|
|
+ placeholder="短信验证码"
|
|
|
+ v-model="enterprise.code"
|
|
|
+ :class="{'err': !codeChecked}"
|
|
|
+ @change="checkMsgCode(enterprise.code)"/>
|
|
|
+ <template>
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ width="300"
|
|
|
+ v-model="visible">
|
|
|
+ <div class="valid-code">
|
|
|
+ <input type="text"
|
|
|
+ v-model="enterprise.ImgCode">
|
|
|
+ <img id="captchaImage2" :src="`${address}/sso/login/checkCode`" alt="">
|
|
|
+ <span @click="getImgCode">看不清换一张</span>
|
|
|
+ </div>
|
|
|
+ <div class="valid-btn">
|
|
|
+ <el-button size="mini" type="text" @click="visible = false">取消</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="getCode">确定</el-button>
|
|
|
+ </div>
|
|
|
+ <button class="code-btn"
|
|
|
+ slot="reference"
|
|
|
+ v-show="sendEnterpriseCode"
|
|
|
+ :disabled="mobileChecked">获取验证码</button>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ <button class="code-btn" v-show="!sendEnterpriseCode">已发送({{enterprise_time}}s)</button>
|
|
|
+ <span class="help-list" v-text="codeErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="check-box-wrap">
|
|
|
+ <input type="checkbox"
|
|
|
+ id="check-box"
|
|
|
+ v-model="isRead"
|
|
|
+ :checked="isRead">
|
|
|
+ <label class="agr" for="check-box">我已阅读并同意<a :href="`${address}/common/agreement`" target="_blank">《优软云服务条款》</a></label>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <span class="next-btn" @click="nextStep">下一步</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="!goNextStep" class="reg-content">
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="text" class="form-control"
|
|
|
+ placeholder="企业名称"
|
|
|
+ v-model="enterprise.spaceName"
|
|
|
+ maxlength="20"
|
|
|
+ :class="{'err': !spaceNameChecked}"
|
|
|
+ @blur="checkSpaceName(enterprise.spaceName)"/>
|
|
|
+ <span class="help-list" v-text="spaceNameErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="text" class="form-control"
|
|
|
+ placeholder="营业执照号"
|
|
|
+ v-model="enterprise.businessCode"
|
|
|
+ maxlength="20"
|
|
|
+ :class="{'err': !businessCodeChecked}"
|
|
|
+ @blur="checkBusinessCode(enterprise.businessCode)"/>
|
|
|
+ <span class="help-list" v-text="businessCodeErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group" v-if="!isHasRegister">
|
|
|
+ <input type="text" class="form-control"
|
|
|
+ placeholder="管理员姓名"
|
|
|
+ v-model="enterprise.vipName"
|
|
|
+ maxlength="20"
|
|
|
+ :class="{'err': !vipNameChecked}"
|
|
|
+ @blur="checkVipName(enterprise.vipName)"/>
|
|
|
+ <span class="help-list" v-text="vipNameErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="text" class="form-control"
|
|
|
+ placeholder="登录密码"
|
|
|
+ v-model="enterprise.password"
|
|
|
+ maxlength="20"
|
|
|
+ @blur="checkPassword(enterprise.password)"
|
|
|
+ @change="passwordStrength(enterprise.password)"/>
|
|
|
+ <span class="help-list" v-text="mobileErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="pwd" v-if="!isHasRegister"
|
|
|
+ :class="{sm: strength === '弱', md: strength === '中', lar: strength === '强', low: strength === ''}">
|
|
|
+ 密码强度 <em></em><em></em><em></em>
|
|
|
+ <span v-text="strength === '弱' ? '弱' : strength === '中' ? '中' : strength === '强' ? '强' : ''">弱</span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group" v-if="isHasRegister">
|
|
|
+ <input type="text" class="form-control"
|
|
|
+ placeholder="密码确认"
|
|
|
+ v-model="enterprise.password"
|
|
|
+ maxlength="20"
|
|
|
+ @blur="checkRegisterPassword(enterprise.password)"/>
|
|
|
+ <span class="help-list" v-text="phoneIsRegisterTip"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group" v-if="!isHasRegister">
|
|
|
+ <input type="text" class="form-control"
|
|
|
+ placeholder="密码确认"
|
|
|
+ v-model="enterprise.confirm"
|
|
|
+ maxlength="20"
|
|
|
+ @blur="checkConfirm(enterprise.confirm)"/>
|
|
|
+ <span class="help-list" v-text="mobileErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group" v-if="!isHasEmail">
|
|
|
+ <input type="text" class="form-control"
|
|
|
+ placeholder="联系邮箱"
|
|
|
+ v-model="enterprise.email"
|
|
|
+ maxlength="20"
|
|
|
+ @blur="checkEmail(enterprise.email)"/>
|
|
|
+ <span class="help-list" v-text="mobileErrMsg"></span>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="check-box-wrap">
|
|
|
+ <input type="checkbox"
|
|
|
+ id="check-boxes"
|
|
|
+ v-model="isRead"
|
|
|
+ :checked="isRead">
|
|
|
+ <label class="agr" for="check-box">我已阅读并同意<a :href="`${address}/common/agreement`" target="_blank">《优软云服务条款》</a></label>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <span class="next-btn" @click="nextStep">确认注册</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="section-02"></div>
|
|
|
+ <div class="section-03">
|
|
|
+ <img src="/images/bussinessEnter/banner04.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="section-04">
|
|
|
+ <div class="handle-btn">
|
|
|
+ <div class="ps-btn">
|
|
|
+ <a @click="onRegisterClick">立即入驻</a>
|
|
|
+ <a href="https://mall.usoftchina.com/help/helpDetail/28" target="_blank">联系企业</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="loading" v-show="showLoading"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'businessEnter',
|
|
|
+ layout: 'main',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ enterprise: {
|
|
|
+ mobile: '',
|
|
|
+ code: '',
|
|
|
+ ImgCode: '',
|
|
|
+ spaceName: '',
|
|
|
+ businessCode: '',
|
|
|
+ vipName: '',
|
|
|
+ password: '',
|
|
|
+ confirm: '',
|
|
|
+ email: ''
|
|
|
+ },
|
|
|
+ mobileErrMsg: '一个手机可注册多个企业',
|
|
|
+ codeErrMsg: '',
|
|
|
+ spaceNameErrMsg: '',
|
|
|
+ businessCodeErrMsg: '',
|
|
|
+ vipNameErrMsg: '',
|
|
|
+ mobileChecked: true,
|
|
|
+ codeChecked: false,
|
|
|
+ spaceNameChecked: false,
|
|
|
+ businessCodeChecked: false,
|
|
|
+ vipNameChecked: false,
|
|
|
+ showLoading: false,
|
|
|
+ visible: false,
|
|
|
+ address: '',
|
|
|
+ sendEnterpriseCode: true,
|
|
|
+ token: '',
|
|
|
+ enterprise_time: 0,
|
|
|
+ isRead: true,
|
|
|
+ isHasRegister: false,
|
|
|
+ isHasEmail: false,
|
|
|
+ goNextStep: false,
|
|
|
+ phoneIsRegisterTip: '该手机号已有优软账号，请输入原账号的登录密码进行校验确认',
|
|
|
+ strength: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getImgCode()
|
|
|
+ this.getAddress()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 立即入驻
|
|
|
+ onRegisterClick () {
|
|
|
+ this.$http.get('/register/page').then(response => {
|
|
|
+ if (response.data) {
|
|
|
+ window.open(response.data.content)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkMobile (flg) {
|
|
|
+ let reg = /^1[0-9]{10}$/
|
|
|
+ if (flg === '' && !flg) {
|
|
|
+ this.mobileChecked = true
|
|
|
+ this.mobileErrMsg = '请填写正确的手机号'
|
|
|
+ } else {
|
|
|
+ if (!reg.test(flg)) {
|
|
|
+ this.mobileChecked = true
|
|
|
+ this.mobileErrMsg = '请填写正确的手机号'
|
|
|
+ } else {
|
|
|
+ this.mobileErrMsg = ''
|
|
|
+ this.mobileChecked = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAddress () {
|
|
|
+ this.address = process.env.ssoUrl
|
|
|
+ },
|
|
|
+ getImgCode () {
|
|
|
+ let imgSrc = document.getElementById('captchaImage2')
|
|
|
+ imgSrc.setAttribute('src', this.address + '/sso/resetPwd/checkCaptcha?timestamp=' + (new Date()).valueOf())
|
|
|
+ },
|
|
|
+ getCode () {
|
|
|
+ this.showLoading = true
|
|
|
+ if (!this.mobileChecked) {
|
|
|
+ this.$http.get(`${this.address}/sso/userspace/register/checkCode`, {params: {mobile: this.enterprise.mobile, timestamp: new Date().getTime() + '', code: this.enterprise.ImgCode}})
|
|
|
+ .then(response => {
|
|
|
+ this.showLoading = false
|
|
|
+ if (response.data) {
|
|
|
+ this.token = response.data.token
|
|
|
+ if (response.data.errMsg) {
|
|
|
+ this.$message({
|
|
|
+ message: response.data.errMsg,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ this.enterprise.ImgCode = ''
|
|
|
+ this.getImgCode()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.token !== '') {
|
|
|
+ this.$message({
|
|
|
+ message: '验证码已经发送到您的手机，请注意查收',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.sendEnterpriseCode = false
|
|
|
+ this.enterprise_time = 60
|
|
|
+ this.visible = false
|
|
|
+ this.enterprise.ImgCode = ''
|
|
|
+ let enterpriseTime = setInterval(() => {
|
|
|
+ this.enterprise_time--
|
|
|
+ if (this.enterprise_time <= 0) {
|
|
|
+ this.sendEnterpriseCode = true
|
|
|
+ clearInterval(enterpriseTime)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ this.getImgCode()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.showLoading = false
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkMsgCode (flg) {
|
|
|
+ if (!flg && flg === '') {
|
|
|
+ this.codeErrMsg = '请填写正确的验证码'
|
|
|
+ this.codeChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.enterprise.mobile === '') {
|
|
|
+ this.mobileErrMsg = '请填写正确的手机号'
|
|
|
+ this.codeChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.token) {
|
|
|
+ if (flg.length === 6) {
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('mobile', this.enterprise.mobile)
|
|
|
+ param.append('code', this.enterprise.code)
|
|
|
+ param.append('token', this.token)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post(`${this.address}/sso/userspace/register/checkCode`, param, config)
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ this.codeChecked = true
|
|
|
+ this.codeErrMsg = ''
|
|
|
+ } else {
|
|
|
+ this.codeChecked = false
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.codeChecked = false
|
|
|
+ this.codeErrMsg = err.errMsg
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.codeChecked = false
|
|
|
+ this.codeErrMsg = '请输入正确的验证码'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.codeChecked = false
|
|
|
+ this.codeErrMsg = '请先获取验证码'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nextStep () {
|
|
|
+ if (this.mobileChecked && !this.codeChecked) {
|
|
|
+ this.checkMobile(this.enterprise.mobile)
|
|
|
+ this.checkMsgCode(this.enterprise.code)
|
|
|
+ } else {
|
|
|
+ if(!this.isRead) {
|
|
|
+ this.$message.error('您对阅读条款未做勾选')
|
|
|
+ } else {
|
|
|
+ this.showLoading = true
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('mobile', this.enterprise.mobile)
|
|
|
+ param.append('code', this.enterprise.code)
|
|
|
+ param.append('appId', 'mall')
|
|
|
+ param.append('token', this.token)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post(`${this.address}/sso/userspace/register/checkAdminTel`, param, config)
|
|
|
+ .then(response => {
|
|
|
+ this.showLoading = false
|
|
|
+ if (response.data.success) {
|
|
|
+ this.goNextStep = false
|
|
|
+ if (response.data.content.hasRegister) {
|
|
|
+ this.isHasRegister = true
|
|
|
+ if (response.data.content.hasEmail) {
|
|
|
+ this.isHasEmail = true
|
|
|
+ } else {
|
|
|
+ this.isHasEmail = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isHasRegister = false
|
|
|
+ this.isHasEmail = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.goNextStep = true
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
+ this.showLoading = false
|
|
|
+ this.enterprise_time = 0
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkSpaceName (flg) {
|
|
|
+ if (!flg && flg === '') {
|
|
|
+ this.spaceNameErrMsg = '请填写正确的企业名称'
|
|
|
+ this.spaceNameChecked = false
|
|
|
+ } else {
|
|
|
+ this.$http.get(`${this.address}/api/userspace/checkSpaceName`, {params: {spaceName: this.enterprise.spaceName}})
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ this.spaceNameChecked = true
|
|
|
+ this.spaceNameErrMsg = ''
|
|
|
+ } else {
|
|
|
+ this.spaceNameChecked = false
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.spaceNameErrMsg = err.errMsg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkBusinessCode (flg) {
|
|
|
+ if (!flg && flg === '') {
|
|
|
+ this.businessCodeErrMsg = '请填写正确的营业执照号'
|
|
|
+ this.businessCodeChecked = false
|
|
|
+ } else {
|
|
|
+ let reg = /^[A-Za-z0-9]+$/
|
|
|
+ if (!reg.test(flg)) {
|
|
|
+ this.businessCodeErrMsg = '请填写正确的营业执照号'
|
|
|
+ this.businessCodeChecked = false
|
|
|
+ } else {
|
|
|
+ this.$http.get(`${this.address}/api/userspace/checkBusinessCode`, {params: {spaceName: this.enterprise.businessCode}})
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ this.businessCodeChecked = true
|
|
|
+ this.businessCodeErrMsg = ''
|
|
|
+ } else {
|
|
|
+ this.businessCodeChecked = false
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.businessCodeErrMsg = err.errMsg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkVipName (flg) {
|
|
|
+ if (this.isHasRegister) {
|
|
|
+ this.vipNameChecked = true
|
|
|
+ } else {
|
|
|
+ if (!flg && flg === '') {
|
|
|
+ this.vipNameChecked = false
|
|
|
+ this.vipNameErrMsg = '请填写正确的管理员姓名'
|
|
|
+ } else {
|
|
|
+ this.vipNameChecked = true
|
|
|
+ this.vipNameErrMsg = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ passwordStrength (flg) {
|
|
|
+ let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
|
|
|
+ let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
|
|
|
+ if (reg1.test(flg)) {
|
|
|
+ this.strength = '强'
|
|
|
+ } else if (reg2.test(flg)) {
|
|
|
+ this.strength = '中'
|
|
|
+ } else {
|
|
|
+ this.strength = '弱'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkPassword (flg) {},
|
|
|
+ checkRegisterPassword (flg) {},
|
|
|
+ checkConfirm (flg) {},
|
|
|
+ checkEmail (flg) {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .business-enter {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ .banner{
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ background: url('/images/bussinessEnter/banner01.png') 50%/auto 100% no-repeat #fcde64;
|
|
|
+ }
|
|
|
+ .section-01 {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ >img{
|
|
|
+ margin-top: -15px;
|
|
|
+ width: 100%;
|
|
|
+ height: 820px;
|
|
|
+ }
|
|
|
+ .register {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 1190px;
|
|
|
+ position: absolute;
|
|
|
+ top: 170px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -595px;
|
|
|
+ .reg-shadow {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 208px;
|
|
|
+ height: 11px;
|
|
|
+ background-image: linear-gradient(0deg,
|
|
|
+ #f0116a 0%,
|
|
|
+ #b91552 100%),
|
|
|
+ linear-gradient(
|
|
|
+ #f0116a,
|
|
|
+ #f0116a);
|
|
|
+ border-radius: 10px 10px 0px 0px;
|
|
|
+ }
|
|
|
+ .reg-btn{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 208px;
|
|
|
+ height: 49px;
|
|
|
+ line-height: 49px;
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #f0116a;
|
|
|
+ border-radius: 0 0 4px 4px;
|
|
|
+ }
|
|
|
+ .reg-box{
|
|
|
+ position: relative;
|
|
|
+ padding: 34px 0 10px 30px;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 646px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #7058ff;
|
|
|
+ border-radius: 0 0 30px 30px;
|
|
|
+ .form-group {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 42px;
|
|
|
+ input.form-control{
|
|
|
+ padding-left: 20px;
|
|
|
+ float: left;
|
|
|
+ width: 358px;
|
|
|
+ height: 42px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #9d8cfc;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ input.phone{
|
|
|
+ width: 358px;
|
|
|
+ }
|
|
|
+ span.help-list{
|
|
|
+ margin-left: 10px;
|
|
|
+ float: left;
|
|
|
+ width: 225px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #e6e6e6;
|
|
|
+ }
|
|
|
+ input.code{
|
|
|
+ width: 208px;
|
|
|
+ }
|
|
|
+ input.err{
|
|
|
+ border-color: #f56c6c;
|
|
|
+ }
|
|
|
+ .code-btn{
|
|
|
+ float: left;
|
|
|
+ margin-left: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 141px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #9d8cfc;
|
|
|
+ background-color: #baaeff;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ outline: none;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ button.code-btn[disabled] {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .check-box-wrap {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ padding-left: 9px;
|
|
|
+ input{
|
|
|
+ margin-top: 13px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-color: #baaeff;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .agr{
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ left: 26px;
|
|
|
+ width: 400px;
|
|
|
+ display: inline-table;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #e6e6e6;
|
|
|
+ a{
|
|
|
+ font-size: 20px;
|
|
|
+ color: #e6e6e6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .next-btn{
|
|
|
+ float: left;
|
|
|
+ display: inline-block;
|
|
|
+ width: 358px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #3d00ff;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pwd{
|
|
|
+ margin: -10px 0 0 19px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ span{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ em{
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 8px 2px 0;
|
|
|
+ width: 24px;
|
|
|
+ height: 6px;
|
|
|
+ border: solid 1px #ffffff;
|
|
|
+ &:first-child {
|
|
|
+ margin-left: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pwd.sm{
|
|
|
+ color: #fff;
|
|
|
+ em {
|
|
|
+ background: #bfbfbf;
|
|
|
+ &:first-child{
|
|
|
+ background: #ff4e00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color: #ff4e00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pwd.md{
|
|
|
+ color: #fff;
|
|
|
+ em {
|
|
|
+ background: #22ac38;
|
|
|
+ &:nth-child(3){
|
|
|
+ background: #bfbfbf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color: #22ac38;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pwd.lar{
|
|
|
+ color: #fff;
|
|
|
+ em {
|
|
|
+ background: #00a0e9;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color: #00a0e9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pwd.low{
|
|
|
+ color: #fff;
|
|
|
+ em {
|
|
|
+ background: #bfbfbf;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color: #00a0e9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .section-02 {
|
|
|
+ width: 100%;
|
|
|
+ height: 660px;
|
|
|
+ background: url('/images/bussinessEnter/banner03.png') 50%/auto 100% no-repeat #fff;
|
|
|
+ }
|
|
|
+ .section-03{
|
|
|
+ width: 100%;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 630px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .section-04{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ height: 760px;
|
|
|
+ text-align: center;
|
|
|
+ background: url('/images/bussinessEnter/banner05.jpg') 50%/auto 100% no-repeat #fff;
|
|
|
+ .handle-btn {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 1190px;
|
|
|
+ height: 760px;
|
|
|
+ .ps-btn {
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ top: 635px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -198px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ float:left;
|
|
|
+ display: inline-block;
|
|
|
+ width: 190px;
|
|
|
+ height: 59px;
|
|
|
+ line-height: 59px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 27px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+ &:first-child {
|
|
|
+ background-color: #eb162c;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ background-color: #114fa4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
|
+ color: #9d8cfc; opacity:1;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
|
+ color: #9d8cfc;opacity:1;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:-ms-input-placeholder{
|
|
|
+ color: #9d8cfc;opacity:1;
|
|
|
+ }
|
|
|
+
|
|
|
+ input::-webkit-input-placeholder{
|
|
|
+ color: #9d8cfc;opacity:1;
|
|
|
+ }
|
|
|
+</style>
|
wangcz
