update

@@ -16,8 +16,14 @@
               placeholder="请输入密码" show-password></el-input>
           </el-form-item>
           <el-form-item prop="yz">
-            <el-input class="yz" @keyup.native="login('user')" v-model="user.yz"
-              placeholder="请输入验证码"></el-input>
+            <div class="flex-container">
+              <div class="flex-input">
+                <el-input class="yz" @keyup.native="login('user')" v-model="user.yz" placeholder="请输入验证码"></el-input>
+              </div> 
+              <div class="flex-line"></div>
+              <div class="flex-img"><canvas id="s-canvas" ref="s-canvas"></canvas></div>
+              <div class="flex-renovate"><font id="renovate" @click="verification">换一批</font></div>
+            </div>
           </el-form-item>
           <el-form-item class="login-btn">
             <el-button type="primary" style="width: 100%" @click="login('user')">登录</el-button>
@@ -48,7 +54,8 @@
         },
       };
     },
-    created () {
+    created () { 
+      this.verification(); 
       const params = {};
       const queryOptions = {
         conditionGroup: {
@@ -78,7 +85,37 @@
     mounted () {
       // this.checkUserName();
     },
-    methods: {
+    methods: { 
+      verification() { 
+        let str = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ', code = '', i = 0; 
+        for( ; i++ < 4 ; ) code += str[ Math.floor( Math.random() * ( str.length - 0 ) + 0 ) ]; 
+        setTimeout( () => { 
+          let canvas = document.getElementById("s-canvas"), ctx = canvas.getContext("2d"); 
+          canvas.width = 80; 
+          canvas.height = 28; 
+          ctx.fillStyle = '#ffffff'; 
+          ctx.fillRect( 0, 0, 80, 28 ); 
+          for ( i = 0; i < code.length; i++ ) { this.drawText( ctx, code[i], i ); }
+        }, 0 ); 
+      }, 
+      drawText(ctx, txt, i) {
+        ctx.fillStyle = this.randomColor(50, 160); 
+        ctx.font = "18px SimHei"; 
+        let x = (i + 1) * (80 / (4 + 1)), y = this.randomNum( 18, 28 - 5 );
+        ctx.translate(x, y);
+        ctx.fillText(txt, 0, 0);
+        ctx.rotate((-0 * Math.PI) / 180);
+        ctx.translate(-x, -y);
+      }, 
+      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 + ")";
+      }, 
+      randomNum(min, max) {
+        return Math.floor(Math.random() * (max - min) + min);
+      }, 
       //记住用户名
       checkUserName: function (flag) {
         this.user.checkStatus = flag;
@@ -128,7 +165,6 @@
   .password,
   .yz {
     position: relative;
-
     &:before {
       content: "";
       display: block;
@@ -148,6 +184,40 @@
     }
   }
 
+  .flex-container { 
+    position: relative; 
+    display: -webkit-flex;
+    display: flex;
+  } 
+
+  .flex-input {
+    width: 100%;
+  } 
+  .flex-line { 
+    position: absolute;
+    width: 1px; 
+    height: 64%; 
+    margin: 5px;
+    right: 36%;
+    background-color: #CCCCCC;
+  }
+  .flex-img { 
+    position: absolute;
+    margin: 2px; 
+    right: 16%;
+  } 
+  .flex-renovate { 
+    position: absolute;
+    margin: 1px; 
+    right: 3%;
+  } 
+  #renovate { 
+    color: #3F8FEA; 
+    font-size: 16px; 
+    font-weight: 700; 
+    cursor: pointer;
+  }
+
   .username::before {
     background-image: url(../../image/userlogo.png);
   }