uk_front/components/SubNav.vue

<template>
  <section class="com-margin-auto sub-nav" :style="{ 'max-width': `${com_secondaryBannerLth * 350}px`,'grid-template-columns': `repeat(${com_secondaryBannerLth}, 1fr)` }">
      <figure v-for="item in com_secondaryBanner" :key="item.id">
        <a :href="item.link" target="_blank">
          <el-image lazy  :src="item.image" :alt="item.title" fit="cover" style="width: 100%;" :style="{ height: imageLoaded ? '100%' : '268px' }" @load="imageLoaded = true">
          </el-image>
        </a>
      </figure>
  </section>
</template>

<script>
export default {
  props:{
    secondaryBanner:[]
  },
  data(){
    return {
      imageLoaded: false,
    }
  },
  computed:{
    com_secondaryBanner(){
      return this.secondaryBanner.slice(0,4)
    },
    com_secondaryBannerLth(){
      return this.com_secondaryBanner?.length
    },
  }
};
</script>

<style lang="scss" scoped>
section{
  padding: 30px 0;
  display: grid;
  // grid-template-columns: repeat(4,1fr);
  grid-gap: 20px;
  figure{
    max-height: 268px;
    box-shadow: 2px 2px 8px rgba(0,0,0, 0.5);
  }
}
</style>