<template>
  <div class="slider-bar">
    <div class="inner">
      <div class="block">
        <span class="demonstration"></span>
        <el-carousel height="150px">
          <el-carousel-item v-for="(item, index) in componentData.imgList"
                            :key="item.id">
            <img class="item-img"
                 :src="item.src"
                 alt="" />
            <h3 class="small text-center">第{{ index }}张</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @author: 过飞
 * @createData: 2020年09月14日 18:15:33
 * @version：v1.0
 *
 * @desc: 功能描述
 */
export default {
  name: '',

  components: {},

  mixins: [],

  props: {
    componentData: {
      type: Object,
      defautl: () => ({}),
      required: true
    }
  },

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() { },

  mounted() { },

  methods: {}
}
</script>
<style lang="scss" scoped>
.slider-bar {
  .inner {
    &::v-deep .el-carousel--horizontal {
      overflow-y: hidden;
    }
    &::v-deep .el-carousel__container {
      height: auto;
      padding-top: 41.66%;
    }
    &::v-deep .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }

    &::v-deep .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    &::v-deep .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
    .item-img {
      width: 100%;
    }
  }
}
</style>
