.vue-puzzle-vcode { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 200ms; &.show_ { opacity: 1; pointer-events: auto; } } .vue-auth-box_ { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: #fff; user-select: none; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); .auth-body_ { position: relative; overflow: hidden; border-radius: 3px; .loading-box_ { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 20; opacity: 1; transition: opacity 200ms; display: flex; align-items: center; justify-content: center; &.hide_ { opacity: 0; pointer-events: none; .loading-gif_ { span { animation-play-state: paused; } } } .loading-gif_ { flex: none; height: 5px; line-height: 0; @keyframes load { 0% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0.2; transform: scale(0.3); } } span { display: inline-block; width: 5px; height: 100%; margin-left: 2px; border-radius: 50%; background-color: #888; animation: load 1.04s ease infinite; &:nth-child(1) { margin-left: 0; } &:nth-child(2) { animation-delay: 0.13s; } &:nth-child(3) { animation-delay: 0.26s; } &:nth-child(4) { animation-delay: 0.39s; } &:nth-child(5) { animation-delay: 0.52s; } } } } .info-box_ { position: absolute; bottom: 0; left: 0; width: 100%; height: 24px; line-height: 24px; text-align: center; overflow: hidden; font-size: 13px; background-color: #83ce3f; opacity: 0; transform: translateY(24px); transition: all 200ms; color: #fff; z-index: 10; &.show { opacity: 0.95; transform: translateY(0); } &.fail { background-color: #ce594b; } } .auth-canvas2_ { position: absolute; top: 0; left: 0; width: 60px; height: 100%; z-index: 2; } .auth-canvas3_ { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 600ms; z-index: 3; &.show { opacity: 1; } } .flash_ { position: absolute; top: 0; left: 0; width: 30px; height: 100%; background-color: rgba(255, 255, 255, 0.1); z-index: 3; &.show { transition: transform 600ms; } } .reset_ { position: absolute; top: 2px; right: 2px; width: 35px; height: auto; z-index: 12; cursor: pointer; transition: transform 200ms; transform: rotate(0deg); &:hover { transform: rotate(-90deg); } } } .auth-control_ { .range-box { position: relative; width: 100%; background-color: #eef1f8; margin-top: 20px; border-radius: 3px; box-shadow: 0 0 8px rgba(240, 240, 240, 0.6) inset; .range-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: #b7bcd1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; width: 100%; } .range-slider { position: absolute; height: 100%; width: 50px; background-color: rgba(106, 160, 255, 0.8); border-radius: 3px; .range-btn { position: absolute; display: flex; align-items: center; justify-content: center; right: 0; width: 50px; height: 100%; background-color: #fff; border-radius: 3px; box-shadow: 0 0 4px #ccc; cursor: pointer; & > div { width: 0; height: 40%; transition: all 200ms; &:nth-child(2) { margin: 0 4px; } border: solid 1px #6aa0ff; } &:hover, &.isDown { & > div:first-child { border: solid 4px transparent; height: 0; border-right-color: #6aa0ff; } & > div:nth-child(2) { border-width: 3px; height: 0; border-radius: 3px; margin: 0 6px; border-right-color: #6aa0ff; } & > div:nth-child(3) { border: solid 4px transparent; height: 0; border-left-color: #6aa0ff; } } } } } } } .vue-puzzle-overflow { overflow: hidden !important; }