先来上图，看一下最终效果图

公司的一个新项目，需要用到图形验证码进行判断。

第一步：需要把identify放到所需要的组件里面，把下面的代码塞进去即可。

<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
<script>
  export default {
    name: 'SIdentify',
    props: {
      identifyCode: {
        type: String,
        default: '1234'
      },
      fontSizeMin: {
        type: Number,
        default: 16
      },
      fontSizeMax: {
        type: Number,
        default: 40
      },
      backgroundColorMin: {
        type: Number,
        default: 180
      },
      backgroundColorMax: {
        type: Number,
        default: 240
      },
      colorMin: {
        type: Number,
        default: 50
      },
      colorMax: {
        type: Number,
        default: 160
      },
      lineColorMin: {
        type: Number,
        default: 40
      },
      lineColorMax: {
        type: Number,
        default: 180
      },
      dotColorMin: {
        type: Number,
        default: 0
      },
      dotColorMax: {
        type: Number,
        default: 255
      },
      contentWidth: {
        type: Number,
        default: 111
      },
      contentHeight: {
        type: Number,
        default: 38
      }
    },
    methods: {
      // 生成一个随机数
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 生成一个随机的颜色
      randomColor(min, max) {
        let r = this.randomNum(min, max)
        let g = this.randomNum(min, max)
        let b = this.randomNum(min, max)
        return 'rgb(' + r + ',' + g + ',' + b + ')'
      },
      drawPic() {
        let canvas = document.getElementById('s-canvas')
        let ctx = canvas.getContext('2d')
        ctx.textBaseline = 'bottom'
        // 绘制背景
        ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
        ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
        // 绘制文字
        for (let i = 0; i < this.identifyCode.length; i++) {
          this.drawText(ctx, this.identifyCode[i], i)
        }
        this.drawLine(ctx)
        this.drawDot(ctx)
      },
      drawText(ctx, txt, i) {
        ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
        ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
        let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
        let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
        var deg = this.randomNum(-45, 45)
        // 修改坐标原点和旋转角度
        ctx.translate(x, y)
        ctx.rotate(deg * Math.PI / 180)
        ctx.fillText(txt, 0, 0)
        // 恢复坐标原点和旋转角度
        ctx.rotate(-deg * Math.PI / 180)
        ctx.translate(-x, -y)
      },
      drawLine(ctx) {
        // 绘制干扰线
        for (let i = 0; i < 8; i++) {
          ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
          ctx.beginPath()
          ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
          ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
          ctx.stroke()
        }
      },
      drawDot(ctx) {
        // 绘制干扰点
        for (let i = 0; i < 100; i++) {
          ctx.fillStyle = this.randomColor(0, 255)
          ctx.beginPath()
          ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
          ctx.fill()
        }
      }
    },
    watch: {
      identifyCode() {
        this.drawPic()
      }
    },
    mounted() {
      this.drawPic()
    }
  }
</script>
<style lang="less" scoped>
  .s-canvas {
    height: 38px;
    canvas{
      margin-top: 5px;
    }
  }
</style>

第二步：就是在需要的页面里面，把组件引进去：例如下图：

在代码处，红色区域圈住的，便是需要与图形验证码，相关的代码。下面是代码：

<template>
  <div v-if="showa" class="login">
     <div class="log">
       <img src="../assets/home/x.png" class="s_z" @click="delLog"/>
<!--       登录-->
       <div v-if="log == '1'" class="dLog">
         <div class="log_a">
            <div @click="log='1'">登录</div>
            <div>|</div>
            <div @click="log='2'">注册</div>
         </div>
         <div style="margin-top: -5px">
            <img src="../assets/home/yh.png"/>
            <input v-model="dphone" type="text" placeholder="手机号/邮箱/用户名"/>
         </div>
         <div style="margin-top: 14px">
           <img src="../assets/home/mim.png"/>
           <input v-model="dpass" type="password" placeholder="输入密码"/>
         </div>
         <div class="w_wj">
           <div>
             <img style="cursor: pointer;" @click="cosMo" :src="imgShow ? require(`@/assets/home/g_n.png`) : require(`@/assets/home/g_s.png`)"/>
             <span>记住密码</span>
           </div>
           <div style="cursor: pointer;" @click="delPass">
             忘记密码？
           </div>
         </div>
         <div v-if="!passState" class="w_sp">您可以使用瑞购网或Readlink网站账号登录学术宝</div>
         <div v-if="passState" class="w_sp" style="color: #FC3434;">{{passFial}}</div>
         <div :style="{background:dbutt?'#1485ee':'#b9c5d1'}" @click="dLog()" class="w_spa">登录</div>
       </div>
