yc-ui2 0.1.2-beta23 → 0.1.2-beta25

package/dist/yc-ui2.umd.min.286.js

@@ -0,0 +1,2 @@
+"use strict";(("undefined"!==typeof self?self:this)["webpackChunkyc_ui2"]=("undefined"!==typeof self?self:this)["webpackChunkyc_ui2"]||[]).push([[286],{9286:function(t,e,i){i.r(e),i.d(e,{default:function(){return m}});var s=function(){var t=this,e=t._self._c;return e("div",{staticClass:"slide-verify",style:{width:t.w+"px"},attrs:{id:"slideVerify",onselectstart:"return false;"}},[e("div",{class:{"slider-verify-loading":t.loadBlock}}),e("canvas",{ref:"canvas",attrs:{width:t.w,height:t.h}}),t.show?e("div",{staticClass:"slide-verify-refresh-icon",on:{click:t.refresh}}):t._e(),e("canvas",{ref:"block",staticClass:"slide-verify-block",attrs:{width:t.w,height:t.h}}),e("div",{staticClass:"slide-verify-slider",class:{"container-active":t.containerActive,"container-success":t.containerSuccess,"container-fail":t.containerFail}},[e("div",{staticClass:"slide-verify-slider-mask",style:{width:t.sliderMaskWidth}},[e("div",{staticClass:"slide-verify-slider-mask-item",style:{left:t.sliderLeft},on:{mousedown:t.sliderDown,touchstart:t.touchStartEvent,touchmove:function(e){return t.handleMoveEvent(e,"touch")},touchend:function(e){return t.handleMoveEndEvent(e,"touch")}}},[e("div",{staticClass:"slide-verify-slider-mask-item-icon"})])]),e("span",{staticClass:"slide-verify-slider-text"},[t._v(t._s(t.sliderText))])])])},n=[];i(7658);const o=Math.PI;function a(t,e){return t+e}function r(t){return t*t}var c={name:"SlideVerify",props:{l:{type:Number,default:42},r:{type:Number,default:10},w:{type:Number,default:310},h:{type:Number,default:155},sliderText:{type:String,default:"Slide filled right"},accuracy:{type:Number,default:5},show:{type:Boolean,default:!0},imgs:{type:Array,default:()=>[]}},data(){return{containerActive:!1,containerSuccess:!1,containerFail:!1,canvasCtx:null,blockCtx:null,block:null,block_x:void 0,block_y:void 0,L:this.l+2*this.r+3,img:void 0,originX:void 0,originY:void 0,isMouseDown:!1,trail:[],sliderLeft:0,sliderMaskWidth:0,success:!1,loadBlock:!0,timestamp:null}},mounted(){this.init()},methods:{init(){this.initDom(),this.initImg(),this.bindEvents()},initDom(){this.block=this.$refs.block,this.canvasCtx=this.$refs.canvas.getContext("2d"),this.blockCtx=this.block.getContext("2d")},initImg(){const t=this.createImg((()=>{this.loadBlock=!1,this.drawBlock(),this.canvasCtx.drawImage(t,0,0,this.w,this.h),this.blockCtx.drawImage(t,0,0,this.w,this.h);let{block_x:e,block_y:i,r:s,L:n}=this,o=i-2*s-1,a=this.blockCtx.getImageData(e,o,n,n);this.block.width=n,this.blockCtx.putImageData(a,0,o)}));this.img=t},drawBlock(){this.block_x=this.getRandomNumberByRange(this.L+10,this.w-(this.L+10)),this.block_y=this.getRandomNumberByRange(10+2*this.r,this.h-(this.L+10)),this.draw(this.canvasCtx,this.block_x,this.block_y,"fill"),this.draw(this.blockCtx,this.block_x,this.block_y,"clip")},draw(t,e,i,s){let{l:n,r:a}=this;t.beginPath(),t.moveTo(e,i),t.arc(e+n/2,i-a+2,a,.72*o,2.26*o),t.lineTo(e+n,i),t.arc(e+n+a-2,i+n/2,a,1.21*o,2.78*o),t.lineTo(e+n,i+n),t.lineTo(e,i+n),t.arc(e+a-2,i+n/2,a+.4,2.76*o,1.24*o,!0),t.lineTo(e,i),t.lineWidth=2,t.fillStyle="rgba(255, 255, 255, 0.7)",t.strokeStyle="rgba(255, 255, 255, 0.7)",t.stroke(),t[s](),t.globalCompositeOperation="destination-over"},createImg(t){const e=document.createElement("img");return e.crossOrigin="Anonymous",e.onload=t,e.onerror=()=>{e.src=this.getRandomImg()},e.src=this.getRandomImg(),e},getRandomImg(){const t=this.imgs.length;return t>0?this.imgs[this.getRandomNumberByRange(0,t-1)]:"https://source.unsplash.com/300x150/?book,library"},getRandomNumberByRange(t,e){return Math.round(Math.random()*(e-t)+t)},refresh(){this.reset(),this.$emit("refresh")},sliderDown(t){this.success||(this.originX=t.clientX,this.originY=t.clientY,this.isMouseDown=!0,this.timestamp=+new Date)},touchStartEvent(t){this.success||(this.originX=t.changedTouches[0].pageX,this.originY=t.changedTouches[0].pageY,this.isMouseDown=!0,this.timestamp=+new Date)},bindEvents(){document.addEventListener("mousemove",this.handleMoveEvent),document.addEventListener("mouseup",this.handleMoveEndEvent)},handleMoveEvent:l((function(t,e="mouse"){if(!this.isMouseDown)return!1;const i="mouse"===e?t.clientX-this.originX:t.changedTouches[0].pageX-this.originX,s="mouse"===e?t.clientY-this.originY:t.changedTouches[0].pageY-this.originY;if(i<0||i+38>=this.w)return!1;this.sliderLeft=i+"px";let n=(this.w-40-20)/(this.w-40)*i;this.block.style.left=n+"px",this.containerActive=!0,this.sliderMaskWidth=i+"px",this.trail.push(s)})),handleMoveEndEvent(t,e="mouse"){if(!this.isMouseDown)return!1;if(this.isMouseDown=!1,"mouse"===e&&t.clientX===this.originX||"touch"===e&&t.changedTouches[0].pageX===this.originX)return!1;this.containerActive=!1,this.timestamp=+new Date-this.timestamp;const{spliced:i,TuringTest:s}=this.verify();if(i){if(-1===this.accuracy)return this.containerSuccess=!0,this.success=!0,void this.$emit("success",this.timestamp);s?(this.containerSuccess=!0,this.success=!0,this.$emit("success",this.timestamp)):(this.containerFail=!0,this.$emit("again"))}else this.containerFail=!0,this.$emit("fail"),setTimeout((()=>{this.reset()}),1e3)},verify(){const t=this.trail,e=t.reduce(a)/t.length,i=t.map((t=>t-e)),s=Math.sqrt(i.map(r).reduce(a)/t.length),n=parseInt(this.block.style.left),o=this.accuracy<=1?1:this.accuracy>10?10:this.accuracy;return{spliced:Math.abs(n-this.block_x)<=o,TuringTest:e!==s}},reset(){this.success=!1,this.containerActive=!1,this.containerSuccess=!1,this.containerFail=!1,this.sliderLeft=0,this.block.style.left=0,this.sliderMaskWidth=0;let{w:t,h:e}=this;this.canvasCtx.clearRect(0,0,t,e),this.blockCtx.clearRect(0,0,t,e),this.block.width=t,this.img.src=this.getRandomImg(),this.$emit("fulfilled")}},destroyed(){document.removeEventListener("mousemove",this.handleMoveEvent),document.removeEventListener("mouseup",this.handleMoveEndEvent)}};function l(t,e=50,i={leading:!0,trailing:!0}){const{leading:s,trailing:n,resultCallback:o}=i;let a=0,r=null;const c=function(...i){return new Promise(((c,l)=>{const h=(new Date).getTime();a||s||(a=h);const u=e-(h-a);if(u<=0){r&&(clearTimeout(r),r=null);const e=t.apply(this,i);return o&&o(e),c(e),void(a=h)}n&&!r&&(r=setTimeout((()=>{r=null,a=s?(new Date).getTime():0;const e=t.apply(this,i);o&&o(e),c(e)}),u))}))};return c.cancel=function(){r&&clearTimeout(r),r=null,a=0},c}var h=c,u=i(1001),d=(0,u.Z)(h,s,n,!1,null,"b67196d8",null),m=d.exports}}]);
+//# sourceMappingURL=yc-ui2.umd.min.286.js.map

