$search-width-cframe: $width-base * 48;
$search-height-cframe: $height-base;
$search-line-height-cframe: $line-height-base;
$search-wrap-width: 325px;

// 设置 搜索区域内置input样式
%search-width-cframe {
  width: $search-width-cframe;
}

// 搜索区域间距
%page-margin {
  margin: 0 20px 0 30px;

  @include mediaMax(large) {
    margin: 0 20px 0 30px;
  }

  @include mediaMax(small) {
    margin: 0 20px 0 30px;
  }
}

// 容器间距
%mta-wrap {
  margin: 20px 0 20px 0;
}

// search 右侧文字 大小调整
@mixin mta-c-label {
  .mta-c-search-label {
    min-width: 95px;
    @include font-size-media-cframe(-3);
    width: $search-wrap-width - 230px;
    height: 40px;
    line-height: 40px;
    color: #333;
    display: inline-block;

    & + .el-select .el-input >input  {
      @include mediaMax(large) {
        height: $search-height-cframe * 3.6;
        line-height: $search-line-height-cframe * 3.6;
        margin-top: $width-base * .2
      }

      @include mediaMax(small) {
        height: $search-height-cframe * 3.4;
        line-height: $search-line-height-cframe * 3.4;
        margin-top: $width-base * .4;
      }
    }
  }
}

// 高级筛选
@mixin mta-showMore-btn {
  .mta-popver-btn {
    margin-right: 60px;

    .el-button {
      span {
        //@include setFontBase(-6);
        @include font-size-media-cframe(-6);
        @include setThemeColorBase('color', 0);
      }
    }
  }
}

// 设置字体
@mixin font-size-media-cframe($font) {
  $font-base: $font;
  $font-base-large: $font - 2;
  $font-base-small: $font - 4;
  // 基础设置
  @if ($base-size*2 + $font-base) > 12px {
    @include setFontBase($font-base);
  } @else {
    @include setFontBase(-8);
  }
  // large尺寸下
  @if ($base-size*2 +  $font-base-large) > 12px {
    @include mediaMax(large) {
      @include setFontBase($font-base-large);
    }
  } @else {
    @include mediaMax(small) {
      @include setFontBase(-8);
    }
  }
  // small尺寸下
  @if ($base-size*2 +  $font-base-small) > 12px {
    @include mediaMax(small) {
      @include setFontBase($font-base-small);
    }
  } @else {
    @include mediaMax(small) {
      @include setFontBase(-8);
    }
  }

}

