cfd-adi-web/src/views/index/home/index.vue

/*home*/
<template>
  <div ref="home" class="home">
    <el-carousel
      :height="height"
      :trigger="trigger"
      :interval="interval"
      :indicator-position="indicator"
      :arrow="arrow"
      :autoplay="autoplay"
      :loop="true"
      :direction="direction"
    >
      <el-carousel-item v-for="(item, index) in bannerList" :key="index">
        <img class="banner" :src="item.url" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      bannerList: [
        { url: require('../../../assets/banner/banner1.png') },
        { url: require('../../../assets/banner/banner1.png') },
        { url: require('../../../assets/banner/banner1.png') },
      ],
      height: '500px',
      trigger: 'click', // indicator的触发方式click/hover
      interval: 5000, // 自动切换的时间间隔，单位为毫秒
      indicator: 'none', // indicator的位置outside/none
      arrow: 'never', // 切换箭头的显示时机always/hover/never
      autoplay: false, // 是否自动切换true/false
      direction: 'horizontal', // 展示的方向horizontal/vertical
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        if (route.query && route.query.type == 'reLogin') {
          this.toLogin()
        }
      },
      immediate: true,
    },
  },
  inject: ['toLogin'],
  created() {
    let messageBoxArr = document.getElementsByClassName(
      'el-message-box__wrapper'
    ) //获取页面所有已经存在的messageBox
    if (messageBoxArr.length > 0) {
      this.$msgbox.close() //关闭messageBox弹框
    }
  },
  mounted() {
    let _this = this
    if (_this.$route.path.indexOf('/indexLayout/home') != -1) {
      _this.setHeight()
      window.addEventListener('resize', function () {
        _this.setHeight()
      })
    }
  },
  methods: {
    // setHeight() {
    //   console.log(this.$refs.home.clientWidth)
    //    this.height = (720 / 1920) * this.$refs.home.clientWidth + 'px'
    // },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.home {
  // @include w_h(100%, 100%);
  @include w_h(100%);
  font-size: 12px;
  color: $color_b;
  background: #181818;

  .banner {
    @include w_h(100%);
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.home {
  .el-carousel__container {
    @include w_h(100%);
    .el-carousel__item {
      @include w_h(100%);
    }
  }
  .el-carousel--horizontal {
    overflow: hidden;
  }
  .el-carousel__arrow {
    background: rgba(31, 45, 61, 0.4);
    &:hover {
      background: rgba(31, 45, 61, 0.8);
    }
  }
}
</style>