fox-preview-image/lib/style.css

一个支持 vue3 的预览图片组件

.fox-preview-switch{z-index:10}.fox-preview-switch-item{background-color:#606266;width:40px;height:40px;border-radius:20px;display:flex;justify-content:center;align-content:center;align-items:center;cursor:pointer;position:absolute;top:50%;margin-top:-20px;right:5vw}.fox-preview-switch-item-left{left:5vw}.fox-preview-switch .fox-preview-switch-icon{font-size:24px;color:#fff}.fox-preview-switch .fox-preview-switch-icon-left{transform:rotate(180deg)}.svg{-webkit-user-select:none;user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden}.fox-preview-toolbar{position:absolute;bottom:5%;left:50%;transform:translate(-50%);border-radius:30px;z-index:10;background-color:#606266;display:flex;padding:8px 24px;gap:24px}.fox-preview-toolbar-item{cursor:pointer;color:#fff;font-size:24px}.fox-preview-toolbar-scale{font-size:14px;position:relative;background-color:#606266;border:1px solid #ffffff;box-sizing:border-box;width:34px;border-radius:1px;line-height:22px;text-align:center;cursor:unset}.fox-preview-toolbar-scale:before,.fox-preview-toolbar-scale:after{position:absolute;width:100%;height:100%;content:"";z-index:1;border:1px solid #606266;box-sizing:border-box}.fox-preview-toolbar-scale:before{height:12px;top:50%;margin-top:-6px;width:34px;left:-1px;border-width:0 1px}.fox-preview-toolbar-scale:after{height:24px;width:20px;top:-1px;left:50%;margin-left:-10px;border-width:1px 0}.fox-preview-toolbar-position{font-size:14px;box-sizing:border-box;width:24px;line-height:24px;text-align:center;cursor:default}.fox-preview{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0006;overflow:hidden;-webkit-backdrop-filter:saturate(50%) blur(4px);backdrop-filter:saturate(50%) blur(4px)}.fox-preview-canvas{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;font-size:0}.fox-preview-image{-webkit-user-select:none;user-select:none;display:block;pointer-events:none}.fox-preview-image:active{cursor:pointer}.fox-preview-close{position:absolute;top:-40px;right:-40px;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#0000004d;border-radius:50%;font-size:26px;height:80px;width:80px;color:#fff;overflow:hidden;transition:background-color .15s;z-index:10}.fox-preview-close>svg{position:absolute;left:15px;bottom:15px}.fox-preview-close:hover{background-color:#00000080}.font-svg{-webkit-user-select:none;user-select:none;font-size:18px;display:inline-block;width:1em;height:1em;fill:currentColor;overflow:hidden;font-weight:500}.fox-lock-window{overflow:hidden}