<template>
  <div :class="['ad', { 'ad_one': column === 1, 'ad_two': column === 2, 'ad_three': column === 3 }]">
    <a :href="item.link" v-for="(item, index) in list" :key="index">
      <cr-image :src="item.img" height="2.61rem" width="100%"></cr-image>
    </a>
  </div>
</template>
<script>
  export default {
    props: {
      column: {
        type: Number,
        default: 2
      },
      list: {
        type: Array,
        default: () => ([])
      }
    }
  }
</script>
<style lang="less" scoped>
  .image-width(@width) {
    a {
      width: @width;
    }
  }
  .ad {
    display: flex;
    justify-content: space-between;
    margin: 0 12px;
    &_one {
      .image-width(100%);
    }

    &_two {
      .image-width(49%);
    }

    &_three {
      .image-width(32%);
    }
  }
</style>