<!--
  @description: 首页-轮播图
  @Modifier：杨胜国
  @routerPath:shopHomeBanner
  @date：  2021/05/17-18:00
-->
<template>
  <!--banner-->
  <div class="shop_container">
    <section class="banner">
      <el-carousel :autoplay="true" height="400px">
        <el-carousel-item v-for="(item,index) in bannerList" :key="index">
          <img :src="item.picture" alt @click="toDetail(item)">
        </el-carousel-item>
      </el-carousel>
    </section>
  </div>
</template>

<script>
export default {
  name: 'ShopHomeBanner',
  components: {
  },
  props: {
    bannerList: { // bannerLIst
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    toDetail() {}
  }
}
</script>

<style scoped lang="less">
.shop_container{
  width: 1250px;
  margin: 10px auto 0;
}
// banner
.banner {
  margin-left: 240px;
  position: relative;
  .el-carousel {
    .el-carousel__container {
      .el-carousel__item {
        img {
          width: 100%;
          height: 400px;
        }
      }
    }
  }
}
</style>
