linkmore-design/lib/lm-img-list/style/variables.less

🌈 🚀lm组件库。🚀

.lm_imglist_container {
  position: relative;
  display: grid;
  grid-template-rows: auto 98px;
  gap: var(--gap);
  width: 100%;
  height: 100%;
  user-select: none;
  .lm_imglist_banner {
    overflow: hidden;
    touch-action: none;

    // 防止图片的高度超出
    div {
      width: 100%;
      height: 100%;
    }

    .banner_item {
      overflow: hidden;
      text-align: center;
      // height: calc(100vh - 100px - 80px - 94px);
      border-radius: 2px;

      img {
        display: inline-block;
        width: 100%;
        height: 100%;
        object-fit: contain; // 大图展示全貌
        transition: 0.3s;
      }
    }
  }
  .lm_imglist_thumb {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(14, 98px);
    gap: var(--gap);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    &::-webkit-scrollbar-thumb {
      visibility: hidden;
      transition: 0.3s;
    }
    &:hover {
      &::-webkit-scrollbar-thumb {
        visibility: visible;
      }
    }

    .thumb_item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 100%;
      text-align: center;
      vertical-align: top;
      background-color: var(--color-contrast);
      border: 2px solid transparent;
      border-radius: 2px;
      transition: 0.3s;

      .thumb_item_icon {
        color: var(--color-45);
        font-size: 34px;
      }

      img {
        display: inline-block;
        width: 100%;
        height: 100%;
        object-fit: cover; // 小图占满父元素
      }

      &.active {
        border-color: var(--primary-color);
      }
    }
  }
}