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

@mixin setStyleCFrameComponent($project) {

  /**
   * footer
   */
  .mta-client-footer {
    background: #232526;
    height: 50px;
    line-height: 50px;
    width: 100%;
    min-width: $screen-limit-width;

    .footer-col-wrap {
      text-align: center;
      font-size: 12px;
      color: #A6A7AA;
    }
  }

  /**
   * header
   */
  .mta-client-header {
    background: #1E1D22;
    height: 60px;
    width: 100%;
    min-width: $screen-limit-width;

    .header-wrap {
      min-width: $screen-limit-width;
      width: $screen-limit-width;
      margin: 0 auto;
    }

    .header-col-wrap {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .menu-client-header {
        height: 60px;

        .el-menu-item {
          @include font-size-media-cframe(-4);
        }
      }

      .header-col-logo {
        width: 100px;
        height: 32px;
        display: flex;
        margin: 14px 0 0 0px;
        justify-content: left;
        align-content: center;


        > img {
          height: 100%;
        }
      }

      .header-col-nav {
        display: flex;
        justify-content: flex-end;
        flex-direction: row;

      }
    }

    span.h-right-img {
      display: inline-block;
      line-height: 60px;
      height: 36px;
      position: relative;
      margin: -8px 30px 0 0;


      &:focus {
        outline: none;
      }

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

      }

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

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

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

    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }

    & .el-submenu__title {
      @include font-size-media-cframe(-4);
    }

    .nav-popover.el-popover {
      background: rgb(30, 29, 34);
      border: none;

      .el-button {
        color: #FFF;
        font-size: 14px;
        width: 100%;
        /*text-align: left;*/
      }

      .popper__arrow {
        display: none;
      }
    }

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

      > div {
        width: auto !important;
      }

    }

    .demo-ruleForm2 {
      margin-left: -20px;
    }
    .demo-ruleForm1 {
      margin-left: -40px;
    }
  }
  .mta-menu-two {

    .el-menu--popup {
      min-width: 132px;


      li.el-menu-item {
        padding-left: 20px;
        @include font-size-media-cframe(-4);
      }
    }
  }
  .nav-popover {
    .userControl {
      li {
        .el-button {
          @include font-size-media-cframe(-6);
        }
      }
    }
  }
  /**
   * mtaDialog
   */
  .mta-dialog {
    .dialog-img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      position: absolute;
      left: calc(50% - 40px);
      top: -40px;
      background: #FFF;
      margin: 0 auto;
      text-align: center;
      vertical-align: middle;
      box-shadow: 5px 5px 15px 0 rgba(207, 229, 251, .7);

      > div {
        width: 60px;
        height: 60px;
        margin: 10px auto 0;
        text-align: center;
        vertical-align: middle;

        img {
          margin: 0 auto;
          text-align: center;
          height: 100%
        }
      }

    }
  }
  .mta-dialog {
    .el-dialog {
      border-radius: 8px;
    }

    .el-dialog__header {
      background: #FFF;

      div.el-dialog__headerbtn .el-dialog__close {
        color: #333;
      }
    }

    .mta-dialog-content {
      max-height: 300px;
    }
  }
  .mta-dialog2 {
    .el-dialog {
      height: 392px !important;
      width: 384px !important;
      background-image: url("~@/assets/images/icons/"+"dialog2.png");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      border-radius: 10px;
    }

    div.el-dialog__header {
      background: none;
      color: #FFF;
      padding: 0;
      height: 55px;
      line-height: 55px;
      font-weight: 400;
    }

    .dialogLabel {
      width: 100px;
      float: left;
      text-align: right;
      @include font-size-media-cframe(-4);
      color: #333333;
    }

    .el-button {
      padding: 10px 20px;
      //font-size: 18px;
      @include font-size-media-cframe(-2);
      min-width: 100px;
      margin: 0 10px;
      width: 160px;
      height: 32px;
      background-color: #FFA111;
      line-height: 11px;
      border: 1px solid #CCC;
    }

    .dialogSpan {
      width: 200px;
      float: left;
      text-align: left;
      @include font-size-media-cframe(-6);
      color: #666666;
    }

    .dialogDiv {
      //font-size: 16px;
      @include font-size-media-cframe(-4);
      width: 100%;
      display: block;
      line-height: 22px;
      height: 22px;
      margin: 10px 0;
    }

    .clear {
      clear: both;
    }
    .score-box{
      margin-top: 10px;
      img{
        width: 21px;
        height: 21px;
        display: inline-block;
        margin: 0 8px;

      }
      .xz-img{
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); /* IE 9 */
        -moz-transform:rotate(90deg); /* Firefox */
        -webkit-transform:rotate(90deg); /* Safari and Chrome */
        -o-transform:rotate(90deg); /* Opera */
      }
      line-height: 26px;
      height: 26px;
      display: inline-flex;
      span{
        font-size: 16px;
        color: #333333;
      }
      span.score-word{
        font-size: 24px;
        color: #FF5757;
      }
    }
    .line-div{
      height: 1px;
      background: #f8cebc;
      width: 26%;
      margin: 0 auto;
      margin-bottom: 20px;
    }
    //用户信息
    .userInfo-box{
      margin-top: 55px;text-align: center;
    }
    .el-dialog__body{
      padding: 0!important;
    }
    .el-button.el-button--primary {
      background: #FFA111;
      border-color: #FFA111;
      @include font-size-media-cframe(-6);

      &:hover, &:active {
        background: #F09810;
        border-color: #F09810;
      }
    }
  }

  /**
   * 弹窗 样式
   */
    /*.mta-home-box-c, .mta-client-header, .mta-c-login, .mta-Cframe .mta-home-box {

      .el-dialog {
        min-width: 380px;
        //header
        .el-dialog__header{
          height: 56px;
          line-height: 56px;
          .el-dialog__title{
            @include font-size-media-cframe(0);
          }
        }

        .el-dialog__body{
          //padding: 15px 15px 0;
          padding: 32px 30px 0;
          .el-form {
            label.el-form-item__label {
              @include font-size-media-cframe(-6)
            }

            .el-input >input  {
              @include font-size-media-cframe(-6);

              @include mediaMax(large) {
                height: $search-height-cframe * 3;
                line-height: $search-line-height-cframe * 3;
              }

              @include mediaMax(small) {
                height: $search-height-cframe * 2.6;
                line-height: $search-line-height-cframe * 2.6;
              }
            }

            .el-radio.is-bordered {

              @include mediaMax(large) {
                padding: 6px 20px 0 10px;
                height: 27px;
              }
              @include mediaMax(small) {
                padding: 4px 20px 0 10px;
                height: 25px;
              }
            }

            .el-button {
              height: 32px;
              line-height: 10px;
              @include font-size-media-cframe(-6);
              @include mediaMax(large) {
                height: 30px;
                margin-top: 2px;
                line-height: 10px;
              }

              @include mediaMax(small) {
                height: 25px;
                margin-top: 4px;
                line-height: 7px;
              }
            }

          }
        }

        //关闭图标
        .el-dialog__headerbtn{top: 18px;}

        //footer
        .el-dialog__footer{
          padding: 15px 15px 18px;
          .el-button{
            //padding: 10px 12px;
            @include font-size-media-cframe(-6);
          }
        }

        @include mediaMax(large) {
          //header
          .el-dialog__header{
            height: 46px;
            line-height: 46px;
          }

          .el-dialog__body{
            //padding: 12px 12px 0;
            padding: 22px 20px 0;
          }

          //关闭图标
          .el-dialog__headerbtn{
            top: 14px;
          }

          //footer
          .el-dialog__footer{
            padding: 12px 12px 15px;
            .el-button{
              min-width: auto;
            }
          }
        }
        @include mediaMax(small) {
          //header
          .el-dialog__header{
            height: 40px;
            line-height: 40px;
          }

          .el-dialog__body{
            padding: 18px 16px 0;
          }

          //关闭图标
          .el-dialog__headerbtn{
            top: 10px;
          }

          //footer
          .el-dialog__footer{
            padding: 9px 9px 12px;
            .el-button{
              min-width: auto;
            }
          }
        }

      }

    }*/

  /*删除弹窗组件*/
    .mta-home-box .BatchProcessDL .el-dialog{
    //头部
    .el-dialog__header {
      background: #FFF;
      height: 30px;
      line-height: 30px;
    }

    //右上角删除
    .el-dialog__headerbtn {
      right: 0;
    }

    .el-dialog__close:before {
      content: '';
    }

    .el-dialog__close {
      width: 30px;
      height: 30px;
      background: url("~@/assets/images/" + "icon-close_d.png") no-repeat;
    }

    //footer
    .el-dialog__footer {
      background: #F0F0F0;
      padding: 20px 20px;
    }

    i {
      width: 50px;
      height: 50px;
      float: left;
      margin-right: 20px;
      display: block;
    }

    .warn-img {
      background: url("~@/assets/images/" + "be_careful.png") no-repeat;
      background-size: cover;
    }

    .delete-img {
      background: url("~@/assets/images/" + "icon-delete.png") no-repeat;
      background-size: cover;
    }

    .el-dialog__body {
      padding: 32px 30px;
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;

      .img-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      p {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 18px;
        color: #333;
      }
    }
    @media screen and (max-width: 1600px) {
      .el-dialog__header {
        background: #FFF;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  /**
   * stClock
   */
  .countdown {
    width: 205px; /*days 285*/
    height: 40px;
    text-align: center;
    border-radius: 5px;
    margin: 15px;
    padding: 24px 0;
    @include mediaMax(large) {
      width: 205px; /*days 285*/
      height: 30px;
      margin: 8px;
      padding: 22px 0;
    }
    @include mediaMax(small) {
      width: 205px; /*days 285*/
      height: 20px;
      margin: 3px;
      padding: 16px 0;
    }
  }

  .countdown #tiles > span {
    width: 46px;
    max-width: 46px;
    height: 28px;
    font: bold 30px 'Droid Sans', Arial, sans-serif;
    text-align: center;
    color: white;
    border-radius: 3px;
    margin: 0 8px;
    padding: 5px 1px 8px 1px;
    display: inline-block;
    position: relative;
    margin-top: -10px;
  }

  .countdown #tiles > span:before {
    content: "";
    width: 100%;
    height: 5px;
    background: #EEE;
    display: block;
    padding: 0 3px;
    position: absolute;
    top: 48%;
    left: -3px;
    z-index: -1;
  }

  .countdown #tiles > span:after {
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(51, 51, 51, 0.16);
    border-top: 1px solid #EEE;
    display: block;
    position: absolute;
    top: 48%;
    left: 0;
  }

  .countdown .labels {
    margin-top: 5px;
    width: 207px;
    height: 10px;
    text-align: center;
  }

  .countdown .labels li {
    width: 63px;
    font: bold 12px 'Droid Sans', Arial, sans-serif;
    color: #F47321;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
  }

  /**
   * GapFilling
   */
  .mta-gap-filling {
    position: relative;
    word-break: break-word;
    //@include setFontBase(-4);
    @include font-size-media-cframe(-4);
    .mta-first-row {
      .el-col {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;

        .mta-SC-title {
          img{max-width: 700px;}
          color: #333;
          line-height: 24px;
          @include setFontBase(-6);
        }

        .mta-SC-score {
          color: #999;
          min-width: 100px;
          line-height: 24px
        }
      }

      .wrap-shitiIndex {
        //font-size: 14px;
        white-space: nowrap;//题号一行显示
        @include setFontBase(-6);
        line-height: 24px;
        color: #333;
        margin-right: 10px;
      }
    }

    .mta-two-row {
      margin-bottom: 12px;

      .el-col {
        .mta-inputTK-row {
          /*display: flex;*/
          /*justify-content: flex-start;*/
          /*flex-direction: row;*/
          /*margin: 10px 0;*/
          color: #666;

          .mta-num {
            display: inline-block;
            width: 100px;
            margin: 10px 0;
          }

          .other-result {
            color: #ccc;
            //font-size: 12px;
            @include font-size-media-cframe(-8);
            margin: 10px 0;
          }
        }
      }
    }

    .mta-modal {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
    }
    @media screen and (max-width: 1440px){
      .mta-first-row .el-col .mta-SC-title img{max-width: 600px;}
    }
  }
  .mta-gap-filling {
    .mta-SC-title {
      img{max-width: 700px;}
      p {
        margin: 0;
        padding: 0;
      }
    }

    .el-input__inner {
      color: #666;
    }
    @media screen and (max-width: 1440px){
      .mta-SC-title img{max-width: 600px;}
    }
  }

  /**
   * multipleChoice
   */
  .mta-multiple-choice {
    position: relative;
    word-break: break-word;
    @include font-size-media-cframe(-4);
    .mta-first-row {
      .el-col {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;

        .mta-SC-title {
          color: #333;
          line-height: 24px;
          @include setFontBase(-6);
          img{max-width: 700px;}
        }

        .mta-SC-score {
          color: #999;
          min-width: 100px;
          line-height: 24px
        }
      }

      .wrap-shitiIndex {
        //font-size: 14px;
        white-space: nowrap;//题号一行显示
        @include setFontBase(-6);
        line-height: 24px;
        color: #333;
        margin-right: 10px;
      }
    }
    .mta-two-row {
      margin-bottom: 12px;

      .el-col {

        > .el-checkbox-group {

          .mta-num {
            margin: 0 10px;
            //font-size: 12px;
            @include font-size-media-cframe(-8);
            font-weight: bolder;
          }

          .mta-checkbox-row {
            margin: 10px 0;
          }
        }

      }
    }
    .mta-modal {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
    }
    .mta-SC-title {
      img{max-width: 700px;}
      p {
        margin: 0;
        padding: 0;
      }
    }

    .mta-checkbox-row {
      .el-checkbox {
        line-height: 20px;
        width: 95%;
      }

      p {
        margin: 0;
        padding: 0;
        display: contents;
      }

      .el-checkbox__input {
        display: inline-block;
        float: left;
        margin-right: 10px;
        margin-top: 2px;
      }

      .el-checkbox__label {
        white-space: nowrap;
        vertical-align: top;
        display: contents;
      }

      .el-checkbox, .el-checkbox-button__inner {
        margin-top: 2px;
      }

      .el-checkbox__label span {
        white-space: normal;
        //display: inline-block;
        width: inherit;
        h1,h2,h3,h4,h5,h6{margin: 0;}
      }
    }

    .showError {
      .is-checked {
        .el-checkbox__input {
          .el-checkbox__inner {
            border: 1px solid red;
            background: red;
          }
        }
        span.el-checkbox__label {
          color: red;
        }
      }
    }
    @media screen and (max-width: 1440px){
      .mta-SC-title img{max-width: 600px;}
      .mta-first-row .el-col .mta-SC-title img{max-width: 600px;}
    }
    .wordBox,.wordOption{display: inline-block}
    .wordBox img{max-width: 100%;}
  }

  /**
   * ReadTheTopic
   */
  .mta-read-the-topic {
    position: relative;
    word-break: break-word;

    .mta-first-row {
      margin-bottom: 0;
      color: #333;
    }

    .mta-SC-score {
      color: #ccc;
      min-width: 100px;
    }

    .mta-rt-title {
      color: #333;
    }

    .mta-two-row {
      margin-bottom: 20px;

      .el-col {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        align-items: center;
        /*margin: 20px 0*/
        .mta-SC-title {
          color: #333;
          line-height: 24px;
          @include setFontBase(-6);
          img{max-width: 700px;}
          p{color: #333;}
        }

        .mta-SC-score {
          color: #999;
          min-width: 100px;
          line-height: 24px
        }
      }
    }

    .mta-three-row {
      .el-col {
        > div {
          margin-bottom: 10px;
        }
      }

    }

    .mta-modal {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
    }
    .wrap-shitiIndex{
      white-space: nowrap;//题号一行显示
      @include setFontBase(-6);
      line-height: 24px;
      color: #333;
      margin-right: 10px;
    }
  }
  .mta-read-the-topic {
    //@include setFontBase(-4);
    @include font-size-media-cframe(-4);

    .mta-SC-title {
      img{max-width: 700px;}
      p {
        padding: 0;
        margin: 0;
        color: #333;
      }

    }
    @media screen and (max-width: 1440px){
      .mta-SC-title img{max-width: 600px;}
    }
  }

  /**
   * ShortAnswerQuestion
   */
  .mta-short-answer-question {
    position: relative;
    word-break: break-word;
    //@include setFontBase(-4);
    @include font-size-media-cframe(-4);

    .mta-first-row {
      .el-col {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;

        .mta-SC-title {
          img{max-width: 700px;}
          color: #333;
          line-height: 24px;
          @include setFontBase(-6);
        }

        .mta-SC-score {
          color: #999;
          min-width: 100px;
          line-height: 24px
        }
      }

      .wrap-shitiIndex {
        //font-size: 14px;
        white-space: nowrap;//题号一行显示
        @include setFontBase(-6);
        line-height: 24px;
        color: #333;
        margin-right: 10px;
      }
    }

    .mta-two-row {

      margin: 6px 0 12px 0;
    }

    .mta-modal {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
    }
    @media screen and (max-width: 1440px){
      .mta-first-row .el-col .mta-SC-title img{max-width: 600px;}
    }
  }
  .mta-short-answer-question {
    .mta-SC-title {
      img{max-width: 700px;}
      p {
        padding: 0;
        margin: 0;
      }
    }

    .el-textarea__inner {
      color: #666;
    }
    @media screen and (max-width: 1440px){
      .mta-SC-title img{max-width: 600px;}
    }
  }

  /**
   * SingleChoice
   */
  .mta-single-choice {
    position: relative;
    word-break: break-word;
    @include font-size-media-cframe(-4);
    .mta-first-row {
      .el-col {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;

        .mta-SC-title {
          color: #333;
          line-height: 24px;
          @include setFontBase(-6);
          img{max-width: 700px;}
        }

        .mta-SC-score {
          color: #999;
          min-width: 100px;
          line-height: 24px;
          @include setFontBase(-6);
        }
      }

      .wrap-shitiIndex {
        //font-size: 14px;
        white-space: nowrap;//题号一行显示
        @include font-size-media-cframe(-6);
        line-height: 24px;
        color: #333;
        margin-right: 10px;
      }
    }
    .mta-two-row {
      margin-bottom: 12px;

      .el-col {

        > .el-radio-group {

          .mta-num {
            margin: 0 10px;
            font-weight: bolder;

          }

          .mta-radio-row {
            margin: 10px 0;
            display: block;
            flex-direction: row;
            width: 100%;
            img{max-width: 700px;}
          }
        }

      }
    }
    .mta-modal {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
    }
    .mta-SC-title {
      img{max-width: 700px;}
      p {
        padding: 0;
        margin: 0;
      }

    }

    .mta-radio-row {

      .el-radio {
        color: #666;
        width: 95%;
        @include setFontBase(-6,true);
        img{max-width: 100%}

        span {
          p {
            white-space: normal;
            display: contents;
          }

          span {
            white-space: normal;

            font {
              white-space: normal;
            }
          }
        }

        .el-radio__label {
          vertical-align: top;
          white-space: nowrap;
        }
      }

      .el-radio__input {
        vertical-align: top;
        margin-right: 10px;
      }

      .el-radio__label {
        vertical-align: top;
        display: contents;
      }

      .el-radio__label font {
        vertical-align: top;
        display: inline-block;
      }

      .el-radio__label span {
        //display: inline-block;
        // width: 100%;
        h1, h2, h3, h4, h5, h6 {
          margin: 0;
          display: inline-block;
        }

        ol {
          margin: 0;
        }
      }

      p {
        display: inline-block;
        padding: 0;
        margin: 0;

      }
    }

    .showError {
      .is-checked {
        .el-radio__input {
          .el-radio__inner {
            border: 1px solid red;
            background: red;
          }
        }
        span.el-radio__label {
          color: red;
        }
      }
    }
    .wordBox,.wordOption{display: inline-block}
    .wordBox img{max-width: 100%;}
    @media screen and (max-width: 1440px){
      .mta-SC-title img{max-width: 600px;}
      .mta-first-row .el-col .mta-SC-title img,.mta-two-row .el-col .mta-radio-row img{max-width: 600px;}
      .mta-two-row .el-col > .el-radio-group .mta-radio-row img{max-width: 600px;}
    }
  }

  /**
   * TureOrFalse
   */
  .mta-true-or-false {
    position: relative;
    word-break: break-word;
    //@include setFontBase(-4);
    @include font-size-media-cframe(-4);
    .mta-first-row {
      .el-col {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;

        .mta-SC-title {
          color: #333;
          line-height: 24px;
          @include setFontBase(-6);
          img{max-width: 700px;}
        }

        .mta-SC-score {
          color: #999;
          min-width: 100px;
          line-height: 24px
        }
      }

      .wrap-shitiIndex {
        //font-size: 14px;
        white-space: nowrap;//题号一行显示
        @include setFontBase(-6);
        line-height: 24px;
        color: #333;
        margin-right: 10px;
      }
    }

    .mta-two-row {
      margin-bottom: 12px;

      .el-col {

        .mta-panduan-row {
          margin: 10px 0;
        }
      }
    }

    .mta-modal {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
    }
    @media screen and (max-width: 1440px){
      .mta-first-row .el-col .mta-SC-title img{max-width: 600px;}
    }
  }
  .mta-true-or-false {

    .mta-SC-title {
      img{max-width: 700px;}
      p {
        margin: 0;
        padding: 0;
      }
    }

    .el-radio {
      color: #666;
    }

    .showError {
      .is-checked {
        .el-radio__input {
          .el-radio__inner {
            border: 1px solid red;
            background: red;
          }
        }
        span.el-radio__label {
          color: red;
        }
      }
    }
    @media screen and (max-width: 1440px){
      .mta-SC-title img{max-width: 600px;}
    }
  }

  /**
   * TianKongItem
   */
  .mta-tiankong-item {

    .mta-num {
      display: inline-block;
      width: 100px;
      margin: 10px 0;
      @include setFontBase(-6);
    }

    .showError {
      input {
        color: red;
      }
    }

    .showSuccess {
      input {
        //color: green;
        @include setThemeColorBase('color', 0);
      }
    }
  }

  /**
   * AnswerAreaTiankong
   */
  .mta-answer-area {
    //@include setFontBase(-4);
    @include setFontBase(-6);
    color: #666;

    .mta-three-row-div {
      margin-bottom: 15px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;

      .three-span {
        width: 100px;
        flex-shrink: 0;
      }
      .answer-vhtml-div{
        p{margin: 0;}
      }
      > div {
        img {
          max-width: 700px;
        }
      }

      .mta-answer-list {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        > span {
          margin-bottom: 10px;
        }
        p{margin: 0;}
      }
    }
    @media screen and (max-width: 1600px){
      .mta-three-row-div .three-span{width: 80px;}
    }
    @media screen and (max-width: 1440px){
      .mta-three-row-div .three-span{width: 65px;}
      .mta-three-row-div > div img{max-width: 600px;}
    }
  }

  /**
   * 考试 card
   */
  .mta-c-kaoshi-card {

    .el-card {
      padding-bottom: 20px;
      border-radius: 8px;
      position: relative;
    }

    .card-image {
      .el-col {
        height: 106px;
        overflow: hidden;

        .image {
          display: block;
          width: 100%;
        }
      }
    }

    .card-title {
      color: #333;
      //font-size: 16px;
      @include font-size-media-cframe(-4);
      font-weight: normal;
      margin: 16px 10px 0 10px;
      display: inline-block;
      span{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 268px;
        display: block;
      }
    }

    .card-info {
      color: #666;
      margin: 8px 0 0 10px;

      span {
        //font-size: 14px;
        @include font-size-media-cframe(-6);
      }

      span.card-info-line {
        margin: 0 5px;
        vertical-align: top;
      }

      .item_el-col {
        height: 16px;
        line-height: 16px;
      }

      .item_span {
        max-width: 100px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .card-time {
      color: #1D1F68;
      margin: 8px 0 0 10px;

      span {
        //font-size: 12px;
        @include font-size-media-cframe(-8);
      }
    }

    .card-btn {
      margin: 16px auto 0;

      .el-col {
        text-align: center;

        .el-button {
          width: 150px;
          @include font-size-media-cframe(-4);
          @include mediaMax(large) {
            width: 130px;
          }
          @include mediaMax(small) {
            //font-size: 14px;
            width: 120px;
          }
        }
      }

      .btnEndBg {
        background: #d3ddff;
        color: #666;
      }

      .btn-yjs {
        background: #9b9b9b;
        border-color: #9b9b9b;
        color: #fff;

        &:hover, &:active {
          background: #888787;
          border-color: #888787;
        }
      }

      .btn-bm {
        background: #EDC840;
        border-color: #EDC840;
        color: #fff;

        &:hover, &:active {
          background: #DDBA3B;
          border-color: #DDBA3B;
        }
      }

      .btn-bmsh {
        background: #ef8e64;
        border-color: #ef8e64;
        color: #fff;

        &:hover, &:active {
          background: #e1855e;
          border-color: #e1855e;
        }
      }

      .btn-shwtg {
        background: #ea706b;
        border-color: #ea706b;
        color: #fff;

        &:hover, &:active {
          background: #dd6863;
          border-color: #dd6863;
        }
      }

      .btn-rgpf {
        background: #D69C14;
        border-color: #D69C14;
        color: #fff;

        &:hover, &:active {
          background: #C89111;
          border-color: #C89111;
        }
      }
    }

    .mask {
      position: absolute;
      top: -300px;
      left: 0;
      width: 100%;
      height: 106px;
      background: rgba(101, 101, 101, 0.7);
      color: #fff;
      z-index: 999;
      transition: all 0.9s;
      cursor: pointer;
    }

    .mask h3 {
      text-align: center;
      //font-size: 20px;
      @include font-size-media-cframe(0);
      font-weight: normal;
      vertical-align: middle;
      height: 106px;
      margin: 0;
      line-height: 106px;
    }

    .el-card :hover .mask {
      top: 0px;
    }
  }

  /**
   * 公告 list
   */
  .mta-c-notice-list {
    margin: 0 2px;
    .mta-cuoti-list {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      border-bottom: 1px solid #ccc;
      height: 46px;
      line-height: 46px;
      padding: 0 20px;
      position: relative;

      //公告icon
      .mta-notice-read-icon,.mta-notice-unread-icon{
        width: 41px;
        height: 36px;
        position: absolute;
        left:0;
        top: 0;
        background-size: 80%;
        background-repeat: no-repeat;
      }
      .mta-notice-read-icon{
        background-image: url("../../../assets/images/client/c-notice-read.svg");
      }
      .mta-notice-unread-icon{
        background-image: url("../../../assets/images/client/c-notice-unread.svg");
      }

      .mat-score-list-info {
        //margin: 10px 0;
        //font-size: 14px;
        @include font-size-media-cframe(-6);
        color: #666;
        letter-spacing: 0;
        width: 100%;

        span {
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        span.ckgg-btn {
          width: 20%;
          cursor: pointer;
        }

        > span.mta-line {
          margin: 0 5px
        }

        .mta-line {
          border-left: 1px solid #666;
        }
      }
    }


  }
  /**
   * 成绩 list
   */
  .mta-c-score-list {

    .mta-score-list {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      padding-bottom: 14px;
      border-bottom: 1px solid #CCC;
      margin-bottom: 14px;

      .mta-score-list-img {
        width: 120px;
        height: 74px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        border-radius: 8px;
        overflow: hidden;

        > img {
          width: 100%;
        }
      }

      .mta-score-list-name {
        margin: 10px 0 10px 27px;
        //font-size: 16px;
        //@include setFontBase(-3);
        @include font-size-media-cframe(-3);
        color: #333;
        letter-spacing: 0;

      }

      .mat-score-list-info {
        margin: 20px 0 10px 27px;
        //font-size: 14px;
        //@include setFontBase(-5);
        @include font-size-media-cframe(-5);
        color: #666;
        letter-spacing: 0;

        > span.mta-line {
          margin: 0 8px
        }

        .mta-line {
          border-left: 1px solid #666;
        }
      }

      .score-list-content {
        display: flex;
        width: 100%;
        justify-content: space-between;
        flex-direction: row;

        .score-content-main {
          flex: 1;
        }

        /*.mta-score-button-area {

          .el-button {
            margin-top: 30px;
            width: 120px;

            @include font-size-media-cframe(-6);
            @include mediaMax(large) {
              width: 110px;
            }
            @include mediaMax(small) {
              width: 90px;
            }

          }
        }*/
      }
    }

    .mta-score-list:last-child {
      border: none;
    }
    .score-btn-box{
      display: flex;
      align-items: center;
    }
  }

  /**
   * 练习 card
   */
  .mta-c-lianxi-card {
    .el-card {
      padding-bottom: 20px;
      border-radius: 8px;
    }

    .card-image {
      .el-col {
        height: 106px;
        overflow: hidden;

        .image {
          display: block;
          width: 100%;
        }
      }
    }

    .card-title {
      color: #333;
      //font-size: 16px;
      @include font-size-media-cframe(-4);
      font-weight: normal;
      margin: 16px 0 0 10px;
    }

    .card-info {
      color: #666;
      margin: 8px 0 0 10px;

      span {
        //font-size: 14px;
        @include font-size-media-cframe(-6);
      }

      span.card-info-line {
        margin: 0 5px;
        vertical-align: top;
      }

      .item_el-col {
        height: 16px;
        line-height: 16px;
      }

      .item_span {
        max-width: 100px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .card-time {
      color: #1D1F68;
      margin: 8px 0 0 10px;

      span {
        //font-size: 12px;
        @include font-size-media-cframe(-8);
      }
    }

    .card-btn {
      margin: 16px auto 0;

      .el-col {
        text-align: center;

        .el-button {
          width: 150px;
          @include font-size-media-cframe(-6);
          @include mediaMax(large) {
            width: 130px;
          }
          @include mediaMax(small) {
            width: 120px;
          }
        }
      }
    }
  }

  /**
   * 错题 list
   */
  .mta-c-cuoti-list {
    .mta-cuoti-list {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      padding-bottom: 14px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 14px;

      .mta-cuoti-list-img {
        width: 120px;
        height: 74px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        border-radius: 8px;
        overflow: hidden;


        > img {
          width: 100%;
        }
      }

      .mta-cuoti-list-name {
        margin: 10px 0 10px 27px;
        //font-size: 16px;
        @include font-size-media-cframe(-4);
        color: #333;
        letter-spacing: 0;

      }

      .mat-cuoti-list-info {
        margin: 20px 0 10px 27px;
        //font-size: 14px;
        @include font-size-media-cframe(-6);
        color: #666;
        letter-spacing: 0;

        > span.mta-line {
          margin: 0 8px
        }

        .mta-line {
          border-left: 1px solid #666;
        }
      }

      .cuoti-list-content {
        display: flex;
        width: 100%;
        justify-content: space-between;
        flex-direction: row;

        .cuoti-content-main {
          flex: 1;
        }

        .mta-cuoti-button-area {
            display: flex;
            align-items: center;
          /*.el-button {
            width: 120px;

            @include font-size-media-cframe(-6);
            @include mediaMax(large) {
              width: 110px;
            }
            @include mediaMax(small) {
              width: 100px;
            }
          }*/
        }
      }
    }

    .mta-cuoti-list:last-child {
      border-bottom: none;
    }

    .btn-ksz {
      background: #92d047;
      border-color: #92d047;
      color: #fff;

      &:hover, &:active {
        background: #86bf41;
        border-color: #86bf41;
      }
    }
  }

  /**
   * 证书 list
   */
  .mta-cert-lists {
    .mta-cert-list {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      padding-bottom: 14px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 14px;

      .mta-cert-list-img {
        width: 120px;
        height: 74px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        border-radius: 8px;
        overflow: hidden;

        > img {
          width: 100%;
        }
      }

      .mta-cert-list-name {
        margin: 10px 0 10px 27px;
        //font-size: 16px;
        @include font-size-media-cframe(-4);
        color: #333;
        letter-spacing: 0;

      }

      .mat-cert-list-info {
        margin: 20px 0 10px 27px;
        //font-size: 14px;
        @include font-size-media-cframe(-4);
        color: #666;
        letter-spacing: 0;

        > span.mta-line {
          margin: 0 8px
        }

        .mta-line {
          border-left: 1px solid #666;
        }
      }
    }

    .mta-cert-list:last-child {
      border: none;
    }

    .mta-cert-button-area {
      display: flex;
      align-items: center;
      /*.el-button {
        margin-top: 20px;
        width: 90px;

        @include font-size-media-cframe(-6);
        @include mediaMax(large) {
          width: 80px;
        }
        @include mediaMax(small) {
          width: 70px;
        }
      }*/
    }
  }
  /**
   * 学分 list
   */
  .mta-credit-list {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    border-bottom: 1px solid #ccc;
    height: 46px;
    line-height: 46px;

    .mta-credit-list-info {
      @include font-size-media-cframe(-5);
      color: #666;
      letter-spacing: 0;
      width: 100%;
      padding: 0 20px;

      span {
        float: left;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      > span.mta-line {
        margin: 0 5px
      }

      .mta-line {
        border-left: 1px solid #666;
      }
    }
  }

  /**
   * 响应式 btn
   */
  .media-btn {
    //@include media-btn;
  }

  /*** 弹窗组件 ***/
  .response-big-dialog, .response-middle-dialog, .response-small-dialog, .response-tip-dialog {
    .el-dialog {
      border-radius: 8px;

      .el-dialog__header {
        height: 40px;
        line-height: 40px;
        border-radius: 8px 8px 0 0;

        .el-dialog__title {
          font-size: 16px;
        }

        .el-dialog__headerbtn {
          top: 12px;
        }
      }

      .el-dialog__body {
        padding: 32px 32px 0;
      }

      .el-dialog__footer {
        .el-button {
          height: 32px;
          padding: 8px 14px;
          margin: 0 15px;
          @include setFontBase(-6);
          min-width: auto;
        }
      }
    }
  }
  //大弹窗
  .response-big-dialog {
    .el-dialog {
      width: 1300px;
    }
  }
  //中等弹窗
  .response-middle-dialog {
    .el-dialog {
      width: 960px;
    }
  }
  //小弹窗
  .response-small-dialog {
    .el-dialog {
      width: 640px;
    }
  }
  //提示微型弹窗
  .response-tip-dialog{
    .el-dialog {
      width: 400px;
    }
  }

  /*** 评论组件 ***/
  .c-mta-comment-layout {
    border: 1px solid #e3e3e3;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    border-radius: 8px;
    padding: 14px 35px 0;
    margin-right: 20px;

    .c-comment-content {
      flex: 1;
      .c-first-line {
        display: flex;
        justify-content: space-between;
        padding-right: 16px;
        >span{
          min-width: 70px;
          border-bottom: 1px solid #e3e3e3;
          color: #333;
          font-size: 14px;
          padding: 0 8px;
          height: 25px;
        }
      }
      .c-two-line{
        font-size: 14px;
        color: #666;
        padding: 16px 8px 0;
        line-height: 20px;
        //min-height: 46px;
        word-break: break-all;
        .NotAll{
          line-height: 23px;
        }
      }
      .c-three-line{
        margin: 14px 8px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        .c-btnAndDate{
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        >div{
          color: #666;
          .el-button{
            padding: 0;
          }
        }
        .el-button{
          @include setThemeColorBase('color', 0);
          @include setThemeColorBase('color', 0);
        }
        .el-button:hover,.el-button:active{
          @include setThemeColorBase('color', -2);
          @include setThemeColorBase('color', -2);
        }
      }
      .c-four-line{
        box-shadow: 0 10px 8px -8px rgba(0, 0, 0, 0.08);
        margin-left: 8px;
        .c-mta-comment-layout {
          min-height: 86px;
          margin-right: 0;
          padding: 10px 0 0 35px;
        }
        .c-comment-content {
          .c-two-line{
            //min-height: 25px;
            margin-bottom: 10px;
            padding: 10px 10px 0;
          }
          .c-three-line{
            .c-btnAndDate{
              width: 100%;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
    //头像
    .head-portrait-box{
      .el-avatar--large{
        width: 28px;
        height: 28px;
        margin-right: 8px;
      }
    }
  }

  /*** 笔记组件 ***/
  .c-mta-biji-layout{
    border: 1px solid #e3e3e3;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    border-radius: 8px;
    padding: 14px 35px 0;
    margin-right: 20px;
    //头像
    .c-biji-image-box{
      img{
        width: 28px;
        height: 28px;
        margin-right: 8px;
        border-radius: 50%;
      }
    }

    .c-biji-content-box {
      flex: 1;
      .c-biji-first-line {
        display: flex;
        justify-content: space-between;
        >span{
          min-width: 70px;
          border-bottom: 1px solid #e3e3e3;
          color: #333;
          font-size: 14px;
          padding: 0 8px;
          height: 25px;
        }
      }
      .c-biji-two-line{
        font-size: 14px;
        color: #666;
        padding: 16px 8px 0;
        margin-bottom: 14px;
        //min-height: 46px;
        line-height: 20px;
        word-break: break-all;
        .NotAll{
          line-height: 23px;
        }
      }
      .c-biji-three-line{
        margin: 14px 8px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        .c-btnAndDate{
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        >div{
          color: #666;
        }
        .el-button{
          @include setThemeColorBase('color', 0);
          @include setThemeColorBase('color', 0);
          padding: 0;
        }
        .el-button:hover,.el-button:active{
          @include setThemeColorBase('color', -2);
          @include setThemeColorBase('color', -2);
        }
      }
      .c-four-line{
        .c-mta-comment-layout {
          min-height: 86px;
          margin-right: 0;
          padding: 10px 0 0 35px;
        }
        .c-comment-content {
          .c-two-line{
            //min-height: 25px;
            margin-bottom: 10px;
            padding: 10px 10px 0;
          }
          .c-three-line{
            .c-btnAndDate{
              width: 100%;
              display: flex;
              justify-content: space-between;
              >div{
                .el-button{
                  padding: 0;
                }
              }
            }
          }
        }
      }
    }
  }
  /*** card组件 ***/
  .card-comp{
    width: 294px;
    //height: 282px;
    min-width: 294px;
    max-width: 294px;
    //min-height: 282px;
    max-height: 282px;
    display: inline-block;
    margin-right: 33px;
    margin-bottom: 24px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    //图片
    .image-box{
      position: relative;
      height: 164px;
      overflow: hidden;
      .image-box-div{
        transition: all 0.9s;
      }
      img{
        width: 100%;
        height: 164px;
      }
      .my-tag{
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 13px;
        color: #FFFFFF;
        background: rgba(0, 0, 0, 0.35);
        padding: 4px 12px;
        border-radius: 5px 0;
      }
    }
    //文字box
    .card-word-box {
      padding: 16px;
      cursor: default;
    }
    //card蒙版
    .card-mask {
      position: absolute;
      top: -164px;
      left: 0;
      width: 100%;
      height: 164px;
      background: rgba(101, 101, 101, 0.7);
      color: #fff;
      z-index: 999;
      transition: all 0.9s;
      cursor: pointer;
    }

    .card-mask h3 {
      text-align: center;
      //font-size: 20px;
      @include setFontBase(0);
      font-weight: normal;
      vertical-align: middle;
      height: 164px;
      margin: 0;
      line-height: 164px;
    }

  }
  .card-comp:hover{
    .card-mask {
      top: 0;
    }
    .image-box-div{
      transform: scale(1.2);
    }
  }
  /*** 培训系统-card组件 ***/
  .c-peixun-card{
    .card-title {
      @include setFontBase(-3);
      color: #333;
      letter-spacing: 0;
      margin-bottom: 10px;
      display: block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .card-info {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-bottom: 10px;
      span{
        @include setFontBase(-5);
        color: #666;
        letter-spacing: 0;
      }

      .card-info-line {
        margin: 0 9px;
      }
    }

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

      span {
        @include setFontBase(-5);
        color: #666;
        letter-spacing: 0;
      }
    }
    .index-row{
      height: 16px;
      line-height: 16px;
    }
    .text-large-width_80 {
      max-width: 80px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }
    //card蒙版
    .card-mask {
      position: absolute;
      top: -164px;
      left: 0;
      width: 100%;
      height: 164px;
      background: rgba(101, 101, 101, 0.7);
      color: #fff;
      z-index: 999;
      transition: all 0.9s;
      cursor: pointer;
    }

    .card-mask h3 {
      text-align: center;
      //font-size: 20px;
      @include setFontBase(0);
      font-weight: normal;
      vertical-align: middle;
      height: 164px;
      margin: 0;
      line-height: 164px;
    }
    @media screen and (max-width: 1440px) {
      .card-title{
        @include setFontBase(-4);
      }
      .card-info,.card-time{
        span {
          @include setFontBase(-6);
        }
      }
    }
  }
  /*** 培训系统-Tooltip 文字提示 ***/
  .el-tooltip__popper.c-aliUpload-tooltip{
    padding: 8px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  }

  /*** 培训系统 - 个人中心card ***/
  .c-personal-center-card{
    >div{
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
    }
    padding-bottom: 16px;
    margin: 0 24px 16px;
    border-bottom: 1px solid #e3e3e3;

    //card图片
    .personal-center-img{
      width: 100px;
      height: 56px;
      border: 1px solid #ccc;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      >img{
        width: 100%;
        height: 56px;
      }
    }
    .personal-center-content {
      display: flex;
      width: calc(100% - 102px);
      justify-content: space-between;
      flex-direction: row;

      .personal-center-main{
        padding: 5px 24px 5px 5px;
        width: 100%;
        overflow: hidden;  /*也可以用 width:0 代替*/
        flex: 1;
        .personal-center-name{
          @include setFontBase(-3);
          color: #333;
          letter-spacing: 0;
          margin: 0 0 14px 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: default;
        }
        .personal-center-info{
          margin-left: 14px;
          color: #666;
          letter-spacing: 0;
          @include setFontBase(-5);
          > span.mta-line {
            margin: 0 8px
          }

          .mta-line {
            border-left: 1px solid #666;
          }
          .max-width-200,.max-width-700{
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: default;
            display: inline-block;
            vertical-align: bottom;
          }
          .max-width-700{
            max-width: 700px;
          }
        }
      }
    }
    //按钮
    .personal-center-btn-box{
      display: flex;
      align-items: center;
      flex-shrink: 0;
      .el-button{@include setFontBase(-5);}
      //考试中
      /*.btn-ksz {
        background: #92d047;
        border-color: #92d047;
        color: #fff;

        &:hover, &:active {
          background: #86bf41;
          border-color: #86bf41;
        }
      }
      //已结束
      .el-button.btn-yjs {
        background: #9b9b9b;
        border-color: #9b9b9b;
        color: #fff;

        &:hover, &:active {
          background: #888787;
          border-color: #888787;
        }
      }*/

    }
    .xiaoxi-btn-box{
      .el-button{
        border: 0;
        @include setThemeColorBase("color", 0);
        background: transparent;
        padding: 12px 2px;
      }
      .el-button--primary:hover{
        border: 0;
        background: transparent;
      }
    }
    @media screen and (max-width: 1600px) {
      padding-bottom: 12px;
      margin: 0 24px 12px;
    }
    @media screen and (max-width: 1440px) {
      padding-bottom: 10px;
      margin: 0 24px 10px;
      .personal-center-content {
        .personal-center-main{
          .personal-center-name{
            @include setFontBase(-5);
          }
          .personal-center-info{
            @include setFontBase(-7);
            > span.mta-line {
              margin: 0 6px
            }
          }
        }
      }

      //按钮
      .personal-center-btn-box{
        .el-button{@include setFontBase(-6);}
      }
    }
  }
  .xiaoxi-card-box{
    .c-personal-center-card{
      padding-bottom: 8px;
      margin: 8px 24px;
    }
    .personal-center-content{
      width: 100%;
      .personal-center-main{
        padding: 0;
        line-height: 38px;
        .personal-center-info{
          margin-left: 2px;
        }
      }
    }
  }
  .c-personal-center-card:last-child{
    border-bottom:0;
  }
  /*资料编辑*/
  .editorUserWrap {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-around;
  }
  /***添加图片***/
  .response-uploadAlCloud {
    .avatar-uploader .el-upload {
      width: 180px;
      height: 180px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      .avatar {
        max-width: 100%;
        height: auto;
      }
    }

    .delete-btn {
      width: 140px;
      margin: 0 20px;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    @media screen and (max-width: 1440px) {
      .avatar-uploader-icon{
        width: 140px;
        height: 140px;
        line-height: 140px;
      }
      .avatar{
        width: 140px; // 必须指定宽高
        height: 140px;
        line-height: 140px;
      }
    }
  }
  /***宽度响应式***/
  @media screen and (max-width: 1600px) {
    /***input输入框***/
    //文本框组件-查询区域 && 弹窗查询区域
    .response-input, .response-dialog-input {
      margin-right: 15px;
    }
    .response-input {
      width: 170px;
    }
    //文本框组件-新增页面表格区域
    .response-form-input {
      .middle-input {
        width: 170px;

        .el-input {
          width: 170px;
        }
      }
    }
    //文本框组件-弹窗查询区域
    .response-dialog-input {
      width: 150px;
    }

    //大中小弹窗
    .response-big-dialog, .response-middle-dialog, .response-small-dialog,.response-tip-dialog {
      .el-dialog {
        .el-dialog__body {
          padding: 24px 24px 0;
        }
      }
    }
    //大弹窗
    .response-big-dialog {
      .el-dialog {
        width: 960px;
      }
    }
    //中等弹窗
    .response-middle-dialog {
      .el-dialog {
        width: 800px;
      }
    }
  }
  @media screen and (max-width: 1440px) {

    /*** 弹窗组件 ***/
    .response-big-dialog, .response-middle-dialog, .response-small-dialog,.response-tip-dialog {
      .el-dialog {
        .el-dialog__body {
          padding: 16px 16px 0;
        }

        .el-dialog__footer {
          .el-button {
            margin: 0 10px;
            @include setFontBase(-7);
          }
        }
      }
    }
    /*** 评论组件 ***/
    .c-mta-comment-layout {
      margin-bottom: 16px;
      padding: 12px 30px 0;
      margin-right: 16px;

      .c-comment-content {
        .c-first-line {
          padding-right: 12px;
          >span{
            font-size: 13px;
            padding: 0 12px;
            height: 20px;
          }
        }
        .c-two-line{
          font-size: 13px;
          padding: 12px 12px 0;
          margin-bottom: 12px;
          //min-height: 40px;
        }
        .c-three-line{
          margin: 8px 12px;
          font-size: 13px;
          .c-btnAndDate{
            >div{
              line-height: 30px;
            }
          }
          >div{
            line-height: 30px;
            .el-button{
              padding: 0;
            }
          }
        }
      }
      //头像
      .head-portrait-box{
        .el-avatar--large{
          width: 50px;
          height: 50px;
          margin-right: 6px;
        }
      }
    }

    /*** 笔记组件 ***/
    .c-mta-biji-layout{
      margin-bottom: 16px;
      padding: 12px 30px 0;
      margin-right: 16px;
      //头像
      .c-biji-image-box{
        img{
          width: 50px;
          height: 50px;
          margin-right: 6px;
        }
      }

        .c-biji-content-box {
        .c-biji-first-line {
          padding-right: 12px;
          >span{
            font-size: 13px;
            padding: 0 12px;
            height: 20px;
          }
        }
        .c-biji-two-line{
          font-size: 13px;
          padding: 12px 12px 0;
          margin-bottom: 12px;
          //min-height: 40px;
        }
        .c-biji-three-line{
          margin:8px 12px;
          font-size: 13px;
          .c-btnAndDate{
          }
        }
      }
    }
    /***添加图片***/
    .response-uploadAlCloud {
      .avatar-uploader .el-upload {
        width: 140px;
        height: 140px;
      }

      .delete-btn {
        width: 100px;
        margin: 0 20px;
      }
    }
  }

  //模糊搜索下拉树
  .c-select-input-tree .is-current .el-tree-node__label{
    @include setThemeColorBase("color", 1);
  }

  //下拉列表
  .el-select-dropdown .el-scrollbar .el-select-dropdown__list{
    max-height: 400px;
    overflow: auto;
  }
}
