yunkunMap/src/components/grids.vue

<template>
  <div class="container">
    <div class="carousel">
      <div @click="scroll(-1)" class="scroll-btn left">
        <i class="el-icon-arrow-left"></i>
      </div>

      <div class="items-wrapper" ref="itemsWrapper">
        <div v-for="(item, index) in items" :key="index" class="item">
          <img src="../assets/images/video.jpg" class="video-src" alt="" />
          <div class="video-data">
            <div class="video-name">视频名称</div>

            <img
              @click="dialogVisible = true"
              class="video-icon"
              src="../assets/images/zoom.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div @click="scroll(1)" class="scroll-btn right">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>

    <el-dialog
      custom-class="video-dialog"
      :visible.sync="dialogVisible"
      append-to-body
      :modal="false"
    >
      <div class="video-dialog-top">
        <div class="video-name-data">001号线_01_早送_守押001_苏E</div>
        <div class="dialog-close" @click="dialogVisible = false">
          <img src="../assets/images/dialog-close.png" alt="" />
          收起
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      items: [
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5",
        "Item 6",
        "Item 7",
        "Item 8",
        "Item 9",
        "Item 10",
      ],
    };
  },
  methods: {
    scroll(direction) {
      const itemsWrapper = this.$refs.itemsWrapper;
      if (itemsWrapper) {
        const scrollAmount = itemsWrapper.clientWidth / 5; // 每次滚动一个格子距离，这里假设每个格子宽度相同
        itemsWrapper.scrollLeft += direction * scrollAmount;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
}

.carousel {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  background-color: #fff;

  font-size: 14px;
  opacity: 0.3;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 9px 4px;
}
.scroll-btn:hover {
  opacity: 0.5;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.items-wrapper {
  width: 800px;
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth; /* 可以平滑滚动 */
}

.item {
  position: relative;
  flex: 0 0 calc(100% / 6); /* 每行显示5个格子 */
  height: 140px;
  margin-right: 10px;
  .video-src {
    display: block;
    height: 100%;
    width: 100%;
  }
  .video-data {
    position: absolute;
    bottom: 0;
    height: 32px;
    width: 100%;
    background: rgba(0, 52, 101, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    .video-name {
      font-size: 14px;
      color: #ffffff;
    }
    .video-icon {
      cursor: pointer;
      height: 14px;
      width: 14px;
      transition: transform 0.3s ease;
    }
    .video-icon:hover {
      transform: scale(1.2);
    }
  }
}

/* CSS */
.items-wrapper {
  //   overflow-y: scroll; /* 强制显示垂直滚动条 */
  scrollbar-width: thin; /* 滚动条宽度，可以是 auto, thin 或 none */
}

/* Webkit浏览器特有样式 */

.video-dialog-top {
  height: 40px;
  background: rgba(0, 52, 101, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0 10px;
  .video-name-data {
    font-size: 16px;
    color: #ffffff;
  }
  .dialog-close {
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    img {
      margin-right: 6px;
      display: inline-block;
      height: 14px;
      width: 14px;
    }
  }
}
</style>