From f323fc354625965a73c5231423b93b6ab0152a58 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Sat, 23 May 2020 11:38:33 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E9=99=86=E5=8A=A0=E5=85=A5=E6=8B=BC?=
 =?UTF-8?q?=E5=9B=BE=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/assets/{403_images => images}/403.gif | Bin
 vue/src/assets/{404_images => images}/404.png | Bin
 .../{404_images => images}/404_cloud.png      | Bin
 vue/src/assets/images/sprite.1.2.4.png        | Bin 0 -> 15178 bytes
 vue/src/assets/styles/transition.scss         | 220 +++++++-
 vue/src/components/PuzzleVerify/index.js      |  20 +
 vue/src/components/PuzzleVerify/index.vue     | 370 -------------
 vue/src/components/PuzzleVerify/main.vue      | 519 ++++++++++++++++++
 vue/src/main.js                               |   2 +
 vue/src/router/modules/example.js             |   6 -
 vue/src/views/app/403.vue                     |   2 +-
 vue/src/views/app/404.vue                     |   8 +-
 vue/src/views/app/login.vue                   |   8 +-
 vue/src/views/example/components/verify.vue   |  20 -
 14 files changed, 758 insertions(+), 417 deletions(-)
 rename vue/src/assets/{403_images => images}/403.gif (100%)
 rename vue/src/assets/{404_images => images}/404.png (100%)
 rename vue/src/assets/{404_images => images}/404_cloud.png (100%)
 create mode 100644 vue/src/assets/images/sprite.1.2.4.png
 create mode 100644 vue/src/components/PuzzleVerify/index.js
 delete mode 100644 vue/src/components/PuzzleVerify/index.vue
 create mode 100644 vue/src/components/PuzzleVerify/main.vue
 delete mode 100644 vue/src/views/example/components/verify.vue

diff --git a/vue/src/assets/403_images/403.gif b/vue/src/assets/images/403.gif
similarity index 100%
rename from vue/src/assets/403_images/403.gif
rename to vue/src/assets/images/403.gif
diff --git a/vue/src/assets/404_images/404.png b/vue/src/assets/images/404.png
similarity index 100%
rename from vue/src/assets/404_images/404.png
rename to vue/src/assets/images/404.png
diff --git a/vue/src/assets/404_images/404_cloud.png b/vue/src/assets/images/404_cloud.png
similarity index 100%
rename from vue/src/assets/404_images/404_cloud.png
rename to vue/src/assets/images/404_cloud.png
diff --git a/vue/src/assets/images/sprite.1.2.4.png b/vue/src/assets/images/sprite.1.2.4.png
new file mode 100644
index 0000000000000000000000000000000000000000..eca4e8dc5cc43445787259b3bf50e3e5a93b9e42
GIT binary patch
literal 15178
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
MSyh>0X*1OS0vDEVp8x;=

literal 0
HcmV?d00001

diff --git a/vue/src/assets/styles/transition.scss b/vue/src/assets/styles/transition.scss
index 8280e50..fca3e72 100644
--- a/vue/src/assets/styles/transition.scss
+++ b/vue/src/assets/styles/transition.scss
@@ -1,3 +1,5 @@
+$transition-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
+
 .right-out,
 .left-out {
     &-leave-active,
@@ -30,15 +32,46 @@
     }
 }
 
+.breadcrumb-enter-active,
+.breadcrumb-leave-active,
+.breadcrumb-move {
+    transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.breadcrumb-leave-active {
+    position: absolute;
+}
+
 .slide-right,
-.slide-left {
-    &-enter-active,
+.slide-left,
+.slide-up,
+.slide-down,
+.jump-right,
+.jump-left,
+.jump-up,
+.jump-down,
+.fade,
+.scale,
+.rotate,
+.flip {
     &-leave-active {
-        transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1)
+        position: absolute
     }
+}
 
+.slide-right,
+.slide-left,
+.slide-up,
+.slide-down {
+    &-enter-active,
     &-leave-active {
-        position: absolute;
+        transition: transform .3s $transition-easing
     }
 }
 
@@ -62,19 +95,178 @@
     }
 }
 
