点击验证码更换

src/views/login/index.vue

@@ -30,8 +30,16 @@
           </el-form-item>
 
           <el-form-item class="verification-code" prop="verification_code_image_text">
-            <el-input v-model="loginForm.verification_code_image_text" @keyup.enter.native="handleLogin" />
-            <el-image v-if="image_content_base64.length > 0" :src="`data:image/jpg;base64,${image_content_base64}`" />
+            <el-input
+              v-model="loginForm.verification_code_image_text"
+              placeholder="验证码"
+              @keyup.enter.native="handleLogin"
+            />
+            <el-image
+              v-if="image_content_base64.length > 0"
+              :src="`data:image/jpg;base64,${image_content_base64}`"
+              @click="updateVerificationCode"
+            />
           </el-form-item>
 
           <el-form-item class="form-remember">
@@ -94,13 +102,16 @@ export default {
       document.title = res.title;
       setConfig(res);
     });
-
-    GetVerificationCodeImage().then(({ image_id, image_content_base64 }) => {
-      this.loginForm.verification_code_image_id = image_id;
-      this.image_content_base64 = image_content_base64;
-    });
+    this.updateVerificationCode();
   },
   methods: {
+    updateVerificationCode() {
+      GetVerificationCodeImage().then(({ image_id, image_content_base64 }) => {
+        this.loginForm.verification_code_image_id = image_id;
+        this.image_content_base64 = image_content_base64;
+      });
+    },
+
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
@@ -181,6 +192,10 @@ export default {
       &-form {
         margin: 64px 64px 0;
 
+        input {
+          height: 48px;
+        }
+
         .form-remember {
           .forget-password {
             color: $basic-color;
@@ -190,12 +205,13 @@ export default {
 
         .verification-code {
           .el-input {
-            width: 120px;
+            width: 194px;
           }
 
           .el-image {
-            margin-left: 24px;
+            margin-left: 8px;
             vertical-align: bottom;
+            cursor: pointer;
 
             &__inner {
               vertical-align: middle;