vue-slider-vertify
Version:
Slide verification component based on vue3
2 lines (1 loc) • 2.84 kB
CSS
.vertifyWrap[data-v-d497bec6]{position:relative}.vertifyWrap .block[data-v-d497bec6]{position:absolute;left:0;top:0;cursor:pointer;cursor:grab}.vertifyWrap .block[data-v-d497bec6]:active{cursor:grabbing}.vertifyWrap .sliderContainer[data-v-d497bec6]{position:relative;text-align:center;width:310px;height:40px;line-height:40px;margin-top:15px;background:#f7f9fa;color:#45494c;border:1px solid #e4e7eb}.vertifyWrap .sliderContainer_active .slider[data-v-d497bec6]{height:38px;top:-1px;border:1px solid #486cd6}.vertifyWrap .sliderContainer_active .sliderMask[data-v-d497bec6]{height:38px;border-width:1px}.vertifyWrap .sliderContainer_success .slider[data-v-d497bec6]{height:38px;top:-1px;border:1px solid #0db87f;background-color:#0ca14a}.vertifyWrap .sliderContainer_success .sliderMask[data-v-d497bec6]{height:38px;border:1px solid #0db87f;background-color:#d2f4ef}.vertifyWrap .sliderContainer_success .sliderIcon[data-v-d497bec6]{background-position:0 -26px}.vertifyWrap .sliderContainer_fail .slider[data-v-d497bec6]{height:38px;top:-1px;border:1px solid #f57a7a;background-color:#f57a7a}.vertifyWrap .sliderContainer_fail .sliderMask[data-v-d497bec6]{height:38px;border:1px solid #f57a7a;background-color:#fce1e1}.vertifyWrap .sliderContainer_fail .sliderIcon[data-v-d497bec6]{top:14px;background-position:0 -82px}.vertifyWrap .sliderContainer_active .sliderText[data-v-d497bec6],.vertifyWrap .sliderContainer_success .sliderText[data-v-d497bec6],.vertifyWrap .sliderContainer_fail .sliderText[data-v-d497bec6]{display:none}.vertifyWrap .sliderMask[data-v-d497bec6]{position:absolute;left:0;top:0;height:40px;border:0 solid #486cd6;background:#d1e9fe}.vertifyWrap .slider[data-v-d497bec6]{position:absolute;top:0;left:0;width:40px;height:40px;background:#fff;box-shadow:0 0 3px #0000004d;transition:background .2s linear;cursor:pointer;cursor:grab}.vertifyWrap .slider[data-v-d497bec6]:active{cursor:grabbing}.vertifyWrap .slider[data-v-d497bec6]:hover{background:#486cd6}.vertifyWrap .sliderIcon[data-v-d497bec6]{font-size:18px;color:#000}.vertifyWrap .slider:hover .sliderIcon[data-v-d497bec6]{color:#fff}.vertifyWrap .refreshIcon[data-v-d497bec6]{position:absolute;right:5px;top:5px;width:30px;height:30px;cursor:pointer;background-size:32px}.vertifyWrap .loadingContainer[data-v-d497bec6]{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}.vertifyWrap .loadingIcon[data-v-d497bec6]{width:32px;height:32px;margin-bottom:10px;background:url(http://cdn.dooring.cn/dr/icon12.png);background-size:32px;animation:loading-icon-rotate-d497bec6 .8s linear infinite}@keyframes loading-icon-rotate-d497bec6{0%{transform:rotate(0)}to{transform:rotate(360deg)}}