<template>
  <div class="main">
    <div class="video">
      <video autoplay loop muted class="login-video">
        <source src="@/assets/background.mp4" type="video/mp4">
      </video>
    </div>
    <div :class="{'registration-head':agreeRegister}">
      <img class="logo" src="@/assets/images/logo.png">
      <img class="righttop" src="@/assets/images/ico01.png">
    </div>
    <el-dialog title="注册" custom-class="registration" :modal="false" :visible.sync="agreeRegister" width="100vw" top="75px">
      <el-dialog title="请选择经营类型" :visible.sync="addTypeVisible" width="742px" custom-class="typeDialog" append-to-body top="30px" close-on-click-modal>
        <div class="title">
          <span>请选择经营类型</span>
          <el-input v-model="typeSearch" placeholder="请输入" @input="getTypeSearch()"></el-input>
          <div class="typeList" v-if="typeListShow && typeListSearch.length > 0">
            <template v-for="item in typeListSearch">
                <template v-for="itemChild in item.children">
                  <template v-for="itemChildThree in itemChild.children">
                    <div class="typeRows"  @click="getCatIdName(itemChildThree.name,itemChildThree.catId)">
                      <span class="typeTitle">{{itemChildThree.name}}</span>
                      <span class="typeParent">{{item.name}}>{{itemChild.name}}</span>
                    </div>
                  </template>
                </template>
            </template>
          </div>
        </div>
        <div class="content">
          <div class="content-rows" v-for="item in typeList">
            <span class="row-frist">{{item.name}}</span>
            <div class="row-second" v-if=" item.children">
              <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                <el-tab-pane  v-for="itemChild in item.children" :name="itemChild.name" >
                  <span slot="label">{{itemChild.name}}<i :class="activeName == itemChild.code ? 'el-icon-caret-bottom' : 'el-icon-caret-top' "></i></span>
                  <div class="row-three" v-if=" itemChild.children">
                    <ul>
                      <li v-for="itemChildThree in itemChild.children" @click="getCatIdName(itemChildThree.name)">
                      <el-radio v-model="ruleForm.catId" :label="itemChildThree.catId">{{itemChildThree.name}}</el-radio>
                      </li>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
        <div style="padding: 24px 16px 0 0; display: flex; justify-content: start; ">
          <!--<el-button @click="addTypeVisible = false">取 消</el-button>-->
          <el-button type="primary" style="margin-left: 16px;" :disabled="ruleForm.catId ? disabled : ''" @click="addTypeVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <div>
        <div class="header">
          <el-steps :active="registerType" simple>
            <el-step title="填写注册人信息"></el-step>
            <el-step title="填写企业信息"></el-step>
            <el-step title="等待审核"></el-step>
          </el-steps>
          <!--<div><p>填写注册人信息</p><i class="el-icon-arrow-right el-icon--right"></i></div>
        <div><p>填写企业信息</p><i class="el-icon-arrow-right el-icon--right"></i></div>
        <div><p>等待审核</p><i class="el-icon-arrow-right el-icon--right"></i></div>-->
        </div>
        <div class="content">
          <template v-if="registerType == 1">
            <el-form ref="form" :model="form" :rules="rule" label-width="auto">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
                <el-button type="text" class="send-email" @click="getPhoneCode" v-if="codeShow">发送验证码</el-button>
                <el-button type="text" class="send-email" v-else>重新发送({{phoneCodeTime}}s)</el-button>
              </el-form-item>
              <el-form-item label="手机验证码" prop="smsCode">
                <el-input v-model="form.smsCode" placeholder="请输入6位动态验证码"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系人姓名" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
              </el-form-item>
              <el-form-item label="设置密码" prop="password">
                <el-input type="password" v-model="form.password" placeholder="8-12字符"></el-input>
              </el-form-item>
              <el-form-item label=" 确认密码" prop="passwordCheck">
                <el-input type="password" v-model="form.passwordCheck" placeholder="请再次输入密码"></el-input>
              </el-form-item>
              <el-form-item label=" 邮箱" class="email-input" prop="email">
                <el-input v-model="form.email" placeholder="请输入常用邮箱"></el-input>
              </el-form-item>
            </el-form>
            <div class="line-box"></div>
            <el-button type="primary" class="checkBtn" @click="userInfo('form')">下一步</el-button>
          </template>
          <template v-if="registerType == 2">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
              <el-form-item label="公司名称" prop="companyName" class="left-title">
                <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
              </el-form-item>
              <el-form-item label="统一社会信用代码" prop="creditCode">
                <el-input v-model="ruleForm.creditCode" placeholder="请输入统一社会信用代码"></el-input>
              </el-form-item>
              <el-form-item label="法定代表人" prop="name" class="left-title more-left-title">
                <el-input v-model="ruleForm.name" placeholder="请输入法定代表人"></el-input>
              </el-form-item>
              <el-form-item label="注册资本" prop="registeredCapital">
                <el-input v-model="ruleForm.registeredCapital" placeholder="请输入注册资本"></el-input>
              </el-form-item>
              <el-form-item label="成立日期" prop="registeredDate" class="left-title">
                <el-date-picker v-model="ruleForm.registeredDate"
                                type="date"
                                placeholder="请输入成立日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="企业注册地" prop="registeredAddress">
                <el-select v-model="ruleForm.registeredAddress" placeholder="请选择企业注册地">
                  <el-option v-for="item in filePlaceCodeList" :label="item.label" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="办公地址" prop="addressDetail" class="left-title">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" placeholder="请输入办公地址" v-model="ruleForm.addressDetail" style="width: 670px;"></el-input>
              </el-form-item>
              <el-form-item label="企业简介" prop="briefing" class="left-title">
                <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="请输入企业简介" v-model="ruleForm.briefing" style="width: 670px;"></el-input>
              </el-form-item>
              <el-form-item label="营业执照扫描件" prop="licenseUrl" class="upload-image" style="margin-bottom: 34px;">
                <el-upload ref="upload"
                           :data="ruleForm"
                           class="avatar-uploader"
                           action="http://localhost:8866/test/file/uploadFile"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess"
                           :on-change='changeUpload'
                           :before-upload='beforeAvatarUpload'>

                  <!--<el-upload ref="upload"
      :auto-upload="false"
      :data="ruleForm"
      class="avatar-uploader"
      action="uploadFile"
       :show-file-list="false"
       :on-success="handleAvatarSuccess"
       :before-upload="beforeAvatarUpload">-->

                  <img v-if="ruleForm.licenseUrl" :src="ruleForm.licenseUrl" class="avatar" style=" height: 100%;">
                  <div v-else>
                    <img src="@/assets/images/upload.png" />
                    <p>请上传营业执照扫描件</p>
                  </div>
                  <div slot="tip" class="el-upload__tip">文件大小在5MB以内，支持pnh\jpg\jif格式</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="法人代表身份证扫描件" prop="cardUrl" class="upload-image" style="width: 375px; margin-bottom: 34px;">
                <el-upload ref="upload"
                           :data="ruleForm"
                           class="avatar-uploader"
                           action="http://localhost:8866/test/file/uploadFile"
                           :show-file-list="false"
                           :on-success="cardHandleAvatarSuccess"
                           :on-change='cardChangeUpload'
                           :before-upload='beforeAvatarUpload'>

                  <!--<el-upload ref="upload"
  :auto-upload="false"
  :data="ruleForm"
  class="avatar-uploader"
                action="http://localhost:8866/test/file/uploadFile"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">-->

                  <img v-if="ruleForm.cardUrl" :src="ruleForm.cardUrl" class="avatar" style=" height: 100%;">
                  <div v-else>
                    <img src="@/assets/images/upload.png" />
                    <p>请上传法人代表身份证扫描件</p>
                  </div>
                  <div slot="tip" class="el-upload__tip">文件大小在5MB以内，支持pnh\jpg\jif格式</div>
                </el-upload>
              </el-form-item>


              <div class="form-title">供应类型</div>
              <el-form-item label="供应类型选择" prop="catId" style=" margin-bottom: 0;" class="more-left-title more-content-left-title">
                <div @click="addTypeVisible = true" style="position: absolute; width: 240px; height: 40px; z-index: 999; "></div>
                <el-input v-model="catIdName" placeholder="请选择供应类型选择" :disabled="true"></el-input>
              </el-form-item>
              <div class="form-title">合作承诺函</div>
              <el-form-item label="合作承诺函" prop="fileUrl" style=" margin-bottom: 0;" class="more-left-title more-content-left-title">
                <el-upload ref="upload"
                           :data="ruleForm"
                           class="avatar-uploader"
                           action="http://localhost:8866/test/file/uploadFile"
                           :show-file-list="false"
                           :on-success="hezuoHandleAvatarSuccess"
                           :on-change='hezuoChangeUpload'
                           :before-upload='beforeAvatarUploadWord'
                           style="width: 66px; float: left;">
                  <el-input v-model="ruleForm.fileUrl"  :disabled="true" style="opacity: 0; position: absolute; height: 0;"></el-input>
                  <div plain style=" width: 66px; height: 32px; border-radius: 4px 4px 4px 4px; line-height: 32px; opacity: 1; border: 1px solid #0081FF; color: #0081FF;">
                    <i class="el-icon-upload2"></i>上传
                  </div>
                </el-upload>
                <!--<el-link type="primary" href="../assets/aaa.docx" target="_blank" style="margin-left: 32px; float: left;">下载模板</el-link>-->
                <el-button type="text" style="margin-left: 32px; float: left;" @click='downloadFile()'>下载模板</el-button>
              </el-form-item>


            </el-form>

            <!--<div class="line-box"></div>
            <div class="form-title">供应类型</div>
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="company-detail">
            </el-form>
            <div class="line-box"></div>
            <div class="form-title">合作承诺函</div>
            <el-form ref="ruleForm" :model="ruleForm.fileUrl" :rules="rules" label-width="auto" class="company-detail">
            </el-form>-->
            <!--<div class="line-box"></div>-->


            <el-button type="primary" class="checkBtn" @click="register('ruleForm')">提交审核</el-button>
            <div class="agreement">提交即表示已阅读并同意 <el-button type="text" style=" padding: 0;">《服务协议》</el-button>和<el-button type="text" style="margin-left: 0; padding: 0;">《隐私协议》</el-button></div>
          </template>
          <template v-if="registerType == 3">
            <div class="register-results">
              <img src="@/assets/images/successbg.png" />
              <p>供应商入驻提交成功</p>
              <span>您的认证申请已成功提交，审核结果将会在24小时内短信通知，请耐心等待。</span>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>


      <footers />
  </div>
