vue-next-slider-vertify/lib/style.css

基于 Vue3 的滑动验证码组件

.slider-vertify-wrap{position:relative}.slider-vertify-wrap .block{position:absolute;left:0;top:0;cursor:pointer;cursor:grab}.slider-vertify-wrap .block:active{cursor:grabbing}.slider-vertify-wrap .slider-container{position:relative;text-align:center;width:310px;height:40px;line-height:40px;background:#f7f9fa;color:#45494c;border:1px solid #e4e7eb;box-sizing:border-box}.slider-vertify-wrap .slider-container_active .slider{height:38px;top:-1px;border:1px solid #486cd6}.slider-vertify-wrap .slider-container_active .slider-mask{height:38px;border-width:1px}.slider-vertify-wrap .slider-container_success .slider{height:38px;top:-1px;border:1px solid #0db87f;background-color:#0ca14a!important}.slider-vertify-wrap .slider-container_success .slider-mask{height:38px;border:1px solid #0db87f;background-color:#d2f4ef}.slider-vertify-wrap .slider-container_success .slider-icon{background-position:0 -26px!important}.slider-vertify-wrap .slider-container_fail .slider{height:38px;top:-1px;border:1px solid #f57a7a;background-color:#f57a7a!important}.slider-vertify-wrap .slider-container_fail .slider-mask{height:38px;border:1px solid #f57a7a;background-color:#fce1e1}.slider-vertify-wrap .slider-container_fail .slider-icon{top:14px;background-position:0 -82px!important}.slider-vertify-wrap .slider-container_active .slider-text,.slider-vertify-wrap .slider-container_success .slider-text,.slider-vertify-wrap .slider-container_fail .slider-text{display:none}.slider-vertify-wrap .slider-mask{position:absolute;left:0;top:0;height:40px;border:0 solid #486cd6;background:#d1e9fe;box-sizing:border-box}.slider-vertify-wrap .slider{position:absolute;top:0;left:0;width:40px;height:38px;background:#fff;box-shadow:0 0 3px #0000004d;transition:background .2s linear;box-sizing:border-box;cursor:pointer;cursor:grab}.slider-vertify-wrap .slider:active{cursor:grabbing}.slider-vertify-wrap .slider:hover{background:#486cd6}.slider-vertify-wrap .slider-icon{font-size:18px;color:#000}.slider-vertify-wrap .slider:hover .slider-icon{color:#fff}.slider-vertify-wrap .refresh-icon{position:absolute;right:5px;top:5px;width:30px;height:30px;cursor:pointer;background-size:32px}.slider-vertify-wrap .loading-container{position:absolute;left:0;top:0;width:310px;height:155px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:14px;color:#45494c;z-index:2;background:#edf0f2}.slider-vertify-wrap .loadingIcon{width:32px;height:32px;margin-bottom:10px;background-size:32px;animation:loading-icon-rotate .8s linear infinite}@keyframes loading-icon-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}