先来上图，看一下最终效果图
公司的一个新项目，需要用到图形验证码进行判断。
第一步：需要把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 忘记密码 5imgShowa: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 = thisif(newvalue){if(this.dpass) self.dbutt = true} else {self.dbutt = false}},dpass(newvalue){const self = thisif(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 = thisif(!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 = trueself.polo = "剩余" + 10 + "s"let num = 10let timer = setInterval(function () {if(num == 1){self.polo = '输入验证码'self.hQstate = falseclearInterval(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 = thisif(!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 = trueself.polo = "剩余" + 10 + "s"let num = 10let timer = setInterval(function () {if(num == 1){self.polo = '输入验证码'self.hQstatea = falseclearInterval(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 = thisif(!this.zdphone) return this.$message("请输入手机号")if(!this.hQstate){self.hQstate = trueself.hQtext = 60 + "s"let num = 60let timer = setInterval(function () {if(num == 1){self.hQtext = '获取验证码'self.hQstate = falseconsole.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.imgShowconsole.log(this.imgShow)},//点击登录dLog(){const self = thisif(!self.dphone) {this.passState = truethis.passFial = "请输入账号";return}if(!self.dpass){this.passState = truethis.passFial = "请输入密码";return}this.passState = falseif(!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'mit("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 = thisself.dphone = localStorage.userself.dpass = localStorage.passwordself.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>
