mall-web-ssr/components/mobile/register-saler/register/StepFirst.vue

<template>
  <!--填写注册信息-->
  <div class="section" @click="onHideBox">
    <div class="mobile-register">
      <!--<div class="x-form-set-header">-->
        <!--<h4>企业基本信息</h4>-->
      <!--</div>-->
      <div class="wrap-title"><span class="line"></span>企业基本信息</div>
      <div class="">
        <label class="col-sm-2 mobile-x-required">企业名称：</label>
        <div class="col-sm-5 mobile-x-input-kuang">
          <input :class="!validName.isValidTypeName || !validName.isValidName?'form-control error-box-border':'form-control'" type="text" @input="nameTypeCheck()" :disabled="!loginData.isSelf" v-model="data.name" name="name" required="" placeholder="填写营业执照上的企业名称">
          <div class="mobile-x-text-help" v-show="validName.isValidTypeName && validName.isValidName && !validName.init">
            <i class="glyphicon glyphicon-ok x-icon-left"></i>
          </div>
        </div>
        <div class="col-sm-5 mobile-x-text-info" v-show="!validName.isValidTypeName && !validName.init">
          <p>
            <i class="fa fa-info-circle"></i>请填写正确的企业名称，2~99个字符
          </p>
        </div>
        <div class="col-sm-5 mobile-x-text-info" v-show="!validName.isValidName && !validName.init">
          <p>
            <i class="fa fa-info-circle"></i>注册的企业名称已存在，请联系管理员
          </p>
        </div>
      </div>
      <div class="">
        <label class="col-sm-2 mobile-x-required">营业执照号：</label>
        <div class="col-sm-5 mobile-x-input-kuang">
          <input type="text" :class="!validLicence.isValidLicence?'form-control error-box-border':'form-control x-input'" :disabled="!loginData.isSelf" @input="validLicence.init=false" @change="licenceCheck(3)" v-model="data.licenceId" name="name" required="" placeholder="请填写营业执照上的注册号">
          <div class="mobile-x-text-help" v-show="validLicence.isValidLicence && !validLicence.init">
            <i class="glyphicon glyphicon-ok x-icon-left"></i>
          </div>
        </div>
        <div class="col-sm-5" v-show="!validLicence.isValidLicence && !validLicence.init"><p><i class="fa fa-info-circle"></i>请填写营业执照上的注册号</p></div>
      </div>
      <div class="row">
        <label class="col-sm-2 mobile-x-required">注册地址：</label>
        <div class="col-sm-5 mobile-x-input-kuang">
          <input type="text" readonly aria-haspopup="true" aria-expanded="false" @click="onShowAddress" v-model="data.address" class="form-control" name="name" required="" placeholder="填写总部所在地详细地址" style="padding-left:0.4rem;background-color: transparent;">
          <span class="fa fa-map-marker mobile-fa-map-marker"></span>
          <div class="mobile-x-text-help" v-show="validAddress.isValidAddress && !validAddress.init">
            <i class="glyphicon glyphicon-ok x-icon-left"></i>
          </div>
        </div>
        <div class="mobile-modal mobile-fiexd-modal" v-show="showAddressBox">
          <div @mouseenter="isInAddressBox = true"
               @mouseleave="isInAddressBox = false"
               style="display: block;"
             class="dropdown-menu mobile-x-union-menu" aria-labelledby="address">
            <div class="mobile-x-union-header clearfix">
              <div>省份</div>
              <div>城市</div>
              <div>县区</div>
            </div>
            <div class="mobile-x-union-list clearfix">
              <ul class="mobile-list-unstyled">
                <li v-for="province in cityData.province"
                    :class="province == address.currentProvince ? 'active' : ''"
                    v-text="province"
                    @click="getCity(province)"></li>
              </ul>
              <ul class="mobile-list-unstyled">
                <li v-for="city in cityData.city"
                    :class="city == address.currentCity ? 'active' : ''"
                    v-text="city"
                    @click="getDistrict(city)"></li>
              </ul>
              <ul class="mobile-list-unstyled">
                <li v-for="district in cityData.district"
                    v-text="district"
                    :class="district == address.currentDistrict ? 'active' : ''"
                    @click="chooseDistrict(district)"></li>
              </ul>
            </div>
            <div class="mobile-x-item-ext2">详细地址</div>
            <div class="mobile-x-item-ext">
              <div class="form-group">
                <div class="col-sm-12">
                   <textarea id="street" name="street" rows="4" v-model="address.detail" @input="onDetailAddressInput" class="form-control x-input" placeholder="xx路xx大厦xx栋xx楼xx室"></textarea>
                </div>
              </div>
              <div class="text-right">
                <a class="register-btn btn-submit" @click="submitAddress">确定</a> <a @click="showAddressBox = false" class="register-btn btn-console">取消</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-5" v-show="!validAddress.isValidAddress && !validAddress.init"><p><i class="fa fa-info-circle"></i>填写总部所在地详细地址</p></div>
      </div>
    </div>
    <div class="row next-btn"><button class="btn" style="background: rgb(63, 132, 246);width: 90%; color: #fff;" :style="loginData.isSelf && !isValid ? 'opacity: .65;':''" @click="sectionChange(2)">下一步</button></div>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
    <div class="mobile-modal" v-if="showBangdingPage">
      <div class="BangdingPageAlert">
        <div class="BangdingPageAlertTitle">该企业<span>已注册优软账号</span>，如希望使用当前企业进行开店申请，请先申请<span>企业绑定</span>！</div>
        <div class="BangdingPageAlertBtn">
          <span @click="resetOnkeyDown()">重新输入</span>
          <nuxt-link tag="span" to="/mobile/user/bindEnterprise">立即绑定</nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { RemindBox } from '~components/mobile/common'
  export default {
    data () {
      return {
        showBangdingPage: false,
        timeoutCount: 0,
        collectResult: '',
        data: {
          name: '',
//          lawPerson: '',
//          url: '',
          licenceId: '',
          address: ''
//          linkman: '',
//          phone: '',
//          email: '',
//          fax: '',
//          website: '',
//          profession: '',
//          logoUrl: '',
//          tagsData: []
        },
        validName: {
          isValidTypeName: true,
          isValidName: true,
          init: true
        },
//        validUpload: {
//          isValidUpload: true,
//          init: true
//        },
        validLicence: {
          isValidLicence: true,
          init: true
        },
        validAddress: {
          isValidAddress: true,
          init: true
        },
//        validLawPerson: {
//          isValidLawPerson: true,
//          init: true
//        },
//        validPhone: {
//          isValidPhone: true,
//          init: true
//        },
//        validEmail: {
//          isValidEmail: true,
//          init: true
//        },
//        validFax: {
//          isValidFax: true,
//          init: true
//        },
//        validLogo: {
//          isValidLogo: true,
//          init: true
//        },
        isValid: false,
//        isPdf: false,
        showAddressBox: false,
        isInAddressBox: false,
//        showProfessionBox: false,
//        isInProfessionBox: false,
        temCityData: {},
        cityData: {
          province: [],
          city: [],
          district: []
        },
        address: {
          currentProvince: '',
          currentCity: '',
          currentDistrict: '',
          detail: ''
        }
//        tempProfession: {},
//        professionData: {
//          profession: [],
//          detail: [],
//          thirdDetail: []
//        },
//        currentProfession: {
//          profession: '',
//          detail: '',
//          thirdDetail: ''
//        },
//        tag: ''
      }
    },
    props: ['loginData', 'enterpriseData', 'businessImgUrl'],
    watch: {
      enterpriseData: function (val, oldVal) {
        if (val.name) {  // 个人
          this.initData(val)
          this.nameCheck(3)
          this.nameTypeCheck()
          this.licenceCheck(3)
          this.addressCheck()
//            this.imgUrlCheck()
//            this.lawPersonCheck()
//            this.phoneCheck()
//            this.emailCheck()
//            this.faxCheck()
          this.checkFullData()
          this.submitRegisterData()
        }
        if (val.uu) {  // 企业
          this.initData(val)
//          this.nameCheck(3)
//          this.nameTypeCheck()
//          this.licenceCheck(3)
          this.enAddressCheck()
//            this.imgUrlCheck()
//            this.lawPersonCheck()
//            this.phoneCheck()
//            this.emailCheck()
//            this.faxCheck()
//          this.checkFullData()
          this.submitRegisterData()
        }
      }
//      businessImgUrl: function (val, oldVal) {
//        this.data.url = val
//        this.checkFullData()
//        this.submitRegisterData()
//      }
    },
    mounted () {
      this.$http.get('/data/city.json').then(response => {
        this.temCityData = response.data
        for (let province in response.data) {
          this.cityData.province.push(province)
        }
        for (let item in this.temCityData['北京']) {
          this.cityData.city.push(item)
        }
        this.cityData.district = this.temCityData['北京']['北京市']
        this.address.currentProvince = '北京'
        this.address.currentCity = '北京市'
        this.address.currentDistrict = '东城区'
      })
//      this.$http.get('/data/profession.json').then(response => {
//        this.tempProfession = response.data
//        for (let profession in response.data) {
//          this.professionData.profession.push(profession)
//        }
//      })
    },
    methods: {
      resetOnkeyDown: function() {
        this.showBangdingPage = false
        this.data.name = ''
      },
      initData: function (val) {
        this.data.name = val.spaceName || val.enName || val.name || ''
        this.data.licenceId = val.businessCode || val.licenceId || val.enBussinessCode || ''
        this.data.address = val.address || val.enAddress || ''
      },
      sectionChange: function (type) {
        this.nameCheck(3, () => {
          if (!this.isValid) {
            // this.nameCheck(3)
            if (!this.validName.isValidName) {
              this.showBangdingPage = true
            } else {
              this.timeoutCount++
              this.collectResult = '请填写正确的注册信息'
            }
            // this.$message.error('请填写正确的注册信息')
          } else {
            if (this.enterpriseData.uu) {
              this.enCheckFullData()
            } else {
              this.checkFullData()
            }
            let enterprise = this.data
  //          enterprise.tagsData = enterprise.tagsData.toString()
  //          if (typeof this.data.tagsData === 'string') {
  //            this.data.tagsData = this.data.tagsData.split(',')
  //          }
            let data = {}
            data.enterprise = enterprise
            data.isValidRegister = this.isValid
  //          data.url = this.data.url
            enterprise.enIsRead = false
  //          enterprise.enBussinessCodeImage = this.data.url
            // 个人用户，提交保存缓存企业信息
            if (this.loginData.isSelf) {
              this.$http.post('/basic/user/userCacheEnterprise', enterprise)
              this.$emit('isSelfCacheDataAction', enterprise)
            } else { // 企业用户，更新当前企业信息，主要是更新企业地址
              this.enterpriseData.enAddress = this.data.address
              this.$http.post('/basic/enterprise/' + this.enterpriseData.uu + '/updateInfo', this.enterpriseData)
            }
            this.$emit('registerAction', data)
            this.$emit('sectionEvent', type)
  //          this.$emit('businessImgUrlAction', this.data.url)
          }
        })
      },
//      upload: function (e) {
//        let file = e.target.files[0]
//        this.validUpload.init = false
//        if (file.size > 5 * 1024 * 1024) {
//          this.validUpload.isValidUpload = false
//        } else {
//          this.validUpload.isValidUpload = true
//          if (file.type !== 'application/pdf') {
//            this.isPdf = false
//            let param = new FormData()
//            param.append('file', file, file.name)
//            param.append('chunk', '0')
//            let config = {
//              headers: {'Content-Type': 'multipart/form-data'}
//            }
//            this.$http.post('/api/images', param, config)
//              .then(response => {
//                this.data.url = response.data[0].path
//                this.$emit('businessImgUrlAction', this.data.url)
//              }, err => {
//                console.log(err)
//                this.validUpload.isValidUpload = false
//              })
//          } else {
//            let param = new FormData()
//            param.append('file', file, file.name)
//            let config = {
//              headers: {'Content-Type': file.type}
//            }
//            this.$http.post('/file', param, config)
//              .then(response => {
//                this.isPdf = true
//                this.data.url = response.data[0].path
//                this.$emit('businessImgUrlAction', this.data.url)
//              }, err => {
//                console.log(err)
//                this.validUpload.isValidUpload = false
//              })
//          }
//        }
//        this.validCheck()
//      },
//      uploadLogo: function (e) {
//        this.validLogo.init = false
//        let file = e.target.files[0]
//        if (file.size > 100 * 1024) {
//          this.validLogo.isValidLogo = false
// //          this.$message.error('图片请勿超过100Kb')
//        } else {
//          let param = new FormData()
//          param.append('file', file, file.name)
//          let config = {
//            headers: {'Content-Type': file.type}
//          }
//          this.$http.post('/api/images', param, config)
//            .then(response => {
//              this.validLogo.isValidLogo = true
//              this.data.logoUrl = response.data[0].path
//            }, err => {
//              console.log(err)
//              this.$message.error('图片上传失败')
//            })
//        }
//      },
      validCheck: function () {
        this.isValid =
//          this.validUpload.isValidUpload && !this.validUpload.init &&
          this.validName.isValidTypeName && !this.validName.init && this.validName.isValidName &&
          this.validLicence.isValidLicence && !this.validLicence.init &&
          this.validAddress.isValidAddress && !this.validAddress.init
//          this.validLawPerson.isValidLawPerson && !this.validLawPerson.init &&
//          (this.validPhone.init || this.validPhone.isValidPhone) &&
//          (this.validEmail.init || this.validEmail.isValidEmail) &&
//          (this.validFax.init || this.validFax.isValidFax)
      },
      enValidCheck: function () {
        this.isValid = this.validAddress.isValidAddress && !this.validAddress.init
      },
      checkFullData: function () {
        this.isValid =
//          this.validUpload.isValidUpload &&
          this.validName.isValidTypeName && this.validName.isValidName &&
          this.validLicence.isValidLicence &&
          this.validAddress.isValidAddress
//          this.validLawPerson.isValidLawPerson
      },
      enCheckFullData: function () {
        this.isValid = this.validAddress.isValidAddress
      },
      // 企业名称字符验证
      nameTypeCheck: function () {
        this.validName.isValidTypeName = this.data.name !== '' && this.data.name.length >= 2 && this.data.name.length <= 99 && this.commonValid(this.data.name)
        this.validName.init = false
      },
      // 企业名称是否已存在验证
      nameCheck: function (num, cb) {
        if (num > 0) {
          this.$http.post('/basic/enterprise/register/valid/name?name=' + this.data.name)
            .then(response => {
              if (response.data.code !== 12) {
                this.validName.init = false
                this.validName.isValidName = response.data.success
                this.validCheck()
                cb && cb()
              } else {
                this.nameCheck(num - 1)
              }
            })
        }
      },
//      imgUrlCheck: function () {
//        this.validUpload.init = false
//        this.validUpload.isValidUpload = this.data.url !== ''
//      },
      licenceCheck: function (num) {
        if ((/^[\S-]{1,255}$/).test(this.data.licenceId)) {
          if (num > 0) {
            this.$http.post('/basic/enterprise/register/valid/businessCode?businessCode=' + this.data.licenceId)
              .then(response => {
                if (response.data.code !== 12) {
                  this.validLicence.init = false
                  this.validLicence.isValidLicence = response.data.success && this.data.licenceId
                  this.validCheck()
                } else {
                  //      this.validLicence.init = tmpInit
                  this.licenceCheck(num - 1)
                }
              })
          }
        } else {
          this.validLicence.init = false
          this.validLicence.isValidLicence = false
          this.validCheck()
        }
      },
      // 个人地址校验
      addressCheck: function () {
        this.validAddress.init = false
        this.validAddress.isValidAddress = this.data.address !== ''
        this.validCheck()
      },
      // 企业地址校验
      enAddressCheck: function () {
        this.validAddress.init = false
        this.validAddress.isValidAddress = this.data.address !== ''
        this.enValidCheck()
      },
//      lawPersonCheck: function () {
//        this.validLawPerson.init = false
//        this.validLawPerson.isValidLawPerson = (/^\S{1,255}$/).test(this.data.lawPerson)
//        this.validCheck()
//      },
//      phoneCheck: function () {
//        this.validPhone.init = false
//        this.validPhone.isValidPhone = (/^[\d-]{8,}$/).test(this.data.phone) || this.data.phone === ''
//        this.validCheck()
//      },
//      emailCheck: function () {
//        this.validEmail.init = false
//        this.validEmail.isValidEmail = (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/).test(this.data.email) || this.data.email === ''
//        this.validCheck()
//      },
//      faxCheck: function () {
//        this.validFax.init = false
//        this.validFax.isValidFax = (/^(([\0]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/).test(this.data.fax) || this.data.fax === ''
//        this.validCheck()
//      },
      commonValid: function (str) {
        return str.indexOf(' ') === -1
      },
      submitRegisterData: function () {
        let enterprise = this.data
        let data = {}
        data.enterprise = enterprise
        data.isValidRegister = this.isValid
//        data.url = this.data.url
        this.$emit('registerAction', data)
      },
      onHideBox: function () {
        this.onHideAddress()
//        this.onHideProfession()
      },
      onShowAddress: function () {
        if (this.showAddressBox) {
          this.onHideAddress()
        } else {
          this.showAddressBox = true
          this.isClickInputAddress = true
        }
      },
      onHideAddress: function () {
        if (!this.isInAddressBox && !this.isClickInputAddress) {
          this.showAddressBox = false
        }
        this.isClickInputAddress = false
      },
//      onShowProfession: function () {
//        if (this.showProfessionBox) {
//          this.onHideProfession()
//        } else {
//          this.showProfessionBox = true
//          this.isClickInputProfession = true
//        }
//      },
//      onHideProfession: function () {
//        if (!this.isInProfessionBox && !this.isClickInputProfession) {
//          this.showProfessionBox = false
//        }
//        this.isClickInputProfession = false
//      },
      getCity: function (province) {
        this.cityData.city = []
        this.address.currentCity = ''
        this.cityData.district = []
        this.address.currentDistrict = ''
        this.address.currentProvince = province
        for (let item in this.temCityData[province]) {
          this.cityData.city.push(item)
        }
      },
      getDistrict: function (city) {
        this.address.currentCity = city
        this.address.currentDistrict = ''
        this.cityData.district = this.temCityData[this.address.currentProvince][city]
      },
      chooseDistrict: function (district) {
        this.address.currentDistrict = district
      },
      submitAddress: function () {
        if (this.address.currentDistrict !== '' && this.address.currentCity !== '' && this.address.currentProvince !== '') {
          if (this.address.detail !== '') {
            this.data.address = this.address.currentProvince + this.address.currentCity + this.address.currentDistrict + this.address.detail
            this.showAddressBox = false
            if (this.enterpriseData.uu) {
              this.enAddressCheck()
            } else {
              this.addressCheck()
            }
          } else {
            this.timeoutCount++
            this.collectResult = '请输入详细地址'
            // this.$message.error('请输入详细地址')
          }
        } else {
          this.timeoutCount++
          this.collectResult = '请选择省、市、区'
        }
      },
//      getProfessionDetail: function (profession) {
//        this.currentProfession.profession = profession
//        this.currentProfession.detail = ''
//        this.professionData.detail = []
//        this.currentProfession.thirdDetail = ''
//        this.professionData.thirdDetail = []
//        let _this = this
//        _this.professionData.detail = []
//        for (let item in this.tempProfession[profession]) {
//          if (typeof this.tempProfession[profession][item] !== 'object') {
//            _this.professionData.detail.push(this.tempProfession[profession][item])
//          } else {
//            _this.professionData.detail.push(item)
//          }
//        }
//      },
//      chooseProfessionDetail: function (detail) {
//        this.currentProfession.detail = detail
//        this.currentProfession.thirdDetail = ''
//        this.professionData.thirdDetail = []
//        if (typeof this.tempProfession[this.currentProfession.profession][detail] !== 'object') {
//          this.data.profession = detail
//          this.showProfessionBox = false
//        } else {
//          this.professionData.thirdDetail = this.tempProfession[this.currentProfession.profession][detail]
//        }
//      },
//      chooseProfessionThirdDetail: function (thirdDetail) {
//        this.currentProfession.thirdDetail = thirdDetail
//        this.data.profession = thirdDetail
//        this.showProfessionBox = false
//      },
//      tagCheck: function () {
//        if (this.tag.length > 10) {
//          this.tag = this.tag.substring(0, 10)
//        }
//      },
//      addTags: function () {
//        let flag = true
//        let _this = this
//        if (!this.tag || this.tag === '') {
//          flag = false
//        } else {
//          this.data.tagsData.forEach(function (item) {
//            if (item === _this.tag) {
//              flag = false
//            }
//          })
//        }
//        if (flag) {
//          this.data.tagsData.push(this.tag)
//          this.tag = ''
//        } else {
//          this.tag = ''
//        }
//      },
//      removeTag: function (index) {
//        this.data.tagsData.splice(index, 1)
//      },
      onDetailAddressInput: function () {
        this.address.detail = this.address.detail.trim()
      }
    },
    components: {
      RemindBox
    }
  }
