vue3-ciallo-viewer/dist/style.css

适用于vue3的图片浏览组件

.view_instance_0721{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;transform-origin:left top;will-change:transform}.view_instance_0721 img{max-width:none;-webkit-user-drag:none;cursor:grab;will-change:transform,height,opacity;object-fit:contain}.view_instance_0721 img:active{cursor:grabbing}.image-view-mask[data-v-82d27748]{position:fixed;width:100%;height:100%;left:0;top:0;z-index:10000;-webkit-user-select:none;user-select:none;will-change:background-color;touch-action:none}.image-view-mask ul[data-v-82d27748]{width:100%;height:100%;display:flex;flex-wrap:nowrap;margin:0;padding:0;position:relative;z-index:2}.image-view-mask ul li[data-v-82d27748]{width:100%;list-style:none;flex:none;overflow:hidden;position:relative}.image-view-mask .top-function[data-v-82d27748]{width:100%;height:42px;position:absolute;right:0;top:0;display:flex;justify-content:space-between;background-color:#00000080;z-index:3}.image-view-mask .top-function .index[data-v-82d27748]{padding-left:12px;height:inherit;display:flex;justify-content:center;align-items:center;gap:6px}.image-view-mask .top-function .index span[data-v-82d27748]{color:#fff}.image-view-mask .top-function .close[data-v-82d27748]{width:42px;height:inherit;position:relative;z-index:1;cursor:pointer}.image-view-mask .top-function .close[data-v-82d27748]:before{transform:translate(-50%,-50%) rotate(45deg)}.image-view-mask .top-function .close[data-v-82d27748]:after{transform:translate(-50%,-50%) rotate(-45deg)}.image-view-mask .left-arrow[data-v-82d27748],.image-view-mask .right-arrow[data-v-82d27748]{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);height:72px;width:64px;z-index:5;display:flex;justify-content:center;align-items:center;background-color:#00000080}.image-view-mask .left-arrow[data-v-82d27748]:before,.image-view-mask .right-arrow[data-v-82d27748]:before{position:relative;content:"";display:inline-block;width:20px;height:20px;border:2px solid #fff}.image-view-mask .left-arrow[data-v-82d27748]{left:0;border-radius:0 12px 12px 0}.image-view-mask .right-arrow[data-v-82d27748]{right:0;border-radius:12px 0 0 12px}.image-view-mask .left-arrow[data-v-82d27748]:before{border-left:none;border-bottom:none;transform:rotate(-135deg);left:5px}.image-view-mask .right-arrow[data-v-82d27748]:before{border-left:none;border-bottom:none;transform:rotate(45deg);right:5px}.image-view-mask .top-function .close[data-v-82d27748]:before,.image-view-mask .top-function .close[data-v-82d27748]:after{content:"";display:block;left:50%;top:50%;position:absolute;background-color:#fff;width:70%;height:2px;border-radius:10px;overflow:hidden}