.t-scan {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    &-camera {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10000;
        width: 100vw;
        height: 100vh;
    }
    &-mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 1);
        z-index: 10001;
        transition: all .3s ease;
        &_hide {
            pointer-events: none;
            opacity: 0;
        }
    }
    &-border {
        position: fixed;
        left: 50%;
        top: 42%;
        // top: 340upx;
        // top: calc(constant(safe-area-inset-top) + 340upx);
        // top: calc(env(safe-area-inset-top) + 340upx);
        // transform: translate(-50%, -78%);
        // width: 466upx;
        // height: 466upx;
        z-index: 10002;
        pointer-events: none;
        overflow: initial;
        &__line {
            position: fixed;
            width: 40upx;
            height: 40upx;
            z-index: 10002;
            left: 50%;
            top: 42%;
            margin-left: -20upx;
            &_row, &_col {
                content: '';
                display: block;
                background-color: white;
                position: absolute;
            }
            &_row {
                width: 100%;
                height: 6upx;
            }
            &_col {
                width: 6upx;
                height: 100%;
            }
            &_rt, &_rb {
                .t-scan-border__line_col {
                    right: 0;
                    top: 0;
                }
            }
            &_rb, &_lb {
                .t-scan-border__line_row {
                    bottom: 0;
                }
            }
            &_lt {
                // left: -233upx;
                // top: -233upx;
                transform: translate(-233upx, -233upx);
                .t-scan-border__lise_col {
                    left: 0;
                    top: 0;
                }
            }
            &_rt {
                // right: -233upx;
                // top: -233upx;
                transform: translate(233upx, -233upx);
            }
            &_lb {
                // left: -233upx;
                // bottom: -233upx;
                transform: translate(-233upx, 233upx);
                .t-scan-border__lise_col {
                    left: 0;
                    bottom: 0;
                }
            }
            &_rb {
                // right: -233upx;
                // bottom: -233upx;
                transform: translate(233upx, 233upx);
            }
        }
    }
    &-title {
        position: fixed;
        left: 0;
        top: 50%;
        z-index: 10001;
        font-size: 38upx;
        color: white;
        font-weight: 500;
        text-align: center;
        width: 100%; 
        transform: translateY(440%);
    }
    &-hint {
        position: fixed;
        left: 0;
        top: 50%;
        z-index: 10001;
        font-size: 24upx;
        color: white;
        font-weight: 400;
        text-align: center;
        width: 100%;
        transform: translateY(868%);
    }
    &-action {
        position: fixed;
        left: 50%;
        bottom: 80upx;
        bottom: calc(constant(safe-area-inset-bottom) + 80upx);
        bottom: calc(env(safe-area-inset-bottom) + 80upx);
        // width: 100%;
        height: 100upx;
        // display: flex;
        // align-items: center;
        // justify-content: space-around;
        // flex-wrap: wrap;
        // text-align: center;
        z-index: 10003;
        background: #222222;
        border-radius: 100upx;
        transform: translateX(-50%);
    }
    &-button {
        width: 226upx;
        height: 100upx;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all .2s ease;
        &__image {
            width: 106upx;
            height: 106upx;
            display: block;
            margin: 0 auto;
            // transition: all .1s ease;
            &:active {
                transform: scale(.94);
            }
        }
        &__text {
            font-size: 28upx;
            font-weight: 400;
            color: #FFFFFF;
            // line-height: 33px;
            // margin-top: 10upx;
        }
        &:active {
            opacity: .8;
        }
        & + & {
            border-left: 2upx solid #888888;
        }
    }
    &-back {
        position: fixed;
        z-index: 10002;
        left: 0;
        top: 0;
        width: 120upx;
        height: 80upx;
        line-height: 80upx;
        color: white;
        padding-left: 40upx;
        &__image {
            width: 22upx;
            height: 40upx;
        }
    }
    &-line {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 200upx;
        z-index: 10002;
        animation: lineMove 3s linear infinite;
        pointer-events: none;
    }
    &-flash {
        position: fixed;
        left: 50%;
        top: 42%;
        width: 80upx;
        height: 80upx;
        z-index: 10002;
        transform: translate(-50%, 234%);
        &__image {
            width: 100%;
            height: 100%;
        }
    }
}

@keyframes lineMove {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    20%{
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(100vh);
    }
}