image-ipreview-box
Version:
A image preview plugin for Vue.js.
1 lines • 2.11 kB
CSS
li[data-v-eb77a874],ul[data-v-eb77a874]{list-style:none;margin:0}ul[data-v-eb77a874]{padding-left:12px;display:flex;background-color:rgba(96,98,102,.66);color:#ddd;padding:10px 30px;border-radius:20px}li[data-v-eb77a874]{font-size:23px;margin:0 10px;cursor:pointer}.ha-image-preview_content[data-v-1b09a4a6]{position:absolute;z-index:2;width:100%;height:100%;text-align:center}.ha-image-preview_content .ha-image-preview_viewer[data-v-1b09a4a6]{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.ha-image-preview_content .ha-image-preview_close[data-v-1b09a4a6]{top:1.0417vw;right:1.0417vw;font-size:35px;color:#fff;position:absolute;z-index:5;cursor:pointer}.ha-image-preview_content .ha-image-preview_toolbar[data-v-1b09a4a6]{position:absolute;bottom:2.6042vw;left:50%;transform:translateX(-50%)}.ha-image-preview_content img[data-v-1b09a4a6]{transition:transform .3s ease 0s;cursor:move}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3176123_w5pp6eb4d2p.woff2?t=1644558865457) format("woff2"),url(//at.alicdn.com/t/font_3176123_w5pp6eb4d2p.woff?t=1644558865457) format("woff"),url(//at.alicdn.com/t/font_3176123_w5pp6eb4d2p.ttf?t=1644558865457) format("truetype")}.iconfont{font-family:iconfont;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale}.ha-image-preview .slide-fade-enter-active[data-v-ce902d64]{transition:all .5s ease}.ha-image-preview .slide-fade-leave-active[data-v-ce902d64]{transition:all .3s cubic-bezier(1,.5,.8,1)}.ha-image-preview .slide-fade-enter[data-v-ce902d64]{transform:translateX(-10px);opacity:0}.ha-image-preview .slide-fade-leave-to[data-v-ce902d64]{transform:translateX(15px);opacity:0}.ha-image-preview img[data-v-ce902d64]{width:100%;height:100%}.ha-image-preview .ha-image-preview_wrapper[data-v-ce902d64]{position:fixed;height:100vh;width:100vw;z-index:2033;top:0;left:0}.ha-image-preview .ha-image-preview_wrapper .ha-image-preview_mask[data-v-ce902d64]{opacity:.5;background:#000;position:absolute;height:100%;width:100%;z-index:1}