chore: 增加样式

vbenjs · Sep 13, 2024 · e6fa944 · e6fa944
1 parent 025d5ae
commit e6fa944
Showing 1 changed file with 86 additions and 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
@@ -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>