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.
78 lines
1.9 KiB
78 lines
1.9 KiB
<template>
|
|
<section
|
|
:class="['tw-relative tw-mt-[48px] xl:tw-max-w-[1246px] xl:tw-mx-auto']"
|
|
>
|
|
<div
|
|
class="swiper-container perColumn xl:tw-max-w-[1106px] xl:tw-mx-auto xl:tw-px-[22px]"
|
|
ref="perColumn"
|
|
@mouseenter="enter"
|
|
@mouseleave="leave"
|
|
>
|
|
<div :class="['swiper-wrapper']">
|
|
<div
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
:class="['swiper-slide']"
|
|
>
|
|
<div class="tw-rounded-[24px]">
|
|
<lazyImg
|
|
:src="item.image"
|
|
:customClass="'swiper-lazy tw-rounded-[24px]'"
|
|
></lazyImg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import Swiper from "swiper/bundle";
|
|
import lazyImg from "@/components/img/img.vue";
|
|
export default {
|
|
components: {
|
|
Swiper,
|
|
lazyImg,
|
|
},
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
perColumn: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
let vm = this;
|
|
vm.$nextTick(function () {
|
|
vm.perColumn = new Swiper(".swiper-container.perColumn", {
|
|
direction: "horizontal",
|
|
initialSlide: 0,
|
|
slidesPerView: "auto",
|
|
observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
|
observeParents: true, //修改swiper的父元素时，自动初始化swiper
|
|
spaceBetween: 32,
|
|
lazy: {
|
|
loadPrevNext: true,
|
|
loadOnTransitionStart: true,
|
|
loadPrevNextAmount: 2,
|
|
},
|
|
breakpoints: {
|
|
1366: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 24,
|
|
grabCursor: true,
|
|
},
|
|
},
|
|
});
|
|
});
|
|
},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.swiper-container {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|