</script>

<style scoped lang="scss">
  .BangdingPageAlert {
    position: absolute;
    background: #fff;
    width: 95%;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 2.4rem;
    border-radius: 5px;
    font-size: 0.28rem;
    top: 50%;
    margin-top: -1.2rem;
  }
  .BangdingPageAlert .BangdingPageAlertTitle {
    margin: 0.4rem;
    line-height: 0.4rem
  }
  .BangdingPageAlert .BangdingPageAlertTitle span {
    color: #3f84f6;
  }
  .BangdingPageAlert .BangdingPageAlertBtn {
    border-top: 1px solid #d3d3d3;
  }
  .BangdingPageAlert .BangdingPageAlertBtn span {
    font-size: 0.32rem;
    color: #999;
    text-align: center;
    width: 50%;
    line-height: 0.74rem;
    height: 0.74rem;
    display: inline-block;
  }
  .BangdingPageAlert .BangdingPageAlertBtn span:nth-child(1) {
    border-right: 1px solid #d3d3d3;
  }
  .BangdingPageAlert .BangdingPageAlertBtn span:nth-child(2) {
    color: #3f84f6;
  }
  .mobile-register {
    border: 1px solid #d3d3d3;
    margin: 0.2rem 0.2rem;
    border-radius: 5px;
    background: #fff;
    padding-bottom: 0.3rem;
  }
  .mobile-register input[type="file"] {
    display: block;
  }
  .wrap-title {
    color: #333;
    font-size: 0.28rem;
    border-bottom: 1px solid #d3d3d3;
    height: 0.5rem;
    text-align: left;
    padding: 0 0 0.1rem 0.05rem;
    margin: 0.17rem 0.25rem 0.13rem 0.25rem;
    line-height: 0.5rem;
    .line{
      width: 0.05rem;
      background: #3f84f6;
      display: inline-block;
      vertical-align: top;
      margin-right: 0.08rem;
      height: 0.28rem;
      margin-top: 0.09rem;
    }
  }
  .mobile-x-required {
    font-size: 0.28rem;
    color: #226ce7;
  }
  .mobile-x-input-kuang {
    margin-bottom: 0.15rem;
    position: relative;
    input {
      font-size: 0.24rem;
      padding-right: 0.5rem;
    }
    .mobile-x-text-help {
      position: absolute;
      right: 0.5rem;
      top: 0.2rem;
    }
  }
  .mobile-x-text-info {
    color: red;
    font-size:0.24rem;
  }
  .mobile-fa-map-marker {
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
  }
  .mobile-fiexd-modal {
    .dropdown-menu{
      width: 100%;
      top: auto;
      bottom: 0.98rem;
      padding: 0;
      border-radius: 0;
      border: 0;
      overflow-y: auto;
      max-height: 10rem;
      padding-bottom: 0.4rem;
      .mobile-x-union-header {
        font-size: 0.24rem;
        border-bottom: 1px solid #d3d3d3;
        line-height: 0.5rem;
      }
    }
  }
  .previewImg {
    max-height: 200px;
    max-width: 200px;
    margin-top: 5px;
  }
  .mobile-x-union-header>div,.mobile-x-union-list ul {
    float: left;
    width: 2.5rem;
    border-right: 0.01rem solid #e4ecf3;
  }
  .mobile-x-union-list ul {
    height: 7rem;
    margin: 0;
    overflow-y: auto;
    border-bottom: 1px solid #d3d3d3;
  }
  .mobile-x-union-menu .mobile-x-item-ext {
    .col-sm-12 {
      margin: 0px;
      padding: 0 10px;
    }
  }
  .mobile-x-item-ext2 {
    padding: 10px
  }
  .mobile-x-union-list ul:last-child, .mobile-x-union-header>div:last-child {
    border-right-width: 0
  }
  .mobile-x-union-header>div,.mobile-x-union-list>ul>li {
    white-space: nowrap;
    padding: 2px 5px;
    cursor: pointer;
  }
  .mobile-x-union-list>ul>li:hover,.mobile-x-union-list>ul>li.active {
    background: #fee9c7;
  }
  .mobile-x-input {
    border-color: #ccc;
    border-radius: 0;
    box-shadow: none;
  }
  textarea.form-control {
    height: auto;
  }
  .text-right {
    text-align: right;
  }
  .register-btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
  }
  .btn-submit {
    background: #5078cb;
    color: #fff;
  }
  .btn-console {
    border: 1px solid #ccc;
    background: #fff;
    color: #888;
    margin-left: 5px;
    transition: all .2s ease-in-out;
  }
  .btn-console:hover {
    border: 1px solid #adadad;
    background: #e6e6e6;
    color: #333;
  }
  .mobile-x-text-help {
    color: green;
  }
  .mobile-register .row .upload-area   {
    width: 130px;
    height: 130px;
    left: 15px;
    padding: 0;
    z-index: 100;
  }
  .error-box-border {
    border-color: #f4645f!important;
  }
  .x-btn-blank:hover, .x-btn-blank[disabled] {
    border: 1px solid #adadad;
    background: #e6e6e6;
    color: #333;
  }
  .mobile-register .row .auto-width {
    width: auto!important;
  }
  .select-dot input {
    background: url("/images/all/dot.png") no-repeat;
    background-position-x: 353px;
    background-position-y: 10px;
  }
  .mobile-register .row .logo-text {
    font-size: 12px;
    width: 180px;
    position: relative;
    top: 5px;
    left: 175px;
    text-align: center;
    color: #999;
    line-height: 20px;
  }
  .logo-img-area {
    width: 130px;
    height: 130px;
  }
  .logo-img-area .preview-logo-img {
    max-width: 130px;
    max-height: 130px;
  }
  .no-tags {
    float: left;
    padding: 2px 14px;
    line-height: 20px;
    border: #5078cb 1px solid;
    border-radius: 5px;
    font-size: 12px;
    margin: 0 3px;
    background: #5078cb;
    color: #fff;
    margin-top: 5px;
  }
  .mobile-register .row .add-tag-btn {
    position: absolute;
    right: 24px;
    color: #5078cb;
    font-size: 12px;
    cursor: pointer;
  }
  .mobile-register .row .tags-box {
    margin-top: 15px;
  }
  .mobile-register .row p {
    color: red;
  }
  .mobile-register .row .form-control:focus{
    border-color: #5078cb;
    box-shadow: none;
  }
  .x-input:focus, .x-input-blank:focus {
    border-color: #5078cb;
    box-shadow: none;
  }
  .mobile-register .row {
    margin: 0px;
    padding:0;
  }
  .mobile-register .row .tags-list ul{
    list-style: none;
  }
  .mobile-register .row .tags-list ul li {
    display: inline-block;
    padding: 2px 14px;
    line-height: 20px;
    border: #5078cb 1px solid;
    border-radius: 5px;
    font-size: 12px;
    color: #5078cb;
    margin: 0 3px;
  }
  .mobile-register .row .tags-list ul li i{
    font-size: 12px;
    color: red;
    position: relative;
    top: -3px;
    right: -12px;
  }
  .mobile-register .row .tags-lists {
    margin-top: 10px;
  }
  .mobile-register .row .tags-lists em {
    font-style: inherit;
    margin-left: 163px;
    font-size: 12px;
    color: #999;
  }
  .mobile-register .row .tags-lists span {
    float: left;
    padding: 2px 14px;
    line-height: 20px;
    border: #5078cb 1px solid;
    border-radius: 5px;
    font-size: 12px;
    color: #5078cb;
    margin: 0 3px;
  }
  .mobile-register .row .x-text-tip {
    color: #777;
    margin-top: 15px;
  }
  .mobile-register .row .x-text-tip i {
    margin-right: 5px;
  }
</style>