@import "../base/colors.scss";
@import "../base/utils.scss";

@mixin setStyleAframe($project) {
  .mta-aframe-header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    @include setThemeColorBase('background');

    .nc-container {
      width: calc(100% - 80px);
      margin: 0 0 20px 80px;
    }

    .mta-logo-title {
      margin-left: 20px;
      margin-top: 10px;

      > img {
        vertical-align: middle;
        margin-top: -12px;
        /*width: 70px;*/
        height: 50px;
      }

      > span {
        color: #FFF;
        font-size: 33px;
        display: inline-block;
        text-shadow: none;
        letter-spacing: 2px;
        margin-left: 30px;
      }
    }

    nav {
      margin-right: 40px;
    }

    span.h-right-img {
      display: inline-block;
      line-height: 65px;
      height: 45px;
      position: relative;

      &:focus {
        outline: none;
      }

      > span {
        border: 6px solid transparent;
        border-top-color: #333;
        position: absolute;
        top: 22px;
        right: -15px;

      }

      // 个人头像 待定
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        box-shadow: none;
        position: relative;
      }
    }

    p {
      padding: 0;
      margin: 0;
    }

    .editorUserWrap {
      display: flex;
      flex-direction: row;
      flex: 1;
      justify-content: space-around;
    }

    .verification {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .el-button {
        margin-left: 20px;
      }
    }
    @media screen and (max-width: 1440px) {
      .verification{
        .el-button{
          @include setFontBase(-7);
        }
      }
    }
  }
  /*****mta-Aframe*****/
  .mta-Aframe {
    .el-aside {

      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 240px;
        min-height: 400px;
      }

      .el-scrollbar__wrap.el-scrollbar__wrap {
        overflow-x: hidden; // 待定
        width: auto;
      }

      .sidebar-container {
        flex: 1;
        min-width: 64px;
      }
    }

    .scrollbar-wrapper {
      .el-scrollbar__view {
        height: 100%;

        .el-menu-vertical-demo {
          height: 100%;
        }
      }

      i {
        color: inherit !important; // 控制icon样式
      }
    }

    .mta-footer {
      p {
        margin: 0;
      }
    }
    .mta-menu-btn-right {
      width: 223px;
      text-align: right;
      font-size: 22px;
      padding-right: 18px;
    }
    //新增响应式
    @media screen and (max-width: 1600px) {
      .el-aside {
        //左侧菜单宽度
        .response-el-menu:not(.el-menu--collapse){
          width: 230px;
        }
        .response-el-menu{
          //文字与图标间距
          .mta-menu-span{
            padding-left: 10px;
          }
        }
        //缩放按钮宽度
        .mta-menu-btn-right{
          width: 210px;
        }
      }
    }
    @media screen and (max-width: 1440px) {
      .el-aside {
        //左侧菜单宽度
        .response-el-menu:not(.el-menu--collapse){
          width: 220px;
        }
        .response-el-menu{
          //文字与图标间距
          .mta-menu-span{
            padding-left: 5px;
            @include setFontBase(-4);
          }
          i{height: 20px;}
        }
        //缩放按钮宽度
        .mta-menu-btn-right{
          width: 200px;
        }
      }
      .mta-footer {
        p {
          @include setFontBase(-8);
        }
      }
    }

  }

  /*****登录页*****/
  .mta-login {
    flex: 1;
    display: flex;
    text-align: center;
    margin: 0 auto;
    height: 100vh;
    min-width: 400px;

    .nc-container {
      width: calc(100% - 100px);
      margin: 0 0 20px 100px;
      > div {
        width: auto !important;
      }
    }

    .verification {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .el-button {
        margin-left: 20px;
      }

    }
    .el-form.login-ruleForm {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input {
        // margin-left: -17px;

        .el-input__inner {
          color: black;
          font-size: 15px;
          margin-left: 5px;
          padding-left: 50px;
          background: rgba(255, 255, 255, 0.3);

          ::-webkit-input-placeholder {
            color: #666;
          }
        }

        .el-input__prefix {
          font-size: 22px;
          padding: 0 16px;
          color: #FFF;
        }
      }

      .el-form-item__error {
        margin-left: 12px;
      }

      label.el-form-item__label, span.el-checkbox__label {
        color: #FFF;
      }

      label.el-checkbox {
        padding: 12px 16px;
      }

      .mta-login-check {
        margin-top: 12px;

        .el-button {
          margin-left: 5px;
          width: 100%;
          @include setFontBase(0);
          letter-spacing: 5px
        }
      }

      .mta-login-btns {
        > div:first-child {
          text-align: left;

          .el-button {
            padding-left: 15px;
            margin-left: 10px;
          }
        }

        > div:last-child {
          text-align: right;

          .el-button {
            padding-right: 15px;
          }
        }
      }

      .el-form-item__label {
        text-align: left;
      }


      .el-icon-user-solid:before {
        background: url("../../../assets/images/icons/fa-login.svg");
        content: '';
        width: 22px;
        height: 22px;
        display: block;
        margin-top: 8px;
        color: #FFF;
      }

      .el-icon-lock:before {
        background: url("../../../assets/images/icons/fa-passIcon.svg");
        content: '';
        width: 22px;
        height: 22px;
        display: block;
        margin-top: 8px;
        color: #FFF;
      }

      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus,
      input:-webkit-autofill:active {
        -webkit-transition-delay: 9999999999999s;
        -webkit-transition: color 9999999999999s ease-out, background-color 999999999999s ease-out;
      }
    }

    .mta-login-content {
      min-width: 300px;
      min-height: 300px;
    }

    .logo-box {
      width: 400px;
      height: auto;
      max-height: 180px;
      margin: 0 auto;
      margin-bottom: 20px;
      overflow: hidden;

      img {
        max-width: 100%;
        max-height: 100%;

      }
    }

    .mta-ModelLoginBg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      overflow: hidden;

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

    .mta-login-title {
      p {
        margin: 0 0 40px 10px;
        font-size: 60px;
        letter-spacing: 5px;
      }
    }

    .mta-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 12px;
      opacity: .5;
      color: #FFF;
    }
    .tips-p{
      font-size: 14px;
      color: red;
      line-height: 20px;
      padding: 0 5px;
      margin: 0;
    }
    @media screen and (max-width: 1440px) {
      //logo
      .logo-box{
        width: 380px;
        max-height: 160px;
      }
      //系统名称
      .mta-login-title p{
        @include setFontBase(36);
        //margin: 0 0 30px 10px;
      }
      .el-form.login-ruleForm{
        //input
        .el-input .el-input__inner{@include setFontBase(-7);}
        //登录按钮
        .mta-login-check .el-button {
          @include setFontBase(-4);
        }
        //忘记密码
        .mta-login-btns .el-button{
          @include setFontBase(-7);
        }
      }
      //提示
      .tips-p{
        @include setFontBase(-7);
        color: red;
        line-height: 20px;
        padding: 0 5px;
        margin: 0;
      }
      .verification .el-button{@include setFontBase(-7);}
    }
    .max-input-box{
      max-width: 400px;
      margin: 0 auto;
    }
  }

  /*****引流登录页*****/
  .mta-registered-login {
    flex: 1;
    display: flex;
    text-align: center;
    margin: 0 auto;
    height: 100vh;
    min-width: 400px;
    .nc-container {
      width: calc(100% - 100px);
      margin: 0 0 20px 100px;
      > div {
        width: auto !important;
      }
    }
    .el-form.login-ruleForm {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input {
        // margin-left: -17px;

        .el-input__inner {
          color: black;
          font-size: 15px;
          margin-left: 5px;
          padding-left: 50px;
          background: rgba(255, 255, 255, 0.3);

          ::-webkit-input-placeholder {
            color: #666;
          }
        }

        .el-input__prefix {
          font-size: 22px;
          padding: 0 16px;
          color: #FFF;
        }
      }

      .el-form-item__error {
        margin-left: 12px;
      }

      label.el-form-item__label, span.el-checkbox__label {
        color: #FFF;
      }

      label.el-checkbox {
        padding: 12px 16px;
      }

      .mta-login-check {
        margin-top: 12px;

        .el-button {
          margin-left: 5px;
          width: 100%;
          font-size: 20px;
          letter-spacing: 5px
        }
      }

      .mta-login-btns {
        margin: 0px 0 0 10px;

        > div:first-child {
          text-align: left;

          .el-button {
            padding-left: 15px;
          }
        }

        > div:last-child {
          text-align: right;

          .el-button {
            padding-right: 15px;
          }
        }
      }

      .el-form-item__label {
        text-align: left;
      }


      .el-icon-user-solid:before {
        background: url("../../../assets/images/icons/fa-login.svg");
        content: '';
        width: 22px;
        height: 22px;
        display: block;
        margin-top: 8px;
        color: #FFF;
      }

      .el-icon-lock:before {
        background: url("../../../assets/images/icons/fa-passIcon.svg");
        content: '';
        width: 22px;
        height: 22px;
        display: block;
        margin-top: 8px;
        color: #FFF;
      }

      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus,
      input:-webkit-autofill:active {
        -webkit-transition-delay: 9999999999999s;
        -webkit-transition: color 9999999999999s ease-out, background-color 999999999999s ease-out;
      }
    }

    .mta-login-content {
      min-width: 300px;
      min-height: 300px;
    }

    .logo-box {
      width: 400px;
      height: 180px;
      margin: 0 auto;
      overflow: hidden;

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

    .mta-ModelLoginBg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      overflow: hidden;

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

    .mta-login-title {
      p {
        /*color: #0468CC;*/
        margin: 0 0 40px 10px;
        font-size: 60px;
        letter-spacing: 5px;
      }
    }

    .mta-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 13px;
      opacity: .5;
      color: #FFF;
    }
    @media screen and (max-width: 1440px) {
      //logo
      .logo-box{
        width: 380px;
        max-height: 160px;
      }
      //系统名称
      .mta-login-title p{
        @include setFontBase(36);
      }
      .el-form.login-ruleForm{
        //input
        .el-input .el-input__inner{@include setFontBase(-7);}
        //登录按钮
        .mta-login-check .el-button {
          @include setFontBase(-4);
        }
        //忘记密码
        .mta-login-btns .el-button{
          @include setFontBase(-7);
        }
      }
      .mta-footer{
        font-size: 12px;
      }
    }
  }

  /*****引流注册页*****/
  .mta-registered {
    /*height: 100vh;*/
    width: 100vw;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
    overflow: hidden;

    &-main {

      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      flex: 1;
      /*height: 100vh;*/
      overflow: auto;
      //margin-bottom: 40px;


      &-content {
        margin-top: 80px;
        min-width: 600px;
        min-height: 600px;
        padding-bottom: 100px;

        &__logo {
          width: 200px;
          height: 100px;
          margin: 0 auto;

          img {
            width: 100%;
          }
        }

        &__title {
          color: #FFF;
          text-align: center;

          h1 {
            font-weight: lighter;
          }
        }

        &__title2 {
          text-align: center;
          color: #FFF;

          h1 {
            font-weight: bolder;
          }
        }

        &__form {
          margin: 0 60px;
          font-size: 14px;

          .notice-login {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            color: #FFF;
            margin: 10px 0 10px 4px;

            .notice-link {
              margin: 10px;
              color: #409EFF;
              text-decoration: none;
            }

            .notice-link {
              margin: 10px;
              color: #409EFF;
              text-decoration: none;
            }
          }

          &__button {
            .el-button {
              width: 100%;
            }
          }

          .notice-text {
            color: orange;
            margin-top: -6px;

            > i {
              margin-right: 8px;
            }


          }
        }
      }
    }

    &-footer {
      position: absolute;
      bottom: 0px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 12px;
      opacity: 1;
      color: #FFF;
    }

    .mta-ModelLoginBg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      overflow: hidden;

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

    .mta-registered-success__dialog {
      text-align: center;

      h1 {
        font-weight: 500;
      }

      h2 {
        font-weight: 400;
      }

      .dialog-tel {
        margin-top: 40px;
        font-size: 20px;

        + p {
          font-size: 20px;
        }
      }

    }

    .mta-agreement-success__dialog {
      text-align: left;
      max-height: 500px;
      overflow-y: auto;
    }

    .el-button {
      width: 100%;
    }
    .mta-registered-main-content__form {

      .notice-text {
        .el-checkbox {
          margin-right: 10px;
        }

        .btnDialog {
          cursor: pointer;
        }

        .el-checkbox, .el-checkbox-button__inner {
          color: #FFF;
        }
      }

      /* 重置element 官方input样式 */
      .el-input {

        .el-input__inner {
          color: #FFF;
          font-size: 15px;
          margin-left: 5px;
          padding-left: 50px;
          background: rgba(255, 255, 255, 0.3);

          ::-webkit-input-placeholder {
            color: #666;
          }
        }


        .el-input__prefix {
          font-size: 22px;
          padding: 0 16px;
          color: #FFF;
        }


      }

      /* 重置input form校验错误信息位置 */
      .el-form-item__error {
        margin-left: 6px;
      }

      // 阿里滑块样式
      #your-dom-id.nc-container {
        margin-left: 4px;
        width: 100%;
        margin-bottom: 20px;

        div.nc_wrapper {
          border-right: 5px;
          border-radius: 4px;
          width: auto;
        }

        .nc_scale {
          border-radius: 4px;
        }

        .nc_bg {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }

        .btn_slide {
          border-radius: 4px;
        }
      }

      /* 设置动画，清理谷歌浏览器加入的关于密码账号保存样式,间接冲掉样式 */
      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus,
      input:-webkit-autofill:active {
        -webkit-transition-delay: 9999999999999s;
        -webkit-transition: color 9999999999999s ease-out, background-color 999999999999s ease-out;
      }
    }
    @media screen and (max-width: 1440px) {

      .mta-registered-main-content__form{
        @include setFontBase(-7);
        .el-checkbox__label{@include setFontBase(-7);}
        //阿里滑块
        #your-dom-id.nc-container{margin-bottom: 14px;}
        //input
        .el-input .el-input__inner{@include setFontBase(-7);}
        //直接登录
        .notice-login{@include setFontBase(-7);}
      }
      //el-button
      .el-button{@include setFontBase(-7);}
      @media screen and (max-height: 700px) {
        &-main {
          &-content {
            margin-top: 20px;
            padding-bottom: 60px;
          }
        }
      }
      //标题
      .mta-registered-main-content__title h1,.mta-registered-main-content__title2 h1{margin: 10px 0;}
    }
    //登录按钮
    .denglu-btn{@include setThemeColorBase("color", 1);}
    //同意复选框
    .agree-el-checkbox{
      .el-checkbox__input.is-checked+.el-checkbox__label{@include setThemeColorBase("color", 1);}
    }
  }
}
