.login-main {
    display: flex;
    flex-direction: row;
    //background-color: rgb(238, 255, 238);
    width: 100vw;
    height: 100vh;
    /* 加载背景图 */
    background-image: url("@/assets/images/background.png");
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;

    .login-left {
        width: 50%;
    }

    .login-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
        height: 100%;

        .login-right-title {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 32px;
        }
    }

    .login-card {
        width: 440px;
        height: 490px;
        border-radius: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08);

        .login-card-span {
            color: #999ba1;
            font-size: 12px;
        }

        .login-tab-span {
            font-weight: bolder;
            font-size: large
        }

        .login-form-input {

        }

        .login-form-item {
            height: 70px;
        }

        .login-form-button {
            width: 100%;
        }

        .login-right-qrcode {
            position: absolute;
            right: 0;
            top: 0;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            width: 72px;
            height: 72px;
            background-image: url(data:image/png;base64,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);
            cursor: pointer;
        }

        .login-right-qrcode:hover {
            opacity: 0.9;
        }

        .login-form-bottom-button {
            color: #999ba1;
        }
    }

    .gocaptcha-rotate {
        width: 330px;
        height: 350px;
        position: absolute;
        border-radius: 15px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .mask { /* 遮罩层的写法 */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
}