text: !function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vue-imageview",[],e):"object"==typeof exports?exports["vue-imageview"]=e():n["vue-imageview"]=e()}(window,(function(){return function(n){var e={};function t(i){if(e[i])return e[i].exports;var A=e[i]={i:i,l:!1,exports:{}};return n[i].call(A.exports,A,A.exports,t),A.l=!0,A.exports}return t.m=n,t.c=e,t.d=function(n,e,i){t.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:i})},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.t=function(n,e){if(1&e&&(n=t(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var i=Object.create(null);if(t.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var A in n)t.d(i,A,function(e){return n[e]}.bind(null,A));return i},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.p="/lib/",t(t.s=0)}([function(n,e,t){"use strict";function i(n,e,t,i,A,a,r){try{var o=n[a](r),s=o.value}catch(n){return void t(n)}o.done?e(s):Promise.resolve(s).then(i,A)}t.r(e);var A={props:{images:{type:Array,default:function(){return[]}},src:{type:String,default:""},info:{type:Object,default:function(){return{}}},visible:{type:Boolean,default:!1},size:{type:Object,default:function(){return{}}}},data:function(){return{currenImage:"",containerStyle:{transform:"translate(0px, 0px) scale(0.5)","--init-coord":"translate(0px, 0px) scale(0.5)"},imgStyle:{scale:1,translate:{x:0,y:0}},showIndex:0,imagesArr:[]}},methods:{close:function(){this.$emit("update:visible",!1)},next:function(){var n=this;this.showIndex<this.imagesArr.length-1&&(this.showIndex++,this.currenImage="",this.$nextTick((function(){n.change(n.imagesArr[n.showIndex])})))},prev:function(){var n=this;this.showIndex>0&&(this.showIndex--,this.currenImage="",this.$nextTick((function(){n.change(n.imagesArr[n.showIndex])})))},change:function(n){var e=n.width,t=n.height,i=n.src,A=this.$refs.preview.getBoundingClientRect(),a=A.width-60,r=A.height-60,o=1,s=1;e>=a&&(o=Number(parseFloat(a/e).toFixed(3))),t>=r&&(s=Number(parseFloat(r/t).toFixed(3)));var c=Math.min(o,s);this.imgStyle.scale=c,this.imgStyle.translate.x=0,this.imgStyle.translate.y=0,this.currenImage=i,this.scaleMin=c>.5?.5:.1},scroll:function(n){var e=this;this.scheduledAnimationFrame||(this.scheduledAnimationFrame=!0,requestAnimationFrame((function(){var t=e.imgStyle.scale+.01*n.deltaY;e.scheduledAnimationFrame=!1,e.toScaleOfStep(t)}))),n.preventDefault()},dragImage:function(n){var e=this.imagesArr[this.showIndex],t=e.width,i=e.height,A=this.$refs.preview.getBoundingClientRect(),a=A.width,r=A.height;this.overWidth=t*this.imgStyle.scale-a,this.overHeight=i*this.imgStyle.scale-r,(this.overWidth>0||this.overHeight>0)&&(this.startX=n.clientX,this.startY=n.clientY,this.boxLeft=(this.overWidth/2+30)/this.imgStyle.scale,this.boxTop=(this.overHeight/2+30)/this.imgStyle.scale,this.boxRight=(this.overHeight/2+30)/this.imgStyle.scale,document.addEventListener("mousemove",this.imageMove),document.addEventListener("mouseup",this.imgageUp)),n.preventDefault()},imageMove:function(n){var e=this;this.dragAnimationFrame||(this.dragAnimationFrame=!0,requestAnimationFrame((function(){e.dragAnimationFrame=!1;var t=n.clientX,i=n.clientY,A=t-e.startX,a=i-e.startY,r=e.imgStyle.translate.x+.5*A,o=e.imgStyle.translate.y+.5*a;r>=e.boxLeft&&(r=e.boxLeft),o>=e.boxTop&&(o=e.boxTop),r<=-e.boxLeft&&(r=-e.boxLeft),o<=-e.boxTop&&(o=-e.boxTop),e.overWidth>0&&(e.imgStyle.translate.x=r),e.overHeight>0&&(e.imgStyle.translate.y=o),e.startX=t,e.startY=i}))),n.preventDefault()},imgageUp:function(n){document.removeEventListener("mousemove",this.imageMove),document.removeEventListener("mouseup",this.imgageUp),n.preventDefault()},toScaleMax:function(){this.toScaleOfStep(this.imgStyle.scale+.2)},toScaleMin:function(){this.toScaleOfStep(this.imgStyle.scale-.2)},realScreen:function(){this.imgStyle.scale=1,this.imgStyle.translate.x=0,this.imgStyle.translate.y=0},toScaleOfStep:function(n){n<=this.scaleMin?n=this.scaleMin:n>=this.scaleMax&&(n=this.scaleMax),this.imgStyle.scale=n},toDownload:function(){var n=this.src.split("/"),e=document.createElement("a");e.download=n[n.length-1],e.href=this.src,e.click()},loadImage:function(n){return new Promise((function(e,t){var i=new Image;i.src=n,i.onload=function(){e({src:n,width:i.width,height:i.height})},i.onerror=t}))},imagesChanged:function(){var n=this;return function(n){return function(){var e=this,t=arguments;return new Promise((function(A,a){var r=n.apply(e,t);function o(n){i(r,A,a,o,s,"next",n)}function s(n){i(r,A,a,o,s,"throw",n)}o(void 0)}))}}(regeneratorRuntime.mark((function e(){var t,i,A;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:t=[],i=0;case 2:if(!(i<n.images.length)){e.next=16;break}return e.prev=3,e.next=6,n.loadImage(n.images[i]);case 6:A=e.sent,t.push(A),e.next=13;break;case 10:e.prev=10,e.t0=e.catch(3);case 13:i++,e.next=2;break;case 16:n.imagesArr=t;case 17:case"end":return e.stop()}}),e,null,[[3,10]])})))()}},watch:{visible:function(n){var e=this;n&&(this.showIndex=this.imagesArr.findIndex((function(n){return n.src===e.src})),this.$nextTick((function(){e.change(e.imagesArr[e.showIndex])})))},images:function(){this.imagesChanged()}},created:function(){this.scaleMax=3,this.scaleMin=.5},mounted:function(){document.body.appendChild(this.$el)}};function a(n,e,t,i,A,a,r,o,s,c){"boolean"!=typeof r&&(s=o,o=r,r=!1);var l,d="function"==typeof t?t.options:t;if(n&&n.render&&(d.render=n.render,d.staticRenderFns=n.staticRenderFns,d._compiled=!0,A&&(d.functional=!0)),i&&(d._scopeId=i),a?(l=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),e&&e.call(this,s(n)),n&&n._registeredComponents&&n._registeredComponents.add(a)},d._ssrRegister=l):e&&(l=r?function(n){e.call(this,c(n,this.$root.$options.shadowRoot))}:function(n){e.call(this,o(n))}),l)if(d.functional){var p=d.render;d.render=function(n,e){return l.call(e),p(n,e)}}else{var v=d.beforeCreate;d.beforeCreate=v?[].concat(v,l):[l]}return t}var r,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(n){return function(n,e){return function(n,e){var t=o?e.media||"default":n,i=c[t]||(c[t]={ids:new Set,styles:[]});if(!i.ids.has(n)){i.ids.add(n);var A=e.source;if(e.map&&(A+="\n/*# sourceURL="+e.map.sources[0]+" */",A+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===r&&(r=document.head||document.getElementsByTagName("head")[0]),r.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(A),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var a=i.ids.size-1,s=document.createTextNode(A),l=i.element.childNodes;l[a]&&i.element.removeChild(l[a]),l.length?i.element.insertBefore(s,l[a]):i.element.appendChild(s)}}}(n,e)}}var c={};var l=A,d=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{directives:[{name:"show",rawName:"v-show",value:n.visible,expression:"visible"}],ref:"preview",staticClass:"preview",class:n.visible?"preview-visible":"preview-hidden",on:{mousewheel:n.scroll}},[t("div",{staticClass:"preview-image-mask"},[t("div",{staticClass:"preview-image-container",style:n.containerStyle},[t("div",{staticClass:"preview-image-wrapper-container",style:{transform:"scale("+n.imgStyle.scale+") translate("+n.imgStyle.translate.x+"px, "+n.imgStyle.translate.y+"px)"},on:{mousedown:n.dragImage}},[t("transition",{attrs:{name:"fade"}},[n.currenImage?t("img",{staticClass:"preview-image",attrs:{src:n.currenImage}}):n._e()])],1)])]),n._v(" "),t("div",{staticClass:"preview-hot-zone"},[t("div",{staticClass:"preview-widgets-container-top preview-widgets-container-visible"},[t("div",{staticClass:"preview-button-close",on:{click:n.close}})]),n._v(" "),n.showIndex>0?t("div",{staticClass:"preview-button-prev",on:{click:n.prev}}):n._e(),n._v(" "),n.showIndex<n.images.length-1?t("div",{staticClass:"preview-button-next",on:{click:n.next}}):n._e(),n._v(" "),t("div",{staticClass:"preview-bottom-container"},[t("div",{staticClass:"preview-page-number preview-page-number-visible"},[n._v(n._s(n.showIndex+1)+"/"+n._s(n.imagesArr.length))]),n._v(" "),t("div",{staticClass:"preview-widgets-button-container-bottom preview-widgets-button-container-visible"},[t("span",{staticClass:"preview-scale-up-button",class:n.imgStyle.scale>=n.scaleMax?"preview-disable-click":"",on:{click:n.toScaleMax}}),n._v(" "),t("span",{staticClass:"preview-scale-down-button",class:n.imgStyle.scale<=n.scaleMin?"preview-disable-click":"",on:{click:n.toScaleMin}}),n._v(" "),t("span",{staticClass:"preview-real-screen-button",on:{click:n.realScreen}}),n._v(" "),t("span",{staticClass:"preview-divide-line"}),n._v(" "),t("span",{staticClass:"preview-download-button",on:{click:n.toDownload}})])])])])};d._withStripped=!0;var p=a({render:d,staticRenderFns:[]},(function(n){n&&n("data-v-dc2c821c_0",{source:"\n.preview[data-v-dc2c821c] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n  z-index: 10001;\n  font-family: PingFang SC, Microsoft YaHei, sans-serif;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.preview[data-v-dc2c821c] ::-webkit-scrollbar {\n  display: none;\n}\n.preview-image-mask[data-v-dc2c821c] {\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.preview-disable-click[data-v-dc2c821c] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.preview-image[data-v-dc2c821c] {\n  background-color: #fff;\n}\n.preview-image-error[data-v-dc2c821c],\n.preview-image-loading[data-v-dc2c821c] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.preview-image-error[data-v-dc2c821c] {\n  width: 100px;\n  height: 20px;\n  font-size: 14px;\n  color: hsla(0, 0%, 100%, 0.4);\n  text-align: center;\n}\n.preview-image-container[data-v-dc2c821c] {\n  overflow: visible;\n}\n.preview-widgets-container-top[data-v-dc2c821c] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  -webkit-backdrop-filter: blur(50px);\n  backdrop-filter: blur(50px);\n  background-color: rgba(0, 0, 0, 0.32);\n  transition: 0.3s;\n}\n.preview-widgets-container-top[data-v-dc2c821c]:after {\n  content: \"\";\n  position: absolute;\n  bottom: -64px;\n  left: 0;\n  right: 0;\n  height: 64px;\n  background: transparent;\n}\n.preview-hidden .preview-widgets-container-top[data-v-dc2c821c],\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-widgets-container-top[data-v-dc2c821c] {\n  transform: translateY(-100%);\n}\n.preview-widgets-container-bottom[data-v-dc2c821c] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  -webkit-backdrop-filter: blur(50px);\n  backdrop-filter: blur(50px);\n  background-color: rgba(0, 0, 0, 0.32);\n  transition: 0.3s;\n}\n.preview-widgets-container-bottom[data-v-dc2c821c]:after {\n  content: \"\";\n  position: absolute;\n  top: -64px;\n  left: 0;\n  right: 0;\n  height: 64px;\n  background: transparent;\n}\n.preview-hidden .preview-widgets-container-bottom[data-v-dc2c821c],\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-widgets-container-bottom[data-v-dc2c821c] {\n  transform: translateY(100%);\n}\n.preview-button-close[data-v-dc2c821c] {\n  position: absolute;\n  top: 8px;\n  right: 20px;\n  width: 32px;\n  height: 32px;\n  border-radius: 4px;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.364 11.05L17.414 16l4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95 1.414-1.414 4.95 4.95 4.95-4.95 1.414 1.414z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E\");\n  background-color: hsla(0, 0%, 60%, 0.64);\n  background-size: contain;\n  background-position: 50%;\n  background-repeat: no-repeat;\n  transition: 0.3s;\n  cursor: pointer;\n  z-index: 1;\n}\n.preview-button-close[data-v-dc2c821c]:hover {\n  background-color: hsla(0, 0%, 60%, 0.8);\n}\n.preview-button-close[data-v-dc2c821c]:active {\n  background-color: hsla(0, 0%, 100%, 0.021);\n}\n.preview-button-prev[data-v-dc2c821c] {\n  position: absolute;\n  top: 50%;\n  left: 24px;\n  transform: translateY(-50%);\n  width: 48px;\n  height: 64px;\n  border-radius: 4px;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.03 32l14.142 14.142 1.414-1.414L15.858 32l12.728-12.728-1.414-1.414L13.029 32z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E\");\n  background-color: hsla(0, 0%, 60%, 0.64);\n  background-size: contain;\n  background-position: 50%;\n  background-repeat: no-repeat;\n  transition: 0.3s;\n  cursor: pointer;\n}\n.preview-button-prev[data-v-dc2c821c]:hover {\n  background-color: hsla(0, 0%, 60%, 0.8);\n}\n.preview-button-prev[data-v-dc2c821c]:active {\n  background-color: hsla(0, 0%, 100%, 0.04);\n}\n.preview-button-prev[data-v-dc2c821c]:after {\n  content: \"\";\n  position: absolute;\n  top: -128px;\n  left: -24px;\n  right: -28px;\n  bottom: -128px;\n  background: transparent;\n}\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-button-prev[data-v-dc2c821c] {\n  opacity: 0;\n}\n.preview-button-next[data-v-dc2c821c] {\n  position: absolute;\n  top: 50%;\n  right: 24px;\n  transform: translateY(-50%);\n  width: 48px;\n  height: 64px;\n  border-radius: 4px;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.97 32L20.829 46.142l-1.414-1.414L32.142 32 19.414 19.272l1.414-1.414L34.971 32z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E\");\n  background-color: hsla(0, 0%, 60%, 0.64);\n  background-size: contain;\n  background-position: 50%;\n  background-repeat: no-repeat;\n  transition: 0.3s;\n  cursor: pointer;\n}\n.preview-button-next[data-v-dc2c821c]:hover {\n  background-color: hsla(0, 0%, 60%, 0.8);\n}\n.preview-button-next[data-v-dc2c821c]:active {\n  background-color: hsla(0, 0%, 100%, 0.04);\n}\n.preview-button-next[data-v-dc2c821c]:after {\n  content: \"\";\n  position: absolute;\n  top: -128px;\n  left: -28px;\n  right: -24px;\n  bottom: -128px;\n  background: transparent;\n}\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-button-next[data-v-dc2c821c] {\n  opacity: 0;\n}\n.preview-bottom-container[data-v-dc2c821c] {\n  left: 0;\n  right: 0;\n  justify-content: center;\n  flex-direction: column;\n}\n.preview-bottom-container[data-v-dc2c821c],\n.preview-widgets-button-container-bottom[data-v-dc2c821c] {\n  display: flex;\n  align-items: center;\n}\n.preview-widgets-button-container-bottom[data-v-dc2c821c] {\n  position: absolute;\n  border-radius: 8px 8px 0 0;\n  bottom: 0;\n  -webkit-backdrop-filter: blur(50px);\n          backdrop-filter: blur(50px);\n  background-color: rgba(0, 0, 0, 0.48);\n  justify-content: space-evenly;\n  transition: 0.5s;\n}\n.preview-widgets-button-container-bottom > *[data-v-dc2c821c] {\n  margin: 8px 12px;\n}\n.preview-widgets-button-container-bottom[data-v-dc2c821c] :first-child {\n  margin-left: 24px;\n}\n.preview-widgets-button-container-bottom[data-v-dc2c821c] :last-child {\n  margin-right: 24px;\n}\n.preview-widgets-button-container-bottom[data-v-dc2c821c]:after {\n  content: \"\";\n  position: absolute;\n  top: -88px;\n  bottom: -88px;\n  left: -150px;\n  right: -150px;\n  z-index: -1;\n  background: transparent;\n}\n.preview-hidden .preview-widgets-button-container-bottom[data-v-dc2c821c],\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-widgets-button-container-bottom[data-v-dc2c821c] {\n  transform: translateY(100%);\n}\n.preview-page-number[data-v-dc2c821c] {\n  position: absolute;\n  bottom: 70px;\n  left: 50%;\n  transform: translateX(-50%);\n  line-height: 24px;\n  padding: 0 15px;\n  font-size: 14px;\n  font-weight: 400;\n  color: #fff;\n  border-radius: 20px;\n  transition: 0.3s;\n  background: rgba(0, 0, 0, 0.4);\n  border: 1px solid hsla(0, 0%, 100%, 0.4);\n}\n.preview-hidden .preview-page-number[data-v-dc2c821c],\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-page-number[data-v-dc2c821c] {\n  opacity: 0;\n}\n.preview-hot-zone.preview-force-hover[data-v-dc2c821c] {\n  background: rgba(0, 0, 0, 0.1);\n}\n@-webkit-keyframes preview-fade-out-data-v-dc2c821c {\n0% {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes preview-fade-out-data-v-dc2c821c {\n0% {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@-webkit-keyframes preview-scale-in-data-v-dc2c821c {\nto {\n    transform: scale(1) translate(0);\n}\n}\n@keyframes preview-scale-in-data-v-dc2c821c {\nto {\n    transform: scale(1) translate(0);\n}\n}\n@-webkit-keyframes preview-scale-out-data-v-dc2c821c {\n0% {\n    transform: scale(1) translate(0);\n}\nto {\n    transform: scale(0);\n}\nto {\n    transform: var(--init-coord);\n}\n}\n@keyframes preview-scale-out-data-v-dc2c821c {\n0% {\n    transform: scale(1) translate(0);\n}\nto {\n    transform: scale(0);\n}\nto {\n    transform: var(--init-coord);\n}\n}\n.preview[data-v-dc2c821c],\n.preview-image[data-v-dc2c821c],\n.preview-image-wrapper[data-v-dc2c821c],\n.preview-mask[data-v-dc2c821c] {\n  -webkit-animation-iteration-count: 1;\n          animation-iteration-count: 1;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n}\n.preview-visible .preview-image-container[data-v-dc2c821c] {\n  -webkit-animation-duration: 0.3s;\n          animation-duration: 0.3s;\n  -webkit-animation-name: preview-scale-in-data-v-dc2c821c;\n          animation-name: preview-scale-in-data-v-dc2c821c;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n  -webkit-animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);\n          animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);\n}\n.preview-hidden[data-v-dc2c821c] {\n  -webkit-animation-duration: 0.24s;\n          animation-duration: 0.24s;\n  -webkit-animation-name: preview-fade-out-data-v-dc2c821c;\n          animation-name: preview-fade-out-data-v-dc2c821c;\n  -webkit-animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);\n          animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);\n}\n.preview-hidden .preview-image-container[data-v-dc2c821c] {\n  -webkit-animation-duration: 0.3s;\n          animation-duration: 0.3s;\n  -webkit-animation-name: preview-scale-out-data-v-dc2c821c;\n          animation-name: preview-scale-out-data-v-dc2c821c;\n  -webkit-animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);\n          animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);\n}\n.fade-enter-active[data-v-dc2c821c], .fade-leave-active[data-v-dc2c821c] {\n  transition: opacity .3s;\n}\n.fade-enter[data-v-dc2c821c], .fade-leave-to[data-v-dc2c821c] {\n  opacity: 0;\n}\n.preview-scale-up-button[data-v-dc2c821c] {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' fill-rule='evenodd' stroke='%23fff'%3E%3Ccircle stroke-width='2' cx='15' cy='15' r='8'/%3E%3Cg fill='%23979797'%3E%3Cpath d='M21.586 19.88l4.243 4.243-.707.707-4.243-4.243zM11.5 14.5h7v1h-7z'/%3E%3Cpath d='M14.5 11.5h1v7h-1z'/%3E%3C/g%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  transition: 0.3s;\n}\n.preview-scale-up-button[data-v-dc2c821c]:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n.preview-scale-down-button[data-v-dc2c821c] {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' fill-rule='evenodd' stroke='%23fff'%3E%3Ccircle stroke-width='2' cx='15' cy='15' r='8'/%3E%3Cpath d='M21.586 19.88l4.243 4.243-.707.707-4.243-4.243zM11.5 14.5h7v1h-7z' fill='%23979797'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  left: 100px;\n  transition: 0.3s;\n}\n.preview-scale-down-button[data-v-dc2c821c]:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n.preview-image-wrapper-container[data-v-dc2c821c] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: default;\n}\n.preview-image-wrapper-container-scale[data-v-dc2c821c] {\n  transition: transform 0.2s;\n}\n.preview-adapt-screen-button[data-v-dc2c821c] {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M13 19v1.413L10.413 23H13v2H8a1 1 0 01-1-1v-5h2v2.585L11.586 19H13zm12 0v5a1 1 0 01-1 1h-5v-2h2.586L19 20.414V19h1.414L23 21.586V19h2zM13 7v2h-2.586L13 11.586V13h-1.414L9 10.414V13H7V8a1 1 0 011-1h5zm11 0a1 1 0 011 1v5h-2v-2.587L20.414 13H19v-1.415L21.585 9H19V7h5z' fill='%23fff'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  left: 100px;\n  transition: 0.3s;\n}\n.preview-adapt-screen-button[data-v-dc2c821c]:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n.preview-real-screen-button[data-v-dc2c821c] {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect stroke='%23fff' stroke-width='2' x='8' y='8' width='16' height='16' rx='1'/%3E%3Cg fill='%23fff'%3E%3Cg fill-rule='nonzero'%3E%3Cuse xlink:href='%23B'/%3E%3Cuse xlink:href='%23B' x='8.312' y='.005'/%3E%3C/g%3E%3Ccircle cx='16' cy='14' r='1'/%3E%3Ccircle cx='16' cy='18' r='1'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cpath id='B' d='M13.016 19.475v-7.492h-.86a4.378 4.378 0 01-.944.745c-.378.2-.724.357-1.06.44v1.133c.693-.2 1.27-.514 1.72-.944v6.118h1.144z'/%3E%3C/defs%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  left: 100px;\n  transition: 0.3s;\n}\n.preview-real-screen-button[data-v-dc2c821c]:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n.preview-divide-line[data-v-dc2c821c] {\n  width: 1px;\n  height: 16px;\n  opacity: 0.5;\n  background-color: #fff;\n}\n.preview-download-button[data-v-dc2c821c] {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff'%3E%3Cpath d='M15 7h2v11h-2z'/%3E%3Cpath d='M18.832 14.3l1.414 1.414-4.243 4.243-4.243-4.243 1.414-1.414 2.828 2.828 2.83-2.828zM24 24H8a1 1 0 01-1-1v-5h2v4h14v-4h2v5a1 1 0 01-1 1z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  left: 100px;\n  transition: 0.3s;\n}\n.preview-download-button[data-v-dc2c821c]:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n",map:{version:3,sources:["/Users/naice/my-project/vue-imageview/src/index.vue"],names:[],mappings:";AAgSA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,gBAAA;EACA,cAAA;EACA,qDAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;AACA;AACA;EACA,aAAA;AACA;AACA;EACA,WAAA;EACA,YAAA;EACA,8BAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;AACA;AACA;EACA,YAAA;EACA,oBAAA;AACA;AACA;EACA,sBAAA;AACA;AACA;;EAEA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AACA;AACA;EACA,YAAA;EACA,YAAA;EACA,eAAA;EACA,6BAAA;EACA,kBAAA;AACA;AACA;EACA,iBAAA;AACA;AACA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,aAAA;EACA,sBAAA;EACA,mCAAA;EACA,2BAAA;EACA,qCAAA;EACA,gBAAA;AACA;AACA;EACA,WAAA;EACA,kBAAA;EACA,aAAA;EACA,OAAA;EACA,QAAA;EACA,YAAA;EACA,uBAAA;AACA;AACA;;;EAGA,4BAAA;AACA;AACA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,aAAA;EACA,sBAAA;EACA,mCAAA;EACA,2BAAA;EACA,qCAAA;EACA,gBAAA;AACA;AACA;EACA,WAAA;EACA,kBAAA;EACA,UAAA;EACA,OAAA;EACA,QAAA;EACA,YAAA;EACA,uBAAA;AACA;AACA;;;EAGA,2BAAA;AACA;AACA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,uUAAA;EACA,wCAAA;EACA,wBAAA;EACA,wBAAA;EACA,4BAAA;EACA,gBAAA;EACA,eAAA;EACA,UAAA;AACA;AACA;EACA,uCAAA;AACA;AACA;EACA,0CAAA;AACA;AACA;EACA,kBAAA;EACA,QAAA;EACA,UAAA;EACA,2BAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,2QAAA;EACA,wCAAA;EACA,wBAAA;EACA,wBAAA;EACA,4BAAA;EACA,gBAAA;EACA,eAAA;AACA;AACA;EACA,uCAAA;AACA;AACA;EACA,yCAAA;AACA;AACA;EACA,WAAA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,uBAAA;AACA;AACA;;EAEA,UAAA;AACA;AACA;EACA,kBAAA;EACA,QAAA;EACA,WAAA;EACA,2BAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,4QAAA;EACA,wCAAA;EACA,wBAAA;EACA,wBAAA;EACA,4BAAA;EACA,gBAAA;EACA,eAAA;AACA;AACA;EACA,uCAAA;AACA;AACA;EACA,yCAAA;AACA;AACA;EACA,WAAA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,uBAAA;AACA;AACA;;EAEA,UAAA;AACA;AACA;EACA,OAAA;EACA,QAAA;EACA,uBAAA;EACA,sBAAA;AACA;AACA;;EAEA,aAAA;EACA,mBAAA;AACA;AACA;EACA,kBAAA;EACA,0BAAA;EACA,SAAA;EACA,mCAAA;UAAA,2BAAA;EACA,qCAAA;EACA,6BAAA;EACA,gBAAA;AACA;AACA;EACA,gBAAA;AACA;AACA;EACA,iBAAA;AACA;AACA;EACA,kBAAA;AACA;AACA;EACA,WAAA;EACA,kBAAA;EACA,UAAA;EACA,aAAA;EACA,YAAA;EACA,aAAA;EACA,WAAA;EACA,uBAAA;AACA;AACA;;;EAGA,2BAAA;AACA;AACA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,2BAAA;EACA,iBAAA;EACA,eAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,8BAAA;EACA,wCAAA;AACA;AACA;;;EAGA,UAAA;AACA;AACA;EACA,8BAAA;AACA;AAEA;AACA;IACA,UAAA;AACA;AACA;IACA,UAAA;AACA;AACA;AAPA;AACA;IACA,UAAA;AACA;AACA;IACA,UAAA;AACA;AACA;AAEA;AACA;IACA,gCAAA;AACA;AACA;AAJA;AACA;IACA,gCAAA;AACA;AACA;AAEA;AACA;IACA,gCAAA;AACA;AACA;IACA,mBAAA;AACA;AACA;IACA,4BAAA;AACA;AACA;AAVA;AACA;IACA,gCAAA;AACA;AACA;IACA,mBAAA;AACA;AACA;IACA,4BAAA;AACA;AACA;AAEA;;;;EAIA,oCAAA;UAAA,4BAAA;EACA,qCAAA;UAAA,6BAAA;AACA;AACA;EACA,gCAAA;UAAA,wBAAA;EACA,wDAAA;UAAA,gDAAA;EACA,qCAAA;UAAA,6BAAA;EACA,iEAAA;UAAA,yDAAA;AACA;AACA;EACA,iCAAA;UAAA,yBAAA;EACA,wDAAA;UAAA,gDAAA;EACA,iEAAA;UAAA,yDAAA;AACA;AACA;EACA,gCAAA;UAAA,wBAAA;EACA,yDAAA;UAAA,iDAAA;EACA,iEAAA;UAAA,yDAAA;AACA;AAEA;EACA,uBAAA;AACA;AACA;EACA,UAAA;AACA;AAEA;EACA,8XAAA;EACA,4BAAA;EACA,sBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AACA;AACA;EACA,yCAAA;AACA;AACA;EACA,6UAAA;EACA,4BAAA;EACA,sBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,gBAAA;AACA;AACA;EACA,yCAAA;AACA;AACA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;AACA;AACA;EACA,0BAAA;AACA;AAEA;EACA,8aAAA;EACA,4BAAA;EACA,sBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,gBAAA;AACA;AACA;EACA,yCAAA;AACA;AACA;EACA,grBAAA;EACA,4BAAA;EACA,sBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,gBAAA;AACA;AACA;EACA,yCAAA;AACA;AACA;EACA,UAAA;EACA,YAAA;EACA,YAAA;EACA,sBAAA;AACA;AACA;EACA,2UAAA;EACA,4BAAA;EACA,sBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,gBAAA;AACA;AACA;EACA,yCAAA;AACA",file:"index.vue",sourcesContent:["<template>\n  <div class=\"preview\"\n    v-show=\"visible\"\n    :class=\"visible ? 'preview-visible' : 'preview-hidden'\"\n    ref=\"preview\"\n    @mousewheel=\"scroll\">\n    <div class=\"preview-image-mask\">\n      <div class=\"preview-image-container\" :style=\"containerStyle\">\n        <div class=\"preview-image-wrapper-container\"\n          :style=\"{'transform': `scale(${imgStyle.scale}) translate(${imgStyle.translate.x}px, ${imgStyle.translate.y}px)`}\"\n          @mousedown=\"dragImage\">\n           <transition name=\"fade\">\n            <img v-if=\"currenImage\" class=\"preview-image\" :src=\"currenImage\"/>\n          </transition>\n        </div>\n      </div>\n    </div>\n    \n    <div class=\"preview-hot-zone\">\n      <div class=\"preview-widgets-container-top preview-widgets-container-visible\">\n        <div class=\"preview-button-close\" @click=\"close\"></div>\n      </div>\n      <div class=\"preview-button-prev\" @click=\"prev\" v-if=\"showIndex > 0\"></div>\n      <div class=\"preview-button-next\" @click=\"next\" v-if=\"showIndex < images.length - 1\"></div>\n      <div class=\"preview-bottom-container\">\n        <div class=\"preview-page-number preview-page-number-visible\">{{showIndex + 1}}/{{imagesArr.length}}</div>\n        <div class=\"preview-widgets-button-container-bottom preview-widgets-button-container-visible\">\n          <span class=\"preview-scale-up-button\"\n            :class=\"imgStyle.scale >= scaleMax ? 'preview-disable-click' : ''\"\n            @click=\"toScaleMax\"></span>\n          <span class=\"preview-scale-down-button\"\n            :class=\"imgStyle.scale <= scaleMin ? 'preview-disable-click' : ''\"\n            @click=\"toScaleMin\"></span>\n          <span class=\"preview-real-screen-button\" @click=\"realScreen\"></span>\n          <span class=\"preview-divide-line\"></span>\n          <span class=\"preview-download-button\" @click=\"toDownload\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    images: {\n      type: Array,\n      default() {\n        return [];\n      },\n    },\n    src: {\n      type: String,\n      default: ''\n    },\n    info: {\n      type: Object,\n      default() {\n        return {};\n      },\n    },\n    visible: {\n      type: Boolean,\n      default: false\n    },\n    size: {\n      type: Object,\n      default() {\n        return {};\n      },\n    }\n  },\n  data () {\n    return {\n      currenImage: '',\n      containerStyle: {\n        transform: 'translate(0px, 0px) scale(0.5)',\n        '--init-coord': 'translate(0px, 0px) scale(0.5)'\n      },\n      imgStyle: {\n        scale: 1,\n        translate: {\n          x: 0,\n          y: 0\n        }\n      },\n      showIndex: 0,\n      imagesArr: []\n    }\n  },\n  methods: {\n    close() {\n      this.$emit('update:visible', false)\n    },\n    next() {\n      if (this.showIndex < this.imagesArr.length - 1) {\n        this.showIndex++;\n        this.currenImage = '';\n        \n        this.$nextTick(() => {\n          this.change(this.imagesArr[this.showIndex]);\n        });\n      }\n    },\n    prev() {\n      if (this.showIndex > 0) {\n        this.showIndex--;\n        this.currenImage = '';\n        this.$nextTick(() => {\n          this.change(this.imagesArr[this.showIndex]);\n        });\n      }\n    },\n    change(data) {\n      const { width, height, src } = data;\n      const previewBounds = this.$refs.preview.getBoundingClientRect();\n      const innerWidth = previewBounds.width;\n      const innerHeight = previewBounds.height;\n      const boxMaxWidth = innerWidth - 60;\n      const boxMaxHeight = innerHeight - 60;\n      \n      let imsc_w = 1;\n      let imsc_h = 1;\n\n      if (width >= boxMaxWidth) {\n        imsc_w = Number(parseFloat(boxMaxWidth / width).toFixed(3))\n      }\n      if (height >= boxMaxHeight) {\n        imsc_h = Number(parseFloat(boxMaxHeight / height).toFixed(3))\n      }\n      const minScale = Math.min(imsc_w, imsc_h);\n      this.imgStyle.scale = minScale;\n      this.imgStyle.translate.x = 0;\n      this.imgStyle.translate.y = 0;\n      this.currenImage = src;\n      this.scaleMin = minScale > 0.5 ? 0.5 : 0.1;\n    },\n    scroll(e) {\n      if (!this.scheduledAnimationFrame) {\n        this.scheduledAnimationFrame = true\n        requestAnimationFrame(() => {\n          const step = this.imgStyle.scale + (e.deltaY * 0.01);\n          this.scheduledAnimationFrame = false\n          this.toScaleOfStep(step)\n        })\n      }\n      e.preventDefault();\n    },\n    dragImage(e) {\n      const { width, height } = this.imagesArr[this.showIndex];\n      const previewBounds = this.$refs.preview.getBoundingClientRect();\n      const innerWidth = previewBounds.width;\n      const innerHeight = previewBounds.height;\n      this.overWidth = width * this.imgStyle.scale - innerWidth;\n      this.overHeight = height * this.imgStyle.scale - innerHeight;\n      if (this.overWidth > 0 || this.overHeight > 0) {\n        this.startX = e.clientX;\n        this.startY = e.clientY;\n        this.boxLeft = ((this.overWidth / 2) + 30) / this.imgStyle.scale;\n        this.boxTop = ((this.overHeight / 2) + 30) / this.imgStyle.scale;\n        this.boxRight = ((this.overHeight / 2) + 30) / this.imgStyle.scale;\n        document.addEventListener('mousemove', this.imageMove);\n        document.addEventListener('mouseup', this.imgageUp)\n      }\n      e.preventDefault()\n    },\n    imageMove (e) {\n      if (!this.dragAnimationFrame) {\n        this.dragAnimationFrame = true\n        requestAnimationFrame(() => {\n          this.dragAnimationFrame = false\n          const { clientX, clientY } = e;\n          let disx = clientX - this.startX;\n          let disY = clientY - this.startY;\n\n          let x = this.imgStyle.translate.x + disx * 0.5;\n          let y = this.imgStyle.translate.y + disY * 0.5;\n\n          if (x >= this.boxLeft) {\n            x = this.boxLeft\n          }\n          if (y >= this.boxTop) {\n            y = this.boxTop\n          }\n          if (x <= -this.boxLeft) {\n            x = -this.boxLeft;\n          }\n          if (y <= -this.boxTop) {\n            y = -this.boxTop\n          }\n          if (this.overWidth > 0) {\n            this.imgStyle.translate.x = x;\n          }\n\n          if (this.overHeight > 0) {\n            this.imgStyle.translate.y = y;\n          }\n          \n          this.startX = clientX;\n          this.startY = clientY;\n          \n        })\n      }\n      e.preventDefault()\n    },\n    imgageUp(e) {\n      document.removeEventListener('mousemove', this.imageMove);\n      document.removeEventListener('mouseup', this.imgageUp);\n      e.preventDefault()\n    },\n    toScaleMax() {\n      this.toScaleOfStep(this.imgStyle.scale + 0.2);\n    },\n    toScaleMin() {\n      this.toScaleOfStep(this.imgStyle.scale - 0.2);\n    },\n    realScreen() {\n      this.imgStyle.scale = 1;\n      this.imgStyle.translate.x = 0;\n      this.imgStyle.translate.y = 0;\n    },\n    toScaleOfStep(step) {\n      if (step <= this.scaleMin) {\n        step = this.scaleMin\n      } else if (step >= this.scaleMax) {\n        step = this.scaleMax\n      }\n      this.imgStyle.scale = step\n    },\n    toDownload() {\n      const strArr = this.src.split('/');\n      const a = document.createElement('a');\n      console.log(this.src, strArr[strArr.length - 1]);\n      a.download = strArr[strArr.length - 1];\n      a.href = this.src;\n      a.click();\n    },\n    loadImage(src) {\n      return new Promise((resolved, reject) => {\n        const img = new Image();\n        img.src = src;\n        img.onload = function() {\n          resolved({\n            src,\n            width: img.width,\n            height: img.height\n          })\n        };\n        img.onerror = reject;\n      })\n    },\n    async imagesChanged() {\n      let arr = [];\n      for (let i = 0; i < this.images.length; i++) {\n        try {\n          const obj = await this.loadImage(this.images[i]);\n          arr.push(obj)\n        } catch(err) {\n          console.log(err);\n        }\n      }\n      this.imagesArr = arr\n    },\n  },\n  watch: {\n    visible (v) {\n      if (v) {\n        this.showIndex = this.imagesArr.findIndex(item => item.src === this.src);\n        this.$nextTick(() => {\n          this.change(this.imagesArr[this.showIndex]);\n        })\n      }\n    },\n    images () {\n      this.imagesChanged();\n    }\n  },\n  created () {\n    this.scaleMax = 3;\n    this.scaleMin = 0.5;\n  },\n  mounted() {\n    document.body.appendChild(this.$el);\n  }\n};\n<\/script>\n\n<style scoped>\n.preview {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n  z-index: 10001;\n  font-family: PingFang SC, Microsoft YaHei, sans-serif;\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.preview ::-webkit-scrollbar {\n  display: none;\n}\n.preview-image-mask {\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.preview-disable-click {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.preview-image {\n  background-color: #fff;\n}\n.preview-image-error,\n.preview-image-loading {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.preview-image-error {\n  width: 100px;\n  height: 20px;\n  font-size: 14px;\n  color: hsla(0, 0%, 100%, 0.4);\n  text-align: center;\n}\n.preview-image-container {\n  overflow: visible;\n}\n.preview-widgets-container-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  -webkit-backdrop-filter: blur(50px);\n  backdrop-filter: blur(50px);\n  background-color: rgba(0, 0, 0, 0.32);\n  transition: 0.3s;\n}\n.preview-widgets-container-top:after {\n  content: \"\";\n  position: absolute;\n  bottom: -64px;\n  left: 0;\n  right: 0;\n  height: 64px;\n  background: transparent;\n}\n.preview-hidden .preview-widgets-container-top,\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-widgets-container-top {\n  transform: translateY(-100%);\n}\n.preview-widgets-container-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  -webkit-backdrop-filter: blur(50px);\n  backdrop-filter: blur(50px);\n  background-color: rgba(0, 0, 0, 0.32);\n  transition: 0.3s;\n}\n.preview-widgets-container-bottom:after {\n  content: \"\";\n  position: absolute;\n  top: -64px;\n  left: 0;\n  right: 0;\n  height: 64px;\n  background: transparent;\n}\n.preview-hidden .preview-widgets-container-bottom,\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-widgets-container-bottom {\n  transform: translateY(100%);\n}\n.preview-button-close {\n  position: absolute;\n  top: 8px;\n  right: 20px;\n  width: 32px;\n  height: 32px;\n  border-radius: 4px;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.364 11.05L17.414 16l4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95 1.414-1.414 4.95 4.95 4.95-4.95 1.414 1.414z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E\");\n  background-color: hsla(0, 0%, 60%, 0.64);\n  background-size: contain;\n  background-position: 50%;\n  background-repeat: no-repeat;\n  transition: 0.3s;\n  cursor: pointer;\n  z-index: 1;\n}\n.preview-button-close:hover {\n  background-color: hsla(0, 0%, 60%, 0.8);\n}\n.preview-button-close:active {\n  background-color: hsla(0, 0%, 100%, 0.021);\n}\n.preview-button-prev {\n  position: absolute;\n  top: 50%;\n  left: 24px;\n  transform: translateY(-50%);\n  width: 48px;\n  height: 64px;\n  border-radius: 4px;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.03 32l14.142 14.142 1.414-1.414L15.858 32l12.728-12.728-1.414-1.414L13.029 32z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E\");\n  background-color: hsla(0, 0%, 60%, 0.64);\n  background-size: contain;\n  background-position: 50%;\n  background-repeat: no-repeat;\n  transition: 0.3s;\n  cursor: pointer;\n}\n.preview-button-prev:hover {\n  background-color: hsla(0, 0%, 60%, 0.8);\n}\n.preview-button-prev:active {\n  background-color: hsla(0, 0%, 100%, 0.04);\n}\n.preview-button-prev:after {\n  content: \"\";\n  position: absolute;\n  top: -128px;\n  left: -24px;\n  right: -28px;\n  bottom: -128px;\n  background: transparent;\n}\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-button-prev {\n  opacity: 0;\n}\n.preview-button-next {\n  position: absolute;\n  top: 50%;\n  right: 24px;\n  transform: translateY(-50%);\n  width: 48px;\n  height: 64px;\n  border-radius: 4px;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.97 32L20.829 46.142l-1.414-1.414L32.142 32 19.414 19.272l1.414-1.414L34.971 32z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E\");\n  background-color: hsla(0, 0%, 60%, 0.64);\n  background-size: contain;\n  background-position: 50%;\n  background-repeat: no-repeat;\n  transition: 0.3s;\n  cursor: pointer;\n}\n.preview-button-next:hover {\n  background-color: hsla(0, 0%, 60%, 0.8);\n}\n.preview-button-next:active {\n  background-color: hsla(0, 0%, 100%, 0.04);\n}\n.preview-button-next:after {\n  content: \"\";\n  position: absolute;\n  top: -128px;\n  left: -28px;\n  right: -24px;\n  bottom: -128px;\n  background: transparent;\n}\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-button-next {\n  opacity: 0;\n}\n.preview-bottom-container {\n  left: 0;\n  right: 0;\n  justify-content: center;\n  flex-direction: column;\n}\n.preview-bottom-container,\n.preview-widgets-button-container-bottom {\n  display: flex;\n  align-items: center;\n}\n.preview-widgets-button-container-bottom {\n  position: absolute;\n  border-radius: 8px 8px 0 0;\n  bottom: 0;\n  backdrop-filter: blur(50px);\n  background-color: rgba(0, 0, 0, 0.48);\n  justify-content: space-evenly;\n  transition: 0.5s;\n}\n.preview-widgets-button-container-bottom > * {\n  margin: 8px 12px;\n}\n.preview-widgets-button-container-bottom :first-child {\n  margin-left: 24px;\n}\n.preview-widgets-button-container-bottom :last-child {\n  margin-right: 24px;\n}\n.preview-widgets-button-container-bottom:after {\n  content: \"\";\n  position: absolute;\n  top: -88px;\n  bottom: -88px;\n  left: -150px;\n  right: -150px;\n  z-index: -1;\n  background: transparent;\n}\n.preview-hidden .preview-widgets-button-container-bottom,\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-widgets-button-container-bottom {\n  transform: translateY(100%);\n}\n.preview-page-number {\n  position: absolute;\n  bottom: 70px;\n  left: 50%;\n  transform: translateX(-50%);\n  line-height: 24px;\n  padding: 0 15px;\n  font-size: 14px;\n  font-weight: 400;\n  color: #fff;\n  border-radius: 20px;\n  transition: 0.3s;\n  background: rgba(0, 0, 0, 0.4);\n  border: 1px solid hsla(0, 0%, 100%, 0.4);\n}\n.preview-hidden .preview-page-number,\n.preview-hot-zone:not(:hover):not(.preview-force-hover)\n  .preview-page-number {\n  opacity: 0;\n}\n.preview-hot-zone.preview-force-hover {\n  background: rgba(0, 0, 0, 0.1);\n}\n\n@keyframes preview-fade-out {\n  0% {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes preview-scale-in {\n  to {\n    transform: scale(1) translate(0);\n  }\n}\n\n@keyframes preview-scale-out {\n  0% {\n    transform: scale(1) translate(0);\n  }\n  to {\n    transform: scale(0);\n  }\n  to {\n    transform: var(--init-coord);\n  }\n}\n\n.preview,\n.preview-image,\n.preview-image-wrapper,\n.preview-mask {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n}\n.preview-visible .preview-image-container {\n  animation-duration: 0.3s;\n  animation-name: preview-scale-in;\n  animation-fill-mode: forwards;\n  animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);\n}\n.preview-hidden {\n  animation-duration: 0.24s;\n  animation-name: preview-fade-out;\n  animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);\n}\n.preview-hidden .preview-image-container {\n  animation-duration: 0.3s;\n  animation-name: preview-scale-out;\n  animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);\n}\n\n.fade-enter-active, .fade-leave-active {\n  transition: opacity .3s;\n}\n.fade-enter, .fade-leave-to {\n  opacity: 0;\n}\n\n.preview-scale-up-button {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' fill-rule='evenodd' stroke='%23fff'%3E%3Ccircle stroke-width='2' cx='15' cy='15' r='8'/%3E%3Cg fill='%23979797'%3E%3Cpath d='M21.586 19.88l4.243 4.243-.707.707-4.243-4.243zM11.5 14.5h7v1h-7z'/%3E%3Cpath d='M14.5 11.5h1v7h-1z'/%3E%3C/g%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  transition: 0.3s;\n}\n.preview-scale-up-button:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n.preview-scale-down-button {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' fill-rule='evenodd' stroke='%23fff'%3E%3Ccircle stroke-width='2' cx='15' cy='15' r='8'/%3E%3Cpath d='M21.586 19.88l4.243 4.243-.707.707-4.243-4.243zM11.5 14.5h7v1h-7z' fill='%23979797'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  left: 100px;\n  transition: 0.3s;\n}\n.preview-scale-down-button:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n.preview-image-wrapper-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: default;\n}\n.preview-image-wrapper-container-scale {\n  transition: transform 0.2s;\n}\n\n.preview-adapt-screen-button {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M13 19v1.413L10.413 23H13v2H8a1 1 0 01-1-1v-5h2v2.585L11.586 19H13zm12 0v5a1 1 0 01-1 1h-5v-2h2.586L19 20.414V19h1.414L23 21.586V19h2zM13 7v2h-2.586L13 11.586V13h-1.414L9 10.414V13H7V8a1 1 0 011-1h5zm11 0a1 1 0 011 1v5h-2v-2.587L20.414 13H19v-1.415L21.585 9H19V7h5z' fill='%23fff'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  left: 100px;\n  transition: 0.3s;\n}\n.preview-adapt-screen-button:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n.preview-real-screen-button {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect stroke='%23fff' stroke-width='2' x='8' y='8' width='16' height='16' rx='1'/%3E%3Cg fill='%23fff'%3E%3Cg fill-rule='nonzero'%3E%3Cuse xlink:href='%23B'/%3E%3Cuse xlink:href='%23B' x='8.312' y='.005'/%3E%3C/g%3E%3Ccircle cx='16' cy='14' r='1'/%3E%3Ccircle cx='16' cy='18' r='1'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cpath id='B' d='M13.016 19.475v-7.492h-.86a4.378 4.378 0 01-.944.745c-.378.2-.724.357-1.06.44v1.133c.693-.2 1.27-.514 1.72-.944v6.118h1.144z'/%3E%3C/defs%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  left: 100px;\n  transition: 0.3s;\n}\n.preview-real-screen-button:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n.preview-divide-line {\n  width: 1px;\n  height: 16px;\n  opacity: 0.5;\n  background-color: #fff;\n}\n.preview-download-button {\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff'%3E%3Cpath d='M15 7h2v11h-2z'/%3E%3Cpath d='M18.832 14.3l1.414 1.414-4.243 4.243-4.243-4.243 1.414-1.414 2.828 2.828 2.83-2.828zM24 24H8a1 1 0 01-1-1v-5h2v4h14v-4h2v5a1 1 0 01-1 1z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 4px;\n  width: 32px;\n  height: 32px;\n  left: 100px;\n  transition: 0.3s;\n}\n.preview-download-button:hover {\n  background-color: hsla(0, 0%, 100%, 0.12);\n}\n</style>\n"]},media:void 0})}),l,"data-v-dc2c821c",!1,void 0,!1,s,void 0,void 0);e.default=p}])}));