#{$prefix}login-neon {
  background-color: #303641;
  height: 100%;

  #particles {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .login-header {
    position: relative;
    background: #373e4ab0;
    padding: 80px 0;
    text-align: center;

    &::after {
      position: absolute;
      content: '';
      left: 50%;
      bottom: 0;
      margin-left: -12.5px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 13px 12.5px 0 12.5px;
      border-color: #373e4a transparent transparent transparent;
      bottom: -13px;
      -moz-transition: all 550ms ease-in-out;
      -webkit-transition: all 550ms ease-in-out;
      -o-transition: all 550ms ease-in-out;
      transition: all 550ms ease-in-out;
    }
  }

  .login-logo {
    img {
      height: 100px;
    }
  }

  .login-title {
    padding: 10px;
    font-size: 27px;
    color: #fff;
  }

  .login-form {
    padding-top: 100px;
    margin: 0 auto;
    width: 320px;
    .el-input__inner {
      padding-left: 45px;
      background: #373e4a;
      border: 1px solid #373e4a;
      box-shadow: 0 0 0px 1000px #373e4a inset;
      color: #fff;
      -webkit-text-fill-color: #fff;
      border-radius: 0;
      transition: all 0.3s ease-in;
    }

    .el-input__prefix {
      padding: 0 5px;

      #{$prefix}icon {
        font-size: 18px;
      }

      &::after {
        content: '';
        position: absolute;
        top: 11px;
        right: -5px;
        height: 20px;
        width: 1px;
        background-color: #454a54;
      }
    }

    .verifycode {
      display: flex;
      flex-direction: row;
      align-items: stretch;

      &-input {
        padding-right: 10px;
        flex-grow: 1;
      }

      &-img {
        flex-shrink: 0;
        img {
          margin-top: 1px;
          height: 38px;
          cursor: pointer;
        }
      }
    }

    .login-btn {
      border: 1px solid #454a54;
      text-align: left;
      padding: 15px 20px;
      font-size: 14px;
      background: #303641;
      color: #fff;
      width: 100%;
      transition: all 0.3s ease-in;

      #{$prefix}icon {
        float: right;
      }

      &:hover,
      &:active {
        background: #373e4a;
      }
    }
  }

  .copyright {
    color: #909399;
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 13px;
  }
}