song-ui-u/theme/imagePreview.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-image-preview{position:relative;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.x-image-preview__img{width:100vw;height:100vh;display:flex;box-sizing:border-box;padding-left:40px;padding-right:40px;justify-content:space-between;align-items:center;overflow:hidden}.x-image-preview__img img{max-width:100vh;max-height:100vh;transition:transform .3s}.x-image-preview__menu{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:12px;background:rgba(0,0,0,.7);border-radius:4px}.x-image-preview__left{background:rgba(125,125,125,.7);border-radius:50%;cursor:pointer;width:40px;height:40px;display:flex;justify-content:center;align-items:center;color:#fff;font-size:23px}.x-image-preview__left:hover{background:rgba(125,125,125,.9)}.x-image-preview__close{background:rgba(125,125,125,.7);border-radius:50%;position:absolute;cursor:pointer;top:40px;right:40px;width:40px;height:40px;display:flex;justify-content:center;align-items:center;color:#fff;font-size:23px}.x-image-preview__close:hover{background:rgba(125,125,125,.9)}.x-image-preview__right{background:rgba(125,125,125,.7);border-radius:50%;cursor:pointer;width:40px;height:40px;display:flex;justify-content:center;align-items:center;color:#fff;font-size:23px}.x-image-preview__right:hover{background:rgba(125,125,125,.9)}.x-image-preview__counter{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;font-size:17px;padding:6px 12px;border-radius:4px}.x-image-preview__menu-item{cursor:pointer;color:#fff;padding:8px;padding-bottom:3px;font-size:20px;border-radius:4px}.x-image-preview__menu-item:hover{background:rgba(255,255,255,.1)}.x-image-preview-enter-from,.x-image-preview-leave-to{opacity:0}.x-image-preview-enter-active .x-image-preview{animation:dialogFadeIn .2s}.x-image-preview-leave-active .x-image-preview{animation:dialogFadeOut .2s}