img-viewer-vue3/style.css

一个基于Vue3的图片查看器组件

div{box-sizing:border-box}.container{position:relative;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;padding:10px 20px;background:transparent}.container.active{flex-direction:column}.container .horv{position:absolute;top:20px;left:20px;z-index:10;display:flex;cursor:pointer}.container .horv.active{rotate:90deg}.container .horv .h,.container .horv .v{height:25px;width:5px;background:#999;border-radius:1px}.container .horv .v{width:20px;margin-right:3px}.container ::-webkit-scrollbar{width:0}.img-wraper{position:relative;height:50vh;flex:1;margin:auto 70px auto auto}.img-wraper.active{flex:none;margin-right:0;width:100%}.img-wraper .v-img{max-height:100%;width:auto;transition:scale .3s ease-out;transform-origin:0% 0%;cursor:grab;position:absolute;-webkit-user-drag:none;top:50%;left:50%;transform:translate(-50%) translateY(-50%);border-radius:5px}.img-wraper img:nth-child(2),.img-wraper img:nth-child(3){position:absolute;width:32px;height:32px;top:50%;transform:translateY(-50%);cursor:pointer}.img-wraper img:nth-child(2){left:0}.img-wraper img:nth-child(3){right:0}.right{display:flex;position:relative}.right.active{flex-direction:column}.right .toolbar{background:#fffc;display:flex;flex-direction:column;margin-right:10px;position:absolute;top:50%;left:-50px;transform:translateY(-50%);border:1px solid #E7E9EF;padding:10px 14px;border-radius:100px}.right .toolbar.active{display:flex;height:auto;flex-direction:row;top:-50px;left:50%;transform:translate(-50%) translateY(0);margin-bottom:10px;margin-right:0}.right .toolbar .tool-wrapper{display:flex;align-items:center;margin-right:20px}.right .toolbar .tool-wrapper:last-child{margin-right:0}.right .toolbar .tool-wrapper img{width:20px;cursor:pointer}.small-list{width:100%;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}.small-list.active{width:100%;height:100px}.small-list .img-list{display:flex;width:100px;flex-direction:column;align-items:center;cursor:grab;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;height:100%}.small-list .img-list.active{width:100%;overflow-x:auto;overflow-y:hidden;flex-direction:row;height:100%}.small-list .img-list::-webkit-scrollbar{display:none}.small-list .img-list img{height:72px;width:72px;object-fit:cover;flex-shrink:0;margin-bottom:10px;cursor:pointer;border-radius:2px;-webkit-user-drag:none;transition:all .3s}.small-list .img-list img.active{margin-right:10px;margin-bottom:0}.small-list .img-list img.imgA{height:90px;width:90px;flex-shrink:0}.img-l{border-radius:50%;box-shadow:0 0 2px #e3e0e0;background:#f5f5f5}