<template>
  <div class="banner" v-if="list.length > 0">
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="jump(item)">
        <ImageFormat :data-secc="item.src" :lazy="false" :src="item.src" :alt="item.alt" :width="item.width || 750" :height="item.height || 160" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'banner',
  props: {
    list: {
      type: Array,
      default: true,
    },
  },
  methods: {
    jump(item) {
      const { src, url } = item;
      console.log(src);
      console.log(url);
    }
  }
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  ul {
    li {
      img {
        max-width: 100%;
        display: block;
      }
    }
  }
}
</style>