+.slide-up {
+    &-enter {
+        transform: translate3d(0, 100%, 0)
+    }
 
-.breadcrumb-enter-active,
-.breadcrumb-leave-active,
-.breadcrumb-move {
-    transition: all .5s;
+    &-leave-to {
+        transform: translate3d(0, -100%, 0)
+    }
 }
 
-.breadcrumb-enter,
-.breadcrumb-leave-active {
-    opacity: 0;
-    transform: translateX(20px);
+.slide-down {
+    &-enter {
+        transform: translate3d(0, -100%, 0)
+    }
+
+    &-leave-to {
+        transform: translate3d(0, 100%, 0)
+    }
 }
 
-.breadcrumb-leave-active {
-    position: absolute;
+.jump-right,
+.jump-left,
+.jump-up,
+.jump-down {
+    &-enter-active,
+    &-leave-active {
+        transition: opacity .3s, transform .3s
+    }
+
+    &-enter,
+    &-leave-to {
+        opacity: 0
+    }
+}
+
+.jump-right {
+    &-enter {
+        transform: translate3d(-15px, 0, 0)
+    }
+
+    &-leave-to {
+        transform: translate3d(15px, 0, 0)
+    }
+}
+
+.jump-left {
+    &-enter {
+        transform: translate3d(15px, 0, 0)
+    }
+
+    &-leave-to {
+        transform: translateX(-15px)
+    }
+}
+
+.jump-up {
+    &-enter {
+        transform: translate3d(0, 15px, 0)
+    }
+
+    &-leave-to {
+        transform: translate3d(0, -15px, 0)
+    }
+}
+
+.jump-down {
+    &-enter {
+        transform: translate3d(0, -15px, 0)
+    }
+
+    &-leave-to {
+        transform: translate3d(15px, 0, 0)
+    }
+}
+
+.fade {
+    &-enter-active,
+    &-leave-active {
+        transition: opacity .3s ease-out
+    }
+
+    &-enter,
+    &-leave,
+    &-leave-to {
+        opacity: 0
+    }
+}
+
+.scale {
+    &-enter-active,
+    &-leave-active {
+        transition: opacity .3s, transform .3s $transition-easing
+    }
+
+    &-enter,
+    &-leave,
+    &-leave-to {
+        opacity: 0;
+        transform: scale3d(0, 0, 1)
+    }
+}
+
+.rotate {
+    &-enter-active,
+    &-leave-active {
+        transition: opacity .3s, transform .3s $transition-easing;
+        transform-style: preserve-3d
+    }
+
+    &-enter,
+    &-leave,
+    &-leave-to {
+        opacity: 0;
+        transform: scale3d(0, 0, 1) rotate3d(0, 0, 1, 90deg)
+    }
+}
+
+.flip-right,
+.flip-left,
+.flip-up,
+.flip-down {
+    &-enter-active,
+    &-leave-active {
+        transition: transform .3s;
+        backface-visibility: hidden
+    }
+
+    &-enter-to,
+    &-leave {
+        transform: perspective(400px) rotate3d(1, 1, 0, 0deg)
+
+    }
+}
+
+.flip-right {
+    &-enter {
+        transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
+
+    }
+
+    &-leave-to {
+        transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
+
+    }
+}
+
+.flip-left {
+    &-enter {
+        transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
+    }
+
+    &-leave-to {
+        transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
+    }
+}
+
+.flip-up {
+    &-enter {
+        transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
+    }
+
+    &-leave-to {
+        transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
+    }
+}
+
+.flip-down {
+    &-enter {
+        transform: perspective(400px) rotate3d(1, 0, 0, 180deg)
+    }
+
+    &-leave-to {
+        transform: perspective(400px) rotate3d(1, 0, 0, -180deg)
+    }
 }
diff --git a/vue/src/components/PuzzleVerify/index.js b/vue/src/components/PuzzleVerify/index.js
new file mode 100644
index 0000000..bcec2e7
--- /dev/null
+++ b/vue/src/components/PuzzleVerify/index.js
@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import Main from './main.vue'
+import {PopupManager} from 'element-ui/src/utils/popup'
+
+let Constructor = Vue.extend(Main)
+
+const PuzzleVerify = function ({left = 0, top = 0} = {}) {
+    const instance = new Constructor({data: {positionLeft: left}})
+    instance.positionTop = top - Math.round((instance.height + 130) / 2)
+    instance.$mount()
+    document.body.appendChild(instance.$el)
+    instance.$el.style.zIndex = PopupManager.nextZIndex()
+    instance.visible = true
+    return new Promise((resolve, reject) => {
+        instance.resolve = resolve
+        instance.reject = reject
+    })
+}
+
+export default PuzzleVerify
diff --git a/vue/src/components/PuzzleVerify/index.vue b/vue/src/components/PuzzleVerify/index.vue
deleted file mode 100644
index 1738d88..0000000
--- a/vue/src/components/PuzzleVerify/index.vue
+++ /dev/null
@@ -1,370 +0,0 @@
-<template>
-    <div class="puzzle-container">
-        <div class="puzzle-header">
-            <span class="puzzle-header-title">拖动下方滑块完成拼图</span>
-            <div class="puzzle-header-tool">
-                <el-button @click="refreshImg" icon="el-icon-refresh" size="small" type="text"/>
-                <el-button @click="$emit('close')" icon="el-icon-close" size="small" type="text"/>
-            </div>
-        </div>
-
-        <div :style="'width:' + width + 'px'" class="puzzle-view">
-            <img :src="imgRandom"
-                 :style="'width:' + width + 'px;height:' + height + 'px;'"
-                 id="scream"
-                 ref="scream"
-            />
-            <canvas :height="height" :width="width" id="puzzle-box" ref="puzzleBox"/>
-            <div :style="'left:' + left_Num+ 'px'" class="puzzle-lost-box">
-                <canvas :height="height" :width="width" id="puzzle-shadow" ref="puzzleShadow"/>
-                <canvas :height="height" :width="width" id="puzzle-lost" ref="puzzleLost"/>
-            </div>
-            <span :class="{'hide':displayTips}" class="verify-result" ref="verTips">
-                <span class="success" v-show="verification">
-                    <i class="el-icon-circle-check"/>验证通过
-                </span>
-                <span class="error" v-show="!verification">
-                    <i class="el-icon-circle-close"/>验证失败
-                </span>
-            </span>
-        </div>
-
-        <div class="slider-container">
-            <div class="slider-bar"/>
-            <el-button @mousedown.native.prevent.stop="startMove"
-                       circle
-                       class="slider-btn"
-                       icon="el-icon-rank"
-                       ref="sliderBtn"
-                       type="success"/>
-        </div>
-    </div>
-</template>
-
-<script>
-    /*
-    * https://github.com/Kevin-269581661/vue-puzzle-verification
-    * 网上搬的例子，实际开发建议用极验
-    * */
-    export default {
-        name: "PuzzleVerify",
-        props: {
-            // 画布图片的尺寸
-            width: {
-                type: Number,
-                default: 260
-            },
-            height: {
-                type: Number,
-                default: 120
-            },
-            // 图集
-            puzzleImgList: {
-                type: Array,
-                default: () => []
-            },
-            // 滑块的大小
-            blockSize: {
-                type: Number,
-                default: 40
-            },
-            // 误差
-            deviation: {
-                type: Number,
-                default: 4
-            },
-            // 滑块随机出现的范围
-            padding: {
-                type: Number,
-                default: 20
-            }
-        },
-        data() {
-            return {
-                moveStart: null,
-                displayTips: false,
-                verification: false,
-                randomX: null,
-                randomY: null,
-                imgRandom: "",
-                left_Num: 0
-            }
-        },
-        methods: {
-            //刷新
-            refreshImg() {
-                let imgRandomIndex = Math.round(Math.random() * (this.puzzleImgList.length - 1))
-                this.imgRandom = this.puzzleImgList[imgRandomIndex]
-                this.initCanvas()
-            },
-            //画布初始化
-            initCanvas() {
-                this.clearCanvas()
-                let w = this.width
-                let h = this.height
-                let PL_Size = this.blockSize
-                let padding = this.padding
-                let MinN_X = padding + PL_Size
-                let MaxN_X = w - padding - PL_Size - PL_Size / 6
-                let MaxN_Y = padding
-                let MinN_Y = h - padding - PL_Size - PL_Size / 6
-                this.randomX = Math.round(Math.random() * (MaxN_X - PL_Size) + MinN_X)
-                this.randomY = Math.round(Math.random() * MaxN_Y + MinN_Y)
-                let X = this.randomX
-                let Y = this.randomY
-                this.left_Num = -X + 10
-                let d = PL_Size / 3
-
-                let c = this.$refs.puzzleBox
-                let c_l = this.$refs.puzzleLost
-                let c_s = this.$refs.puzzleShadow
-                let ctx = c.getContext("2d")
-                let ctx_l = c_l.getContext("2d")
-                let ctx_s = c_s.getContext("2d")
-                ctx.globalCompositeOperation = "xor"
-                ctx.shadowBlur = 10
-                ctx.shadowColor = "#fff"
-                ctx.shadowOffsetX = 3
-                ctx.shadowOffsetY = 3
-                ctx.fillStyle = "rgba(0,0,0,0.7)"
-                ctx.beginPath()
-                ctx.lineWidth = 1
-                ctx.strokeStyle = "rgba(0,0,0,0)"
-
-                ctx.moveTo(X, Y)
-                ctx.lineTo(X + d, Y)
-                ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y)
-                ctx.lineTo(X + 3 * d, Y)
-                ctx.lineTo(X + 3 * d, Y + d)
-                ctx.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d)
-                ctx.lineTo(X + 3 * d, Y + 3 * d)
-                ctx.lineTo(X, Y + 3 * d)
-
-                ctx.closePath()
-                ctx.stroke()
-                ctx.fill()
-
-                let img = new Image()
-                img.src = this.imgRandom
-
-                img.onload = function () {
-                    ctx_l.drawImage(img, 0, 0, w, h)
-                }
-                ctx_l.beginPath()
-                ctx_l.strokeStyle = "rgba(0,0,0,0)"
-
-                ctx_l.moveTo(X, Y)
-                ctx_l.lineTo(X + d, Y)
-                ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y)
-                ctx_l.lineTo(X + 3 * d, Y)
-                ctx_l.lineTo(X + 3 * d, Y + d)
-                ctx_l.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d)
-                ctx_l.lineTo(X + 3 * d, Y + 3 * d)
-                ctx_l.lineTo(X, Y + 3 * d)
-
-                ctx_l.closePath()
-                ctx_l.stroke()
-                ctx_l.shadowBlur = 10
-                ctx_l.shadowColor = "black"
-                ctx_l.clip()
-                ctx_s.beginPath()
-                ctx_s.lineWidth = 1
-                ctx_s.strokeStyle = "rgba(0,0,0,0)"
-
-                ctx_s.moveTo(X, Y)
-                ctx_s.lineTo(X + d, Y)
-                ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y)
-                ctx_s.lineTo(X + 3 * d, Y)
-                ctx_s.lineTo(X + 3 * d, Y + d)
-                ctx_s.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d)
-                ctx_s.lineTo(X + 3 * d, Y + 3 * d)
-                ctx_s.lineTo(X, Y + 3 * d)
-
-                ctx_s.closePath()
-                ctx_s.stroke()
-                ctx_s.shadowBlur = 20
-                ctx_s.shadowColor = "black"
-                ctx_s.fill()
-            },
-            //通过重置画布尺寸清空画布，这种方式更彻底
-            clearCanvas() {
-                let c = this.$refs.puzzleBox
-                let c_l = this.$refs.puzzleLost
-                let c_s = this.$refs.puzzleShadow
-                c.setAttribute("height", c.getAttribute("height"))
-                c_l.setAttribute("height", c.getAttribute("height"))
-                c_s.setAttribute("height", c.getAttribute("height"))
-            },
-            //按住滑块后初始化移动监听，记录初始位置
-            startMove(e) {
-                this.moveStart = e.pageX
-                this.addMouseMoveListener()
-            },
-            //滑块移动
-            moving(e) {
-                let moveX = e.pageX
-                let d = moveX - this.moveStart
-                if (this.moveStart === null
-                    || d < 0
-                    || d > this.width - this.padding - this.blockSize) return
-                this.$refs.sliderBtn.$el.style.left = d + "px"
-                this.$refs.sliderBtn.$el.style.transition = "inherit"
-                this.$refs.puzzleLost.style.left = d + "px"
-                this.$refs.puzzleLost.style.transition = "inherit"
-                this.$refs.puzzleShadow.style.left = d + "px"
-                this.$refs.puzzleShadow.style.transition = "inherit"
-            },
-            //移动结束，验证并回调
-            moveEnd(e) {
-                let moveEnd_X = e.pageX - this.moveStart
-                let ver_Num = this.randomX - 10
-                let Min_left = ver_Num - this.deviation
-                let Max_left = ver_Num + this.deviation
-                if (this.moveStart !== null) {
-                    if (Max_left > moveEnd_X && moveEnd_X > Min_left) {
-                        this.displayTips = true
-                        this.verification = true
-                        setTimeout(() => {
-                            this.displayTips = false
-                            this.initCanvas()
-                            this.$emit('success')
-                        }, 500)
-                    }
-                    else {
-                        this.displayTips = true
-                        this.verification = false
-                        setTimeout(() => {
-                            this.displayTips = false
-                            this.initCanvas()
-                            this.$emit('fail')
-                        }, 800)
-                    }
-                }
-                setTimeout(() => {
-                    this.$refs.sliderBtn.$el.style.left = '0'
-                    this.$refs.sliderBtn.$el.style.transition = "left 0.5s"
-                    this.$refs.puzzleLost.style.left = '0'
-                    this.$refs.puzzleLost.style.transition = "left 0.5s"
-                    this.$refs.puzzleShadow.style.left = '0'
-                    this.$refs.puzzleShadow.style.transition = "left 0.5s"
-                }, 400)
-                this.moveStart = null
-                this.removeMouseMoveListener()
-            },
-            //全局绑定滑块移动与滑动结束，移动过程中鼠标可在页面任何位置
-            addMouseMoveListener() {
-                document.addEventListener("mousemove", this.moving)
-                document.addEventListener("mouseup", this.moveEnd)
-            },
-            removeMouseMoveListener() {
-                document.removeEventListener("mousemove", this.moving)
-                document.removeEventListener("mouseup", this.moveEnd)
-            }
-        },
-        created() {
-            // 随机显示一张图片
-            let imgRandomIndex = Math.round(Math.random() * (this.puzzleImgList.length - 1))
-            this.imgRandom = this.puzzleImgList[imgRandomIndex]
-        },
-        mounted() {
-            this.$nextTick(() => this.initCanvas())
-        },
-
-    }
-</script>
-
-<style lang="scss">
-    .puzzle-container {
-        position: relative;
-        display: inline-block;
-        padding: 0 15px 28px;
-        border: 1px solid #ddd;
-        background: #ffffff;
-        border-radius: 10px;
-
-        .puzzle-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin: 5px 0;
-
-            .puzzle-header-title {
-                font-size: 13px;
-                color: #909399
-            }
-        }
-
-        .puzzle-view {
-            position: relative;
-            overflow: hidden;
-
-            .puzzle-lost-box {
-                position: absolute;
-                left: 0;
-                top: 0;
-            }
-
-            canvas {
-                position: absolute;
-                left: 0;
-                top: 0;
-                z-index: 22;
-            }
-
-            .verify-result {
-                position: absolute;
-                left: 0;
-                bottom: -22px;
-                background: rgba(255, 255, 255, 1);
-                height: 22px;
-                line-height: 22px;
-                font-size: 12px;
-                width: 100%;
-                transition: bottom 0.4s;
-
-                .success {
-                    color: #67C23A
-                }
-
-                .error {
-                    color: #F56C6C
-                }
-
-                i {
-                    margin: 0 10px;
-                    font-weight: bold;
-                }
-
-                &.hide {
-                    bottom: 0;
-                }
-            }
-        }
-
-        .slider-container {
-            position: relative;
-            margin: 10px auto 0;
-            min-height: 15px;
-
-            .slider-bar {
-                height: 10px;
-                border: 1px solid #c3c3c3;
-                border-radius: 5px;
-                background: #e4e4e4;
-                box-shadow: 0 1px 1px rgba(12, 10, 10, 0.2) inset;
-                position: relative;
-                top: 7px;
-            }
-
-            .slider-btn {
-                position: absolute;
-                width: 44px;
-                height: 44px;
-                left: 0;
-                top: -10px;
-                z-index: 12;
-                transition: inherit;
-            }
-        }
-    }
-</style>
diff --git a/vue/src/components/PuzzleVerify/main.vue b/vue/src/components/PuzzleVerify/main.vue
new file mode 100644
index 0000000..cc95f42
--- /dev/null
+++ b/vue/src/components/PuzzleVerify/main.vue
@@ -0,0 +1,519 @@
+<template>
+    <transition :name="transition" @after-leave="handleAfterLeave">
+        <div
+                v-show="visible"
+                class="puzzle-container"
+                :class="{'puzzle-shake':stat==='fail'}"
+                :style="`left: ${positionLeft}px;top: ${positionTop}px;`"
+        >
+            <div class="puzzle-view" :style="`width:${width}px;height:${height}px;`">
+                <div v-show="!image.loading" style="width: 100%;height: 100%">
+                    <img :src="image.src"/>
+                    <canvas ref="puzzleBox" :height="height" :width="width"/>
+                    <div class="puzzle-lost-box" :style="`left:${leftNum}px`">
+                        <canvas ref="puzzleShadow" :style="sliderStyle" :height="height" :width="width"/>
+                        <canvas ref="puzzleLost" :style="sliderStyle" :height="height" :width="width"/>
+                    </div>
+                </div>
+                <transition name="fade">
+                    <div v-show="image.loading" class="puzzle-image-loading">
+                        <div class="puzzle-image-loading__icon"/>
+                        <div class="puzzle-image-loading__text">加载中...</div>
+                    </div>
+                </transition>
+                <div :class="resultTipClass">
+                    {{stat==='success'?'验证通过':'请正确拼合图像'}}
+                </div>
+            </div>
+
+            <div class="slider-container">
+                <div class="slider-track">
+                    <div class="slider-tip" :style="stat==='ready'?'opacity: 1':''">拖动滑块完成拼图</div>
+                </div>
+                <div class="slider-btn" :style="sliderBtnStyle" @mousedown.prevent.stop="moveStart"/>
+            </div>
+
+            <div class="puzzle-footer">
+                <div class="puzzle-small">
+                    <a class="puzzle-text-container puzzle-close" @click="close">
+                        <div class="puzzle-text-tip">关闭验证</div>
+                    </a>
+                    <a class="puzzle-text-container puzzle-refresh" @click="refresh">
+                        <div class="puzzle-text-tip">刷新验证</div>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+    /*
+    * https://github.com/Kevin-269581661/vue-puzzle-verification
+    * 网上搬的例子，实际开发建议用极验
+    * */
+    export default {
+        name: "PuzzleVerify",
+        props: {
+            //动画名称，具体请查看transition.scss
+            transition: {
+                type: String,
+                default: 'scale'
+            },
+            // 画布图片的尺寸
+            width: {
+                type: Number,
+                default: 260
+            },
+            height: {
+                type: Number,
+                default: 160
+            },
+            // 滑块的大小
+            blockSize: {
+                type: Number,
+                default: 40
+            },
+            // 误差
+            deviation: {
+                type: Number,
+                default: 4
+            },
+            // 滑块随机出现的范围
+            padding: {
+                type: Number,
+                default: 80
+            }
+        },
+        data() {
+            return {
+                visible: false,
+                stat: 'ready',//ready,move,success,fail,error
+                positionLeft: 0,
+                positionTop: 0,
+                resolve: () => ({}),
+                reject: () => ({}),
+                moveStartAtX: null,
+                randomX: null,
+                randomY: null,
+                leftNum: 0,
+                image: {
+                    src: '',
+                    loading: true
+                },
+                sliderStyle: {
+                    left: '0',
+                    transition: 'inherit'
+                }
+            }
+        },
+        computed: {
+            resultTipClass() {
+                const showResultTip = ['success', 'fail'].includes(this.stat)
+                return ['verify-result', `verify-${this.stat}`, showResultTip ? 'show-result' : '']
+            },
+            sliderBtnStyle() {
+                return {
+                    ...this.sliderStyle,
+                    'background-position': this.stat === 'move' ? '0 31.0992%' : '0 11.79625%'
+                }
+            }
+        },
+        methods: {
+            close() {
+                this.visible = false
+                this.clear()
+                this.reject()
+            },
+            refresh() {
+                this.initImage().then(() => this.initCanvas())
+            },
+            initCanvas() {
+                this.clear()
+                let MinX = this.padding + this.blockSize
+                let MaxX = this.width - this.padding - 2 * this.blockSize - this.blockSize / 6
+                let MaxY = this.padding
+                let MinY = this.height - this.padding - this.blockSize - this.blockSize / 6
+                this.randomX = Math.round(Math.random() * MaxX + MinX)
+                this.randomY = Math.round(Math.random() * MaxY + MinY)
+                let X = this.randomX
+                let Y = this.randomY
+                this.leftNum = -X + 10
+                let d = this.blockSize / 3
+
+                let c = this.$refs.puzzleBox
+                let c_l = this.$refs.puzzleLost
+                let c_s = this.$refs.puzzleShadow
+                let ctx = c.getContext("2d")
+                let ctx_l = c_l.getContext("2d")
+                let ctx_s = c_s.getContext("2d")
+                ctx.globalCompositeOperation = "xor"
+                ctx.shadowBlur = 10
+                ctx.shadowColor = "#fff"
+                ctx.shadowOffsetX = 3
+                ctx.shadowOffsetY = 3
+                ctx.fillStyle = "rgba(0,0,0,0.7)"
+                ctx.beginPath()
+                ctx.lineWidth = 1
+                ctx.strokeStyle = "rgba(0,0,0,0)"
+
+                ctx.moveTo(X, Y)
+                ctx.lineTo(X + d, Y)
+                ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y)
+                ctx.lineTo(X + 3 * d, Y)
+                ctx.lineTo(X + 3 * d, Y + d)
+                ctx.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d)
+                ctx.lineTo(X + 3 * d, Y + 3 * d)
+                ctx.lineTo(X, Y + 3 * d)
+
+                ctx.closePath()
+                ctx.stroke()
+                ctx.fill()
+
+                this.drawImage(img => ctx_l.drawImage(img, 0, 0, this.width, this.height))
+
+                ctx_l.beginPath()
+                ctx_l.strokeStyle = "rgba(0,0,0,0)"
+
+                ctx_l.moveTo(X, Y)
+                ctx_l.lineTo(X + d, Y)
+                ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y)
+                ctx_l.lineTo(X + 3 * d, Y)
+                ctx_l.lineTo(X + 3 * d, Y + d)
+                ctx_l.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d)
+                ctx_l.lineTo(X + 3 * d, Y + 3 * d)
+                ctx_l.lineTo(X, Y + 3 * d)
+
+                ctx_l.closePath()
+                ctx_l.stroke()
+                ctx_l.shadowBlur = 10
+                ctx_l.shadowColor = "black"
+                ctx_l.clip()
+                ctx_s.beginPath()
+                ctx_s.lineWidth = 1
+                ctx_s.strokeStyle = "rgba(0,0,0,0)"
+
+                ctx_s.moveTo(X, Y)
+                ctx_s.lineTo(X + d, Y)
+                ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y)
+                ctx_s.lineTo(X + 3 * d, Y)
+                ctx_s.lineTo(X + 3 * d, Y + d)
+                ctx_s.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d)
+                ctx_s.lineTo(X + 3 * d, Y + 3 * d)
+                ctx_s.lineTo(X, Y + 3 * d)
+
+                ctx_s.closePath()
+                ctx_s.stroke()
+                ctx_s.shadowBlur = 20
+                ctx_s.shadowColor = "black"
+                ctx_s.fill()
+            },
+            initImage() {
+                const imageListTemp = [
+                    "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4018557288,1217151095&fm=26&gp=0.jpg",
+                    "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg",
+                    "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg"
+                ]
+                this.image.loading = true
+                let imgRandomIndex = Math.round(Math.random() * (imageListTemp.length - 1))
+                this.image.src = imageListTemp[imgRandomIndex]
+                return new Promise(resolve => resolve())
+            },
+            drawImage(fun) {
+                let img = new Image()
+                img.src = this.image.src
+                img.onload = () => {
+                    fun(img)
+                    this.image.loading = false
+                }
+            },
+            clear() {
+                this.stat = 'ready'
+                let c = this.$refs.puzzleBox
+                let c_l = this.$refs.puzzleLost
+                let c_s = this.$refs.puzzleShadow
+                c.setAttribute("height", c.getAttribute("height"))
+                c_l.setAttribute("height", c.getAttribute("height"))
+                c_s.setAttribute("height", c.getAttribute("height"))
+            },
+            moveStart(e) {
+                this.moveStartAtX = e.pageX
+                this.addListener()
+            },
+            moving(e) {
+                this.stat = 'move'
+                const distance = e.pageX - this.moveStartAtX
+                if (this.moveStartAtX === null
+                    || distance < 0
+                    || distance > this.width - this.blockSize) {
+                    return
+                }
+                this.sliderStyle.left = distance + "px"
+                this.sliderStyle.transition = "inherit"
+            },
+            moveEnd(e) {
+                const distance = e.pageX - this.moveStartAtX
+                const ver_Num = this.randomX - 10
+                const minLeft = ver_Num - this.deviation
+                const maxLeft = ver_Num + this.deviation
+                if (this.moveStartAtX !== null) {
+                    const success = maxLeft > distance && distance > minLeft
+                    this.stat = success ? 'success' : 'fail'
+                    setTimeout(() => {
+                        this.stat = 'ready'
+                        if (!success) return this.initCanvas()
+                        this.resolve()
+                        this.close()
+                    }, success ? 500 : 1000)
+                }
+                setTimeout(() => {
+                    this.sliderStyle.left = '0'
+                    this.sliderStyle.transition = "left 0.5s"
+                }, 1000)
+                this.moveStartAtX = null
+                this.removeListener()
+            },
+            addListener() {
+                if (this.image.loading) return
+                document.addEventListener("mousemove", this.moving)
+                document.addEventListener("mouseup", this.moveEnd)
+            },
+            removeListener() {
+                document.removeEventListener("mousemove", this.moving)
+                document.removeEventListener("mouseup", this.moveEnd)
+            },
+            handleAfterLeave() {
+                this.$destroy(true)
+                this.$el.parentNode.removeChild(this.$el)
+            }
+        },
+        mounted() {
+            this.initImage().then(() => this.initCanvas())
+        },
+    }
+</script>
+
+<style lang="scss">
+    .puzzle-container {
+        position: absolute;
+        box-shadow: 0 0 10px #cccccc;
+        border: 1px solid #cccccc;
+        background: #ffffff;
+
+        .puzzle-text-container {
+            &:hover {
+                overflow: visible !important;
+            }
+
+            .puzzle-text-tip {
+                position: absolute;
+                top: -32px;
+                left: 10px;
+                border-radius: 2px;
+                padding: 0 4px;
+                height: 22px;
+                min-width: 50px;
+                line-height: 22px;
+                background-color: #5F5F5F;
+                white-space: nowrap;
+                font-size: 12px;
+                text-align: center;
+                color: white;
+
+                &::before {
+                    display: block;
+                    position: absolute;
+                    bottom: -6px;
+                    left: 0;
+                    content: '';
+                    border-style: solid;
+                    border-width: 4px 6px;
+                    border-color: #5F5F5F transparent transparent #5F5F5F;
+                    width: 0;
+                    height: 0;
+                }
+            }
+        }
+
+        .puzzle-view {
+            position: relative;
+            overflow: hidden;
+            margin: 10px 10px 0;
+
+            .puzzle-image-loading {
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                background-color: #e5e5e5;
+                padding-top: 10%;
+
+                &__icon {
+                    background-size: 764.70588%;
+                    background-position: 0 70.70218%;
+                    margin: 11% auto 10px;
+                    width: 34px;
+                    height: 26px;
+                    overflow: hidden;
+                    background-repeat: no-repeat;
+                    background-image: url(~@/assets/images/sprite.1.2.4.png);
+                }
+
+                &__text {
+                    text-align: center;
+                    font-size: 14px;
+                    margin-bottom: 1%;
+                    color: #b2b2b2;
+                }
+            }
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            .puzzle-lost-box {
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
+
+            canvas {
+                position: absolute;
+                left: 0;
+                top: 0;
+                z-index: 22;
+            }
+
+            .verify-result {
+                position: absolute;
+                z-index: 999;
+                color: white;
+                height: 24px;
+                line-height: 24px;
+                left: 0;
+                bottom: -25px;
+                font-size: 14px;
+                width: 100%;
+                transition: bottom 0.3s;
+                text-indent: 16px;
+
+                &.verify-success {
+                    background-color: $--color-success
+                }
+
+                &.verify-fail {
+                    background-color: $--color-danger
+                }
+
+                &.show-result {
+                    bottom: 0;
+                }
+            }
+        }
+
+        .slider-container {
+            position: relative;
+            margin: 5.39% 3.24%;
+            width: 93.52%;
+            padding: 0 0 13.67% 0;
+            background-color: white;
+            background-size: 100%;
+            background-position: 0 0;
+            background-repeat: no-repeat;
+            background-image: url(~@/assets/images/sprite.1.2.4.png);
+
+            .slider-track {
+                position: absolute;
+                top: 50%;
+                margin: -19px 0 0 0;
+                padding: 0 0 0 25%;
+
+                .slider-tip {
+                    position: relative;
+                    width: 100%;
+                    height: 100%;
+                    opacity: 0;
+                    transition: opacity .5s;
+                    line-height: 38px;
+                    font-size: 14px;
+                    text-align: center;
+                    white-space: nowrap;
+                    color: #88949d;
+                }
+            }
+
+            .slider-btn {
+                position: absolute;
+                margin: -4.62% 0 0 -2.31%;
+                width: 25.38%;
+                padding: 0 0 25.38% 0;
+                cursor: pointer;
+                background-size: 393.93939%;
+                background-repeat: no-repeat;
+                background-image: url(~@/assets/images/sprite.1.2.4.png);
+            }
+        }
+
+        .puzzle-footer {
+            position: relative;
+            border-top: 1px solid #EEEEEE;
+            width: 100%;
+            margin: 0;
+            padding: 0 0 17.27% 0;
+
+            .puzzle-small {
+                position: absolute;
+                left: 5.1%;
+                top: 50%;
+                margin-top: -4.13%;
+                padding: 0 0 8.27% 0;
+                width: 40.45%;
+                height: 0;
+
+                .puzzle-close, .puzzle-refresh {
+                    margin-left: 8.9%;
+                    width: 17.8%;
+                    cursor: pointer;
+                    text-decoration: none;
+                    vertical-align: top;
+                    position: relative;
+                    display: inline-block;
+                    height: 0;
+                    padding-bottom: 17.8%;
+                    background-repeat: no-repeat;
+                    background-image: url(~@/assets/images/sprite.1.2.4.png);
+                    overflow: hidden;
+                    background-size: 1300%;
+                }
+
+                .puzzle-close {
+                    margin-left: 0;
+                    background-position: 0 44.86874%;
+                }
+
+                .puzzle-refresh {
+                    background-position: 0 81.38425%;
+                }
+            }
+        }
+    }
+
+    .puzzle-shake {
+        animation: shake 0.2s linear 3 both;
+    }
+
+    @keyframes shake {
+        25% {
+            transform: translate3d(-6px, 0, 0)
+        }
+        75% {
+            transform: translate3d(6px, 0, 0)
+        }
+        100% {
+            transform: translate3d(0, 0, 0)
+        }
+    }
+</style>
diff --git a/vue/src/main.js b/vue/src/main.js
index b59da2f..441d685 100644
--- a/vue/src/main.js
+++ b/vue/src/main.js
@@ -13,6 +13,7 @@ import BottomTip from '@/components/BottomTip'
 import Guide from '@/components/Guide'
 import ImageViewer from '@/components/ImageViewer'
 import Message from '@/components/Message'
+import PuzzleVerify from '@/components/PuzzleVerify'
 
 Vue.use(Element)
 
@@ -29,6 +30,7 @@ Vue.prototype.$bottomTip = BottomTip
 Vue.prototype.$guide = Guide
 Vue.prototype.$image = ImageViewer
 Vue.prototype.$message = Message
+Vue.prototype.$puzzleVerify = PuzzleVerify
 
 Vue.config.productionTip = false
 
diff --git a/vue/src/router/modules/example.js b/vue/src/router/modules/example.js
index c835873..fac8317 100644
--- a/vue/src/router/modules/example.js
+++ b/vue/src/router/modules/example.js
@@ -59,12 +59,6 @@ const router = {
                     component: () => import('@/views/example/components/picturePreview'),
                     meta: {title: '图片预览'}
                 },
-                {
-                    path: 'verify',
-                    name: 'verify',
-                    component: () => import('@/views/example/components/verify'),
-                    meta: {title: '滑块验证'}
-                },
                 {
                     path: 'skeleton',
                     name: 'skeleton',
diff --git a/vue/src/views/app/403.vue b/vue/src/views/app/403.vue
index 7876ce0..2b928e1 100644
--- a/vue/src/views/app/403.vue
+++ b/vue/src/views/app/403.vue
@@ -2,7 +2,7 @@
     <div class="error-container">
         <div>
             <div class="pic">
-                <img alt="403" height="428" src="@/assets/403_images/403.gif" width="313">
+                <img alt="403" height="428" src="@/assets/images/403.gif" width="313">
             </div>
             <div class="bullshit">
                 <div class="bullshit__oops">Oops!</div>
diff --git a/vue/src/views/app/404.vue b/vue/src/views/app/404.vue
index 9780d42..b728522 100644
--- a/vue/src/views/app/404.vue
+++ b/vue/src/views/app/404.vue
@@ -2,10 +2,10 @@
     <div class="error-container">
         <div>
             <div class="pic">
-                <img alt="404" class="pic__parent" src="@/assets/404_images/404.png">
-                <img alt="404" class="pic__child left" src="@/assets/404_images/404_cloud.png">
-                <img alt="404" class="pic__child mid" src="@/assets/404_images/404_cloud.png">
-                <img alt="404" class="pic__child right" src="@/assets/404_images/404_cloud.png">
+                <img alt="404" class="pic__parent" src="@/assets/images/404.png">
+                <img alt="404" class="pic__child left" src="@/assets/images/404_cloud.png">
+                <img alt="404" class="pic__child mid" src="@/assets/images/404_cloud.png">
+                <img alt="404" class="pic__child right" src="@/assets/images/404_cloud.png">
             </div>
             <div class="bullshit">
                 <div class="bullshit__oops">Oops!</div>
diff --git a/vue/src/views/app/login.vue b/vue/src/views/app/login.vue
index 976cc6a..7f9047c 100644
--- a/vue/src/views/app/login.vue
+++ b/vue/src/views/app/login.vue
@@ -96,12 +96,16 @@
                 this.passwordType = this.passwordType === 'password' ? '' : 'password'
                 this.$nextTick(() => this.$refs.password.focus())
             },
-            login() {
+            login({pageX, pageY}) {
                 if (this.loading) return
                 this.$refs.form.validate(valid => {
                     if (!valid) return
                     this.loading = true
-                    this.$store.dispatch('user/login', {...this.form, password: md5(this.form.password)})
+                    this.$puzzleVerify({left: pageX, top: pageY})
+                        .then(() => this.$store.dispatch('user/login', {
+                            ...this.form,
+                            password: md5(this.form.password)
+                        }))
                         .then(() => this.success())
                         .catch(() => this.loading = false)
                 })
diff --git a/vue/src/views/example/components/verify.vue b/vue/src/views/example/components/verify.vue
deleted file mode 100644
index 1e3115e..0000000
--- a/vue/src/views/example/components/verify.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-    <div>
-        <el-row class="tip-row">
-            <a href="https://github.com/Kevin-269581661/vue-puzzle-verification" target="_blank">网上搬的例子</a>
-        </el-row>
-        <puzzle-verification :puzzleImgList="puzzleImgList"/>
-    </div>
-</template>
-<script>
-    import PuzzleVerification from '@/components/PuzzleVerify'
-
-    export default {
-        components: {PuzzleVerification},
-        data() {
-            return {
-                puzzleImgList: ['http://q4r31dqam.bkt.clouddn.com/image/56.jpg']
-            }
-        }
-    }
-</script>