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


    .login-left {
        width: 50%;
        background: transparent;
    }

    .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;
        }
    }

    // 背景图动画
    .area {
        background: #b9f187;
        background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
        width: 100%;
        height: 100vh;
        z-index: -1;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
    }

    .circles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.5);
        animation: animate 25s linear infinite;
        bottom: -150px;

    }

    .circles li:nth-child(1) {
        left: 25%;
        width: 80px;
        height: 80px;
        animation-delay: 0s;
    }


    .circles li:nth-child(2) {
        left: 10%;
        width: 20px;
        height: 20px;
        animation-delay: 2s;
        animation-duration: 12s;
    }

    .circles li:nth-child(3) {
        left: 70%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
    }

    .circles li:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px;
        animation-delay: 0s;
        animation-duration: 18s;
    }

    .circles li:nth-child(5) {
        left: 65%;
        width: 20px;
        height: 20px;
        animation-delay: 0s;
    }

    .circles li:nth-child(6) {
        left: 75%;
        width: 110px;
        height: 110px;
        animation-delay: 3s;
    }

    .circles li:nth-child(7) {
        left: 35%;
        width: 150px;
        height: 150px;
        animation-delay: 7s;
    }

    .circles li:nth-child(8) {
        left: 50%;
        width: 25px;
        height: 25px;
        animation-delay: 15s;
        animation-duration: 45s;
    }

    .circles li:nth-child(9) {
        left: 20%;
        width: 15px;
        height: 15px;
        animation-delay: 2s;
        animation-duration: 35s;
    }

    .circles li:nth-child(10) {
        left: 85%;
        width: 150px;
        height: 150px;
        animation-delay: 0s;
        animation-duration: 11s;
    }


    @keyframes animate {

        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
            border-radius: 0;
        }

        100% {
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
            border-radius: 50%;
        }

    }
}