// input样式
@mixin cframe-el-input__inner {
  .mta-c-choose-select-input input.el-input__inner, .mta-search-area input.el-input__inner {
    height: $search-height-cframe * 4;
    line-height: $search-line-height-cframe * 4;
    @include mediaMax(large) {
      height: $search-height-cframe * 3.6;
      line-height: $search-line-height-cframe * 3.6;
    }

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

  .mta-c-choose-select-input input.el-input__inner {

    @include mediaMax(large) {
      margin-top: $width-base * .2
    }

    @include mediaMax(small) {
      margin-top: $width-base * .4;
    }
  }

  .mta-c-status-area input.el-input__inner {

    @include mediaMax(large) {
      height: $search-height-cframe * 3.6;
      line-height: $search-line-height-cframe * 3.6;
      margin-top: $width-base * .2
    }

    @include mediaMax(small) {
      height: $search-height-cframe * 3.4;
      line-height: $search-line-height-cframe * 3.4;
      margin-top: $width-base * .4;
    }
  }

  .mta-c-dateSearch-area input.el-input__inner {

    @include mediaMax(large) {
      height: $search-height-cframe * 3.6;
      line-height: $search-line-height-cframe * 3.6;
      margin-top: $width-base * .2
    }

    @include mediaMax(small) {
      height: $search-height-cframe * 3.4;
      line-height: $search-line-height-cframe * 3.4;
      margin-top: $width-base * .4;
    }
  }

  /*.date-block input.el-input__inner {
    @include mediaMax(large) {
      height: $search-height-cframe * 3.6;
      line-height: $search-line-height-cframe * 3.6;
      //margin-top: $width-base * .2
    }

    @include mediaMax(small) {
      height: $search-height-cframe * 3.4;
      line-height: $search-line-height-cframe * 3.4;
      //margin-top: $width-base * .4;
    }
  }*/
}

// 日历组件
@mixin mta-data-wrap {
  .mta-c-date-area {
    // 容器 margin
    @extend %page-margin;
    // lable区域宽度样式
    @include mta-c-label;
    // 宽度
    width: $search-wrap-width * 2;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;

    .el-input {
      margin-right: 24px;
    }

    .date-block {
      margin-right: 24px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
    }
  }
}

//分页
@mixin mta-pagination {
  .el-pagination {
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;

    .btn-prev {
      border: 1px solid #CCC;
      border-radius: 8px;
      background: none;
    }

    .btn-next {
      border: 1px solid #CCC;
      border-radius: 8px;
      background: none;
    }
  }
  .el-pagination.is-background .el-pager li {
    border: 1px solid #CCC;
    border-radius: 8px;
    background: none;
  }
}

// 弹性盒容器居中
@mixin mta-c-wrap-middle {
  .mta-c-wrap-middle {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直居中 */
  }
}

// 查询 select
@mixin mta-select-wrap {
  .mta-c-select-area {
    @extend %page-margin;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    > div span {
      @include font-size-media-cframe(-3);
      color: #333;
    }

    .el-select {
      width: 220px;
    }

    &.mta-c-wrap-middle {
      .mta-popver-btn {
        margin-right: 40px;
      }

    }
  }
}

// 查询 select-input
@mixin mta-select-input-wrap {
  .mta-c-select-input-area {
    @extend %page-margin;
    display: flex;
    width: $search-wrap-width + 14px;
    justify-content: space-between;
    flex-direction: row;

    > div {
      width: $search-wrap-width + 400px;
      display: flex;
      justify-content: flex-start;
    }

    .el-input {
      margin-right: 24px;
    }
  }
}

// 查询 nav区域
@mixin mta-search-nav-area {
  .mta-search-nav-area {
    @extend %page-margin;
    margin-top: 1px;
    margin-bottom: -12px;
  }
}

// 主体容器 高度
@mixin mta-c-main-card-wrap($contentHeight, $marginTop) {

  // 主体容器
  .mta-c-main-lists {
    padding-top: $marginTop;
    margin-top: 5px;
    height: calc(100vh - #{$contentHeight});
    overflow: auto;

  }
  // 内容：card
  .mta-cards-content {
    margin: 0 0 0 20px;
    padding-right: 20px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;

    .mta-cards-item {
      width: 290px;
      margin: 0 20px 20px 10px;
      @include mediaMax(large) {
        margin: 0 20px 20px 0;
      }
    }
  }
  // 内容：list
  .mta-lists-content {
    margin: 20px 20px 0 30px;

    @include mediaMax(large) {
      margin: 16px 20px 0 20px;
    }

    @include mediaMax(small) {
      margin: 12px 20px 0 20px;
    }
  }

}

@mixin mta-c-main-card-wrap2($contentHeight, $marginTop) {

  // 主体容器
  .mta-c-main-lists {
    padding-top: $marginTop;
    margin-top: 5px;
    height: calc(100vh - #{$contentHeight});
    overflow: auto;

  }
  // 内容：table body区域
  .mta-table-content {
    margin: 20px 30px 0 0;

    @include mediaMax(large) {
      margin: 16px 30px 0 0;
    }

    @include mediaMax(small) {
      margin: 12px 30px 0 0;
    }
  }
  // 证书table 头
  .mta-c-main-table-wrap {
    margin: 20px 0 0 30px;
    .bt-th {
      height: 56px;
      line-height: 56px;
      margin-right: 30px;
      border-radius: 8px 8px 0 0;
      padding: 0 20px;

      // 媒体查询 设置 高度响应式计算
      @include mediaMax(large) {
        height: 52px;
        line-height: 52px;
      }
      @include mediaMax(small) {
        height: 48px;
        line-height: 48px;
      }

      span {
        display: inline-block;
        //text-indent: 2em;
        color: #333;
        font-weight: bold;
      }
    }
    @media screen and (max-width: 1600px)  {
      margin: 20px 0 0 20px;
    }
  }

}

// 考试须知弹窗
@mixin mta-c-notice {


  .noticeLeftDiv {
    width: 400px;
    height: 270px;
    border: 1px solid #CCC;
    margin-bottom: 10px;
    text-align: center;
    float: left;

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

  .noticeRightDiv {
    width: 300px;
    height: 270px;
    margin-left: 440px;
    margin-bottom: 10px;
    border-left: 1px solid #CCC;
    padding-left: 30px;

    > div {
      width: 100%;
      display: inline-block;
      margin-bottom: 16px;
      text-align: left;
    }

    .ksmc {
      width: 100%;
      //width: 250px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      @include font-size-media-cframe(-2);
      .noticeLeftSpan {
        display: inline-block;
        width: 115px;
        @include font-size-media-cframe(-2);
      }
    }
  }

  .noticeBottomDiv {
    width: 100%;
    float: left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
  }

  .noticeLeftSpan {
    display: inline-block;
    width: 115px;
    @include font-size-media-cframe(-4);
  }
  //考试须知-圆点
  .circular {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-right: 5px;
  }

  .openContent {
    overflow-x: auto;
    margin-top: 10px;
    padding: 5px 10px;
    text-align: left;
    @include font-size-media-cframe(-6);

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

  .ksms-span {
    cursor: pointer;
  }

  @include mediaMax(large) {
    .noticeLeftDiv {
      width: 300px;
      height: 230px;
      border: 1px solid #CCC;
      margin-bottom: 10px;
      text-align: center;
      float: left;

      img {
        height: 230px;
        width: 100%;
      }
    }
    .noticeRightDiv {
      width: 300px;
      height: 230px;
      margin-left: 330px;
      margin-bottom: 10px;
      border-left: 1px solid #CCC;
      padding-left: 30px;

      > div {
        width: 100%;
        display: inline-block;
        margin-bottom: 16px;
        text-align: left;
      }

      .ksmc {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  @include mediaMax(small) {
    .noticeLeftDiv {
      width: 260px;
      height: 200px;
      border: 1px solid #CCC;
      margin-bottom: 10px;
      text-align: center;
      float: left;

      img {
        height: 200px;
        width: 100%;
      }
    }
    .noticeRightDiv {
      width: 300px;
      height: 230px;
      margin-left: 330px;
      margin-bottom: 10px;
      border-left: 1px solid #CCC;
      padding-left: 30px;

      > div {
        width: 100%;
        display: inline-block;
        margin-bottom: 16px;
        text-align: left;
      }

      .ksmc {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

// 清浮动
@mixin mta-c-clearFix {
  .clearfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
  }
  .clearfloat {
    zoom: 1;
  }
}

// 查询宽度 input 第一列宽度
@mixin search-input-first-row {
  .mta-search-area {
    @extend %page-margin;
    width: $search-wrap-width*1.6;
  }
}

// 导航
@mixin mta-c-search-nav {
  .mta-search-nav {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;

    .search-nav-label {
      min-width: 95px;
      line-height: 60px;
      height: 60px;
      //@include setFontBase(-3);
      @include font-size-media-cframe(-3);
      display: inline-block;
    }

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

    .el-menu--horizontal > .el-menu-item.is-active {
      border-bottom: none;
    }

    .el-menu--horizontal > .el-menu-item {
      border-bottom: none;
      color: #666;
      //@include setFontBase(-3);
      @include font-size-media-cframe(-3);
    }

    .search-nav-line {
      height: 20px;
      width: 1px;
      background: #bbb;
      margin: 20px 0;
    }
  }
}

// 试题段落
@mixin mta-c-paragraph($type) {
  @if $type == 1 {
    .paragraph {
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      align-items: stretch;
      .paragraph-c {
        min-height: 230px;
        background-color: white;
        margin-bottom: 15px;
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;

        .qa {
          margin-bottom: 0;

          .qa-title {
            height: 50px;
            line-height: 50px;
            @include font-size-media-cframe(-4);
            font-weight: bold;
            margin-left: 15px;
          }

          .qa-line {
            margin-left: 0;
            margin-top: 30px;
          }

          .qa-content {
            width: calc(90% - 30px);
            float: left;
            padding-left: 15px;
            padding-right: 15px;
            padding-bottom: 5px;
            word-break: break-word;
          }

          .qa-mark {
            text-align: right;
            padding-top: 0;
            padding-right: 15px;
            width: calc(10% - 15px);
            float: left;

            .el-button {
              background: #FFA111;
              border-color: #FFA111;
              @include font-size-media-cframe(-6);

              &:hover, &:active {
                background: #F09810;
                border-color: #F09810;
              }
            }
          }
        }
      }
    }
  } @else if $type == 2 {
    .paragraph {
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      align-items: stretch;

      .paragraph-t {
        height: 48px;
        line-height: 48px;
        text-align: left;
        @include setFontBase(-3);
        color:#606266;
        padding: 0 30px;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(100% - 60px);
      }

      .paragraph-c {
        min-height: 230px;
        background-color: white;
        border-radius: 0 0 10px 10px;
        padding: 15px;
        margin-bottom: 15px;
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;

        .qa {
          margin-bottom: 0;

          .qa-title {
            height: 50px;
            line-height: 50px;
            //@include setFontBase(-3);
            @include font-size-media-cframe(-4);
            font-weight: bold;
            margin-left: 15px;
          }

          .qa-line {
            margin-left: 0;
            margin-top: 30px;
          }

          .qa-content {
            width: calc(90% - 15px);
            float: left;
            padding-left: 15px;
            padding-bottom: 5px;
            word-break: break-word;
          }

          .qa-mark {
            text-align: center;
            padding-top: 0;
            padding-right: 0;
            width: calc(10% - 15px);
            float: left;

            .el-button {
              background: #FFA111;
              border-color: #FFA111;
              @include font-size-media-cframe(-6);

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

      .paragraph-btns {
        text-align: center;
      }
    }
  }

}

// 媒体查询 btn
@mixin media-btn {
  @include font-size-media-cframe(-6)
}
