@cmstops/pro-compo/es/resourceModal/style/MainContent.less

[物料平台文档中心](https://arco.design/docs/material/guide)

.simple-resources {
  .arco-scrollbar {
    height: 100%;

    .dialog-media-selection-scroll {
      height: 100%;
      overflow: auto;

      .file-wrap {
        .folder-list {
          display: flex;
          flex-wrap: wrap;
          padding-left: 20px;

          .folder-item {
            width: 20%;
            cursor: pointer;

            .wrap {
              margin: 0 20px 10px 0;
              background: #fff;
              border: 1px solid #ebeef5;
              border-radius: 4px;

              &:hover,
              &.active {
                background: #ecf2ff;

                .thumb {
                  border-color: #4886ff;
                  transition: ease-out 0.3s;
                }

                h4 {
                  color: #1a67d2;
                }
              }

              .thumb {
                height: 46px;
                overflow: hidden;
                font-size: 0;
                background: url('../assets/selection/folder.png') no-repeat 13px
                  center;
                background-size: 17px auto;
                border: solid 1px transparent;
                border-radius: 4px;
              }

              h4 {
                margin: 0;
                padding-left: 43px;
                overflow: hidden;
                color: #000;
                font-weight: normal;
                font-size: 14px;
                line-height: 42px;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-wrap: normal;
                opacity: 0.85;
              }
            }
          }

          .folder-more-button {
            width: 20%;
            overflow: hidden;

            .folder-more-wrap {
              box-sizing: border-box;
              height: 52px;
              margin-right: 20px;
              padding: 14px 16px;
              line-height: 24px;
              background: #f7f8fa;
              //border: 1px solid #ebeef5;
              border: 1px solid transparent;
              border-radius: 4px;

              &:hover {
                color: #165dff;
                background: #f2f3f5;
                border: 1px solid #4886ff;
                box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
                cursor: pointer;
              }
            }
          }
        }

        .file-list {
          display: flex;
          flex-wrap: wrap;
          padding-left: 20px;

          .item {
            position: relative;
            width: 20%;
            overflow: hidden;
            cursor: pointer;

            .move-action {
              opacity: 0.5;
            }

            .shadow-wrap {
              position: relative;
              margin: 0 20px 18px 0;
              overflow: hidden;
              background: #fff;
              border: 1px solid #ebeef5;
              border-radius: 4px;

              &:hover {
                border: 1px solid #4886ff;
                box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);

                h4 {
                  //color: #1a67d2;
                }
              }

              .transcoding-in-progress {
                position: absolute;
                top: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                color: floralwhite;
                background: rgba(0, 0, 0, 0.3);
              }

              .thumb-wrap {
                position: relative;
                width: 100%;
                background: url('../assets/selection/picBg.png');
              }

              h4,
              p {
                margin-top: 4px;
                margin-bottom: 2px;
                padding: 0 10px;
                overflow: hidden;
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-wrap: normal;

                i,
                svg {
                  margin-right: 4px;
                  color: #e75258;
                  font-size: 16px;
                  vertical-align: middle;
                }

                svg {
                  margin-right: 4px;
                  font-size: 16px;
                  vertical-align: middle;
                }

                span {
                  vertical-align: middle;
                }
              }

              p {
                margin-bottom: 4px;
                font-weight: normal;
                font-size: 12px;
                line-height: 1em;
                opacity: 0.65;
              }
            }
          }

          &::after {
            height: 50px;
          }
        }

        .load_more_title {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 40px;

          .loadmore_tips,
          .nomore_tips {
            color: #949494;
          }
        }

        .null-file {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -70%);

          .null-pic {
            display: block;
            width: 30%;
            margin: 20px auto;
          }

          p {
            color: #a2a3a7;
            font-size: 14px;
            text-align: center;
          }
        }
      }
    }
  }
}