.page-selection_file {
  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(100%);
  }
  .list-leave-active {
    position: absolute;
  }

  .preview-list {
    display: flex;
    flex-wrap: wrap;
    padding: 1em 0 0 1em;
    position: relative;
    & > .item {
      width: 12.5%;
      padding-right: 1em;
      margin-bottom: 1em;
      list-style: none;
      transition: all 1s;
      .inner {
        width: 100%;
      }
      .preview {
        display: block;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border: 1px solid #ddd;
        border-radius: 3px;
      }
      .name {
        display: block;
        width: 100%;
        line-height: 1.8em;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      /* demo3 */
      .actions {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 48px;
      }
      &.add-btn {
        .mdc-file {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          border: 1px solid #ddd;
          border-radius: 3px;
          cursor: pointer;
          background-color: #fff;
        }
        .add-icon {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-size: 48px;
        }
      }
    }
  }

  @media (max-width: 640px) {
    .preview-list > .item {
      width: 33.333%;
    }
  }
}
