<template>
  <div class="slideshow">
    <el-carousel trigger="click" height="36.2vw" style="min-width: 1300px;">
      <el-carousel-item v-for="(item,index) in bannerData" :key="index">
        <img :src="item.img" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import {getBanner} from "@/api";

export default {
  name: "Carousel",
  data() {
    return {
      bannerData: []
    };
  },
  created() {
    getBanner().then(res => {
      this.bannerData = res.data.index_banner;
    });
  }
};
</script>
<style scoped lang="scss">
@media screen and (max-width: 1320px) {
  /deep/ .el-carousel__container {
    height: 44vh !important;
  }
}

@media screen and (max-width: 768px) {
  /deep/ .el-carousel__container {
    height: 58vh !important;
  }
}

.slideshow {
  width: 100%;
}

/*.carousel_img {*/
/*  width: 100%;*/
/*}*/
img {
  width: 100%;
}
</style>
