.status_bar {
    height: var(--status-bar-height);
    width: 100%;
    background-color: #fff;
}

.switchTerrace {
    display: flex;
    align-items: center;
    font-weight: bold;

    text {
        margin-left: 6rpx;
    }
}

.info {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 60rpx;
    color: rgb(126, 126, 126);
    font-size: 28rpx;
}

.phone-login-root {
    width: 100%;

    .top-mask {
        height: 15rpx;
        background-color: rgb(242, 242, 242);
    }

    .img {
        margin: 25rpx 0;
        text-align: center;

        image {
            width: 300rpx;
            height: 300rpx;
        }
    }

    .center-root {

        .tab-root {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            color: #aaa;
            margin-bottom: 40rpx;

            .icon {
                order: 2;
            }

            .tab-item:first-child {
                order: 1;
            }

            .tab-item:last-child {
                order: 3;
            }

            .tab-item {
                font-size: 40rpx;
                padding: 10rpx 40rpx;
                border-radius: 50rpx;
                color: #aaa;
                font-weight: bold;
            }

            .active {
                color: $jx-login;
                font-weight: bold;
            }
        }

        .form-root {
            box-sizing: border-box;
            width: 100%;
            padding: 0 50rpx;
            height: 450rpx;
        }

        .weixin-login-root {
            padding-bottom: 70rpx;
            width: 100%;
            bottom: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .text-root {
                display: flex;
                align-items: center;
                justify-content: center;

                .hr {
                    width: 400rpx;
                    border-bottom: 1rpx solid #e6e6e6;
                    z-index: 0;
                    width: 150rpx;
                    background-color: #e6e6e6;
                }

                .weixin-text {
                    font-size: 28rpx;
                    position: relative;
                    padding: 0 10rpx;
                    color: #cacaca;
                }
            }

            button {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 90rpx;
                width: 90rpx;
                background-color: $jx-login  !important;
                border-radius: 50%;
                margin-top: 10rpx;
            }
        }
    }
}

.copyright-root {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    font-size: 26rpx;

    .text {
        color: $jx-login;
    }

    .center {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .lab {
            position: absolute;
            padding: 7rpx 10rpx;
            background-color: #656a70;
            color: #fff;
            left: 0rpx;
            top: 60rpx;
            border-radius: 10rpx;
            opacity: 0;
            transition: all 0.2s;
        }

        .lab::after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-left: 11rpx solid transparent;
            border-right: 11rpx solid transparent;
            border-bottom: 12rpx solid #656a70;
            left: 12rpx;
            top: -11rpx;
        }

        .lab-active {
            opacity: 1 !important;
        }
    }

    .center-active {
        animation: identifier 0.2s;
    }
}


.swiper {
    height: 450rpx;
}

@keyframes identifier {
    0% {
        transform: translateX(20rpx);
    }

    20% {
        transform: translateX(0rpx);
    }

    40% {
        transform: translateX(20rpx);
    }

    60% {
        transform: translateX(0rpx);
    }

    40% {
        transform: translateX(20rpx);
    }

    100% {
        transform: translateX(0rpx);
    }
}