From e6fa94450902bb033e5850498b0307af58deec80 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Fri, 13 Sep 2024 16:34:16 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/verify/drag-verify/index.vue   | 88 ++++++++++++++++++-
 1 file changed, 86 insertions(+), 2 deletions(-)

diff --git a/packages/effects/common-ui/src/components/verify/drag-verify/index.vue b/packages/effects/common-ui/src/components/verify/drag-verify/index.vue
index ec073a8bb0d..9100ede765b 100644
--- a/packages/effects/common-ui/src/components/verify/drag-verify/index.vue
+++ b/packages/effects/common-ui/src/components/verify/drag-verify/index.vue
@@ -307,8 +307,92 @@ function resume() {
     <ContentCmp :success-text="successText" :text="text" />
     <ActionCmp
       :style="getActionStyleRef"
-      @on-mousedown="handleDragStart"
-      @on-touchstart="handleDragStart"
+      @mousedown="handleDragStart"
+      @touchstart="handleDragStart"
     />
   </div>
 </template>
+<style lang="scss">
+$radius: 4px;
+
+@keyframes slidetounlock {
+  0% {
+    background-position: -120px 0;
+  }
+
+  100% {
+    background-position: 120px 0;
+  }
+}
+
+.darg-verify {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  background-color: rgb(238 238 238);
+  border: 1px solid #ddd;
+  border-radius: $radius;
+
+  &-bar {
+    position: absolute;
+    width: 0;
+    height: 36px;
+    background-color: green;
+    border-radius: $radius;
+
+    &.to-left {
+      width: 0 !important;
+      transition: width 0.3s;
+    }
+  }
+
+  &-content {
+    position: absolute;
+    top: 0;
+    font-size: 12px;
+    user-select: none;
+    background-color: -webkit-gradient(
+      linear,
+      left top,
+      right top,
+      color-stop(0, #333),
+      color-stop(0.4, #333),
+      color-stop(0.5, #fff),
+      color-stop(0.6, #333),
+      color-stop(1, #333)
+    );
+    background-clip: text;
+    animation: slidetounlock 3s infinite;
+    text-size-adjust: none;
+
+    &.success {
+      -webkit-text-fill-color: white;
+    }
+
+    & > * {
+      -webkit-text-fill-color: #333;
+    }
+  }
+
+  &-action {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: move;
+    background-color: white;
+    border-radius: $radius;
+
+    &__icon {
+      cursor: inherit;
+    }
+
+    &.to-left {
+      left: 0 !important;
+      transition: left 0.3s;
+    }
+  }
+}
+</style>