shop-pc/pages/index/module/Banner.vue

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:50:33
 * @LastEditors: ch
 * @LastEditTime: 2022-05-04 22:15:26
 * @Description: file content
-->

<template>
  <div class="home-banner">
    <el-carousel height="360px" indicator-position="outside">
      <el-carousel-item>
        <el-image
          @click="onAdvBannerClick(0)"
          :src="adv1"
          fit="cover"
        ></el-image>
      </el-carousel-item>
      <el-carousel-item>
        <el-image
          @click="onAdvBannerClick(1)"
          :src="adv2"
          fit="cover"
        ></el-image>
      </el-carousel-item>

      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <el-image
          @click="onBannerClick(item.id)"
          :src="item.url"
          fit="cover"
        ></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  name: "HomtBanner",
  data() {
    return {
      adv1: require("~/assets/img/banner/zbk.jpg"),
      adv2: require("~/assets/img/banner/jlp.jpg"),
      bannerList: [
        {
          url: require(`~/assets/img/banner/1.jpg`),
          id: 13,
        },
        {
          url: require(`~/assets/img/banner/2.jpg`),
          id: 30,
        },
        {
          url: require(`~/assets/img/banner/3.jpg`),
          id: 15,
        },
        {
          url: require(`~/assets/img/banner/4.jpg`),
          id: 40,
        },
      ],
    };
  },
  methods: {
    onAdvBannerClick(i) {
      if (i === 1) {
        window.open(`https://www.mashibing.com/live/1530`);
      } else if (i === 2) {
        window.open(`https://www.mashibing.com/free/1373`);
      }
    },
    onBannerClick(goodsId) {
      window.open(`${location.origin}/goods/detail/${goodsId}`);
    },
    onAdvBannerClick(i) {
      if (i === 0) {
        window.open(`https://www.mashibing.com/live/1530`);
      } else if (i === 1) {
        window.open(`https://www.mashibing.com/free/1373`);
      }
    },

  },
};
</script>
<style lang="scss" scoped>
.home-banner {
  @include layout-box;
  /deep/.el-carousel {
    .el-carousel__container {
      i {
        font-size: 18px;
      }
    }
    .el-carousel__arrow {
      width: 45px;
      height: 45px;
    }
    .el-carousel__indicators {
      display: none;
    }
    .el-carousel__arrow--left {
      left: calc(50% - 550px) !important;
    }
    .el-carousel__arrow--right {
      right: calc(50% - 550px) !important;
    }
    .el-image {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}
</style>