@xysfe/actui/es/Jigsaw/style.css

A fantastic mobile ui lib implement by Vue

.act-jigsaw[data-v-6ac6a5a2]{position:relative}.act-jigsaw .act-jigsaw-img[data-v-6ac6a5a2]{position:relative;width:100%;height:0;padding-bottom:57.35%;background-color:#e4e4e4}.act-jigsaw .slider-img[data-v-6ac6a5a2]{width:100%;height:100%;position:absolute;left:0;top:0}.act-jigsaw .img-loading[data-v-6ac6a5a2]{position:absolute;left:50%;top:50%;z-index:4;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.act-jigsaw .icon-refresh[data-v-6ac6a5a2]{width:30px;height:30px}.act-jigsaw .img-error[data-v-6ac6a5a2]{text-align:center;cursor:pointer;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.act-jigsaw .img-error p[data-v-6ac6a5a2]{white-space:nowrap;margin-bottom:10px}.act-jigsaw .slider-piece[data-v-6ac6a5a2]{position:absolute;left:0;top:0}.act-jigsaw .slider-piece img[data-v-6ac6a5a2]{width:100%}.act-jigsaw .act-jigsaw-track[data-v-6ac6a5a2]{position:relative;margin-top:20px;text-align:center;height:22px;padding-top:6px;box-sizing:border-box}.act-jigsaw .act-jigsaw-track .bar[data-v-6ac6a5a2]{height:10px;border-radius:10px;background-color:#f0f0f0}.act-jigsaw .act-jigsaw-track .track-wrap[data-v-6ac6a5a2]{width:45px;height:22px;position:absolute;left:0;top:0}.act-jigsaw .act-jigsaw-track .slider-track[data-v-6ac6a5a2]{width:45px;height:22px;background-color:#8c7fee;border-radius:22px;box-shadow:0 5px 10px 0 rgba(140,127,238,.4)}.act-jigsaw .act-jigsaw-track .track[data-v-6ac6a5a2]{white-space:nowrap;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:0}.act-jigsaw .act-jigsaw-track .track .line[data-v-6ac6a5a2]{display:inline-block;width:2px;height:8px;border-radius:3px;background-color:#fff;margin:0 3px 0 2px}.act-jigsaw .shake[data-v-6ac6a5a2]{-webkit-animation:shake-data-v-6ac6a5a2 .15s ease-in;animation:shake-data-v-6ac6a5a2 .15s ease-in}.act-jigsaw .smooth[data-v-6ac6a5a2]{-webkit-transition:all .3s;transition:all .3s}@-webkit-keyframes shake-data-v-6ac6a5a2{0%{-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-transform:translateX(-3px);transform:translateX(-3px)}50%{-webkit-transform:translateX(0);transform:translateX(0)}75%{-webkit-transform:translateX(3px);transform:translateX(3px)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes shake-data-v-6ac6a5a2{0%{-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-transform:translateX(-3px);transform:translateX(-3px)}50%{-webkit-transform:translateX(0);transform:translateX(0)}75%{-webkit-transform:translateX(3px);transform:translateX(3px)}to{-webkit-transform:translateX(0);transform:translateX(0)}}