feat: 调整滑块功能，使用拼图同时能滑动

src/components/NotificationMessageCard/src/components/EventCard.vue

@@ -161,6 +161,7 @@ const jumpTracking = (data: EventCardPropsData) => {
           dayjs(data.info.time).format('MMM DD, YYYY HH:mm')
         }}</span>
         <span>{{ getTimezone(data.info.timezone, data.info.time) }}</span>
+        <span>&nbsp;({{ data.info.delayTimeTip }})</span>
       </div>
       <!-- <div class="change-time" v-if="data.type === 'change' && data.info?.time">
         <span style="margin-left: 1px" class="font_family icon-icon_time_b"></span>

src/components/VSliderVerification/src/VSliderVerification.vue

@@ -7,6 +7,7 @@ import Img04 from './image/verification-img-4.png'
 import { ref } from 'vue'
 //引入'vue3-puzzle-vcode'插件
 import Vcode from './components/SliderVerification.vue'
+// import Vcode from 'vue3-puzzle-vcode'
 
 const openDialog = () => {
   isShow.value = true
@@ -34,7 +35,7 @@ const addTipsNode = () => {
   const childNode = document.createElement('div')
   childNode.className = 'tips'
   childNode.innerHTML = `
-    <div style="margin-bottom: 15px; text-align: right;">
+    <div style="margin-bottom: 5px; text-align: right;">
       <span class="font_family icon-icon_reject_b close-icon" style="margin-right: -20px;">
       </span>
     </div>
@@ -54,6 +55,7 @@ const addTipsNode = () => {
 }
 
 const closeDialog = () => {
+  isShow.value = false
   emit('close')
 }
 
@@ -90,7 +92,7 @@ const addSliderBtnNode = (state: string) => {
   }
 }
 
-const isShow = ref(false)
+const isShow = ref(true)
 
 // 根据不同的状态，设置已滑动区域的背景颜色
 const updateSliderBackground = (state: string) => {
@@ -131,6 +133,7 @@ const onSuccess = () => {
 }
 const close = () => {
   isShow.value = true
+  emit('close')
 }
 const fail = () => {
   updateSliderBackground('error')
@@ -146,24 +149,26 @@ defineExpose({
 })
 </script>
 <template>
-  <Vcode
-    :show="isShow"
-    @close="close"
-    @fail="fail"
-    :canvasWidth="320"
-    :canvasHeight="180"
-    sliderText="Swipe to verify"
-    :sliderSize="38"
-    successText="Verification successful"
-    failText="Verification failed"
-    :range="5"
-    :imgs="[Img01, Img02, Img03, Img04]"
-  ></Vcode>
+  <div>
+    <Vcode
+      :show="isShow"
+      @close="close"
+      @fail="fail"
+      :canvasWidth="320"
+      :canvasHeight="180"
+      sliderText="Swipe to verify"
+      :sliderSize="38"
+      successText="Verification successful"
+      failText="Verification failed"
+      :range="5"
+      :imgs="[Img01, Img02, Img03, Img04]"
+    ></Vcode>
+  </div>
 </template>
 <style lang="scss" scoped>
 .slider-verification {
   width: 400px;
-  height: 373px;
+  height: 365px;
   padding: 40px;
   .tips {
     text-align: center;
@@ -171,88 +176,90 @@ defineExpose({
 }
 </style>
 <style lang="scss">
-// 整体框架
-.vue-auth-box_ {
-  width: 400px;
-  height: 373px;
-  padding: 40px;
-  padding-top: 20px;
-  background-color: var(--color-slider-bg);
-  border-radius: 16px;
-  box-shadow: -2px 2px 12px 0 rgba(0, 0, 0, 0.5);
-  .tips {
-    margin-bottom: 16px;
-    text-align: center;
-    .close-icon {
-      cursor: pointer;
-      &:hover {
-        color: var(--color-theme);
+.vue-puzzle-vcode {
+  // 整体框架
+  div.vue-auth-box_ {
+    width: 400px;
+    height: 365px;
+    padding: 40px;
+    padding-top: 16px;
+    background-color: var(--color-slider-bg);
+    border-radius: 16px;
+    box-shadow: -2px 2px 12px 0 rgba(0, 0, 0, 0.5);
+    .tips {
+      margin-bottom: 16px;
+      text-align: center;
+      .close-icon {
+        cursor: pointer;
+        &:hover {
+          color: var(--color-theme);
+        }
       }
     }
-  }
-  .icon-border {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px !important;
-    height: 16px !important;
-    border-radius: 50%;
-    border: none !important;
-    span {
-      font-size: 14px !important;
+    .icon-border {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 16px !important;
+      height: 16px !important;
+      border-radius: 50%;
+      border: none !important;
+      span {
+        font-size: 14px !important;
+      }
     }
   }
-}
 
-div.vue-puzzle-vcode {
-  background-color: rgba(43, 47, 54, 0.7);
-}
+  div.vue-puzzle-vcode {
+    background-color: rgba(43, 47, 54, 0.7);
+  }
 
-.vue-auth-box_ .auth-control_ div.range-box {
-  background-color: #87909e;
-  box-shadow: none;
-}
-.vue-auth-box_ div.auth-body_ {
-  border-radius: 6px;
-}
-// 已滑动区域的样式
-.vue-auth-box_ .auth-control_ .range-box div.range-slider {
-  background-color: var(--color-success);
-}
+  .vue-auth-box_ .auth-control_ div.range-box {
+    background-color: #87909e;
+    box-shadow: none;
+  }
+  .vue-auth-box_ div.auth-body_ {
+    border-radius: 6px;
+  }
+  // 已滑动区域的样式
+  .vue-auth-box_ .auth-control_ .range-box div.range-slider {
+    background-color: var(--color-success);
+  }
 
-.vue-auth-box_ .auth-body_ div.loading-box_.hide_ {
-  display: none;
-}
+  .vue-auth-box_ .auth-body_ div.loading-box_.hide_ {
+    display: none;
+  }
 
-// 成功的提示
-.vue-auth-box_ .auth-body_ div.info-box_ {
-  background: var(--color-success);
-}
-// 失败的提示
-.vue-auth-box_ .auth-body_ div.info-box_.fail {
-  background: #c7353f;
-}
+  // 成功的提示
+  .vue-auth-box_ .auth-body_ div.info-box_ {
+    background: var(--color-success);
+  }
+  // 失败的提示
+  .vue-auth-box_ .auth-body_ div.info-box_.fail {
+    background: #c7353f;
+  }
 
-.vue-auth-box_ .auth-control_ .range-box .range-slider {
-  border-radius: 6px;
-}
+  .vue-auth-box_ .auth-control_ .range-box .range-slider {
+    border-radius: 6px;
+  }
 
-.vue-auth-box_ .auth-control_ div.range-box {
-  border-radius: 6px;
-}
-// 滑块
-.vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn {
-  border-radius: 6px;
-}
+  .vue-auth-box_ .auth-control_ div.range-box {
+    border-radius: 6px;
+  }
+  // 滑块
+  .vue-auth-box_ .auth-control_ .range-box .range-slider .range-btn {
+    border-radius: 6px;
+  }
 
-.vue-auth-box_ .auth-body_ .reset_ {
-  width: 20px;
-  height: 20px;
-  top: 10px;
-  right: 10px;
-}
+  .vue-auth-box_ .auth-body_ .reset_ {
+    width: 20px;
+    height: 20px;
+    top: 10px;
+    right: 10px;
+  }
 
-.vue-auth-box_ .auth-control_ .range-box .range-text {
-  color: #fff;
+  .vue-auth-box_ .auth-control_ .range-box .range-text {
+    color: #fff;
+  }
 }
 </style>

src/components/VSliderVerification/src/components/SliderVerification.vue

@@ -80,7 +80,7 @@
   </div>
 </template>
 <script>
-import resetSvg from '../assets/reset.png'
+import resetSvg from '../image/reset.png'
 export default {
   props: {
     canvasWidth: { type: Number, default: 310 }, // 主canvas的宽
@@ -535,7 +535,7 @@ export default {
           // 成功的回调
           this.isSubmting = false
           this.$emit('success', x)
-        }, 800)
+        }, 400)
       } else {
         // 失败
         this.infoText = this.failText
@@ -544,12 +544,12 @@ export default {
         this.isCanSlide = false
         // 失败的回调
         this.$emit('fail', x)
-        // 800ms后重置
+        // 400ms后重置
         clearTimeout(this.timer1)
         this.timer1 = setTimeout(() => {
           this.isSubmting = false
           this.reset()
-        }, 800)
+        }, 400)
       }
     },
     // 重置 - 重新设置初始状态
@@ -583,13 +583,13 @@ export default {
   right: 0;
   background-color: rgba(0, 0, 0, 0.3);
   z-index: 999;
-  // opacity: 0;
-  // pointer-events: none;
+  opacity: 0;
+  pointer-events: none;
   transition: opacity 200ms;
-  // &.show_ {
-  opacity: 1;
-  pointer-events: auto;
-  // }
+  &.show_ {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 .vue-auth-box_ {
   position: absolute;