web-center/src/layout/index/lunbo.vue

<template>
  <div id="lunbo">
    <el-row>
      <el-col :span="24" style="width:540;height:304px;" v-loading="loading">
        <div class="block">
          <el-carousel height="304px">
            <el-carousel-item class="list" v-for="(item, index) in infoList" :key="index" @click.native="$turnTo(item)">
              <el-image style="width:540px;height:304px;" :src="item.pic"></el-image>
              <span class="title textOver">{{ item.title }}</span>
              <span>{{ item.url }}</span>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'lunbo',
  props: {
    carouselList: null,
  },
  components: {},
  data: () => ({
    infoList: [],
    loading: true,
  }),
  watch: {
    carouselList: {
      handler(val) {
        if (val) this.assignData(val);
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    assignData(data) {
      let columns = _.get(data, 'children');
      let news = [];
      for (const item of columns) {
        if (!this.path) this.path = item.path;
        let carouselList = _.get(item, `children`);
        if (carouselList) {
          news = news.concat(news, carouselList);
        }
      }
      this.$set(this, `infoList`, news);
      this.loading = false;
    },
    // turnTo(item) {
    //   if (item.info_type == 1) {
    //     window.location.href = item.url;
    //   } else {
    //     let route = this.$route.path;
    //     this.$router.push({ path: `/detail?id=${item.id}` });
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/.el-carousel__indicators {
  display: none;
}
.list .title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 0 10px;
  font-size: 16px;
  color: #fff;
}
.list:hover {
  cursor: pointer;
}
</style>