<template>
  <div class="banner">
    <div v-for="(item, index) in banners" :key="index" class="banner-item">
      <cr-image width="100%" :src="item.img" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    banners: {
      type: Array,
      default: () => []
    }
  }
};
</script>
<style lang="less" scoped>
.banner {
  @{deep} .cr-image {
    display: block;
  }
  &-item {
    padding: 0 @padding-sm; //  @padding-sm @padding-sm;
    box-sizing: border-box;
    margin-bottom: @padding-sm;
  }
}
</style>
