<template>
  <div class="banner" v-if="list.length > 0">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <LayoutLink :href="item.url" :report="{PAGE_URL, ...item.reportParams}">
          <ImageFormat :data-secc="item.src" :lazy="false" :src="item.src" :alt="item.alt" :width="item.width || 750" :height="item.height || 160" />
        </LayoutLink>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'banner',
  props: {
    list: {
      type: Array,
      default: true,
    },
    PAGE_URL: {
      type: String,
    }
  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;

  img {
    width: 100%;
    display: block;
  }
}
</style>