根据数据中配置的样式字段，展示每条数据项中的不同样式

根据对象数组中配置的 width、height、top、left 等去加载每条数据中的配置项展示出来.

简单示例：Carousel 走马灯示例

<template>
  <div style="height: 100%; overflow: hidden">
    <el-carousel :interval="5000" arrow="never" class="fade-carousel">
      <el-carousel-item v-for="(listData, ind) in infoData" :key="ind">
        <div v-for="(item, index) in listData.list" :key="index">
          <div
            v-if="item.imgUrl"
            class="content"
            :style="`width:${item.width}px;height:${item.height}px;margin-left:${item.left}px;margin-top:${item.top}px;`"
          >
            <div class="top-content" :style="`width:${item.width}px;height:${item.imgheight}px;`">
              <img class="infoImg" :src="item.imgUrl" />
            </div>
            <div class="bottom-content">{{ item.title }}</div>
          </div>
          <div
            v-else
            class="content"
            :style="`width:${item.width}px;height:${item.height}px;margin-left:${item.left}px;margin-top:${item.top}px;`"
          >
            <div class="bottom-content">{{ item.title }}</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    infoData: {
      type: Array,
      default: () => [
        {
          list: [
            {
              title: "挡水电站组并网发电",
              imgUrl: "",
              width: "150",
              height: "60",
              top: "115",
              left: "10",
            },
            {
              title: "投入总额100亿元",
              imgUrl: "",
              width: "150",
              height: "60",
              top: "67",
              left: "-88",
            },
            {
              title: "简称平台6个",
              imgUrl:
                "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
              top: "33",
              left: "10",
            },
            { title: "收入占比30%", imgUrl: "", top: "60", left: "10" },
            {
              title: "列车试验成功",
              imgUrl:
                "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
              top: "30",
              left: "10",
            },
            { title: "4亿千瓦", imgUrl: "", top: "100", left: "10" },
            { title: "发电量1.2亿吨", imgUrl: "", top: "80", left: "20" },
            {
              title: "全国最大",
              imgUrl:
                "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
              top: "60",
              left: "20",
            },
            {
              title: "完成率100%",
              imgUrl: "",
              top: "80",
              left: "20",
            },
          ],
        },
        {
          list: [
            {
              title: "139名工匠",
              imgUrl: "",
              width: "150",
              height: "60",
              top: "115",
              left: "10",
            },
            {
              title: "计划项目15项",
              imgUrl: "",
              width: "150",
              height: "60",
              top: "10",
              left: "-95",
            },
            { title: "8名首席科学家", imgUrl: "", top: "60", left: "-60" },
            {
              title: "规模最大",
              imgUrl:
                "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
              width: "200",
              height: "150",
              imgheight: "100",
              top: "33",
              left: "10",
            },
            {
              title: "成功",
              imgUrl:
                "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
              top: "30",
              left: "10",
            },
            { title: "容量4亿千瓦", imgUrl: "", top: "100", left: "10" },
            { title: "发电量", imgUrl: "", top: "80", left: "10" },
            {
              title: "储能电站",
              imgUrl:
                "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
              top: "60",
              left: "10",
            },
            {
              title: "契约化完成率",
              imgUrl: "",
              top: "80",
              left: "10",
            },
          ],
        },
        {
          list: [
            {
              title: "并网发电",
              imgUrl: "",
              top: "115",
              left: "10",
            },
            {
              title: "100亿元",
              imgUrl: "",
              top: "100",
              left: "10",
            },
            {
              title: "简称6个",
              imgUrl:
                "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
              top: "33",
              left: "10",
            },
            { title: "产业收入", imgUrl: "", top: "60", left: "10" },
            {
              title: "载重最大",
              imgUrl:
                "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
              top: "30",
              left: "10",
            },
            { title: "装机容量", imgUrl: "", top: "100", left: "10" },
            { title: "发电量", imgUrl: "", top: "80", left: "10" },
            {
              title: "最大型",
              imgUrl:
                "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
              top: "60",
              left: "10",
            },
            {
              title: "完成率100%",
              imgUrl: "",
              top: "80",
              left: "10",
            },
          ],
        }
      ],
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.fade-carousel {
  height: 200px;
}
::v-deep .el-carousel__container {
  height: 200px;
}
.fade-carousel .el-carousel__item {
  display: flex;
  .content {
    width: 150px;
    max-height: 180px;
    overflow: hidden;
    .top-content {
      width: 150px;
      height: 80px;
      .infoImg {
        width: 100%;
        height: 100%;
      }
    }
    .bottom-content {
      width: 100%;
      color: rgb(50, 233, 233);
      font-size: 18px;
      padding: 10px;
    }
  }
}
.el-carousel__item:nth-child(2n) {
  background-color: #26292e;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #041222;
}
// 隐藏指示器
::v-deep .el-carousel__indicators {
  display: none;
}
</style>