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

@mixin setStyleAFrameComponent($project) {
  /**
   * EditableTree + EditableTreeOrg
   */
  .editableTree {
    flex: 1;
    display: flex;
    /*align-items: center;*/
    justify-content: space-between;
    flex-direction: column;
    font-size: 14px;
    padding-right: 8px;

    &-filter {
      display: flex;
      flex-direction: row;
    }

    .wrap-tree {
      display: flex;
      flex: 1;
    }

    .el-tree {
      flex: 1;
    }

    .custom-tree-node {
      width: 100%;
    }

    .custom-tree-node:hover .treeCtrlBtn {
      visibility: visible;
    }

    .treeCtrlBtn {
      visibility: hidden;

      i:nth-child(1) {
        color: #409EFF;
      }

      i:nth-child(2) {
        color: #67C23A;
      }

      i:nth-child(3) {
        color: #F56C6C;
      }
    }

    .el-tree-node__content {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #333;
      /*margin-right: 20px;*/
    }

    .authManagement .wrap-box {
      padding: 32px 32px 15px;
    }

    .editorTreeContent i:before {
      font-size: 18px;
      //color: #409eff;
    }

    .el-icon-caret-right:before {
      font-size: 18px;
    }

    .treeCtrlBtn {
      margin-left: 5px;
    }

    .treeShowLabel {
      display: inline-block
    }

    .treeCtrlBtn i {
      margin-right: 3px;
      margin-top: 12px;
    }

    .treeCtrlBtn i:before {
      font-size: 15px;
    }

    .el-tree-node:focus > .el-tree-node__content {
      background: #F5F7FA;
    }

    .el-tree-node__expand-icon {
      margin-right: 5px
    }

    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      //color: #4D95FD;
      @include setThemeColorBase("color", 0);
      font-weight: bold;
    }
  }

  /**
   * EditableTreeItem
   */
  .editorTreeComponent {
    .editorTreeContent {
      display: none;
    }

    .el-input {
      display: inline-block;
      height: 20px;
      margin: 3px 0 0 0;

      input.el-input__inner {
        display: inline-block;
        height: 30px;
        margin: 3px 0 -5px -10px;
        padding: 0 0 0 9px;
        line-height: 40px;
      }

    }
  }
  .editorTreeItem {

    .editorTreeContent {
      display: block;
    }

    .el-input {
      display: none
    }
  }

  /**
   * FormFieldset
   */
  .mta-formFieldset {
    display: block;

    fieldset {
      padding: 10px;
    }

    .qx_box {
      width: 60px;
      float: left;
      margin-right: 10px;
    }

    .bt_legend {
      //font-size: 16px;
    }

    .group_box {
      margin-left: 70px;
    }

    .el-checkbox {
      margin-bottom: 8px;
    }

    .bt_legend i {
      width: 4px;
      height: 11px;
      //background: #2196f5;
      display: block;
      margin-right: 10px;
      float: left;
      margin-top: 4px;
    }

    .re_fieldset {
      border: 0;
    }

  }
  /**
   * PageLayout
   */
  .mta-PageLayout {
    display: flex;
    flex-direction: column;

    .el-breadcrumb {
      margin-bottom: 16px;
    }
  }

  /**
   * PaperPreview
   */
  .mta-paper-preview {
    width: 100%;
    overflow: auto;

    .title-h3 {
      text-align: center;
      @include setFontBase(10);
      font-weight: bolder;
      margin: 40px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }
    //新增响应式
    @media screen and (max-width: 1600px){
      .title-h3{margin: 20px 0;@include setFontBase(4);}
    }
    @media screen and (max-width: 1440px){
      .title-h3{margin: 10px 0;@include setFontBase(-2);}

    }
  }

 /**
  * SelectInpitTree
  */
  .selectInput {
    width: 100%;
    position: relative;

    .el-input__icon.el-icon-arrow-up.is-reverse {
      transform: rotate(180deg);
    }

    .show-Tree {
      min-width: 100%;
    }

    .tree-wrap-box {
      position: absolute;
      z-index: 99;
      margin: 5px 0;
      overflow: auto;
      background-color: #FFF;
      border-radius: 4px;
      box-sizing: border-box;

      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    }

    .filter-tree {
      max-height: 250px;
      padding: 10px 10px;
    }

    .isReverse {
      -webkit-transform: rotateZ(-180deg);
      transform: rotateZ(-180deg);
    }
  }

  /**
   * SystemThemeConfig
   */
  .config-dialog-body {
    > div {
      margin-bottom: 10px;
    }
  }

  /**
   * AddUserImport
   */
  .mta-role-import {
    .mta-role-import-wrap {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: row;
      height: 492px;

      .mta-ur-table {
        background: #FFF;
        border-radius: 8px;
        flex: 3;
        margin-left: 10px;
        border: 1px solid #CCC;
        padding: 20px 30px;
        display: flex;
        flex-direction: column;
        overflow: auto;

        .mta-UE-first-row {
          .el-col {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
          }
        }
      }
    }

    .editableTree.mta-CF-wrap-tree {
      flex: 1;
      padding: 20px 10px;
      background-color: #FFF;
      border-radius: 8px;
      min-width: 130px;
      max-width: 200px;
      overflow: auto;
      border: 1px solid #CCC;
      max-height: 477px;
    }
    @media screen and (max-width: 1600px){
      .mta-role-import-wrap{
        height: 450px;
        .mta-ur-table{
          padding: 20px;
        }
      }
    }
    @media screen and (max-width: 1440px){
      .mta-role-import-wrap{
        height: 435px;
        .mta-ur-table{
          padding: 15px;
        }
      }
      .editableTree.mta-CF-wrap-tree{
        padding: 15px 10px;
        min-width: 120px;
        max-width: 170px;
      }
    }
  }

  /**
   * import
   */
  .mta-import {
    .import-head {
      text-align: center;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      flex-direction: row;
      .downloadTem {
        display: inline-block;
        text-align: center;


        .img-box{
          width: 100px;
          height: 100px;
          display: block;
          margin-bottom: 10px;
        }
      }
      .import-jt,.import-jt-narrow{
        height: 100px;
        line-height: 100px;
        width: 140px;
        display: inline-block;
        margin-top: 26px;
        >span{
          width: 30px;
          height: 30px;
          display: block;
          //background: url("~@/assets/images/default/"+"import-arrow.png");
          background-size: cover;
          margin:  15px 55px;
        }
      }
      .import-jt-narrow{ width: 100px;}

      .wordChenked {
        width: 100px;
        height: 100px;
        display: inline-block;
        background:url("~@/assets/images/default/"+"import-word.png");
        margin-right: 40px;
        margin-bottom: 10px;
      }

      .wordUnChenked {
        width: 100px;
        height: 100px;
        display: inline-block;
        background:url("~@/assets/images/default/"+"import-unWord.jpg");
        margin-right: 40px;
        margin-bottom: 10px;
      }

      .excelChenked {
        width: 100px;
        height: 100px;
        display: inline-block;
        background:url("~@/assets/images/default/"+"import-excel.png");
        margin-bottom: 10px;
      }

      .excelUnChenked {
        width: 100px;
        height: 100px;
        display: inline-block;
        background:url("~@/assets/images/default/"+"import-unExcel.png");
        margin-bottom: 10px;
      }
      .testChenked{
        width: 100px;
        height: 100px;
        display: inline-block;
        background:url("~@/assets/images/default/"+"import-test.png");
        margin-bottom: 10px;
      }
    }
    .drjg-box{
      background-color: #F2F2F2;
      padding: 10px 20px;
      text-align: center;
      >span{
        border-bottom: 2px solid;
        @include setThemeColorBase("border-color", 1);
      }
      >div{
        text-align: left;
        div{
          margin: 12px 0;
        }
      }
      .successSpan{
        display: inline-block;
        margin-left: 36px;
      }
      .errorSpan{
        float: right;
        margin-right: 36px;
        display: inline-block;
      }

    }
    //排重后注释
    .pc-item .item-note{margin-left: 5px;}
    @media screen and (max-width: 1600px){
      //图片下边距
      .import-head {
        margin-bottom: 15px;
      }
      //箭头
      .import-jt{
        margin-top: 10px;
      }
      //排重后注释
      .pc-item{
        margin-bottom: 10px;
        .item-note{display: block;margin-left: 0;}
        .el-select{width: 100%;}
      }
    }
    @media screen and (max-width: 1440px){
      //图片下边距
      .import-head {
        margin-bottom: 10px;
        @include setFontBase(-7);
        .downloadTem {
          .img-box{
            width: 80px;
            height: 80px;
            margin-bottom: 5px;
            img{
              max-width: 100%;
            }
          }
        }
        //箭头
        .import-jt{
          margin-top: 0;
          > span {
            margin: 30px 55px;
          }
        }
        .import-jt-narrow > span {
          margin: 30px 40px;
        }
        .wordChenked,.wordUnChenked,.excelChenked,.excelUnChenked,.testChenked{
          width: 80px;
          height: 80px;
          margin-bottom: 5px;
          background-size: cover;
        }
      }
      .drjg-box{@include setFontBase(-7);}
      //排重后注释
      .el-form-item.pc-item{
        margin-bottom: 0;
        .item-note{@include setFontBase(-7);}
      }
    }
  }

  /**
   * videoBanner/dialogGuideContent
   */
  .dialogGuideContent {
    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      padding: 0;
    }
  }

  /**
   * videoBanner/index
   */
  .mta-Aliplay {
    width: 100%;
    text-align: center;
    margin: 0 auto;

    .el-carousel {
      width: 100%;
    }

    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      /*background-color: #99A9BF;*/
    }

    .el-carousel__item:nth-child(2n+1) {
      /*background-color: #D3DCE6;*/
    }

    .mta-img {
      /*width: 100%;*/

    }

    .mta-carousel-body {
      text-align: center;

      h1 {
        margin: 30px 0 0 0
      }

      p {
        margin-top: 5px
      }
    }
  }

  /**
   * QuickEntry
   */
  .Quick-Entry {
    margin: 26px 0 26px 10px;

    &-main {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .box-card {

        margin-right: 30px;
        padding-bottom: 10px;
        cursor: pointer;
        flex: 1;
        position: relative;

        h3 {
          text-align: center;
          margin: 5px 0 5px;
          color: #fff;
        }

        p {
          margin: 15px 0 5px;
          color: #fff;
        }

        &.first {
          background-color: red;
        }

        &.two {
          background-color: orange;
        }

        &.three {
          background-color: green;
        }

        &.four {
          background-color: #2c98f2;
        }

        .icon-editor {
          position: absolute;
          bottom: 10px;
          right: 26px;
          cursor: pointer;

          .el-icon-edit-outline {
            color: #fff;
            font-size: 26px;
          }
        }

        &:last-child {
          margin: 0;
        }
      }
    }

    .d-wrap {
      height: 400px;
      overflow-y: auto;
      margin-right: -20px;

      .d-content {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-right: 30px;

        .d-box-card {
          min-width: 200px;
          cursor: pointer;
          max-width: 230px;
          margin-bottom: 20px;
          flex: 1;
          margin-right: 30px;
        }
      }
    }


  }

  /**
   * RecentTest
   */
  //IE/360浏览器兼容 author: TX date:2019-09-04
  .recent-test {
    margin: 26px 10px;

    &-boxs {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      .box-card {
        margin-right: 30px;
        min-height: 266px;
        flex: 1;
        max-width: 370px;
        cursor: pointer;

        p {
          &.ks-status {

            &.signUp {
              color: orange;
            }
          }

          &.ks-note {
            text-align: right;

            span {
              color: red;
            }
          }
        }

        &:nth-last-child(1) {
          margin: 0;
        }

        &.only {
          max-width: 250px;

          .examImage {
            height: 230px;
            margin: 0 auto;
          }
        }

      }
    }

  }


  .statistical-analysis {
    margin: 26px 0 26px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-height: 360px;
    //修改样式 author: TX date:2019-09-04
    .box-left {
      margin-left: 10px;
      width: 330px;
      margin-right: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 20px;


     /* &-top {
        flex: 1;

        h3 {

        }

        p {
          display: flex;
          justify-content: space-between;
          flex-direction: row;
        }


      }*/

      .el-pagination {
        text-align: center;

        button {
          background-color: rgba(0, 0, 0, 0)
        }
      }

    }

    .box-right {
      flex: 1;
      /*background: #2c98f2;*/
      display: flex;
      flex-direction: row;
      justify-content: center;

      .fra-charts {
        width: 100%;
        height: 100%;
      }
    }

    .box-card.only {
      max-width: 300px;

      .examImage {
        height: 240px;
        margin: 0 auto;
      }
    }
    .box-left {

      .el-pagination {
        text-align: center;

        width: 100%;

        button {
          background-color: rgba(0, 0, 0, 0)
        }

        li {
          background-color: rgba(0, 0, 0, 0)
        }
      }
    }
  }

  /**
   * Header
   */
  .mta-aframe-header {
    .nc-container {
      width: 100%;
      margin: 0 0 20px 100px;

      > div {
        width: auto !important;
      }

    }
  }
  .header-li-button__QrCodeData {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    text-align: center;
    padding: 16px;
    max-width: 300px;
    flex-wrap: wrap;

    > div {
      width: 130px;

      &:nth-child(3) {
        margin-top: 10px
      }
      &:nth-child(4) {
        margin-top: 10px
      }
      h3 {
        //color: #333;
        margin: 0;
      }

      img {
        width: 100%;
      }
    }
  }
  .header-help-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  ul.userControl {
    text-align: center;

    > li {
      text-align: center;
      .el-icon-key,.el-icon-s-order,.el-icon-phone,.el-icon-location,.el-icon-setting,span{
        @include setThemeColorBase('color', 1);
      }
    }
  }

  /**
   * QuillEditor
   */
  .editor {
    line-height: normal !important;
  }

  .ql-editor {
    min-height: 200px;
  }

  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right:  0px;
    content:       '保存';
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }


  /**
   * transform
   */
  .enterActive, .leaveActive {
    transition: all .3s ease;
  }

  .enterTo, .leave {
    opacity: 1;
  }

  .enter, .leaveTo {
    opacity: 0;
  }
  /*简单题上传下载样式*/
  .ShortAnswer-yl-btn{
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    @media screen and (max-width: 1440px){
      height: 36px;
      line-height: 36px;
      vertical-align: bottom;
      span{font-size: 13px;}
    }
  }
  .ShortAnswer-image-btn{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    >img{
      opacity: 0;
    }
  }
  .ShortAnswer-fj-dialog{
    .el-dialog__header{text-align: center}
    .el-dialog__body{
      padding: 30px 20px;
    }
    .fj-box{
      display: inline-block;
      padding: 5px;
      >div{
        margin:0 10px;
        text-decoration: underline;
        color: #1577c7;
      }
    }
  }
  .ShortAnswer-btn-box{
    margin-bottom: 10px;
  }
  //人工评卷-添加附件
  .ImageDownloadPreviewSlot {


    .my-image-Preview {
      height: 40px;
      width: 40px;
      border-radius: 5px;
    }

    .myDownloadBtn {
      @include setThemeColorBase("color", 0);
    }
    .el-icon-download:before{
      font-size: 20px;
    }
  }
  //课件管理--阿里云上传
  .aliUpload-container {
    .upload {
      position: relative;
      > div {
        .upload-box {
          display: inline-block;
          vertical-align: bottom;
          .el-upload-list__item{
            height: 39px;
            line-height: 39px;
            .el-icon-close{top:13px;}
          }
        }

        //进度条
        > div.aly-progressbar {
          margin-top: 20px;
          margin-bottom: 0;
          width: 65%;
          display: inline-block;
        }
      }
      //.el-upload-list{display: flex}
    }
    .aliUpload-note-word{
      width: 20px;
      height: 20px;
      background-image: url("../../../assets/images/icons/note-word.svg");
      position: absolute;
      left: 130px;
      top: 10px;
      background-position: center;
      background-repeat: no-repeat;
    }
    .status {
      display: inline-block;
      margin-left: 40px;
      height: 39px;
      line-height: 39px;
    }
    //文件名
    .el-upload-list__item-name{
      max-width:300px;
      margin-right: 0;
    }
    @media screen and (max-width: 1440px) {
      .upload > div > div.aly-progressbar {
        width: 60%;
      }
      .el-upload-list__item{
        height: 36px;
        line-height: 36px;
      }
      .status {
        height: 36px;
        line-height: 36px;
      }
    }
  }

  //图片尺寸
  .picture-size-h5{
    @include setFontBase(-5);
    color: #666;
    margin: 0;
    margin-top: 6px;
    @media screen and (max-width: 1440px){
      @include setFontBase(-6);
    }
  }
  //a端导航
  .a-breadcrumb-box {
    font-size: 14px;
    .st-breadcrumb{
      display: flex;
      a:last-child{
        .breadcrumb-div::after{
          display: none;
        }
      }
    }
    .breadcrumb-icon-box{
      width: 14px;
      height: 14px;
      background-image: url("../../../assets/images/icons/breadcrumb-icon-home.svg");
      margin-right: 8px;
    }
    .st-breadcrumb-item {
      font-size: 14px;
      float: left;
      color: #666;
      text-decoration: none;
    }
    .el-breadcrumb__inner.is-link{
      color: #333;
    }
    .el-breadcrumb__inner.is-link:hover{
      @include setThemeColorBase("color",1);
    }
    .breadcrumb-div{
      display: flex;
    }
    .breadcrumb-div::after {
      content: ' ';
      width: 7px;
      height: 16px;
      display: inline-block;
      background-image: url("../../../assets/images/icons/breadcrumb-icon.svg");
      padding: 0 8px;
      background-repeat: no-repeat;
      background-position: center;
    }

    .st-breadcrumb-item:hover {
      @include setThemeColorBase("color",1);
      cursor: pointer;
    }

    .st-breadcrumb-item-last {
      float: left;
      text-decoration: none;
      color: #333;
    }
    .el-breadcrumb .el-breadcrumb__item:last-child .is-link{
      @include setThemeColorBase("color",1);
      font-weight: bold;
    }
    .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner{
      @include setThemeColorBase("color",1);
      font-weight: bold;
    }
    @media screen and (max-width: 1440px) {
      font-size: 13px;
      .st-breadcrumb-item {
        font-size: 13px;
      }
      .breadcrumb-div::after {
        height: 14px;
      }
    }
  }

  //资源库上传按钮
  #global-uploader {

    .uploader-app {
      width: 520px;
      //状态栏
      .uploader-status-box{
        display: flex;
        margin-top: 10px;
        .status{
          height: 39px;
          line-height: 39px;
          }
      }
      //文件名称栏
      .file-name-box{
        //width: 250px;
        height: 39px;
        line-height: 39px;
        padding: 0 5px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        transition: all .5s;

        .el-icon-close:before{
          content: "\E6DB";
          opacity: 0;
        }
        span{
          padding: 0 10px;
          /*overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 220px;
          display: inline-block;*/
        }
      }
      .file-name-box:hover{
        background-color: #F5F7FA;
        cursor: default;
        .el-icon-close:before{
          opacity: 1;
        }
      }
    }


    //文件列表---- 已隐藏
    .file-panel {
      background-color: #FFF;
      border: 1px solid #E2E2E2;
      border-radius: 7px 7px 0 0;
      box-shadow: 0 0 10px rgba(0, 0, 0, .2);

      .file-title {
        display: flex;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        border-bottom: 1px solid #DDD;

        .operate {
          flex: 1;
          text-align: right;
        }
      }

      .file-list {
        position: relative;
        height: 240px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #FFF;

        > li {
          background-color: #FFF;
        }
      }

      &.collapse {
        .file-title {
          background-color: #E7ECF2;
        }
      }
    }

    .no-file {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
    }

    /deep/ .uploader-file-icon {
      &:before {
        content: '' !important;
      }

  /*    &[icon=image] {
        background: url(./images/image-icon.png);
      }

      &[icon=video] {
        background: url(./images/video-icon.png);
      }

      &[icon=document] {
        background: url(./images/text-icon.png);
      }*/
    }

    /deep/ .uploader-file-actions > span {
      margin-right: 6px;
    }
    .uploader-btn{
      width: 100px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      @include setThemeColorBase("background", 0);
      padding: 0;
      text-align: center;
      border-radius: 4px;
      border: 0;
    }
    .uploader-btn:hover {
      @include setThemeColorBase("background", -2);
    }
    .aliUpload-note-word{
      top:10px;
      left: 110px;
    }
  }

  //c端首页轮播
  .c-carousel-box{
    width: 100%;
    height: 400px;
    position: relative;
    .el-carousel__item{
      img{
        width: 100%;
        min-height: 400px;
        display: block;
        margin: 0 auto;
      }
    }
    .c-user-box-wrap{
      width: 1340px;
      height: 400px;
      margin: 0 auto;
      margin-top: -400px;
      position: relative;
      z-index: 9;
    }
    .c-index-user-box{
      width: 214px;
      height: 300px;
      padding: 24px;
      position: absolute;
      top: 26px;
      z-index: 10;
      right: 32px;
      background: #FFF;
      border-radius: 8px;

      img{
        width: 72px;
        height: 72px;
        border-radius: 50%;
        display: block;
        margin: 8px auto 0;
      }
      p{
        margin: 8px 0;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p:hover{
        cursor: default;
      }
      span{
        height: 20px;
        line-height: 20px;
        @include setFontBase(-5,true);
        color: rgba(0,0,0,0.85);
        letter-spacing: 0;
        span{
          color: rgba(0,0,0,0.64);
        }
      }
    }
    .el-carousel__container{
      height: 400px;
    }
    @media screen and (max-width: 1600px) {
    }
    @media screen and (max-width: 1440px) {
      .c-index-user-box{
        span{
          @include setFontBase(-6,true);
        }
      }
    }
  }

  //进度条box样式
  .upload-type{
    button{
      background: transparent;
      border: 0;
      width: 18px;
      height: 18px;
      margin-right: 16px;
      display: inline-block;
      background-size: cover;
      vertical-align: middle;
    }
    button:hover{cursor: pointer}
    //按钮
    .start-btn{
      //background-image: url("../../images/icons/kj-upload.svg");
      display: none;
    }
    .pause-btn{
      background-image: url("../../../assets/images/icons/kj-pause.svg");
    }
    .upload-btn{
      background-image: url("../../../assets/images/icons/kj-upload.svg");
    }
    //按钮置灰
    button[disabled] {
      background: transparent;
      border: 0;
    }
    //
    button:focus{outline: none;}
    button[disabled].start-btn{
      //background-image: url("../../images/icons/kj-upload-disabled.svg");
      display: none;
    }
    button[disabled].pause-btn{
      background-image: url("../../../assets/images/icons/kj-pause-disabled.svg");
    }
    button[disabled].upload-btn{
      background-image: url("../../../assets/images/icons/kj-upload-disabled.svg");
    }
    .progress{display: block}
    @media screen and (max-width: 1600px) {
      button{
        margin-right: 10px;
      }
    }
    @media screen and (max-width: 1440px) {
      button{
        margin-right: 8px;
      }
    }
  }

  //上传进度条
  .a-uploader-progressbar {
    margin-top: 10px;
    margin-bottom: 0;
    width: 65%;
    display: inline-block;
  }

  //注释
  .aliUpload-note-word{
    width: 20px;
    height: 20px;
    background-image: url("../../../assets/images/icons/note-word.svg");
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
  }
}
