guyuan-museum-web/packages/pc/src/views/History/components/Image.vue

<template>
  <Panel title="图片">
    <ul class="image">
      <li v-for="(item, index) in VIDEOS" :key="index" class="image-item">
        <el-image :src="item.thumb" />

        <p class="limit-line">{{ item.label }}</p>
      </li>
    </ul>
  </Panel>
</template>

<script setup>
import Panel from "./Panel.vue";
import { VIDEOS } from "@guyuan/base";
</script>

<style lang="scss" scoped>
@use "@/assets/utils.scss";

.image {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: utils.vw-calc(45) utils.vw-calc(27);

  &-item {
    position: relative;
    height: utils.vw-calc(231);
    cursor: pointer;

    .el-image {
      height: 100%;
    }
    p {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0 utils.vw-calc(20);
      color: white;
      font-weight: bold;
      line-height: utils.vw-calc(31);
      font-size: utils.vw-calc(18);
      background: rgba(97, 4, 21, 0.8);
    }
  }
}
</style>