eoss-ui 0.6.44 → 0.6.46

package/packages/theme-chalk/src/login.scss

@@ -1,947 +1,969 @@
-@import './common/var.scss';
-@mixin loginMedium {
-  .es-login.es-adaptive {
-    width: $--login-width * 0.7777;
-    .es-login-main {
-      padding: $--login-padding-medium;
-      &.es-complex {
-        padding: $--login-complex-padding-medium;
-      }
-    }
-    .es-login-name {
-      margin-bottom: 16px;
-    }
-    .es-login-title-image {
-      margin: $--login-title-image-margin-medium;
-    }
-    .es-login-model {
-      right: 8px;
-      top: 8px;
-      .es-icon-box {
-        width: 40px;
-        height: 40px;
-        &::after {
-          border-width: 22px;
-        }
-        .es-icon {
-          font-size: 38px;
-        }
-      }
-      .es-login-model-tips {
-        width: 128px;
-        height: 32px;
-        padding: 6px 8px 6px 4px;
-        line-height: 20px;
-        right: 46px;
-        top: 8px;
-      }
-    }
-    .es-login-models {
-      padding-top: 12px;
-      bottom: 10px;
-      .es-icon-box {
-        & + .es-icon-box {
-          margin-left: 12px;
-        }
-      }
-      .es-icon {
-        font-size: 22px;
-      }
-    }
-    .es-login-complex-title {
-      height: 12px;
-      font-size: 18px;
-      line-height: 18px;
-      transform: translateY(-16px);
-    }
-    .es-login-complex-models {
-      height: 40px;
-      line-height: 40px;
-      margin-bottom: 12px;
-      .es-login-complex-models-item {
-        padding: 0 10px;
-        font-size: 16px;
-        & + .es-login-complex-models-item {
-          margin-left: 24px;
-        }
-        &.es-active {
-          color: $--color-primary;
-          border-bottom: 1px solid $--color-primary;
-        }
-      }
-    }
-    .es-login-title {
-      font-size: 20px;
-      line-height: 20px;
-      padding-bottom: 18px;
-      .es-login-title-content {
-        margin: 0 24px;
-      }
-      &.es-login-title-complex {
-        height: 40px;
-        font-size: 16px;
-        line-height: 40px;
-        .es-login-title-content {
-          padding: 0 12px;
-          border-bottom-width: 1px;
-        }
-      }
-    }
-    .es-login-form {
-      height: 264px;
-      .el-form-item__content {
-        line-height: 40px;
-      }
-      .el-input__inner {
-        height: 40px;
-        font-size: 16px;
-        padding-left: 42px;
-      }
-      .el-input__prefix {
-        width: 40px;
-        height: 40px;
-        padding-left: 5px;
-        line-height: 40px;
-        i {
-          line-height: 40px;
-          font-size: 18px;
-        }
-      }
-      .el-input__suffix-inner {
-        height: 40px;
-        line-height: 40px;
-        .el-input__icon {
-          line-height: 40px;
-          font-size: 16px;
-        }
-        .es-img-code {
-          height: 36px;
-        }
-        .es-get-code {
-          width: 94px;
-          height: 40px;
-          line-height: 40px;
-        }
-      }
-      .es-button-submit {
-        height: 40px;
-        font-size: 18px;
-        line-height: 40px;
-      }
-      .es-label-image-code {
-        padding-right: 95px;
-      }
-    }
-    .es-login-qrcode {
-      height: 264px;
-    }
-    .es-password-handle {
-      height: 22px;
-      margin-bottom: 12px;
-
-      .el-checkbox__label {
-        font-size: 14px;
-      }
-
-      .el-checkbox__input {
-        .el-checkbox__inner {
-          width: 18px;
-          height: 18px;
-          border-radius: 10px;
-
-          &::after {
-            border: 2px solid #ffffff;
-            border-left: 0;
-            border-top: 0;
-            height: 8px;
-            left: 6px;
-            top: 2px;
-          }
-        }
-      }
-
-      .es-password-forget {
-        font-size: 14px;
-      }
-    }
-    .es-login-complex-app {
-      .es-login-complex-scan {
-        padding-right: 16px;
-        .es-icon-scan {
-          font-size: 30px;
-        }
-        .es-login-complex-scan-tips {
-          line-height: 18px;
-        }
-      }
-      .es-login-complex-download {
-        margin-left: 16px;
-        line-height: 36px;
-      }
-    }
-    .es-to-login {
-      margin-right: -40px;
-      font-size: 17px;
-      padding-top: 14px;
-    }
-  }
-}
-@mixin loginSmall {
-  .es-login.es-adaptive {
-    width: $--login-width * 0.6666;
-    .es-login-main {
-      padding: $--login-padding-small;
-      &.es-complex {
-        padding: $--login-complex-padding-small;
-      }
-    }
-    .es-login-name {
-      margin-bottom: 12px;
-    }
-    .es-login-title-image {
-      margin: $--login-title-image-margin-small;
-    }
-    .es-login-model {
-      right: 6px;
-      top: 6px;
-      .es-icon-box {
-        width: 36px;
-        height: 36px;
-        &::after {
-          border-width: 19px;
-        }
-        .es-icon {
-          font-size: 34px;
-        }
-      }
-      .es-login-model-tips {
-        width: 100px;
-        height: 26px;
-        font-size: 12px;
-        padding: 4px 6px 4px 2px;
-        line-height: 20px;
-        right: 38px;
-        top: 6px;
-      }
-    }
-    .es-login-models {
-      padding-top: 12px;
-      bottom: 10px;
-      .es-icon-box {
-        & + .es-icon-box {
-          margin-left: 12px;
-        }
-      }
-      .es-icon {
-        font-size: 20px;
-      }
-    }
-    .es-login-complex-title {
-      height: 10px;
-      font-size: 16px;
-      line-height: 16px;
-    }
-    .es-login-complex-models {
-      height: 30px;
-      line-height: 30px;
-      margin-bottom: 8px;
-      .es-login-complex-models-item {
-        padding: 0 8px;
-        font-size: 14px;
-        & + .es-login-complex-models-item {
-          margin-left: 18px;
-        }
-      }
-    }
-    .es-login-title {
-      font-size: 16px;
-      line-height: 16px;
-      padding-bottom: 14px;
-      .es-login-title-content {
-        margin: 0 24px;
-      }
-      &.es-login-title-complex {
-        height: 30px;
-        font-size: 14px;
-        line-height: 30px;
-        .es-login-title-content {
-          padding: 0 10px;
-        }
-      }
-    }
-    .es-login-form {
-      height: 224px;
-      .el-form-item__content {
-        line-height: 32px;
-      }
-      .el-input__inner {
-        height: 32px;
-        font-size: 14px;
-        padding-left: 34px;
-      }
-      .el-input__prefix {
-        width: 32px;
-        height: 32px;
-        padding-left: 5px;
-        line-height: 32px;
-        i {
-          line-height: 32px;
-          font-size: 16px;
-        }
-      }
-      .el-input__suffix-inner {
-        height: 32px;
-        line-height: 32px;
-        .el-input__icon {
-          line-height: 32px;
-          font-size: 14px;
-        }
-        .es-img-code {
-          height: 30px;
-        }
-        .es-get-code {
-          width: 80px;
-          height: 32px;
-          line-height: 32px;
-        }
-      }
-      .es-button-submit {
-        height: 32px;
-        font-size: 14px;
-        line-height: 32px;
-      }
-      .es-label-image-code {
-        padding-right: 80px;
-      }
-    }
-    .es-login-qrcode {
-      height: 224px;
-      .es-login-down-app {
-        font-size: 12px;
-      }
-    }
-    .es-password-handle {
-      height: 22px;
-      margin-bottom: 8px;
-
-      .el-checkbox__label {
-        font-size: 14px;
-        padding-left: 6px;
-      }
-
-      .el-checkbox__input {
-        .el-checkbox__inner {
-          width: 16px;
-          height: 16px;
-          border-radius: 10px;
-
-          &::after {
-            height: 6px;
-            left: 5px;
-            top: 2px;
-          }
-        }
-      }
-
-      .es-password-forget {
-        font-size: 14px;
-      }
-    }
-    .es-login-complex-app {
-      .es-login-complex-scan {
-        padding-right: 16px;
-        .es-icon-scan {
-          font-size: 22px;
-        }
-        .es-login-complex-scan-tips {
-          line-height: 14px;
-          font-size: 12px;
-        }
-      }
-      .es-login-complex-download {
-        margin-left: 16px;
-        line-height: 30px;
-      }
-    }
-    .es-to-login {
-      margin-right: -30px;
-      font-size: 14px;
-      padding-top: 8px;
-    }
-  }
-}
-@mixin loginMini {
-  .es-login.es-adaptive {
-    .es-login-main {
-      padding: $--login-padding-mini;
-      &.es-complex {
-        padding: $--login-complex-padding-mini;
-      }
-    }
-    .es-login-name {
-      margin-bottom: 8px;
-    }
-    .es-login-title-image {
-      margin: $--login-title-image-margin-mini;
-    }
-    .es-login-model {
-      .es-icon-box {
-        width: 32px;
-        height: 32px;
-        &::after {
-          border-width: 17px;
-        }
-        .es-icon {
-          font-size: 30px;
-        }
-      }
-    }
-    .es-login-models {
-      padding-top: 12px;
-      bottom: 10px;
-      .es-icon-box {
-        & + .es-icon-box {
-          margin-left: 12px;
-        }
-      }
-      .es-icon {
-        font-size: 18px;
-      }
-    }
-    .es-login-complex-title {
-      height: 10px;
-      font-size: 14px;
-      line-height: 14px;
-    }
-    .es-login-complex-models {
-      height: 24px;
-      line-height: 24px;
-      margin-bottom: 4px;
-      .es-login-complex-models-item {
-        padding: 0 4px;
-        font-size: 12px;
-        & + .es-login-complex-models-item {
-          margin-left: 12px;
-        }
-      }
-    }
-    .es-login-title {
-      font-size: 14px;
-      line-height: 14px;
-      padding-bottom: 10px;
-      .es-login-title-content {
-        margin: 0 24px;
-      }
-      &.es-login-title-complex {
-        height: 24px;
-        font-size: 14px;
-        line-height: 24px;
-        .es-login-title-content {
-          padding: 0 10px;
-        }
-      }
-    }
-    .es-login-form {
-      height: 210px;
-      .el-input__inner {
-        font-size: 12px;
-      }
-    }
-    .es-login-qrcode {
-      height: 210px;
-    }
-    .es-password-handle {
-      .el-checkbox__label {
-        font-size: 12px;
-      }
-
-      .el-checkbox__input {
-        .el-checkbox__inner {
-          width: 14px;
-          height: 14px;
-          ß &::after {
-            height: 6px;
-            left: 4px;
-            top: 1px;
-          }
-        }
-      }
-
-      .es-password-forget {
-        font-size: 12px;
-      }
-    }
-    .es-login-complex-app {
-      .es-login-complex-scan {
-        padding-right: 12px;
-        .es-icon-scan {
-          font-size: 22px;
-        }
-        .es-login-complex-scan-tips {
-          line-height: 14px;
-          font-size: 12px;
-        }
-      }
-      .es-login-complex-download {
-        margin-left: 12px;
-        line-height: 28px;
-        font-size: 12px;
-      }
-    }
-    .es-to-login {
-      margin-right: -20px;
-      font-size: 14px;
-      padding-top: 4px;
-    }
-  }
-}
-.es-login-screen {
-  width: 100%;
-  height: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  position: relative;
-  overflow: hidden;
-
-  .es-login-logo {
-    height: 58px;
-    position: absolute;
-    left: 24px;
-    top: 24px;
-  }
-  .es-login {
-    width: $--login-width;
-    position: absolute;
-    .es-login-main {
-      padding: $--login-padding;
-      position: relative;
-      border-radius: 20px;
-      background-size: 100% 100%;
-      background-color: #ffffff;
-      background-repeat: no-repeat;
-      box-shadow: $--box-shadow-light;
-      &.es-complex {
-        padding: $--login-complex-padding;
-      }
-    }
-    .es-login-name {
-      margin-bottom: 20px;
-      position: relative;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    .es-login-title-image {
-      margin: $--login-title-image-margin;
-      border-radius: 20px 20px 0 0;
-      overflow: hidden;
-      .es-login-title-img {
-        width: 100%;
-      }
-    }
-    .es-login-model {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      z-index: 99;
-      .es-icon-box {
-        display: block;
-        width: 50px;
-        height: 50px;
-        cursor: pointer;
-        position: relative;
-        padding: 1px;
-        &::after {
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          border-color: transparent transparent #fff #fff;
-          border-style: solid;
-          border-width: 28px;
-        }
-        .es-icon {
-          font-size: 48px;
-          color: $--color-primary;
-        }
-      }
-      .es-login-model-item-tips {
-        white-space: nowrap;
-        position: absolute;
-        left: 10px;
-        top: 10px;
-        transform: translateX(-100%);
-        z-index: 999;
-      }
-      .es-login-model-tips {
-        width: 128px;
-        height: 40px;
-        padding: 8px 10px 8px 6px;
-        line-height: 24px;
-        text-align: center;
-        color: #d4815e;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        position: absolute;
-        right: 60px;
-        top: 10px;
-      }
-    }
-    .es-login-models {
-      text-align: center;
-      color: #d9d9d9;
-      padding-top: 12px;
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 10px;
-      .es-icon-box {
-        & + .es-icon-box {
-          margin-left: 12px;
-        }
-        &.es-icon-active {
-          color: $--color-primary;
-        }
-      }
-      .es-icon {
-        font-size: 24px;
-        cursor: pointer;
-      }
-    }
-    .es-login-complex-title {
-      height: 22px;
-      font-size: 22px;
-      font-family: 'zihun';
-      font-weight: normal;
-      color: $--color-primary;
-      line-height: 22px;
-      transform: translateY(-20px);
-    }
-    .es-login-complex-models {
-      display: flex;
-      height: 40px;
-      line-height: 40px;
-      margin-bottom: 18px;
-      .es-login-complex-models-item {
-        min-width: 64px;
-        padding: 0 13px;
-        font-size: 18px;
-        color: #939393;
-        text-align: center;
-        cursor: pointer;
-        & + .es-login-complex-models-item {
-          margin-left: 30px;
-        }
-        &.es-active {
-          color: $--color-primary;
-          border-bottom: 1px solid $--color-primary;
-        }
-      }
-      &.es-complex-title {
-        justify-content: center;
-      }
-    }
-    .es-login-title {
-      color: $--color-primary;
-      display: flex;
-      align-items: center;
-      font-size: 24px;
-      line-height: 24px;
-      font-weight: bold;
-      position: relative;
-      padding-bottom: 30px;
-
-      &:not(.es-login-title-complex)::before,
-      &:not(.es-login-title-complex)::after {
-        content: '';
-        height: 1px;
-        flex: 1;
-        background-color: #eeeeee;
-      }
-      .es-login-title-content {
-        margin: 0 24px;
-      }
-      &.es-login-title-complex {
-        justify-content: center;
-        height: 40px;
-        font-size: 16px;
-        line-height: 40px;
-        .es-login-title-content {
-          padding: 0 12px;
-          border-bottom: 2px solid $--color-primary;
-        }
-      }
-    }
-    .es-login-form {
-      height: 340px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      .el-form-item__content {
-        line-height: 50px;
-      }
-      .el-form-item {
-        margin-bottom: 0;
-      }
-      .el-input__inner {
-        height: 50px;
-        font-size: 18px;
-        background-color: #f7f7f7;
-        border-radius: $--login-form-radius;
-        padding-left: 52px;
-      }
-      .el-input__prefix {
-        width: 48px;
-        left: 0;
-        padding-left: 6px;
-        line-height: 50px;
-        height: 50px;
-        i {
-          line-height: 50px;
-          font-size: 20px;
-          color: #333;
-        }
-      }
-      .el-input__suffix-inner {
-        display: block;
-        height: 50px;
-        line-height: 50px;
-        .el-input__icon {
-          line-height: 50px;
-          font-size: 18px;
-        }
-        .es-img-code {
-          cursor: pointer;
-          height: 46px;
-          margin: 2px;
-        }
-        .es-get-code {
-          width: 115px;
-          height: 50px;
-          text-align: center;
-          padding: 0;
-          line-height: 50px;
-        }
-      }
-      .es-button-submit {
-        width: 100%;
-        height: 50px;
-        font-size: 20px;
-        text-align: center;
-        line-height: 50px;
-        font-weight: 500;
-        border-radius: $--login-form-radius;
-        padding: 0;
-      }
-      .es-label-image-code {
-        padding-right: 120px;
-        .el-input__suffix {
-          right: 0;
-        }
-      }
-    }
-    .es-login-qrcode {
-      height: 340px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      .es-login-qrcode-box {
-        flex: 1;
-        position: relative;
-      }
-      .es-login-down-app {
-        font-size: $--font-size-base;
-        font-weight: normal;
-        text-align: center;
-        line-height: 20px;
-        .es-login-app-name {
-          color: #a90404;
-          padding: 0 8px;
-        }
-      }
-      .es-qrcode-box,
-      .es-wx-qrcode-box {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-      }
-    }
-    .es-password-handle {
-      height: 22px;
-      justify-content: space-between;
-      margin-bottom: 22px;
-
-      .el-checkbox__label {
-        font-size: 16px;
-        font-weight: 400;
-        color: #333333 !important;
-      }
-
-      .el-checkbox__input {
-        .el-checkbox__inner {
-          width: 18px;
-          height: 18px;
-          border-radius: 10px;
-
-          &::after {
-            border: 2px solid #ffffff;
-            border-left: 0;
-            border-top: 0;
-            height: 8px;
-            left: 6px;
-            top: 2px;
-          }
-        }
-      }
-
-      .es-password-forget {
-        font-size: 16px;
-        color: #999999;
-        text-align: right;
-        float: right;
-        cursor: pointer;
-      }
-    }
-    .es-login-complex-app {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .es-login-complex-scan {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #666;
-        padding-right: 16px;
-        border-right: 1px solid #ccc;
-        .es-icon-scan {
-          font-size: 34px;
-          color: #97a1c3;
-          margin-right: 3px;
-        }
-        .es-login-complex-scan-tips {
-          line-height: 20px;
-        }
-      }
-      .es-login-complex-download {
-        margin-left: 16px;
-        line-height: 40px;
-        .es-login-app-name {
-          color: $--color-primary;
-          font-weight: bold;
-        }
-      }
-    }
-    .es-to-login {
-      text-align: right;
-      margin-right: -45px;
-      font-size: 20px;
-      color: $--color-primary;
-      padding-top: 20px;
-    }
-    &.es-simple {
-      .es-login-form {
-        .el-input__inner {
-          border-width: 0 0 1px 0;
-          border-radius: 0;
-          background-color: #fff;
-          box-shadow: none;
-        }
-      }
-
-      .el-input__prefix {
-        left: 0;
-      }
-    }
-    .es-downloadSetup {
-      height: 20px;
-      text-align: center;
-      .es-setup {
-        cursor: pointer;
-        color: #333;
-        &:hover {
-          color: #f9d900;
-        }
-      }
-    }
-  }
-  &.es-login-medium {
-    @include loginMedium;
-  }
-  @media screen and (max-width: 1600px) and (max-height: 900px) {
-    @include loginMedium;
-  }
-  &.es-login-small {
-    @include loginSmall;
-  }
-  @media screen and (max-width: 1280px) and (max-height: 720px) {
-    @include loginSmall;
-  }
-  &.es-login-mini {
-    @include loginMini;
-  }
-  @media screen and (max-width: 1024px) and (max-height: 768px) {
-    @include loginMini;
-  }
-}
-.es-rest-password {
-  .es-form-content {
-    .el-scrollbar__view {
-      padding-right: 54px;
-    }
-  }
-  .es-form-button {
-    padding-right: 20px;
-  }
-}
-
-.es-login-icp {
-  display: flex;
-  position: fixed;
-  left: 50%;
-  bottom: 20px;
-  transform: translateX(-50%);
-
-  .es-login-icp-item {
-    display: block;
-    white-space: nowrap;
-    font-size: 14px;
-    font-weight: 400;
-
-    & + .es-login-icp-item {
-      margin-left: 20px;
-    }
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-}
-.rest-password-box {
-  height: 100%;
-  position: relative;
-  &.rest-password-cut {
-    padding-top: 60px;
-  }
-  .rest-menu-cut {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-  }
-}
-.es-download-app {
-  cursor: pointer;
-  position: absolute;
-  top: 30px;
-  right: 30px;
-  .el-icon-mobile-phone {
-    font-size: 18px;
-    position: relative;
-    top: 2px;
-  }
-}
+@import './common/var.scss';
+@mixin loginMedium {
+  .es-login.es-adaptive {
+    width: $--login-width * 0.7777;
+    .es-login-main {
+      padding: $--login-padding-medium;
+      &.es-complex {
+        padding: $--login-complex-padding-medium;
+      }
+    }
+    .es-login-name {
+      margin-bottom: 16px;
+    }
+    .es-login-title-image {
+      margin: $--login-title-image-margin-medium;
+    }
+    .es-login-model {
+      right: 8px;
+      top: 8px;
+      .es-icon-box {
+        width: 40px;
+        height: 40px;
+        &::after {
+          border-width: 30px;
+        }
+        .es-icon {
+          font-size: 38px;
+          width: 38px;
+          height: 38px;
+        }
+      }
+      .es-login-model-item-tips {
+        top: 7px;
+      }
+      .es-login-model-tips {
+        width: 128px;
+        height: 32px;
+        padding: 6px 8px 6px 4px;
+        line-height: 20px;
+        right: 46px;
+        top: 8px;
+      }
+    }
+    .es-login-models {
+      padding-top: 12px;
+      bottom: 10px;
+      .es-icon-box {
+        & + .es-icon-box {
+          margin-left: 12px;
+        }
+      }
+      .es-icon {
+        font-size: 22px;
+      }
+    }
+    .es-login-complex-title {
+      height: 12px;
+      font-size: 18px;
+      line-height: 18px;
+      transform: translateY(-16px);
+    }
+    .es-login-complex-models {
+      height: 40px;
+      line-height: 40px;
+      margin-bottom: 12px;
+      .es-login-complex-models-item {
+        padding: 0 10px;
+        font-size: 16px;
+        & + .es-login-complex-models-item {
+          margin-left: 24px;
+        }
+        &.es-active {
+          color: $--color-primary;
+          border-bottom: 1px solid $--color-primary;
+        }
+      }
+    }
+    .es-login-title {
+      font-size: 20px;
+      line-height: 20px;
+      padding-bottom: 18px;
+      .es-login-title-content {
+        margin: 0 24px;
+      }
+      &.es-login-title-complex {
+        height: 40px;
+        font-size: 16px;
+        line-height: 40px;
+        .es-login-title-content {
+          padding: 0 12px;
+          border-bottom-width: 1px;
+        }
+      }
+    }
+    .es-login-form {
+      height: 264px;
+      .el-form-item__content {
+        line-height: 40px;
+      }
+      .el-input__inner {
+        height: 40px;
+        font-size: 16px;
+        padding-left: 42px;
+      }
+      .el-input__prefix {
+        width: 40px;
+        height: 40px;
+        padding-left: 5px;
+        line-height: 40px;
+        i {
+          line-height: 40px;
+          font-size: 18px;
+        }
+      }
+      .el-input__suffix-inner {
+        height: 40px;
+        line-height: 40px;
+        .el-input__icon {
+          line-height: 40px;
+          font-size: 16px;
+        }
+        .es-img-code {
+          height: 36px;
+        }
+        .es-get-code {
+          width: 94px;
+          height: 40px;
+          line-height: 40px;
+        }
+      }
+      .es-button-submit {
+        height: 40px;
+        font-size: 18px;
+        line-height: 40px;
+      }
+      .es-label-image-code {
+        padding-right: 95px;
+      }
+    }
+    .es-login-qrcode {
+      height: 264px;
+    }
+    .es-password-handle {
+      height: 22px;
+      margin-bottom: 12px;
+
+      .el-checkbox__label {
+        font-size: 14px;
+      }
+
+      .el-checkbox__input {
+        .el-checkbox__inner {
+          width: 18px;
+          height: 18px;
+          border-radius: 10px;
+
+          &::after {
+            border: 2px solid #ffffff;
+            border-left: 0;
+            border-top: 0;
+            height: 8px;
+            left: 6px;
+            top: 2px;
+          }
+        }
+      }
+
+      .es-password-forget {
+        font-size: 14px;
+      }
+    }
+    .es-login-complex-app {
+      .es-login-complex-scan {
+        padding-right: 16px;
+        .es-icon-scan {
+          font-size: 30px;
+        }
+        .es-login-complex-scan-tips {
+          line-height: 18px;
+        }
+      }
+      .es-login-complex-download {
+        margin-left: 16px;
+        line-height: 36px;
+      }
+    }
+    .es-to-login {
+      margin-right: -40px;
+      font-size: 17px;
+      padding-top: 14px;
+    }
+  }
+}
+@mixin loginSmall {
+  .es-login.es-adaptive {
+    width: $--login-width * 0.5555;
+    .es-login-main {
+      padding: $--login-padding-small;
+      &.es-complex {
+        padding: $--login-complex-padding-small;
+      }
+    }
+    .es-login-name {
+      margin-bottom: 12px;
+    }
+    .es-login-title-image {
+      margin: $--login-title-image-margin-small;
+    }
+    .es-login-model {
+      right: 6px;
+      top: 6px;
+      .es-icon-box {
+        width: 36px;
+        height: 36px;
+        &::after {
+          border-width: 28px;
+        }
+        .es-icon {
+          font-size: 34px;
+          width: 34px;
+          height: 34px;
+        }
+      }
+      .es-login-model-item-tips {
+        top: 4px;
+      }
+      .es-login-model-tips {
+        width: 100px;
+        height: 26px;
+        font-size: 12px;
+        padding: 4px 6px 4px 2px;
+        line-height: 20px;
+        right: 38px;
+        top: 6px;
+      }
+    }
+    .es-login-models {
+      padding-top: 12px;
+      bottom: 10px;
+      .es-icon-box {
+        & + .es-icon-box {
+          margin-left: 12px;
+        }
+      }
+      .es-icon {
+        font-size: 20px;
+      }
+    }
+    .es-login-complex-title {
+      height: 10px;
+      font-size: 16px;
+      line-height: 16px;
+    }
+    .es-login-complex-models {
+      height: 30px;
+      line-height: 30px;
+      margin-bottom: 8px;
+      .es-login-complex-models-item {
+        padding: 0 8px;
+        font-size: 14px;
+        & + .es-login-complex-models-item {
+          margin-left: 18px;
+        }
+      }
+    }
+    .es-login-title {
+      font-size: 16px;
+      line-height: 16px;
+      padding-bottom: 14px;
+      .es-login-title-content {
+        margin: 0 24px;
+      }
+      &.es-login-title-complex {
+        height: 30px;
+        font-size: 14px;
+        line-height: 30px;
+        .es-login-title-content {
+          padding: 0 10px;
+        }
+      }
+    }
+
+    .es-login-form {
+      height: 224px;
+      .el-form-item__content {
+        line-height: 32px;
+      }
+      .el-input__inner {
+        height: 32px;
+        font-size: 14px;
+        padding-left: 34px;
+      }
+      .el-input__prefix {
+        width: 32px;
+        height: 32px;
+        padding-left: 5px;
+        line-height: 32px;
+        i {
+          line-height: 32px;
+          font-size: 16px;
+        }
+      }
+      .el-input__suffix-inner {
+        height: 32px;
+        line-height: 32px;
+        .el-input__icon {
+          line-height: 32px;
+          font-size: 14px;
+        }
+        .es-img-code {
+          height: 30px;
+        }
+        .es-get-code {
+          width: 80px;
+          height: 32px;
+          line-height: 32px;
+        }
+      }
+      .es-button-submit {
+        height: 32px;
+        font-size: 14px;
+        line-height: 32px;
+      }
+      .es-label-image-code {
+        padding-right: 80px;
+      }
+    }
+    .es-login-qrcode {
+      height: 224px;
+      .es-login-down-app {
+        font-size: 12px;
+      }
+    }
+    .es-password-handle {
+      height: 22px;
+      margin-bottom: 8px;
+
+      .el-checkbox__label {
+        font-size: 14px;
+        padding-left: 6px;
+      }
+
+      .el-checkbox__input {
+        .el-checkbox__inner {
+          width: 16px;
+          height: 16px;
+          border-radius: 10px;
+
+          &::after {
+            height: 6px;
+            left: 5px;
+            top: 2px;
+          }
+        }
+      }
+
+      .es-password-forget {
+        font-size: 14px;
+      }
+    }
+    .es-login-complex-app {
+      .es-login-complex-scan {
+        padding-right: 16px;
+        .es-icon-scan {
+          font-size: 22px;
+        }
+        .es-login-complex-scan-tips {
+          line-height: 14px;
+          font-size: 12px;
+        }
+      }
+      .es-login-complex-download {
+        margin-left: 16px;
+        line-height: 30px;
+      }
+    }
+    .es-to-login {
+      margin-right: -30px;
+      font-size: 14px;
+      padding-top: 8px;
+    }
+  }
+}
+@mixin loginMini {
+  .es-login.es-adaptive {
+    width: $--login-width * 0.6666;
+    .es-login-main {
+      padding: $--login-padding-mini;
+      &.es-complex {
+        padding: $--login-complex-padding-mini;
+      }
+    }
+    .es-login-name {
+      margin-bottom: 8px;
+    }
+    .es-login-title-image {
+      margin: $--login-title-image-margin-mini;
+    }
+    .es-login-model {
+      .es-icon-box {
+        width: 32px;
+        height: 32px;
+        &::after {
+          border-width: 17px;
+        }
+        .es-icon {
+          font-size: 30px;
+        }
+      }
+    }
+    .es-login-models {
+      padding-top: 12px;
+      bottom: 10px;
+      .es-icon-box {
+        & + .es-icon-box {
+          margin-left: 12px;
+        }
+      }
+      .es-icon {
+        font-size: 18px;
+      }
+    }
+    .es-login-complex-title {
+      height: 10px;
+      font-size: 14px;
+      line-height: 14px;
+    }
+    .es-login-complex-models {
+      height: 24px;
+      line-height: 24px;
+      margin-bottom: 4px;
+      .es-login-complex-models-item {
+        padding: 0 4px;
+        font-size: 12px;
+        & + .es-login-complex-models-item {
+          margin-left: 12px;
+        }
+      }
+    }
+    .es-login-title {
+      font-size: 14px;
+      line-height: 14px;
+      padding-bottom: 10px;
+      .es-login-title-content {
+        margin: 0 24px;
+      }
+      &.es-login-title-complex {
+        height: 24px;
+        font-size: 14px;
+        line-height: 24px;
+        .es-login-title-content {
+          padding: 0 10px;
+        }
+      }
+    }
+    .es-login-form {
+      height: 210px;
+      .el-form-item__content {
+        line-height: 32px;
+      }
+      .el-input__inner {
+        font-size: 12px;
+        height: 32px;
+        padding-left: 34px;
+      }
+    }
+    .es-login-qrcode {
+      height: 210px;
+    }
+    .es-password-handle {
+      .el-checkbox__label {
+        font-size: 12px;
+      }
+
+      .el-checkbox__input {
+        .el-checkbox__inner {
+          width: 14px;
+          height: 14px;
+          &::after {
+            height: 6px;
+            left: 4px;
+            top: 1px;
+          }
+        }
+      }
+
+      .es-password-forget {
+        font-size: 12px;
+      }
+    }
+    .es-login-complex-app {
+      .es-login-complex-scan {
+        padding-right: 12px;
+        .es-icon-scan {
+          font-size: 22px;
+        }
+        .es-login-complex-scan-tips {
+          line-height: 14px;
+          font-size: 12px;
+        }
+      }
+      .es-login-complex-download {
+        margin-left: 12px;
+        line-height: 28px;
+        font-size: 12px;
+      }
+    }
+    .es-to-login {
+      margin-right: -20px;
+      font-size: 14px;
+      padding-top: 4px;
+    }
+  }
+}
+.es-login-screen {
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  overflow: hidden;
+
+  .es-login-logo {
+    height: 58px;
+    position: absolute;
+    left: 24px;
+    top: 24px;
+  }
+  .es-login {
+    width: $--login-width;
+    position: absolute;
+    .es-login-main {
+      padding: $--login-padding;
+      position: relative;
+      border-radius: 20px;
+      background-size: 100% 100%;
+      background-color: #ffffff;
+      background-repeat: no-repeat;
+      box-shadow: $--box-shadow-light;
+      &.es-complex {
+        padding: $--login-complex-padding;
+      }
+    }
+    .es-login-name {
+      margin-bottom: 20px;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .es-login-title-image {
+      margin: $--login-title-image-margin;
+      border-radius: 20px 20px 0 0;
+      overflow: hidden;
+      .es-login-title-img {
+        width: 100%;
+      }
+    }
+    .es-login-model {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      z-index: 99;
+      .es-icon-box {
+        display: block;
+        width: 50px;
+        height: 50px;
+        cursor: pointer;
+        position: relative;
+        padding: 1px;
+        overflow: hidden;
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0px;
+          bottom: 0px;
+          width: 0;
+          height: 0;
+          border-top: 40px solid transparent;
+          border-right: 40px solid transparent;
+          border-left: 40px solid #fff;
+        }
+        .es-icon {
+          font-size: 48px;
+          color: $--color-primary;
+          display: block;
+          width: 48px;
+          height: 48px;
+          overflow: hidden;
+        }
+      }
+      .es-login-model-item-tips {
+        white-space: nowrap;
+        position: absolute;
+        left: 4px;
+        top: 10px;
+        transform: translateX(-100%);
+        z-index: 999;
+      }
+      .es-login-model-tips {
+        width: 128px;
+        height: 40px;
+        padding: 8px 10px 8px 6px;
+        line-height: 24px;
+        text-align: center;
+        color: #d4815e;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        right: 60px;
+        top: 10px;
+      }
+    }
+    .es-login-models {
+      text-align: center;
+      color: #d9d9d9;
+      padding-top: 12px;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 10px;
+      .es-icon-box {
+        & + .es-icon-box {
+          margin-left: 12px;
+        }
+        &.es-icon-active {
+          color: $--color-primary;
+        }
+      }
+      .es-icon {
+        font-size: 24px;
+        cursor: pointer;
+      }
+    }
+    .es-login-complex-title {
+      height: 22px;
+      font-size: 22px;
+      font-family: 'zihun';
+      font-weight: normal;
+      color: $--color-primary;
+      line-height: 22px;
+      transform: translateY(-20px);
+    }
+    .es-login-complex-models {
+      display: flex;
+      height: 40px;
+      line-height: 40px;
+      margin-bottom: 18px;
+      .es-login-complex-models-item {
+        min-width: 64px;
+        padding: 0 13px;
+        font-size: 18px;
+        color: #939393;
+        text-align: center;
+        cursor: pointer;
+        & + .es-login-complex-models-item {
+          margin-left: 30px;
+        }
+        &.es-active {
+          color: $--color-primary;
+          border-bottom: 1px solid $--color-primary;
+        }
+      }
+      &.es-complex-title {
+        justify-content: center;
+      }
+    }
+    .es-login-title {
+      color: $--color-primary;
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      line-height: 24px;
+      font-weight: bold;
+      position: relative;
+      padding-bottom: 30px;
+
+      &:not(.es-login-title-complex)::before,
+      &:not(.es-login-title-complex)::after {
+        content: '';
+        height: 1px;
+        flex: 1;
+        background-color: #eeeeee;
+      }
+      .es-login-title-content {
+        margin: 0 24px;
+      }
+      &.es-login-title-complex {
+        justify-content: center;
+        height: 40px;
+        font-size: 16px;
+        line-height: 40px;
+        .es-login-title-content {
+          padding: 0 12px;
+          border-bottom: 2px solid $--color-primary;
+        }
+      }
+    }
+    .es-login-form {
+      height: 340px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      .el-form-item__content {
+        line-height: 50px;
+      }
+      .el-form-item {
+        margin-bottom: 0;
+      }
+      .el-input__inner {
+        height: 50px;
+        font-size: 18px;
+        background-color: #f7f7f7;
+        border-radius: $--login-form-radius;
+        padding-left: 52px;
+      }
+      .el-input__prefix {
+        width: 48px;
+        left: 0;
+        padding-left: 6px;
+        line-height: 50px;
+        height: 50px;
+        i {
+          line-height: 50px;
+          font-size: 20px;
+          color: #333;
+        }
+      }
+      .el-input__suffix-inner {
+        display: block;
+        height: 50px;
+        line-height: 50px;
+        .el-input__icon {
+          line-height: 50px;
+          font-size: 18px;
+        }
+        .es-img-code {
+          cursor: pointer;
+          height: 46px;
+          margin: 2px;
+        }
+        .es-get-code {
+          width: 115px;
+          height: 50px;
+          text-align: center;
+          padding: 0;
+          line-height: 50px;
+        }
+      }
+      .es-button-submit {
+        width: 100%;
+        height: 50px;
+        font-size: 20px;
+        text-align: center;
+        line-height: 50px;
+        font-weight: 500;
+        border-radius: $--login-form-radius;
+        padding: 0;
+      }
+      .es-label-image-code {
+        padding-right: 120px;
+        .el-input__suffix {
+          right: 0;
+        }
+      }
+    }
+    .es-login-qrcode {
+      height: 340px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      .es-login-qrcode-box {
+        flex: 1;
+        position: relative;
+      }
+      .es-login-down-app {
+        font-size: $--font-size-base;
+        font-weight: normal;
+        text-align: center;
+        line-height: 20px;
+        .es-login-app-name {
+          color: #a90404;
+          padding: 0 8px;
+        }
+      }
+      .es-qrcode-box,
+      .es-wx-qrcode-box {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+      }
+    }
+    .es-password-handle {
+      height: 22px;
+      justify-content: space-between;
+      margin-bottom: 22px;
+
+      .el-checkbox__label {
+        font-size: 16px;
+        font-weight: 400;
+        color: #333333 !important;
+      }
+
+      .el-checkbox__input {
+        .el-checkbox__inner {
+          width: 18px;
+          height: 18px;
+          border-radius: 10px;
+
+          &::after {
+            border: 2px solid #ffffff;
+            border-left: 0;
+            border-top: 0;
+            height: 8px;
+            left: 6px;
+            top: 2px;
+          }
+        }
+      }
+
+      .es-password-forget {
+        font-size: 16px;
+        color: #999999;
+        text-align: right;
+        float: right;
+        cursor: pointer;
+      }
+    }
+    .es-login-complex-app {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .es-login-complex-scan {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #666;
+        padding-right: 16px;
+        border-right: 1px solid #ccc;
+        .es-icon-scan {
+          font-size: 34px;
+          color: #97a1c3;
+          margin-right: 3px;
+        }
+        .es-login-complex-scan-tips {
+          line-height: 20px;
+        }
+      }
+      .es-login-complex-download {
+        margin-left: 16px;
+        line-height: 40px;
+        .es-login-app-name {
+          color: $--color-primary;
+          font-weight: bold;
+        }
+      }
+    }
+    .es-to-login {
+      text-align: right;
+      margin-right: -45px;
+      font-size: 20px;
+      color: $--color-primary;
+      padding-top: 20px;
+    }
+    &.es-simple {
+      .es-login-form {
+        .el-input__inner {
+          border-width: 0 0 1px 0;
+          border-radius: 0;
+          background-color: #fff;
+          box-shadow: none;
+        }
+      }
+
+      .el-input__prefix {
+        left: 0;
+      }
+    }
+    .es-downloadSetup {
+      height: 20px;
+      text-align: center;
+      .es-setup {
+        cursor: pointer;
+        color: #333;
+        &:hover {
+          color: #f9d900;
+        }
+      }
+    }
+  }
+  &.es-login-medium {
+    @include loginMedium;
+  }
+  @media screen and (max-width: 1600px) and (max-height: 900px) {
+    @include loginMedium;
+  }
+  &.es-login-small {
+    @include loginSmall;
+  }
+  @media screen and (max-width: 1280px) and (max-height: 720px) {
+    @include loginSmall;
+  }
+  &.es-login-mini {
+    @include loginMini;
+  }
+  @media screen and (max-width: 1024px) and (max-height: 768px) {
+    @include loginMini;
+  }
+}
+.es-rest-password {
+  .es-form-content {
+    .el-scrollbar__view {
+      padding-right: 54px;
+    }
+  }
+  .es-form-button {
+    padding-right: 20px;
+  }
+}
+
+.es-login-icp {
+  display: flex;
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+
+  .es-login-icp-item {
+    display: block;
+    white-space: nowrap;
+    font-size: 14px;
+    font-weight: 400;
+
+    & + .es-login-icp-item {
+      margin-left: 20px;
+    }
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+.rest-password-box {
+  height: 100%;
+  position: relative;
+  &.rest-password-cut {
+    padding-top: 60px;
+  }
+  .rest-menu-cut {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+  }
+}
+.es-download-app {
+  cursor: pointer;
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  .el-icon-mobile-phone {
+    font-size: 18px;
+    position: relative;
+    top: 2px;
+  }
+}