@import "../base/fonts";
/**
 * @Time 2019/11/18
 * @Author Tx
 * @Description 证书模块-页面样式
 */
@mixin setStyleAframeCert($project) {
  /****** 个人证书 ****/
  .mta-CertUser {}

  /****** 创建证书 ****/
  .mta-certificate-add {
    //返回按钮
    .mta-head-area {
      display: flex;
      flex-direction: row;

      .head-area-item {
        flex-grow: 0.5
      }
      .text-a-r {
        text-align: right;
      }
    }
    div{
      @include setFontBase(-6);
    }
    display: flex;
    flex-direction: column;
    height: 100%;
    .container{
      height: calc(100% - 80px);
      background: #FFF;
      flex: 1;
      border-radius: 8px;
      padding: 30px 30px 15px;
      display: flex;
      flex-direction: column;

        &-left{
          width: 900px;
        }
        &-right{
          width: calc(100% - 1000px);
          padding: 30px;
          .fl-box{
            width:400px;
            height: 500px;
            margin: 0 auto
          }
        }
    }


    .stbox-column {
      display: flex;
      flex-direction: column;
    }

    .stbox-row {
      display: flex;
      flex-direction: row;
      /*水平居中*/
      justify-content: left;
      /*垂直居中*/
      align-items: center;
    }

    .cs-icon {
      padding: 2px 2px 2px 2px;
      width: 30px;
      height: 30px;
    }

    .st-swatches-picker {
      position: absolute;
      z-index: 9999;
    }
    @media screen and (max-width: 1600px){
      //主题区域边距
      .container{
        padding: 20px 20px 15px;
        &-left{
          width: 710px;
        }
        &-right{
          width: calc(100% - 770px);
        }
      }
      //上边距
      .mt-15{
        margin-top: 0;
        .canvas-container,.cert-canvas{
          width: 700px!important;
        }
      }
      .mt-30{
        margin-top: 20px;
      }
    }
    @media screen and (max-width: 1440px){
      div{
        @include setFontBase(-7);
      }
      .el-form-item__error{@include setFontBase(-8);padding-top: 2px;}
      //主题区域边距
      .container{
        padding: 15px;
        &-left{
          width: 640px;
        }
        &-right{
          width: calc(100% - 700px);
          padding: 0 30px;
        }
        .addCertWrap{
          .el-form-item{
             margin-bottom: 14px;
            .el-form-item__label{
              line-height: 36px;
              @include setFontBase(-7);
            }
            .el-input{
              .el-input__inner{
                height: 36px;
                line-height: 36px;
                @include setFontBase(-7);
              }
            }
          }
        }
      }
      //上边距
      .mt-15{
        .canvas-container,.cert-canvas{
          width: 650px!important;
        }
      }
      .mt-30{margin-top: 10px;}
      //新增高度响应式
      @media screen and (max-height: 800px){
        .mt-15{
          margin-top: 0;
          .canvas-container,.cert-canvas{
            height: 560px!important;
          }
        }
      }
      @media screen and (max-height: 700px){
        //主题区域边距
        .container{
          &-right{
            .fl-box{
              height: 395px;
            }
          }
          //证书描述下边距
          .addCertWrap .intro-el-row .el-form-item{
            margin-bottom: 10px;
          }
        }
        .mt-15{
          .canvas-container,.cert-canvas{
            height: 430px!important;
          }
        }
        //信息框下边距
        .information-box{
          .el-collapse-item__content{
            padding-bottom: 5px;
          }
        }

      }
    }

  }

  /****** 证书库 ****/
  .mta-CertificateManagement {

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

      .el-form-item {
        margin-right: 20px;
      }

      .el-date-editor {
        width: 100%;
      }
    }
  }
}
