/**
 @Name:登录页
 @Name: Hui-Vue2
 @Author: HAIFAN
 @version:8.4.4
 @date:2025年05月24日23:23:31
 */
.#{$namespace} {
  &-login {
    width: 100vw;
    height: 100vh;
    background: url($login-bg) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: flex;

    .login {
      &-header {
        width: 66.66666667%;
        display: flex;
        justify-content: center;
        align-items: center;

        .logo {
          width: $login-logo-size;
          height: $login-logo-size;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .title {
          padding-left: 20px;

          h1 {
            font-weight: bold;
            color: $login-text-color;
            font-size: $login-text-cn;
            text-shadow: $text-shadow;
            animation: anima-downbit 0.5s both;
          }

          h2 {
            color: $login-text-color;
            font-size: $login-text-en;
            font-weight: normal;
            text-transform: uppercase;
            margin-left: 5px;
            text-shadow: $text-shadow;
            animation: anima-upbit 0.5s both;
          }
        }
      }

      &-body {
        width: 33.333333%;
        position: relative;
        animation: anima-right 0.5s 1s both;
        background: $login-from-bg;
        box-shadow: $box-shadow;
        @include transition();
        @include flexBox(column, center, center);

        &:hover {
          box-shadow: $box-shadow-hover;
        }

        .login-logo {
          width: $login-logo-size;
          height: $login-logo-size;

          img {
            width: 100%;
            height: 100%;
          }
        }

        h1 {
          font-weight: bold;
          text-align: center;
          font-size: $login-from-h1;
          text-transform: uppercase;
          color: $primary;
          margin-top: 10px;

          b {
            color: $blue;
          }
        }

        // 表单
        .hui-from {
          width: 100%;
          padding: $login-from-pd-y $login-from-pd-x;
        }

        // 修正el
        .el {
          &-form {
            &-item {
              position: relative;

              .hui-btn {
                width: 100%;
                color: $login-btn-color;
                margin-top: 30px;
                font-size: $ft-bs;
                padding: 13px 18px;
                background-color: $login-btn-bg;
              }
            }
          }

          &-input {
            &__inner {
              height: 46px;
              line-height: 46px;
              padding-left: 50px;

              &:focus {
                border-color: $primary;

                & + .el-input__prefix {
                  .svg-icon {
                    fill: $primary;
                    color: $primary;
                  }
                }
              }
            }

            // 前置图标
            &__prefix {
              left: 20px;
              line-height: 46px;

              .svg-icon {
                color: $g-300;
                width: 18px;
                height: 18px;
                @include transition();
              }
            }

            // 后置图标
            &__suffix {
              color: $g-300;
              cursor: pointer;
              line-height: 46px;
              right: 20px;
              width: 18px;
              height: 18px;
            }
          }
        }
      }

      &-footer {
        color: $login-footer-text-color;
        width: 100%;
        font-size: $ft-sm;
        text-align: center;
        @include position(null, null, 0, 30px);
        animation: anima-upbit 1s 1s both;

        span {
          display: block;
        }
      }

      &-reg-btn {
        display: block;
        color: $blue;
        text-decoration: underline;
        cursor: pointer;
        text-align: center;

        &:hover {
          color: $primary;
        }
      }
    }
  }

  // style2
  &-login {
    &.layout-col {
      @include flexBox(column, center, center);

      .login {
        &-header {
          .logo {
            width: $login-logo-size * 0.8;
            height: $login-logo-size * 0.8;
          }

          .title {
            h1 {
              font-size: $login-text-cn * 0.8;
            }

            h2 {
              font-size: $login-text-en * 0.8;
            }
          }
        }

        &-body {
          width: 30%;
          margin-top: 100px;
          padding-top: 50px;
          border-radius: 5px;
          animation: anima-fadein 1s 1.5s both;

          h1 {
            font-size: $login-from-h1 * 0.857;
          }

          .hui-from {
            padding: $login-from-pd-y * 0.75 $login-from-pd-x * 0.85;
          }
        }

        &-footer {
          width: 100%;
          color: $white;
        }
      }
    }
  }

  // style3
  &-login {
    &.layout-around {
      .login {
        &-header {
          padding-top: 40px;
          padding-left: 40px;
          width: calc(100% - 700px);
          align-items: flex-start;
          justify-content: flex-start;

          .logo {
            width: $login-logo-size * 0.8;
            height: $login-logo-size * 0.8;
            animation: anima-left 0.5s both;
          }

          .title {
            animation: anima-left 0.5s 0.5s both;

            h1 {
              animation: none;
              text-shadow: $text-shadow;
              font-size: $login-text-cn * 0.7;

              &::after {
                content: "";
                display: block;
                width: 100%;
                height: 2px;
                background-color: $white;
                margin: 5px 0;
              }
            }

            h2 {
              text-shadow: $text-shadow;
              animation: none;
              letter-spacing: 2px;
              font-size: $login-text-en * 0.53;
            }
          }
        }

        &-body {
          width: 440px;
          height: 500px;
          margin-top: 12%;
          border-radius: 3px;
          box-shadow: $box-shadow;
          background-color: rgba($primary, $alpha: 0.8);
          border: 1px solid rgba($white, $alpha: 0.1);
          animation: anima-scale 0.5s 1s both;

          &:hover {
            box-shadow: 0 0 50px rgba($primary, 0.8);
            background-color: $primary;
          }

          h1 {
            font-weight: normal;
            color: $login-from-h1-color;
            font-size: $login-from-h1 * 0.85;
            height: 50px;
          }

          .hui-from {
            padding: 50px;

            .el-form {
              &-item {
                margin-bottom: 36px;

                &__content {
                  height: 46px;

                  .el-input {
                    .el-input__inner {
                      color: $white;
                      font-size: $ft-bs;
                      border: 1px solid rgba($white, $alpha: 0.3);
                      border-radius: 0;
                      background: none;
                      @include transition();

                      &:hover,
                      &:focus,
                      &:active {
                        border-color: rgba($white, $alpha: 1);
                        background: none !important;
                      }

                      &:focus + .el-input__prefix {
                        .svg-icon {
                          fill: $teal;
                          color: $teal;
                        }
                      }
                    }
                  }
                }

                .hui-btn {
                  padding: 16px 20px;
                  margin-top: 20px;
                  background-color: $white;
                  color: $primary;
                  transition: none;

                  &:hover {
                    background-color: $primary;
                    border: 1px solid rgba($white, $alpha: 0.3);
                    color: $white;
                    opacity: 1;
                    box-shadow: $box-shadow;
                  }
                }
              }
            }
          }
        }

        &-footer {
          width: 100%;
          color: $white;
        }
      }
    }
  }
}