image-pdf-preview
Version:
A Vue2 PDF preview component with zoom, navigation and thumbnail features.
1 lines • 8.11 kB
CSS
.pdf-wrap[data-v-3d09a408]{position:absolute;top:0;right:200px;left:0;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pdf-wrap.fixed-top-toolbar .toolbar[data-v-3d09a408]{position:fixed;left:30%;right:30%;z-index:999;height:50px;line-height:50px;top:0;background:transparent}.pdf-wrap.fixed-top-toolbar .scroll-wrap[data-v-3d09a408]{width:100%;height:100%;overflow:auto;background:#404040}.pdf-wrap .toolbar[data-v-3d09a408]{position:relative;left:0;right:0;z-index:999;cursor:default;height:32px;line-height:32px;background-color:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}.pdf-wrap .toolbar .toolbar-split[data-v-3d09a408]{padding:8px 0;width:1px;background-color:#f0f0fe;z-index:99;display:inline-block;margin:5px;vertical-align:middle}.pdf-wrap .toolbar .page-group[data-v-3d09a408]{height:100%;padding-left:30px;display:flex;align-items:center;justify-content:center;margin-right:10px}.pdf-wrap .toolbar .page-group .page-counter[data-v-3d09a408]{margin:0 5px;min-width:50px;text-align:center}.pdf-wrap .toolbar .page-group .page-btn[data-v-3d09a408]{font-size:12px;line-height:22px;height:22px;padding:0 8px;cursor:pointer;margin:0;border-radius:4px;background:#5d5959;border:1px solid #f9f9f9}.pdf-wrap .toolbar .page-group .page-btn[data-v-3d09a408]:hover{background-color:#444141}.pdf-wrap .toolbar .page-group .page-btn.disable[data-v-3d09a408]{color:#bbb;cursor:not-allowed;background:#656363;border-color:#bbb}.pdf-wrap .toolbar .page-group .page-btn.disable[data-v-3d09a408]:hover{background-color:#656363}.pdf-wrap .toolbar .zoom-group[data-v-3d09a408]{display:flex;align-items:center;justify-content:center;margin-left:10px}.pdf-wrap .toolbar .zoom-group .scale-val[data-v-3d09a408]{min-width:50px;text-align:center;margin:0 5px}.pdf-wrap .toolbar .zoom-group .zoom-btn[data-v-3d09a408]{font-size:12px;cursor:pointer;margin:0}.pdf-wrap .toolbar .zoom-group .zoom-btn.disable[data-v-3d09a408]{color:#bbb;cursor:not-allowed}.pdf-wrap .scroll-wrap[data-v-3d09a408]{width:100%;height:calc(100% - 32px);overflow:auto;background:#404040}.pdf-wrap .pdf-page[data-v-3d09a408]{width:100%;height:100%;padding:10px 0}.pdf-wrap .pdf-page .pdf-img[data-v-3d09a408]{height:100%;background-color:#fff}.pdf-wrap .file-nav[data-v-3d09a408]{z-index:1;width:100px;cursor:pointer}.pdf-wrap .file-nav .nav-wrapper[data-v-3d09a408]{color:#fff;font-size:24px;border-radius:35px;width:70px;height:70px;text-align:center;line-height:70px;background-color:rgba(0,0,0,.5);margin:auto;transition:background 218ms ease}.pdf-wrap .file-nav.next[data-v-3d09a408]{position:absolute;top:60px;right:0;bottom:0}.pdf-wrap .file-nav.next .nav-wrapper[data-v-3d09a408]{position:absolute;top:0;right:25px;bottom:0}.pdf-wrap .file-nav.prev[data-v-3d09a408]{position:absolute;top:60px;left:0;bottom:0}.pdf-wrap .file-nav.prev .nav-wrapper[data-v-3d09a408]{position:absolute;top:0;left:25px;bottom:0}.navigation-wrap[data-v-a793f19a]{position:absolute;top:0;right:0;width:220px;height:100%;overflow:hidden;background:#000;display:flex;flex-direction:column}.thumb-list[data-v-a793f19a]{position:absolute;top:20px;right:10px;bottom:0;width:200px;overflow-y:auto;overflow-x:hidden;padding-right:5px}.thumb-list[data-v-a793f19a]::-webkit-scrollbar{width:6px}.thumb-list[data-v-a793f19a]::-webkit-scrollbar-track{background:hsla(0,0%,100%,.1);border-radius:3px}.thumb-list[data-v-a793f19a]::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.3);border-radius:3px}.thumb-list[data-v-a793f19a]::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.5)}.thumb-list .thumb-item[data-v-a793f19a]{width:80%;margin:0 auto;padding:10px;border:2px solid transparent;cursor:pointer;position:relative}.thumb-list .thumb-item.active[data-v-a793f19a]{border-color:#12aa9c;background:rgba(18,170,156,.58)}.thumb-list .thumb-item .cover-tag[data-v-a793f19a]{position:absolute;left:0;top:0;background:rgba(0,0,0,.9);color:#fff;padding:5px}.thumb-list .thumb-item .clip-btn[data-v-a793f19a],.thumb-list .thumb-item .cover-btn[data-v-a793f19a],.thumb-list .thumb-item .del-btn[data-v-a793f19a],.thumb-list .thumb-item .res-cover-btn[data-v-a793f19a]{position:absolute;cursor:pointer;visibility:hidden;background:rgba(0,0,0,.9);color:#fff;z-index:11;top:10px;right:10px;padding:5px;border-bottom-left-radius:3px}.thumb-list .thumb-item .clip-btn[data-v-a793f19a]{top:38px}.thumb-list .thumb-item .cover-btn[data-v-a793f19a]{top:66px}.thumb-list .thumb-item .res-cover-btn[data-v-a793f19a]{top:94px}.thumb-list .thumb-item:hover .oprate-btn[data-v-a793f19a]{visibility:visible}.thumb-list .thumb-item .thumb-img[data-v-a793f19a]{width:100%;background-color:#fff}.param-wrap[data-v-f5ba2db2]{position:fixed;top:0;left:30%;right:30%;height:50px;background:#000;z-index:999}.wrap[data-v-f5ba2db2]{width:100%;height:100%}.wrap[data-v-f5ba2db2] .vue-cropper{background:#444}.operate-box[data-v-f5ba2db2]{position:fixed;top:0;left:30%;right:30%;height:50px;background:#000;z-index:999;display:flex;justify-content:center;align-items:center;cursor:pointer}.override[data-v-f5ba2db2]{color:#fff;margin-right:20px}.btn[data-v-f5ba2db2]{display:inline-block;margin:0 10px;padding:5px 15px;border-radius:4px;background:#444}.btn[data-v-f5ba2db2]:active,.btn[data-v-f5ba2db2]:hover{background:#222}.btn.confirm[data-v-f5ba2db2]{color:#fff;background:#12aa9c}.btn.confirm[data-v-f5ba2db2]:active,.btn.confirm[data-v-f5ba2db2]:hover{background:#0a8d83}.redo-btn[data-v-f0a0a91a]{margin-left:20px;color:#fff;cursor:pointer;position:absolute;top:12px;right:70px;font-size:24px}.redo-btn.x-btn[data-v-f0a0a91a]{font-size:14px}.viewer-wrapper[data-v-f0a0a91a]{width:100%;height:100%}.viewer-wrapper[data-v-f0a0a91a] .viewer-backdrop{background-color:transparent}.viewer[data-v-f0a0a91a]{display:none}.cropper-wrap[data-v-f0a0a91a]{position:absolute;height:100%;top:0;left:0;right:0;bottom:0}.cropper-wrap.has-navigation[data-v-f0a0a91a]{right:220px}.file-preview[data-v-f0a0a91a]{position:fixed;width:100%;height:100%;top:0;z-index:200;background:rgba(0,0,0,.7);color:#e6e6e6}.file-header[data-v-f0a0a91a]{height:50px;line-height:50px;position:absolute;top:0;left:0;right:0;background:rgba(0,0,0,.7);z-index:1;padding-right:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-counter[data-v-f0a0a91a]{color:#9d9d9d}.file-counter[data-v-f0a0a91a],.file-name[data-v-f0a0a91a]{display:inline-block;padding-left:20px;vertical-align:middle}.file-name[data-v-f0a0a91a]{max-width:500px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-header i[data-v-f0a0a91a]{font-size:24px;line-height:50px;vertical-align:middle}.file-header .close[data-v-f0a0a91a]{position:absolute;top:0;right:0;width:60px;text-align:center;cursor:pointer;color:#fff;line-height:50px}.file-header .close[data-v-f0a0a91a]:hover{background:#000}.file-header .download[data-v-f0a0a91a]{position:absolute;top:0;right:60px;cursor:pointer;width:100px;text-align:center;color:#fff;padding:0 20px;transition:background 218ms ease}.file-header .download[data-v-f0a0a91a]:hover{background:#000}.file-header .download i[data-v-f0a0a91a]{margin-right:5px}.file-wrapper[data-v-f0a0a91a]{position:relative;padding-top:50px;width:100%;height:100%}.file-item[data-v-f0a0a91a]{text-align:center;position:absolute;top:50px;left:0;right:0;bottom:0}.file-item img[data-v-f0a0a91a]{transition:width,height,transform .15s;background:#fff}.loading-wrap[data-v-f0a0a91a]{width:100%;height:100%}.error-wrap[data-v-f0a0a91a]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8)}.error-content[data-v-f0a0a91a]{text-align:center;color:#fff}.error-content i[data-v-f0a0a91a]{font-size:48px;color:#f56c6c;margin-bottom:20px}.error-content p[data-v-f0a0a91a]{margin:20px 0;font-size:16px}.player-box[data-v-f0a0a91a]{margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.player-box[data-v-f0a0a91a] .prism-cue *{background-color:transparent}.preview-item[data-v-f0a0a91a]{margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;max-width:100%;max-height:100%}