en-shoubo-pc/src/views/Publications/Catalogues/index.vue

<template>
  <div class="catalogues">
    <img class="catalogues__border" :src="HengImg" />

    <ul class="catalogues__list">
      <li v-for="key in 8" :key="key" class="catalogues-item">
        <ElImage
          src="https://en.capitalmuseum.org.cn/data/Publications/Exhibition/1.jpg"
        />

        <a href="" target="_blank" class="catalogues-item__ft">
          <img :src="HrefImg" />
          <span>Click here to open the catalogue</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import HengImg from "../images/heng.png";
import HrefImg from "../images/href.png";
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>