.catalog-wrap{
  width:300px;
  min-width: 300px;
  margin-right: 30px;
  padding:20px;
  position: relative;
  .btn-box{
    display: flex;
    justify-content: space-between;
  }
  .select-wrap{
    margin-top:20px;
    .el-select{
      width:100%;
    }
  }
  .catalog-list-wrap{
    margin-top:20px;
    height: calc(100vh - 320px);
    overflow-y: scroll;
    &::-webkit-scrollbar-track{
      display: none;
    }
  }
  .catalog-tool{
    margin-top:20px;
    color: #409eff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .add-catalog{
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .total-text{
      color:#999999;
    }
  }
  .move-btn {
    height: 100%;
    width: 4px;
    position: absolute;
    right: 0px;
    top: 0;
    &:hover {
      cursor: col-resize;
    }
  }
}
.detail-wrap{
  flex: 1;
  //max-width: calc(100% - 300px - 30px);
  //background-color: rgb(247, 226, 199);
  background-color: transparent;
  padding: 0;
  .detail-list,.detail-file{
    min-width: 976px;
    height: calc(100vh - 120px);
  }
  .detail-list{
    overflow-y: scroll;
    position: relative;
    .drag-cont {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .list-item{
      width: 30%;
      background-color: white;
      border: 1px solid #ECECEC;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      margin: 0 20px 20px 0;
      padding:10px;
      transition: box-shadow .3s;
      cursor: pointer;
      &:hover{
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      }
      .item-title{
        width:100%;
        height:20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        font-size: 16px;
        span{
          flex:1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        img{
          cursor: pointer;
        }
      }
      .item-image{
        margin:10px 0;
        width:100%;
        /* aspect-ratio:10/7; */
        height: 0;
        padding-bottom: 70%;
        background-color: pink;
        position:relative;
        background: no-repeat center/cover url('~@/assets/img/document_m/default-img.png');
        span{
          display: inline-block;
          width: 100%;
          text-align: center;
          position:absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
          font-size: 24px;
          color: #FFFFFF;
          font-weight: bold;
        }
      }
      .item-info{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .detail-file{
    display: flex;
    flex-direction: column;
    .file-info,.file-content{
      width:100%; 
      background-color: #fff;
      border-radius: 4px;
    }
    .file-info{
      height:100px;
      ul{
        flex: 1;
        display: flex;
        /* margin-right:50px; */
        li{
          &.name{
            flex: 1;
            width:400px;
            min-width:400px;
          }
          min-width:200px;
          margin-right: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis
        }
      }
    }
    .file-content{
      margin-top:20px;
      flex: 1;
      overflow-y: scroll;
    }
  }
  .empty{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
  }
}