// 导入视图样式
.app-data-upload-view{
  display: flex;
  flex-direction: column;
  .main-content{
    height: calc(100% - 68px);
    background: #FAFAFB;
    border-radius: 4px;
    border: 1px dashed #D7D7D7;
    margin-top: 10px;
    // 上传文件区域
    .upload-container{
      cursor: pointer;
      height: 100%;
      width: 100%;
      text-align: center; 
      padding-top: 58px;
      .icon-import{
        display: block;
        margin: 0 auto 17px;
      }
      .select-file-text{
        height: 17px;
        font-size: 12px;
        color: #565656;
        line-height: 17px;
      }
    }
    // 信息展示容器
    .data-info-container{
      padding: 8px 10px 6px;
      height: 100%;
      width: 100%;
      // 进度条
      .progress{
        margin-bottom: 6px ;
        .el-progress-bar__outer{
          background-color: #FFFFFF;
        }
        .el-progress-bar__inner{
          background-color: #D7E9FF;
        }
      }
      .message-container{
        height: calc(100% - 26px);
        display: flex;
        justify-content: space-between;
        ul li{
          list-style-type: none;
          padding-left: 20px;
        }
        .result-list{
          height: 100%;
          width: 100%;
          overflow: auto;
        }
        //成功信息区
        .result-list{
          ul .success-item{
            background: url("~@/assets/img/icon-success.svg") no-repeat 5px 5px;
            background-size: 10px 10px;
          }
        }
        //错误信息区
        .result-list{
          ul .error-item{
            background: url("~@/assets/img/icon-error.svg") no-repeat 5px 5px;
            background-size: 10px 10px;
          }
        }

      }
    }
  }
  // 下载模板区
  .second-content{
    padding: 16px 12px 0;
    margin-bottom: 30px;
    .import-template-message{
      font-size: 12px;
      height: 17px;
      color: #565656;
      line-height: 17px;
    }
    .import-template{
      .icon-link{
        width: 12px;
        margin-bottom: -1px;
        margin-right: 3px;
      }
      height: 17px;
      font-size: 12px;
      color: #57A3FD;
      line-height: 17px;
    }
  }
  // 底部按钮
  .button-container{
    text-align: right;
    margin: 15px;
    height: 28px;
    .el-button{
      margin: 0 0 0 8px;
      padding: 3px 15px;
      font-size: 12px;
      line-height: 20px;
    }
    .primary-button{
      color: #FFFFFF;
      background-color: #57A3FD;
      border-color: #57A3FD;
      &:hover{
        background: #66b1ff;
        border-color: #66b1ff;
      }
      &:disabled{
        color: var(--button-font-color-light);
        border-color: var(--button-font-color-light);
        background-color: var(--button-background-color-light);
      }
    }
  }
}

//模态样式
.view-default.app-data-upload-modal{
  .app-data-upload-view{
    width: 100%;
    height: 100%;
    padding: 0 20px 24px 20px;
  }
  .ivu-modal-content .ivu-modal-body{
    height: calc(100% - 58px);
  }
  // 模态标题
  .ivu-modal-header{
    padding: 16px;
    border: 0;
    .ivu-modal-header-inner{
      color: #333333;
      font-weight: 600;
      height: 24px;
      line-height: 24px;
    }
  }
  // 关闭图标
  .ivu-modal-close .ivu-icon-ios-close{
    color: #999999;
    font-weight: 600;
  }
}