You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-pc/pages/index/module/Banner.vue

116 lines
2.5 KiB

<!--
* @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>