package/dist/yc-ui2.umd.min.286.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"yc-ui2.umd.min.286.js","mappings":"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","sources":["webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue","webpack://yc-ui2/node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue","webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?bb41","webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?90e5"],"sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"slide-verify\",style:({ width: _vm.w + 'px' }),attrs:{\"id\":\"slideVerify\",\"onselectstart\":\"return false;\"}},[_c('div',{class:{ 'slider-verify-loading': _vm.loadBlock }}),_c('canvas',{ref:\"canvas\",attrs:{\"width\":_vm.w,\"height\":_vm.h}}),(_vm.show)?_c('div',{staticClass:\"slide-verify-refresh-icon\",on:{\"click\":_vm.refresh}}):_vm._e(),_c('canvas',{ref:\"block\",staticClass:\"slide-verify-block\",attrs:{\"width\":_vm.w,\"height\":_vm.h}}),_c('div',{staticClass:\"slide-verify-slider\",class:{\n      'container-active': _vm.containerActive,\n      'container-success': _vm.containerSuccess,\n      'container-fail': _vm.containerFail\n    }},[_c('div',{staticClass:\"slide-verify-slider-mask\",style:({ width: _vm.sliderMaskWidth })},[_c('div',{staticClass:\"slide-verify-slider-mask-item\",style:({ left: _vm.sliderLeft }),on:{\"mousedown\":_vm.sliderDown,\"touchstart\":_vm.touchStartEvent,\"touchmove\":function($event){return _vm.handleMoveEvent($event, 'touch')},\"touchend\":function($event){return _vm.handleMoveEndEvent($event, 'touch')}}},[_c('div',{staticClass:\"slide-verify-slider-mask-item-icon\"})])]),_c('span',{staticClass:\"slide-verify-slider-text\"},[_vm._v(_vm._s(_vm.sliderText))])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div\n    class=\"slide-verify\"\n    :style=\"{ width: w + 'px' }\"\n    id=\"slideVerify\"\n    onselectstart=\"return false;\"\n  >\n    <!-- 图片加载遮蔽罩 -->\n    <div :class=\"{ 'slider-verify-loading': loadBlock }\"></div>\n    <canvas :width=\"w\" :height=\"h\" ref=\"canvas\"></canvas>\n    <div v-if=\"show\" @click=\"refresh\" class=\"slide-verify-refresh-icon\"></div>\n    <canvas\n      :width=\"w\"\n      :height=\"h\"\n      ref=\"block\"\n      class=\"slide-verify-block\"\n    ></canvas>\n    <!-- container -->\n    <div\n      class=\"slide-verify-slider\"\n      :class=\"{\n        'container-active': containerActive,\n        'container-success': containerSuccess,\n        'container-fail': containerFail\n      }\"\n    >\n      <div class=\"slide-verify-slider-mask\" :style=\"{ width: sliderMaskWidth }\">\n        <!-- slider -->\n        <div\n          @mousedown=\"sliderDown\"\n          @touchstart=\"touchStartEvent\"\n          @touchmove=\"handleMoveEvent($event, 'touch')\"\n          @touchend=\"handleMoveEndEvent($event, 'touch')\"\n          class=\"slide-verify-slider-mask-item\"\n          :style=\"{ left: sliderLeft }\"\n        >\n          <div class=\"slide-verify-slider-mask-item-icon\"></div>\n        </div>\n      </div>\n      <span class=\"slide-verify-slider-text\">{{ sliderText }}</span>\n    </div>\n  </div>\n</template>\n<script>\nconst PI = Math.PI;\n\nfunction sum(x, y) {\n  return x + y;\n}\n\nfunction square(x) {\n  return x * x;\n}\nexport default {\n  name: \"SlideVerify\",\n  props: {\n    // block length\n    l: {\n      type: Number,\n      default: 42\n    },\n    // block radius\n    r: {\n      type: Number,\n      default: 10\n    },\n    // canvas width\n    w: {\n      type: Number,\n      default: 310\n    },\n    // canvas height\n    h: {\n      type: Number,\n      default: 155\n    },\n    sliderText: {\n      type: String,\n      default: \"Slide filled right\"\n    },\n    accuracy: {\n      type: Number,\n      default: 5 // 若为 -1 则不进行机器判断\n    },\n    show: {\n      type: Boolean,\n      default: true\n    },\n    imgs: {\n      type: Array,\n      default: () => []\n    }\n  },\n  data() {\n    return {\n      containerActive: false, // container active class\n      containerSuccess: false, // container success class\n      containerFail: false, // container fail class\n      canvasCtx: null,\n      blockCtx: null,\n      block: null,\n      block_x: undefined, // container random position\n      block_y: undefined,\n      L: this.l + this.r * 2 + 3, // block real length\n      img: undefined,\n      originX: undefined,\n      originY: undefined,\n      isMouseDown: false,\n      trail: [],\n      sliderLeft: 0, // block right offset\n      sliderMaskWidth: 0, // mask width,\n      success: false, // Bug Fixes 修复了验证成功后还能滑动\n      loadBlock: true, // Features 图片加载提示，防止图片没加载完就开始验证\n      timestamp: null\n    };\n  },\n  mounted() {\n    this.init();\n  },\n  methods: {\n    init() {\n      this.initDom();\n      this.initImg();\n      this.bindEvents();\n    },\n    initDom() {\n      this.block = this.$refs.block;\n      this.canvasCtx = this.$refs.canvas.getContext(\"2d\");\n      this.blockCtx = this.block.getContext(\"2d\");\n    },\n    initImg() {\n      const img = this.createImg(() => {\n        // 图片加载完关闭遮蔽罩\n        this.loadBlock = false;\n        this.drawBlock();\n        this.canvasCtx.drawImage(img, 0, 0, this.w, this.h);\n        this.blockCtx.drawImage(img, 0, 0, this.w, this.h);\n        let { block_x: x, block_y: y, r, L } = this;\n        let _y = y - r * 2 - 1;\n        let ImageData = this.blockCtx.getImageData(x, _y, L, L);\n        this.block.width = L;\n        this.blockCtx.putImageData(ImageData, 0, _y);\n      });\n      this.img = img;\n    },\n    drawBlock() {\n      this.block_x = this.getRandomNumberByRange(\n        this.L + 10,\n        this.w - (this.L + 10)\n      );\n      this.block_y = this.getRandomNumberByRange(\n        10 + this.r * 2,\n        this.h - (this.L + 10)\n      );\n      this.draw(this.canvasCtx, this.block_x, this.block_y, \"fill\");\n      this.draw(this.blockCtx, this.block_x, this.block_y, \"clip\");\n    },\n    draw(ctx, x, y, operation) {\n      let { l, r } = this;\n      ctx.beginPath();\n      ctx.moveTo(x, y);\n      ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);\n      ctx.lineTo(x + l, y);\n      ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);\n      ctx.lineTo(x + l, y + l);\n      ctx.lineTo(x, y + l);\n      ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);\n      ctx.lineTo(x, y);\n      ctx.lineWidth = 2;\n      ctx.fillStyle = \"rgba(255, 255, 255, 0.7)\";\n      ctx.strokeStyle = \"rgba(255, 255, 255, 0.7)\";\n      ctx.stroke();\n      ctx[operation]();\n      // Bug Fixes 修复了火狐和ie显示问题\n      ctx.globalCompositeOperation = \"destination-over\";\n    },\n    createImg(onload) {\n      const img = document.createElement(\"img\");\n      img.crossOrigin = \"Anonymous\";\n      img.onload = onload;\n      img.onerror = () => {\n        img.src = this.getRandomImg();\n      };\n      img.src = this.getRandomImg();\n      return img;\n    },\n    // 随机生成img src\n    getRandomImg() {\n      // return require('../assets/img.jpg')\n      const len = this.imgs.length;\n      return len > 0\n        ? this.imgs[this.getRandomNumberByRange(0, len - 1)]\n        : // \"https://bing.ioliu.cn/v1/rand?w=300&h=150\";\n          \"https://source.unsplash.com/300x150/?book,library\";\n      // \"https://api.dujin.org/pic/fengjing\";\n    },\n    getRandomNumberByRange(start, end) {\n      return Math.round(Math.random() * (end - start) + start);\n    },\n    refresh() {\n      this.reset();\n      this.$emit(\"refresh\");\n    },\n    sliderDown(event) {\n      if (this.success) return;\n      this.originX = event.clientX;\n      this.originY = event.clientY;\n      this.isMouseDown = true;\n      this.timestamp = +new Date();\n    },\n    touchStartEvent(e) {\n      if (this.success) return;\n      this.originX = e.changedTouches[0].pageX;\n      this.originY = e.changedTouches[0].pageY;\n      this.isMouseDown = true;\n      this.timestamp = +new Date();\n    },\n    bindEvents() {\n      document.addEventListener(\"mousemove\", this.handleMoveEvent);\n      document.addEventListener(\"mouseup\", this.handleMoveEndEvent);\n    },\n    // 处理函数抽离\n    handleMoveEvent: throttle(function(e, type = \"mouse\") {\n      if (!this.isMouseDown) return false;\n      const moveX =\n        type === \"mouse\"\n          ? e.clientX - this.originX\n          : e.changedTouches[0].pageX - this.originX;\n      const moveY =\n        type === \"mouse\"\n          ? e.clientY - this.originY\n          : e.changedTouches[0].pageY - this.originY;\n      if (moveX < 0 || moveX + 38 >= this.w) return false;\n      this.sliderLeft = moveX + \"px\";\n      let blockLeft = ((this.w - 40 - 20) / (this.w - 40)) * moveX;\n      this.block.style.left = blockLeft + \"px\";\n\n      this.containerActive = true; // add active\n      this.sliderMaskWidth = moveX + \"px\";\n      this.trail.push(moveY);\n    }),\n    handleMoveEndEvent(e, type = \"mouse\") {\n      if (!this.isMouseDown) return false;\n      this.isMouseDown = false;\n      if (\n        (type === \"mouse\" && e.clientX === this.originX) ||\n        (type === \"touch\" && e.changedTouches[0].pageX === this.originX)\n      )\n        return false;\n      this.containerActive = false; // remove active\n      this.timestamp = +new Date() - this.timestamp;\n\n      const { spliced, TuringTest } = this.verify();\n      if (spliced) {\n        if (this.accuracy === -1) {\n          this.containerSuccess = true;\n          this.success = true;\n          this.$emit(\"success\", this.timestamp);\n          return;\n        }\n        if (TuringTest) {\n          // succ\n          this.containerSuccess = true;\n          this.success = true;\n          this.$emit(\"success\", this.timestamp);\n        } else {\n          this.containerFail = true;\n          this.$emit(\"again\");\n        }\n      } else {\n        this.containerFail = true;\n        this.$emit(\"fail\");\n        setTimeout(() => {\n          this.reset();\n        }, 1000);\n      }\n    },\n    verify() {\n      const arr = this.trail; // drag y move distance\n      const average = arr.reduce(sum) / arr.length; // average\n      const deviations = arr.map(x => x - average); // deviation array\n      const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // standard deviation\n      const left = parseInt(this.block.style.left);\n      const accuracy =\n        this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy;\n      return {\n        spliced: Math.abs(left - this.block_x) <= accuracy,\n        TuringTest: average !== stddev // equal => not person operate\n      };\n    },\n    reset() {\n      this.success = false;\n      this.containerActive = false;\n      this.containerSuccess = false;\n      this.containerFail = false;\n      this.sliderLeft = 0;\n      this.block.style.left = 0;\n      this.sliderMaskWidth = 0;\n      // canvas\n      let { w, h } = this;\n      this.canvasCtx.clearRect(0, 0, w, h);\n      this.blockCtx.clearRect(0, 0, w, h);\n      this.block.width = w;\n\n      // generate img\n      this.img.src = this.getRandomImg();\n      this.$emit(\"fulfilled\");\n    }\n  },\n  destroyed() {\n    document.removeEventListener(\"mousemove\", this.handleMoveEvent);\n    document.removeEventListener(\"mouseup\", this.handleMoveEndEvent);\n  }\n};\n\nfunction throttle(\n  fn,\n  interval = 50,\n  options = { leading: true, trailing: true }\n) {\n  const { leading, trailing, resultCallback } = options;\n  let lastTime = 0;\n  let timer = null;\n\n  const _throttle = function(...args) {\n    return new Promise((resolve, reject) => {\n      const nowTime = new Date().getTime();\n      if (!lastTime && !leading) lastTime = nowTime;\n\n      const remainTime = interval - (nowTime - lastTime);\n      if (remainTime <= 0) {\n        if (timer) {\n          clearTimeout(timer);\n          timer = null;\n        }\n\n        const result = fn.apply(this, args);\n        if (resultCallback) resultCallback(result);\n        resolve(result);\n        lastTime = nowTime;\n        return;\n      }\n\n      if (trailing && !timer) {\n        timer = setTimeout(() => {\n          timer = null;\n          lastTime = !leading ? 0 : new Date().getTime();\n          const result = fn.apply(this, args);\n          if (resultCallback) resultCallback(result);\n          resolve(result);\n        }, remainTime);\n      }\n    });\n  };\n\n  _throttle.cancel = function() {\n    if (timer) clearTimeout(timer);\n    timer = null;\n    lastTime = 0;\n  };\n\n  return _throttle;\n}\n</script>\n<style scoped>\n.slide-verify {\n  position: relative;\n}\n\n/* 图片加载样式 */\n.slider-verify-loading {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: rgba(255, 255, 255, 0.9);\n  z-index: 999;\n  animation: loading 1.5s infinite;\n}\n\n@keyframes loading {\n  0% {\n    opacity: 0.7;\n  }\n  100% {\n    opacity: 9;\n  }\n}\n\n.slide-verify-block {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n.slide-verify-refresh-icon {\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 34px;\n  height: 34px;\n  cursor: pointer;\n  background: url(\"../assets/icon_light.png\") 0 -437px;\n  background-size: 34px 471px;\n}\n\n.slide-verify-slider {\n  position: relative;\n  text-align: center;\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  margin-top: 15px;\n  background: #f7f9fa;\n  color: #45494c;\n  border: 1px solid #e4e7eb;\n}\n\n.slide-verify-slider-mask {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 40px;\n  border: 0 solid #1991fa;\n  background: #d1e9fe;\n}\n\n.slide-verify-slider-mask-item {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 40px;\n  height: 40px;\n  background: #fff;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n  transition: background 0.2s linear;\n}\n\n.slide-verify-slider-mask-item:hover {\n  background: #1991fa;\n}\n\n.slide-verify-slider-mask-item:hover .slide-verify-slider-mask-item-icon {\n  background-position: 0 -13px;\n}\n\n.slide-verify-slider-mask-item-icon {\n  position: absolute;\n  top: 15px;\n  left: 13px;\n  width: 14px;\n  height: 12px;\n  background: url(\"../assets/icon_light.png\") 0 -26px;\n  background-size: 34px 471px;\n}\n.container-active .slide-verify-slider-mask-item {\n  height: 38px;\n  top: -1px;\n  border: 1px solid #1991fa;\n}\n\n.container-active .slide-verify-slider-mask {\n  height: 38px;\n  border-width: 1px;\n}\n\n.container-success .slide-verify-slider-mask-item {\n  height: 38px;\n  top: -1px;\n  border: 1px solid #52ccba;\n  background-color: #52ccba !important;\n}\n\n.container-success .slide-verify-slider-mask {\n  height: 38px;\n  border: 1px solid #52ccba;\n  background-color: #d2f4ef;\n}\n\n.container-success .slide-verify-slider-mask-item-icon {\n  background-position: 0 0 !important;\n}\n\n.container-fail .slide-verify-slider-mask-item {\n  height: 38px;\n  top: -1px;\n  border: 1px solid #f57a7a;\n  background-color: #f57a7a !important;\n}\n\n.container-fail .slide-verify-slider-mask {\n  height: 38px;\n  border: 1px solid #f57a7a;\n  background-color: #fce1e1;\n}\n\n.container-fail .slide-verify-slider-mask-item-icon {\n  top: 14px;\n  background-position: 0 -82px !important;\n}\n\n.container-active .slide-verify-slider-text,\n.container-success .slide-verify-slider-text,\n.container-fail .slide-verify-slider-text {\n  display: none;\n}\n</style>\n","import mod from \"-!../../../thread-loader/dist/cjs.js!../../../babel-loader/lib/index.js??clonedRuleSet-124.use[1]!../../../@vue/vue-loader-v15/lib/index.js??vue-loader-options!./slide-verify.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../thread-loader/dist/cjs.js!../../../babel-loader/lib/index.js??clonedRuleSet-124.use[1]!../../../@vue/vue-loader-v15/lib/index.js??vue-loader-options!./slide-verify.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./slide-verify.vue?vue&type=template&id=b67196d8&scoped=true&\"\nimport script from \"./slide-verify.vue?vue&type=script&lang=js&\"\nexport * from \"./slide-verify.vue?vue&type=script&lang=js&\"\nimport style0 from \"./slide-verify.vue?vue&type=style&index=0&id=b67196d8&prod&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../@vue/vue-loader-v15/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"b67196d8\",\n  null\n  \n)\n\nexport default component.exports"],"names":["render","_vm","this","_c","_self","staticClass","style","width","w","attrs","class","loadBlock","ref","h","show","on","refresh","_e","containerActive","containerSuccess","containerFail","sliderMaskWidth","left","sliderLeft","sliderDown","touchStartEvent","$event","handleMoveEvent","handleMoveEndEvent","_v","_s","sliderText","staticRenderFns","PI","Math","sum","x","y","square","name","props","l","type","Number","default","r","String","accuracy","Boolean","imgs","Array","data","canvasCtx","blockCtx","block","block_x","undefined","block_y","L","img","originX","originY","isMouseDown","trail","success","timestamp","mounted","init","methods","initDom","initImg","bindEvents","$refs","canvas","getContext","createImg","drawBlock","drawImage","_y","ImageData","getImageData","putImageData","getRandomNumberByRange","draw","ctx","operation","beginPath","moveTo","arc","lineTo","lineWidth","fillStyle","strokeStyle","stroke","globalCompositeOperation","onload","document","createElement","crossOrigin","onerror","src","getRandomImg","len","length","start","end","round","random","reset","$emit","event","clientX","clientY","Date","e","changedTouches","pageX","pageY","addEventListener","throttle","moveX","moveY","blockLeft","push","spliced","TuringTest","verify","setTimeout","arr","average","reduce","deviations","map","stddev","sqrt","parseInt","abs","clearRect","destroyed","removeEventListener","fn","interval","options","leading","trailing","resultCallback","lastTime","timer","_throttle","args","Promise","resolve","reject","nowTime","getTime","remainTime","clearTimeout","result","apply","cancel","component"],"sourceRoot":""}