fontend-app/mine/css/google_safe.scss

@charset "UTF-8";
//二维码样式
.google-code {
//  margin-top: .6rem;
//  margin-bottom: .2rem;
//  display: flex;
//  justify-content: center;
//  img {
//      width: 2.06rem !important;
//      height: 2.06rem;
//  }
    background-color: #FFFFFF;
    width: 240px;
    height: 240px;
    margin: .6rem auto;
    padding: 20px;
    text-align: center;
}

//谷歌验证文本
.google-address-box {
    width: 90%;
    margin: 0 auto;
    p {
        width: 100%;
        color: #333333;
        font-size: .24rem;
        padding: .2rem 0;
    }
    .google-address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            width: 70%;
            color: #666666;
            font-size: .2rem;
            word-break: break-all;
        }
        img {
            width: .27rem !important;
            height: .32rem;
        }
    }
}

//注意事项样式
.google-note {
    width: 90%;
    margin: .5rem auto;
    p {
        width: 100%;
        color: #888;
    }
}

//实现验证码输入框的样式
@keyframes animate {
    100% {
        opacity: 13;
    }
}

.vcode {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.code {
    width: 100%;
    padding: 0;
    height: 40px;
    font-size: .43rem;
    overflow: hidden;
    border: none;
    outline: none;
    opacity: 0;
    margin-left: -100%; // ios上透明度为0时依然有光标
    -webkit-tap-highlight-color: transparent;
}

.labels {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    margin-top: -.68rem;
    -webkit-tap-highlight-color: transparent; // 解决ios点击灰色阴影的问题
}

.label {
    height: .58rem;
    width: 8%;
    border-bottom: solid 2px #4489FF;
    float: left;
    color: #4489FF;
    font-size: .43rem;
    text-align: center;
    padding-bottom: 4px;
}

.active:after {
    // 伪类实现光标效果
    content: ' ';
    display: inline-block;
    height: 100%;
    width: 2px;
    background: #4489FF;
    animation: .8s animate infinite;
}

//验证按钮样式
.verification{
    width:90%;
    height:.75rem;
    background:linear-gradient(90deg,rgba(255,157,0,1) 0%,rgba(255,205,52,1) 100%);
    border-radius:4px;
    margin: .8rem auto;
    text-align: center;
    line-height: .75rem;
    color: #FFFFFF;
}