登录页添加验证

src/views/home/login_v1.vue

@@ -2,17 +2,6 @@
   <!-- 登录 -->
   <div>
     <div class="login" v-if="projectType == 'common'">
-         <!-- 滑动验证 -->
-         <!-- <slide-verify :l="42"
-            :r="10"
-            :w="310"
-            :h="155"
-            slider-text="向右滑动"
-            @success="onSuccess"
-            @fail="onFail"
-            @refresh="onRefresh"
-            ></slide-verify> -->
-            <!-- <div>{{msg}}</div> -->
       <div class="title flex">
         <div class="title_l flex2">
           <img
@@ -99,7 +88,7 @@
                   />
                 </el-input>
               </el-form-item>
-              <el-form-item style="margin-top: 39px" label="" prop="password">
+              <el-form-item style="margin-top: 25px" label="" prop="password">
                 <el-input
                   v-model="form.password"
                   style="height: 53px; font-size: 16px"
@@ -137,7 +126,7 @@
                 </el-input>
               </el-form-item>
               <el-form-item
-                style="margin-top: 39px"
+                style="margin-top: 25px"
                 label=""
                 prop="verificationCode"
               >
@@ -161,9 +150,19 @@
               </el-form-item>
             </el-form>
           </div>
-          <div style="margin-top: 40px">
+          <div style="margin-top: 25px">
-            <!-- :disabled="pass" -->
+            <!-- <el-button type="success" plain class="logo_btn" :disabled="verificateBtn"  @click="verificateFn"
-            <el-button type="primary" class="logo_btn"  @click="loginFn"
+              >{{ verificateBtn==false?'立即点击验证':'验证成功'}}
+            </el-button> -->
+            <el-button type="success" v-if="verificateBtn==false" plain class="logo_btn" :disabled="verificateBtn"  @click="verificateFn"
+              ><div class="point"></div>  立即点击验证
+            </el-button>
+            <el-button type="success" v-else plain class="logo_btn" :disabled="verificateBtn"
+              ><i class="el-icon-success"></i>  验证成功
+            </el-button>
+          </div>
+          <div style="margin-top: 25px">
+            <el-button type="primary" :disabled="pass" class="logo_btn"  @click="loginFn"
               >{{ $t("message.login.login") }}
             </el-button>
           </div>
@@ -203,6 +202,22 @@
             </div>
           </div>
         </div>
+         <!-- 滑动验证 -->
+      <div class="mask" v-if="showVerify" @click.self="showVerify = false">
+         <div class="slideContainer">
+          <slide-verify 
+            :l="42"
+            :r="10"
+            :w="330"
+            :h="175"
+            slider-text="向右滑动滑块填充拼图"
+            ref="slideverify"
+            @success="onSuccess"
+            @fail="onFail"
+            @refresh="onRefresh"
+            ></slide-verify>
+         </div>
+         </div>
       </div>
     </div>
     <div class="zjsjLogin" v-if="projectType == 'zjsj'">
@@ -220,7 +235,6 @@
           @loginFn="loginFn"
         ></LoginInfo>
       </div>
-      <div></div>
     </div>
   </div>
 </template>
@@ -245,6 +259,8 @@ export default {
     return {
       msg: '',
       show: false,
+      showVerify:false,
+      verificateBtn:false,//验证按钮
       pass:true,
       input: "",
       radio: "",
@@ -316,6 +332,7 @@ export default {
     this.projectType = PROJECT_TYPE;
   },
   mounted() {
+    this.$bus.$on('resetSlideVerify',this.onReset)
     delete this.$http.defaults.headers.common["Authorization"];
     if (window.location.href.indexOf("type=lgzbdp") != -1) {
       window.localStorage.setItem("isIframe", "1");
@@ -350,12 +367,19 @@ export default {
     }
   },
   methods: {
-    onSuccess(){
+      onReset() {
-            this.msg = 'login success'
+        //重置图片验证组件
-            this.pass = false
+       this.$refs.slideverify.reset();
+      },
+      onSuccess(){
+        setTimeout(()=>{
+          this.showVerify = false
+          this.verificateBtn = true
+          this.pass = false
+         },500)
         },
         onFail(){
-            this.msg = ''
+          this.msg = '验证失败'
         },
         onRefresh(){
             this.msg = ''
@@ -393,6 +417,11 @@ export default {
     goSignIn() {
       this.$router.push({ path: "/sign" });
     },
+    // 验证
+    verificateFn(){
+      this.showVerify = true,
+      this.$bus.$emit('resetSlideVerify')
+    },
     loginFn() {
       // 1系统管理员，2企业管理员账号，3企业区账号，4企业市账号，5项目账号  6项目子账号   7项目部账号
       if (this.loginType == 1) {
@@ -644,10 +673,31 @@ export default {
     // background-image: url("../../assets/images/login_bg.png");
     flex-direction: row-reverse;
     position: relative;
-
+    .mask {
+      position: fixed;
+      left: 0%;
+      top: 0%;
+      width: 100%;
+      height: 100%;
+      z-index: 100;
+      overflow: hidden;
+      background-color: rgba(0, 0, 0, 0.3);
+    }
+    .mask .slideContainer {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      left: 55%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      width: 380px;
+      height: 250px;
+      background-color: rgb(255, 255, 255);
+    }
     .login_info {
       width: 444px;
-      height: 434px;
+      height: 445px;
       background: #ffffff;
       box-shadow: 0 0 31px 0 rgba(13, 28, 91, 0.28);
       border-radius: 5px;
@@ -685,7 +735,7 @@ export default {
       }
 
       .info_content {
-        margin-top: 35px;
+        margin-top: 25px;
 
         img {
           width: 16.8px;
@@ -698,6 +748,23 @@ export default {
         width: 100%;
         font-family: PingFangSC-Regular;
         font-size: 20px;
+        // .point::after{
+        //   -webkit-animation-delay: .4s;
+        //   animation-delay: .4s;
+        // }
+        
+        // .point::before{
+        //   content: "";
+        //   display: block;
+        //   width: 20px;
+        //   height: 20px;
+        //   background: #67c23a;
+        //   position: absolute;
+        //   left: 30%;
+        //   // -webkit-animation: shield-breathing 1.4s ease infinite;
+        //   // animation: shield-breathing 1.4s ease infinite;
+        //   border-radius: 50%;
+        // }
       }
 
       .info_bottom {