</template>

<script>
  import footers from '@/components/foots'
  import { checkUser, getCategoryList, validateSmsCode, uploadFile, register } from '@/api/login.js'
  import jsk_data from '@/utils/jsk.json';

  export default {
    components: { footers },
    data() {
      return {
        agreeRegister: true,
        addTypeVisible: false,
        registerType: 1,
        form: {
          phone: "",
          smsCode: "",
          sex: '',
          userName: "",
          password: "",
          passwordCheck: "",
          email: "",
        },
        rule: {
          phone: [
            { required: true, message: '请输入手机号', trigger: 'change' }
          ],
          smsCode: [
            { required: true, message: '请输入短信验证码', trigger: 'change' }
          ],
          sex: [
            { required: true, message: '请输入性别', trigger: 'change' }
          ],
          userName: [
            { required: true, message: '请输入联系人姓名', trigger: 'change' }
          ],
          password: [
            { required: true, message: '请输入设置密码', trigger: 'change' },
            { min: 8, max: 12, message: '密码长度必须在8到12个字符之间', trigger: 'blur' }
          ],
          passwordCheck: [
            { required: true, message: '请输入确认密码', trigger: 'change' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'change' },
            { type: 'email',  message: '请输入正确的邮箱格式', trigger: 'change' }
          ],
        },
        ruleForm: {
          companyName: "",
          creditCode: "",
          name: "",
          registeredDate: "",
          registeredCapital: "",
          registeredAddress: "",
          addressDetail: "",
          briefing: "",
          licenseUrl: '',
          catId:'',
          cardUrl: ''
        },
        rules: {
          companyName: [
            { required: true, message: '请输入公司名称', trigger: 'change' }
          ],
          creditCode: [
            { required: true, message: '请输入统一社会信用代码', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入法定代表人', trigger: 'change' }
          ],
          registeredDate: [
            { required: true, message: '请输入成立日期', trigger: 'change' }
          ],
          registeredCapital: [
            { required: true, message: '请输入注册资本', trigger: 'change' }
          ],
          registeredAddress: [
            { required: true, message: '请选择企业注册地', trigger: 'change' }
          ],
          addressDetail: [
            { required: true, message: '请输入办公地址', trigger: 'change' }
          ],
          briefing: [
            { required: true, message: '请输入企业简介', trigger: 'change' }
          ],
          catId: [
            { required: true, message: '请输入供应商类型', trigger: 'change' }
          ],
          licenseUrl: [
            { required: true, message: '请上传营业执照', trigger: 'change' }
          ],
          cardUrl: [
            { required: true, message: '请上传身份证', trigger: 'change' }
          ],
          fileUrl: [
            { required: true, message: '请上传合作承诺函', trigger: 'change' }
          ],
        },
        phoneCodeTime: 60,
        codeShow: true,
        timer: null,
        activeName: '',
        typeList: [],
        typeListSearch:[],
        catIdName: '',
        filePlaceCodeList: '',
        typeSearch: '',
        typeListShow:false
      };
    },
    computed: {
    },
    mounted() {
      this.getCategoryList()
      this.addressListfn()
    },
    watch: {
      type(val) {
        this.cleardata()
      }
    },
    methods: {
      //获取手机验证码
      getPhoneCode() {
        var phone = this.form.phone, reg = /^[a-zA-Z0-9_]{11,16}$/;
        if (phone == "") {
          this.$message({
            message: '请先输入手机号',
            type: 'warning'
          });
          return
        } else if (!reg.test(phone)) {
          this.$message({
            message: '手机号输入有误',
            type: 'warning'
          });
          return;
        }
        if (!this.timer) {
          this.codeShow = false;
          this.phoneCodeTime = 60
          this.timer = setInterval(() => {
            if (this.phoneCodeTime > 0 && this.phoneCodeTime <= 60) {
              this.phoneCodeTime--;
            } else {
              this.codeShow = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
        let param = {
          phone: this.form.phone,
          type:0
        }
        checkUser(param).then(res => {
          //if (res.code == 200) {

          //}
        })
      },
      //用户信息
      userInfo(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.form.password != this.form.passwordCheck) {
              this.$message({
                message: '两次密码输入不同',
                type: 'warning'
              });
              return false
            }
            let param = {phone:this.form.phone,code:this.form.smsCode}
            validateSmsCode(param).then(res => {
              if (res.code == 200) {
                //下一步
                this.registerType = 2
              } else {

                this.$message({
                  message: res.msg,
                  type: 'warning'
                });
                return false
              }
            })

          } else {
            return false;
          }
        });
      },
    //注册
      register(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            let param = { ...this.form, ...this.ruleForm };
            param.registeredDate = param.registeredDate.toLocaleString()
            console.log(param)
            register(param).then(res => {
              if (res.code == 200) {
            //注册成功
                this.registerType = 3
              }
            })
          } else {
            return false;
          }
        });

      },
      //获取全部类型
      getCategoryList() {
        let param = {
          name: ''
        }
      getCategoryList(param).then(res => {
        if (res.code == 200) {
          console.log(res)
          this.typeList = res.data
          this.activeName = res.data[0].children[0].name
          console.log(this.typeList)
        }
      })
      },

      //提交文件
      handleAvatarSuccess(res, file) {
        this.licenseUrl = res.url
      },
      changeUpload: function (file) {

        //console.log('file2', file)
        //console.log('file1', this.ruleForm)
        let fileName = file.name;
        let regex = /(.jpg|.jpeg)$/
        if (regex.test(fileName.toLowerCase())) {
          this.ruleForm.licenseUrl = URL.createObjectURL(file.raw)
        }
        //let formData = new FormData();
        //formData.append("file", file.raw);
        //uploadFile(formData).then(res => {
        //      if (res.code == 200) {
        //    //注册成功
        //        this.registerType = 3
        //      }
        //    })
      },
      cardHandleAvatarSuccess(res, file) {
        this.cardUrl = res.url
      },
      cardChangeUpload: function (file) {
        let fileName = file.name;
        let regex = /(.jpg|.jpeg)$/
        if (regex.test(fileName.toLowerCase())) {
          this.ruleForm.cardUrl = URL.createObjectURL(file.raw)
        }
      },
      hezuoHandleAvatarSuccess(res, file) {
        this.fileUrl = res.url
      },
      hezuoChangeUpload: function (file) {
        let fileName = file.name;
        let wordReg = /^.+(\.doc|\.docx)$/
        if (wordReg.test(fileName.toLowerCase())) {
          this.ruleForm.fileUrl = URL.createObjectURL(file.raw)
        }
      },
      beforeAvatarUpload(file) {
        //console.log('file3', file)
        //console.log('file1', this.ruleForm)
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        //console.log(isJPG)
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      beforeAvatarUploadWord(file) {
        console.log('file3', file)
        //console.log('file1', this.ruleForm)
        const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
        const isLt2M = file.size / 1024 / 1024 < 2;

        //console.log(isJPG)
        if (!isJPG) {
          this.$message.error('上传文件只能是doc或者docx格式!');
        }
        if (!isLt2M) {
          this.$message.error('上文件大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      handleClick(tab, event) {
        console.log(tab, event);
      },
      //下载模板
      downloadFile() {
        let word = "https://gys-file.oss-cn-chengdu.aliyuncs.com/file/image/2022-11-11/%E4%BE%9B%E5%BA%94%E5%95%86%E6%89%BF%E8%AF%BA%E4%B9%A61668165098059.docx?Expires=4821765098&OSSAccessKeyId=LTAI5t87xwSHQUZPgAGgRG5x&Signature=bUeY5CzXM29S72Lb5j4lxkEc%2Fj0%3D"
        window.open(word, '_blank')
      },
      //获取选中类型名称
      getCatIdName(val, catId='') {
        console.log(val)
        this.catIdName = val
        if (catId) {
          this.ruleForm.catId = catId
        }
      },
      //获取地区
      addressListfn() {
        var str = [];
        for (let x = 0; x < 3; x++) {
          for (let i = 0; i < jsk_data.length; i++) {
            if (jsk_data[i].regionLevel == (x + 1) && (x + 1) == 1) {
              str.push({
                'id': jsk_data[i].id,
                "label": jsk_data[i].regionName,
                "short": jsk_data[i].short,
                "value": jsk_data[i].parentId,
                "children": []
              })
            } else if (jsk_data[i].regionLevel == (x + 1) && (x + 1) == 2) {
              for (let j = 0; j < str.length; j++) {
                if (str[j].id == jsk_data[i].parentId) {
                  str[j].children.push({
                    'id': jsk_data[i].id,
                    "label": jsk_data[i].regionName,
                    "short": jsk_data[i].short,
                    "value": jsk_data[i].parentId,
                    "children": []
                  })
                }
              }
            } else if (jsk_data[i].regionLevel == (x + 1) && (x + 1) == 3) {
              for (let j = 0; j < str.length; j++) {

                for (let k = 0; k < str[j].children.length; k++) {

                  if (str[j].children[k].id == jsk_data[i].parentId) {
                    // console.log(JSON.stringify(str));
                    str[j].children[k].children.push({
                      'id': jsk_data[i].id,
                      "label": jsk_data[i].regionName,
                      "short": jsk_data[i].short,
                      "value": jsk_data[i].parentId,
                      // "children":[]
                    })

                  }

                }

              }
            }
          }
        }
        //this.addressList = str;
        this.filePlaceCodeList = str;
        // console.log(JSON.stringify(str));
      },
      //获取搜索类型
      getTypeSearch() {
        let param = {
          name: this.typeSearch
        }
        getCategoryList(param).then(res => {
          if (res.code == 200) {
            this.typeListShow = true
            this.typeListSearch = res.data
          }
            
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .main {
    position: relative;
    height: 100%;
    width: 100%;
    .loginbox{
      margin-bottom: 24px;
      .logionhead {
        border-bottom: 1px solid #F0F0F0;
        text-align: center;
        margin-bottom: 32px;
        .title {
          font-size: 18px;
          color: #666;
          display: inline-block;
          margin: 0 20px;
          padding-bottom: 18px;
          cursor: pointer;
        }
        .title.on {
          color: #0081FF;
          position: relative;
        }
        .title.on::after {
          content: ' ';
          width: 42px;
          height: 3px;
          background: #0081FF;
          border-radius: 1px 1px 1px 1px;
          position: absolute;
          bottom: 0;
          margin-left: -21px;
          left: 50%;
        }
      }
    }
    .loginzc{
      font-size: 12px;
      margin-top: 24px;
      display: flex;
      justify-content: space-between;
      padding: 0 52px 32px;
      >p{
        line-height: 20px;
        color: #999999;
        cursor: pointer;
        >span{
          cursor: pointer;
          color: #0081ff;
        }
      }
    }
    .registration-head {
      position: absolute;
      width: 100vw;
      height: 75px;
      background: #FFFFFF;
    }

    .login-video {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;

      source {
        width: 100%;
        height: 100%;
      }
    }

    .bot {
      position: fixed;
      bottom: 0;
      left: 0;
    }

    .logo {
      position: absolute;
      left: 16px;
      top: 16px;
    }

    .righttop {
      position: absolute;
      right: 16px;
      top: 17px;
      z-index: 1;
    }

    .login {
      width: 426px;
      /*height: 451px;*/
      background: #FFFFFF;
      border-radius: 8px;
      opacity: 1;
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      right: 61px;
      .logintop {
        position: absolute;
        left: 12px;
        top: 12px;
      }

      > h3 {
        font-size: 24px;
        font-weight: bold;
        color: #0081FF;
        text-align: center;
        margin-top: 60px;
        margin-bottom: 40px;
        line-height: 17px;
      }

      .inputs {
        margin-bottom: 24px;
        padding: 0 43px;

        ::v-deep .el-input__inner {
          width: 100%;
          height: 48px;
          border-radius: 8px;
          border: 1px solid #E3E3E3;
          text-indent: 16px;
          outline: none;
          font-size: 14px;
          padding: 0;
        }

        .hqyzm {
          position: relative;
          ::v-deep .el-input-group__append {
            cursor: pointer;
            width: 102px;
            padding: 0;
            display: block;
            position: absolute;
            top: 12px;
            right: 0;
            background: 0;
            border: 0;
            line-height: 24px;
            text-align: center;
            color: #0081ff;
            font-size: 14px;
            border-left: 1px solid #D8D8D8;
          }
        }
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
          color: #9E9E9E;
        }

        .small {
          width: 191px;
        }

        .login-code {
          float: right;
          width: 131px;
          height: 46px;
          background: #FFFFFF;
          border-radius: 8px;
          border: 1px solid #F1F1F1;
        }
      }

      .loginin {
        width: 340px;
        height: 48px;
        background: #0081FF;
        border-radius: 4px;
        margin: 0 auto;
        line-height: 48px;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
      }

      .loginbot {
        position: absolute;
        bottom: 32px;
        left: 169px;
      }
    }
  }
  /*注册样式*/
  ::v-deep .el-dialog.registration {
    height: calc(100% - 132px);
    overflow-y: auto;
    overflow-x: hidden;


    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      padding: 30px 0;

      .header {
        display: flex;
        justify-content: center;

        .el-steps {
          padding: 0;
          background: #FFFFFF;
          margin-left: -8px;

          .el-step__title {
            width: 226px;
            max-width: 226px;
            padding: 8px 0 8px 16px;
            background: #F2F2F2;
            height: 18px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            line-height: 18px;
          }

          .el-step__title.is-finish {
            font-weight: bold;
            color: #FFFFFF;
            background: #0081FF;
          }

          .el-step__title::before, .el-step__title::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            width: 0;
            height: 0;
          }

          .el-step__title::before {
            left: 0;
            border-top: 17px solid transparent;
            border-left: 8px solid #FFFFFF;
            border-bottom: 17px solid transparent;
            z-index: 9;
          }


          .el-step__title::after {
            right: -8px;
            border-top: 17px solid transparent;
            border-left: 8px solid #F2F2F2;
            border-bottom: 17px solid transparent;
          }

          .el-step__title.is-finish::after {
            right: -8px;
            border-top: 17px solid transparent;
            border-left: 8px solid #0081FF;
            border-bottom: 17px solid transparent;
          }

          .el-step:first-child .el-step__title::before, .el-step:last-child .el-step__title::after {
            display: none;
          }

          .el-step.is-simple {
            .el-step__arrow {
              display: none;
            }
          }

          .el-step__icon.is-text {
            display: none;
          }
        }
      }

      .content {
        .el-form {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          width: 750px;
          margin: 24px auto;

          .el-form-item {
            margin-bottom: 16px;

            .send-email {
              position: absolute;
              right: 16px;
              padding: 0;
              padding-left: 16px;
              border-left: 1px solid #D8D8D8;
              margin: 12px 0;
            }
          }

          .el-input {
            width: 260px;

            input {
              height: 34px;
            }
          }

          .is-disabled .el-input__inner {
            background-color: #FFF !important;
            color: #606266;
          }

          .email-input .el-input {
            width: 668px;
          }
        }

        .form-title {
          width: 750px;
          height: 24px;
          font-size: 14px;
          font-weight: bold;
          color: #333333;
          line-height: 24px;
          margin: 24px auto;
        }

        .line-box {
          position: relative;
          width: 100vw;
          height: 1px;
          background: #EEEEEE;
        }

        .checkBtn {
          display: block;
          width: 178px;
          padding: 9px 20px;
          margin: 24px auto;
        }

        .agreement {
          width: 345px;
          height: 18px;
          font-size: 14px;
          color: #9E9E9E;
          line-height: 18px;
          margin: auto;
        }

        .company-detail {

          .el-input {
            width: 240px;
          }

          .upload-image {
            display: flex;
            flex-wrap: wrap;
            width: 300px;

            .el-form-item__label-wrap {
              margin-left: 0 !important;
            }

            .el-form-item__content {
              width: 287px;
              height: 176px;
              background: #F4F4F4;
              border-radius: 8px 8px 8px 8px;
              opacity: 1;
              border: 1px solid #DCDCDC;
              margin-left: 0 !important;

              .avatar-uploader {
                height: 100%;

                .el-upload {
                  width: 100%;
                  height: 100%;

                  div {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    margin-top: 46px;
                  }

                  img {
                    width: 56px;
                  }

                  p {
                    margin: 16px;
                    width: 100%;
                    height: 18px;
                    font-size: 14px;
                    color: #999999;
                    line-height: 18px;
                  }
                }

                .el-upload__tip {
                  height: 18px;
                  font-size: 14px;
                  color: #9E9E9E;
                  line-height: 18px;
                  margin-left: 7px;
                  margin-top: 16px;
                }
              }
            }
          }

          .left-title {
            .el-form-item__label-wrap {
              margin-left: 0 !important;
            }

            .el-form-item__content {
              margin-left: 79px !important;
            }
          }

          .more-left-title {
            .el-form-item__label-wrap {
              margin-left: -14px !important;
            }
          }

          .more-content-left-title {
            .el-form-item__content {
              margin-left: 100px !important;
            }
          }
        }

        .register-results {
          width: 480px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          margin: 96px auto;

          img {
            width: 130px;
            height: 108px;
          }

          p {
            width: 100%;
            height: 21px;
            font-size: 16px;
            font-weight: bold;
            color: #333333;
            line-height: 21px;
            text-align: center;
            margin: 32px 0 24px;
          }

          span {
            height: 18px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            line-height: 18px;
          }
        }
      }
    }
  }
  ::v-deep .el-dialog.registration-policy {
    .el-dialog__body {
      height: 567px;
      overflow-y: auto;
      padding: 16px 16px 3px;
      margin: 10px 16px 0;
      background: #F9F9F9;
    }

    .el-dialog__footer {
      text-align: left;

      .el-button {
        padding: 9px 20px;
      }
    }
  }
  ::v-deep .el-dialog.typeDialog {
    ul {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none
    }

    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      padding: 16px 0;

      .title {
        padding: 0 0 16px 24px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #EEEEEE;

        span {
          height: 20px;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
        }

        .el-input {
          width: 212px;
          margin-left: 18px;

          input {
            height: 34px;
          }
        }

        .typeList {
          position: absolute;
          top: 49px;
          left: 140px;
          background: #ffffff;
          border: 1px solid #eeeeee;
          /*padding: 0 16px;*/
          width: 212px;
          box-sizing: border-box;
          z-index: 9;
          height: 200px;
          overflow-y: auto;


          .typeRows {
            padding: 4px 16px;
            border-bottom: 1px solid #eeeeee;
            display: flex;
            flex-wrap: wrap;
            cursor: pointer;


            span {
              width: 100%;
            }
            /*
            span:first-child {
              margin-bottom: 2px;
            }*/

            span:last-child {
              color: #C0C4CC;
            }
          }

          .typeRows:hover {
            background: #eeeeee;
          }
        }
      }

      .content {
        padding: 0 24px;
        height: 500px;
        overflow-y: auto;

        .content-rows {
          .row-frist {
            height: 20px;
            font-size: 16px;
            font-weight: bold;
            color: #333333;
            line-height: 20px;
            display: block;
            margin-top: 24px;
          }
          /*  el-icon-caret-bottom*/
          .row-second {
            .el-tabs__active-bar {
              display: none;
            }

            .el-tabs__header {
              border: 0;
              margin: 24px 0 16px 0;
            }

            .el-tabs__nav {
              border: 0;
            }

            .el-tabs__item {
              padding: 0 16px 0 0;
              border: 0;
              height: 20px;
              font-size: 14px;
              line-height: 20px;

              .el-icon-caret-top, .el-icon-caret-bottom {
                margin-left: 11px;
              }
            }

            ul {
              padding: 24px 0 16px 0;
              display: flex;
              flex-wrap: wrap;
            }
          }

          .row-three {
            width: 694px;
            max-height: 268px;
            background: #FDFDFD;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #F3F3F3;
            overflow-y: auto;
            padding-bottom: 16px;

            ul {
              padding: 0;

              li {
                padding: 16px 0 0 16px;

                .el-radio__input {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