<!--       注册-->
       <div v-if="log == '2'"  class="register">
         <div class="log_a"  v-if="zState != '4'">
           <div @click="log='1'">登录</div>
           <div>|</div>
           <div @click="log='2'">注册</div>
         </div>
         <div class="z_a"  v-if="zState != '3' && zState != '4'">
           <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <img src="../assets/home/yh.png"/>
                {{zText}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="a">手机注册</el-dropdown-item>
               <el-dropdown-item command="b">邮箱注册</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
<!--         手机号注册-->
         <div class="z_sho" v-if="zState == '1'">
           <div>
             <img src="../assets/home/yh.png"/>
             <input v-model="zdphone" type="text" placeholder="请输入手机号"/>
           </div>
           <div class="zs_yanz">
              <div>
                <input v-model="zYanz" placeholder="请输入验证码"/>
              </div>
             <div @click="zHuyz" :class="{'hQstate':hQstate}">
               {{hQtext}}
             </div>
           </div>
         </div>
         <div class="z_sho a_shou" v-if="zState == '3'">
            <div >
              <img src="../assets/home/mim.png"/>
              <input v-model="sPass" type="text" placeholder="设置密码"/>
            </div>
            <div>
              <img src="../assets/home/mim.png"/>
              <input v-model="sPassnew" type="text" placeholder="确认密码"/>
            </div>
          </div>
<!--         邮箱注册-->
         <div class="yxzi" v-if="zState == '2'">
           <div >
             <img src="../assets/home/youx.png"/>
             <input v-model="emYo" type="text" placeholder="请输入邮箱"/>
           </div>
           <div>
             <img src="../assets/home/mim.png"/>
             <input v-model="yPass" type="text" placeholder="设置密码"/>
           </div>
           <div>
             <img src="../assets/home/mim.png"/>
             <input v-model="yPassnew" type="text" placeholder="确认密码"/>
           </div>
         </div>
         <div v-if="zState == '4'" class="xisi">
           <img src="../assets/home/ct1.png"/>
           <div>确认邮件已发出</div>
           <div>请到您的注册邮箱完成注册</div>
         </div>
         <div class="z_bu">
            <div v-show="zState=='0'">
              <img  style="cursor: pointer;" @click="cosMoa" :src="imgShowa ? require(`@/assets/home/g_n.png`) : require(`@/assets/home/g_s.png`)"/>
              <span>同意</span>
              <span style="cursor: pointer;">《学术宝用户使用协议》</span>
            </div>
           <div v-if="zState=='3'" style="color: #2575c9;cursor: pointer;" @click="zState='1'">
             返回上一步
           </div>
           <div >

             <span style="display: block;" v-if="zState=='0'" @click="zhuZa">注册</span>
             <span style="display: block;" v-if="zState=='1'" @click="szDi">下一步</span>
             <span style="display: block;" v-if="zState=='2'" @click="yxiu">下一步</span>
             <span style="display: block;" v-if="zState=='3'" @click="szDizc">注册</span>
             <span style="display: block;" v-if="zState=='4'" @click="fhtd">返回登录</span>

             <!--             <span v-if="zState=='0'">注册</span>-->
           </div>
         </div>
       </div>
<!--     忘记密码-->
       <div v-if="log == '3'"  class="password">
         <div class="deza">
           <div>
             忘记密码
           </div>
           <div></div>
         </div>
         <div class="z_a" v-if="delk=='1' || delk=='3'">
           <el-dropdown @command="handleCommanda">
              <span class="el-dropdown-link">
                <img src="../assets/home/yh.png"/>
                {{azText}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="a">通过手机找回</el-dropdown-item>
               <el-dropdown-item command="b">通过邮箱找回</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
         <div class="z_sho" v-if="delk=='1'">
           <div>
             <img src="../assets/home/phone.png"/>
             <input v-model="delPhone" type="text" placeholder="请输入手机号"/>
           </div>
           <div class="zs_yanz">
             <div>
               <input v-model="azYanz" placeholder="请输入验证码"/>
             </div>
             <div style="border: none;" @click="refreshCode" >
               <s-Identify :identifyCode="identifyCode"></s-Identify>
             </div>
           </div>
         </div>
         <div class="yxzi" v-if="delk=='2'||delk=='4'">
           <div class="qian">
             <input v-model="sYxi" type="text" placeholder="收到的验证信息"/>
             <div>{{polo}}</div>
           </div>
           <div>
             <img src="../assets/home/mim.png"/>
             <input v-model="dPass" type="text" placeholder="设置密码"/>
           </div>
           <div>
             <img src="../assets/home/mim.png"/>
             <input v-model="dPassnew" type="text" placeholder="确认密码"/>
           </div>
         </div>

         <div class="z_sho" v-if="delk=='3'">
           <div>
             <img src="../assets/home/yh.png"/>
             <input v-model="yxdid" type="text" placeholder="请输入邮箱地址"/>
           </div>
           <div class="zs_yanz">
             <div>
               <input v-model="azYanz" placeholder="请输入验证码"/>
             </div>
             <div style="border: none;" @click="refreshCode" >
               <s-Identify :identifyCode="identifyCode"></s-Identify>
             </div>
           </div>
         </div>
         <div class="qik"  @click="fhtd">返回登录</div>
         <div class="qika" v-if="delk == '1'" @click="xiy">下一步</div>
         <div class="qika" v-if="delk == '2'" @click="xiyNew">确认</div>
         <div class="qika" v-if="delk == '3'" @click="yxid">下一步</div>
         <div class="qika" v-if="delk == '4'" @click="yxyNew">确认</div>

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

<script>
  import store from '@/store/index.js'
  import SIdentify  from '@/components/identify'
export default {
  name: 'HelloWorld',
  data () {
    const validateCode = (rule, value, callback) => {
      if (this.identifyCode !== value) {
        this.loginForm.code = ''
        this.refreshCode()
        callback(new Error('请输入正确的验证码'))
      } else {
        callback()
      }
    }
    return {
      yxdid:'',//忘记密码 邮箱地址
      sYxi:'',//收到的验证信息
      polo:"剩余60s",
      dPassnew:'',//忘记密码：设置新密码
      dPass:'',//忘记密码：设置新密码
      delk:"1",//1 忘记密码，展示页面   2忘记密码设置新密码页面
      identifyCodes: '1234567890',
      identifyCode: '',//找回密码图形验证码
      azYanz:'',//找回密码验证码
      delPhone:'',//找回密码手机号
      azText:'通过手机找回',//找回密码方式文案
      emYo:"",//用户注册输入的邮箱地址
      yPass:'',//邮箱注册确认密码
      yPassnew:'',//邮箱注册确认密码
      hQstate:false,//验证码的状态
      hQstatea:false,//验证码的状态
      hQtext:'获取验证码',//获取验证码
      zYanz:'',//注册验证码
      zdphone:'',//注册时 输入的手机号
      zState:'0',//用户注册状态判断 手机号 1  邮箱注册 2  手机号注册确认密码 3  邮箱发送界面 4   忘记密码  5
      imgShowa:true,//注册 同意学术宝用户协议勾选判断
      zText:'选择注册类型',//选择注册类型
      dbutt:false, //登录按钮颜色切换
      imgShow:false, //记住密码切换
      passFial:'登录出错',//登录出错提示文字
      passState:false,//登录出错状态
      dphone:'',//账号
      dpass:'',//密码
      log:'1',  //1登录 2注册 3忘记密码
      sPass:'',//手机注册确认密码
      sPassnew:'',//手机注册确认密码
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    's-Identify': SIdentify,
  },
  watch:{
    identifyCode(v) {
      this.isDebugLogin && (this.loginForm.code = v)
    },
    dphone(newvalue){
      const self = this
      if(newvalue){
        if(this.dpass) self.dbutt = true
      } else {
        self.dbutt = false
      }
    },
    dpass(newvalue){
      const self = this
      if(newvalue){
        if(this.dphone) self.dbutt = true
      } else {
        self.dbutt = false
      }
    },
  },
  computed:{
    showa(){
      return store.state.loginshow
    }
  },
  methods:{
    //邮箱确认，找回密码
    yxyNew(){
      if(!this.dPassnew) return this.$message("请输入密码")
      if(!this.dPass) return this.$message("请输入密码")
      if(this.dPassnew != this.dPass) return this.$message("密码不一致,请重新输入")
      console.log(this.yxdid)
      console.log(this.dPass)
      console.log(this.sYxi)
    },
    //忘记密码，邮箱找回下一步
    yxid(){
      const self = this
      if(!this.yxdid) return this.$message("请输入邮箱地址")
      if(!this.azYanz) return this.$message("请输入验证码")
      if(this.azYanz != this.identifyCode) this.refreshCode()
      if(this.azYanz != this.identifyCode) return this.$message("验证码不一致,请重新输入")
      console.log(this.yxdid)
      console.log(this.azYanz)
      this.delk = '4'
      if(!this.hQstate){
        self.hQstate = true
        self.polo = "剩余" + 10 + "s"
        let num = 10
        let timer =  setInterval(function () {
          if(num == 1){
            self.polo  = '输入验证码'
            self.hQstate = false
            clearInterval(timer)
            // self.delk = '1'
          }else {
            num--
            self.polo ="剩余" + num + 's'
          }
        },1000)
      }

    },
    //确认修改密码
    xiyNew(){
      if(!this.dPassnew) return this.$message("请输入密码")
      if(!this.dPass) return this.$message("请输入密码")
      if(this.dPassnew != this.dPass) return this.$message("密码不一致,请重新输入")
      console.log(this.sYxi)
      console.log(this.dPass)
      console.log(this.delPhone)
    },
    //手机找回密码 下一步
    xiy(){
      const self = this
      if(!this.delPhone) return this.$message("请输入手机号")
      if(!this.azYanz) return this.$message("请输入验证码")
      if(this.azYanz != this.identifyCode) this.refreshCode()
      if(this.azYanz != this.identifyCode) return this.$message("验证码不一致,请重新输入")
       console.log(this.delPhone)
       console.log(this.azYanz)
      this.delk = '2'
      if(!this.hQstatea){
        self.hQstatea = true
        self.polo = "剩余" + 10 + "s"
        let num = 10
        let timer =  setInterval(function () {
          if(num == 1){
            self.polo  = '输入验证码'
            self.hQstatea = false
            clearInterval(timer)
            // self.delk = '1'
          }else {
            num--
            self.polo ="剩余" + num + 's'
          }
        },1000)
      }

    },
    // 选择找回密码的方式
    handleCommanda(command) {
      const self = this
      //手机号注册
      if(command == "a"){
        console.log("通过手机找回")
        this.azText = "通过手机找回"
        this.delk = '1'
      } else {
        console.log("通过邮箱找回")
        this.azText = "通过邮箱找回"
        this.delk = '3'

      }
    },
    //忘记密码
    delPass(){
      this.log = '3';
    },
    //返回登录
    fhtd(){
      this.delk = '1'
      this.zState  = '0'
      this.log  = '1'
    },
    //邮箱注册下一步
    yxiu(){
      if(!this.emYo) return this.$message("请输入邮箱")
      if(!this.yPassnew) return this.$message("请确认密码是否一致")
      if(!this.yPass) return this.$message("请确认密码是否一致")
      if(this.yPassnew != this.yPass) return this.$message("请确认密码是否一致")
      this.zState  = '4'
    },
    //手机注册最后一步
    szDizc(){
      if(!this.sPassnew) return this.$message("请确认密码是否一致")
      if(!this.sPass) return this.$message("请确认密码是否一致")
      if(this.sPass != this.sPassnew) return this.$message("请确认密码是否一致")
      console.log(this.zdphone)
      console.log(this.sPassnew)
    },
    //手机注册第一步
    szDi(){
      if(!this.zdphone) return this.$message("请输入手机号")
      if(!this.zYanz) return this.$message("请输入验证码")
      this.zState  = '3'
    },
    //注册获取邀请码
    zHuyz(){
      const self = this
      if(!this.zdphone) return this.$message("请输入手机号")
      if(!this.hQstate){
        self.hQstate = true
        self.hQtext = 60 + "s"
       let num = 60
     let timer =  setInterval(function () {
        if(num == 1){
          self.hQtext  = '获取验证码'
          self.hQstate = false
          console.log(self.hQtext+'99999')
          clearInterval(timer)
        }else {
          num--
          self.hQtext = num + 's'
          console.log(self.hQtext)
        }
      },1000)
      }
    },
    //注册 第一步
    zhuZa(){
      if(this.zText == "选择注册类型") return  this.$message("请选择注册类型")
      if(this.imgShowa) return  this.$message("请确认是否查看用户协议")
      console.log("进来啦")
      this.zText == '手机注册' ? this.zState = '1' : this.zState = '2'
    },
    //注册 同意学术宝用户协议勾选判断
    cosMoa(){
      this.imgShowa = !this.imgShowa
    },
    //选择注册方式
    handleCommand(command) {
      const self = this
      //手机号注册
      if(command == "a"){
        self.zText = '手机注册'
        if(this.zState != '0'){
          this.zState = '1'
        }
      } else {
       //邮箱注册
        self.zText = '邮箱注册'
        if(this.zState != '0'){
          this.zState = '2'
        }
      }
    },
    //记住密码，忘记密码
    cosMo(){
      this.imgShow = !this.imgShow
      console.log(this.imgShow)
    },
    //点击登录
    dLog(){
      const self = this
      if(!self.dphone) {
        this.passState = true
        this.passFial = "请输入账号";
        return
      }
      if(!self.dpass){
        this.passState = true
        this.passFial = "请输入密码";
        return
      }
      this.passState = false
      if(!self.imgShow){
        localStorage.setItem("user",self.dphone)
        localStorage.setItem("password",self.dpass)
      }
      console.log(self.dphone+"密码："+self.dpass)
    },
    delLog(){
      this.delk = '1'
      this.zState = '0'
      this.log  = '1'
      store.commit("LOGINSHOW", false);
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
          ]
      }
    }
  },
  mounted() {
    const self = this
    self.dphone = localStorage.user
    self.dpass = localStorage.password
    self.identifyCode = "";
    self.makeCode(this.identifyCodes, 4);
  },
  created() {
    this.refreshCode()
  }
}
</script>

<style scoped lang="less">
  .qian{
    display: flex;
    justify-content: space-between !important;
    text-align: center;
    input{
      margin-left: 20px !important;
    }
    div{
      margin-right: 20px !important;
      font-size:16px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(37,117,201,1);
    }
  }
  .qik{
    font-size:16px;
    font-family:PingFang-SC-Medium,PingFang-SC;
  font-weight:500;
  color:rgba(37,117,201,1);
    position: absolute;
    top:335px;
    cursor: pointer;
    width: 100%;
  }
  .qika{
    cursor: pointer;
    position: absolute;
    top:368px;
    left: 29px;
    width:342px;
    height:42px;
    background:rgba(37,117,201,1);
    border-radius:6px;
    line-height: 42px;
    text-align: center;
    font-size:16px;
    font-family:PingFang-SC-Medium,PingFang-SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    margin: 0 auto;
  }
  .deza{
    width: 100%;
    margin: 0 auto;

    >div:nth-child(1){
      width: 342px;
      font-size:18px;
      margin: 0 auto;
      margin-top: 40px;
      margin-bottom: 10px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(37,117,201,1);
      text-align: center;
    }
    >div:nth-child(2){
      width:54px;
      height:2px;
      background:rgba(20,133,238,1);
      border-radius:1px;
      margin: 0 auto;
      margin-bottom: 21px;
      text-align: center;
    }
  }
  .xisi{
    width: 100%;
    text-align: center;
    font-size:16px;
    font-family:PingFang-SC-Regular,PingFang-SC;
    font-weight:400;
    color:rgba(136,136,136,1);
    div{
      margin-top: 10px;
    }
  }
  .hQstate{
    border: 1px solid #c1c1c1 !important;
    color: #000 !important;
  }
  .zs_yanz{
    width: 342px;
    margin: 0 auto;
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >div:nth-child(1){
      width:200px;
      height:50px;
      background:rgba(248,248,248,1);
      border-radius:8px;
      border:1px solid rgba(219,219,219,1);
      font-size:16px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(136,136,136,1);
      display: flex;
      align-items: center;
      input{
        border: 1px solid rgba(248,248,248,1);
        background:rgba(248,248,248,1);
        width:150px;
        padding-left: 15px;
      }
    }
    >div:nth-child(2){
      cursor: pointer;
      width:130px;
      height:50px;
      border-radius:8px;
      border:1px solid rgba(20,133,238,1);
      font-size:16px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(20,133,238,1);
      line-height: 50px;
      text-align: center;
    }
  }
  .yxzi{
    img{
      width: 30px;
      height: 28px;
      margin-left: 10px;
    }
    >div{
      input{
        border: 1px solid rgba(248,248,248,1);
        background:rgba(248,248,248,1);
      }
      display: flex;
      justify-content: left;
      align-items: center;
      width:342px;
      height:50px;
      background:rgba(248,248,248,1);
      border-radius:8px;
      border:1px solid rgba(219,219,219,1);
      font-size:16px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(136,136,136,1);
      margin: 0 auto;
      margin-top:10px;
    }
  }
  .a_shou{
    img{
      width: 30px;
      height: 28px;
      margin-left: 10px;
    }
    >div:nth-child(2){
      input{
        border: 1px solid rgba(248,248,248,1);
        background:rgba(248,248,248,1);
      }
      display: flex;
      justify-content: left;
      align-items: center;
      width:342px;
      height:50px;
      background:rgba(248,248,248,1);
      border-radius:8px;
      border:1px solid rgba(219,219,219,1);
      font-size:16px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(136,136,136,1);
      margin: 0 auto;
      margin-top: 14px;
    }
  }
  .z_sho{

    img{
      width: 30px;
      height: 28px;
      margin-left: 10px;
    }
    >div:nth-child(1){
      input{
        border: 1px solid rgba(248,248,248,1);
        background:rgba(248,248,248,1);
      }
      display: flex;
      justify-content: left;
      align-items: center;
      width:342px;
      height:50px;
      background:rgba(248,248,248,1);
      border-radius:8px;
      border:1px solid rgba(219,219,219,1);
      font-size:16px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(136,136,136,1);
      margin: 0 auto;
      margin-top: 14px;
    }
  }
  .z_bu{
    width: 100%;
    margin-top: 180px;
    font-family:PingFang-SC-Medium,PingFang-SC;
    font-size:14px;
    font-weight:500;
    position: absolute;
    /*font-weight: 500;*/
    top: 152px;
    span{
      /*display: block;*/
    }
    >div:nth-child(1){
      span:nth-child(3){
        color:#2575c9;
      }
    }
    >div:last-child{
      width:342px;
      height:42px;
      background:rgba(37,117,201,1);
      border-radius:6px;
      font-size:16px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(255,255,255,1);
      margin: 0 auto;
      /*margin-top: 18px;*/
      line-height: 42px;
      cursor: pointer;
      position: absolute;
      top: 37px;
      left: 29px;
    }
  }
  .el-dropdown-menu{
    width: 340px !important;
  }
  .z_a{
    width:342px;
    height:50px;
    background:rgba(248,248,248,1);
    border-radius:8px;
    border:1px solid rgba(219,219,219,1);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:16px;
    font-family:PingFang-SC-Medium,PingFang-SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    position: relative;
    /deep/ .el-dropdown{
      width: 100%;
    }
    /deep/ .el-icon-arrow-down{
      position: absolute;
      right: 10px;
      top: 10px;
    }
    /deep/.el-dropdown-link{
      width: 100%;
      /*display: block;*/
      display: flex;
      /*justify-content: space-between;*/
      align-items: center;
    }

    img{
      margin-left: 10px;
    }
  }
  .w_sp{
    font-size:14px;
    font-family:PingFang-SC-Regular,PingFang-SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:20px;
    margin-top: 76px;
    width: 100%;
    text-align: center;

  }
  .w_spa:hover{
    background: #2575c9;
  }
  .w_spa{
    cursor: pointer;
    transition: 0.4s;
    width:342px;
    height:42px;
    background:rgba(185,197,209,1);
    border-radius:6px;
    margin: 0 auto;
    margin-top: 14px;
    font-size:16px;
    line-height: 42px;
    text-align: center;
    font-family:PingFang-SC-Medium,PingFang-SC;
    font-weight:500;
    color:rgba(255,255,255,1);
  }
  .w_wj{
    width: 342px;
    height: auto;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: space-between;
    margin-top: 14px;
    margin-bottom: 16px;
    img{
      margin-right:2px;
    }
    >div:nth-child(1){
      font-size:14px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(136,136,136,1);
    }
    >div:nth-child(2){
      font-size:14px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(20,133,238,1);
    }
  }
  .dLog{
    >div:nth-child(2),>div:nth-child(3){
      width:342px;
      height:50px;
      background:rgba(248,248,248,1);
      border-radius:8px;
      border:1px solid rgba(219,219,219,1);
      display: flex;
      align-items: center;
      justify-content: left;
      margin: 0 auto;
      img{
        margin-left: 10px;
        width: 30px;
        height: 30px;
      }
      input{
        border:1px solid rgba(248,248,248,1);
        /*background: red;*/
        font-size:16px;
        font-family:PingFang-SC-Medium,PingFang-SC;
        font-weight:500;
        color:rgba(136,136,136,1);
        line-height: 25px;
        height: 25px;
        width: 285px;
        background: rgba(248,248,248,1);
        outline-style: none;
      }
    }
  }
  .register{
    .log_a{
      >div:nth-child(1){
        color:rgba(136,136,136,1);
        border-bottom: 2px solid rgba(37,117,201,0) !important;
      }
      >div:nth-child(3){
        color:#2575c9 !important;
        border-bottom: 2px solid rgba(37,117,201,1) !important;
      }
    }
  }
  .log_a{
    width: 50%;
    margin: 0 auto;
    height: 108px;
    /*background: red;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    >div:nth-child(1){
         cursor: pointer;
         width: 54px;
         height: auto;
         border-bottom: 2px solid rgba(37,117,201,1);
         text-align: center;
        font-size:18px;
        font-family:PingFang-SC-Medium,PingFang-SC;
        font-weight:500;
        padding-bottom: 10px;
        color:rgba(37,117,201,1);
    }
    >div:nth-child(2){
      width:1px;
      height:18px;
      background:rgba(235,235,235,1);
    }
    >div:nth-child(3){
      cursor: pointer;
      font-size:18px;
      font-family:PingFang-SC-Medium,PingFang-SC;
      font-weight:500;
      color:rgba(136,136,136,1);
      width: 54px;
      padding-bottom: 10px;
      height: auto;
      border-bottom: 2px solid rgba(37,117,201,0);
      text-align: center;
    }
  }
  .login{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.3);
    .log{
      width:400px;
      height:440px;
      background:rgba(255,255,255,1);
      border-radius:12px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
  .s_z{
    width: 34px;
    height: 34px;
    position:absolute;
    right: -17px;
    top: -17px;
    cursor: pointer;
  }
</style>