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.
109 lines
2.9 KiB
109 lines
2.9 KiB
<template>
|
|
<section class="trending-destination-services xl:tw-max-w-full xl:tw-mx-auto">
|
|
<div class="swiper-container trendingDestinationServices" ref="trendingDestinationServices">
|
|
<div :class="['swiper-wrapper']">
|
|
<div v-for="(theme, idx) in themes" :key="idx" @mouseover="hoverCardIdx = idx"
|
|
:class="['swiper-slide tw-relative tw-h-[164px] tw-bg-cover tw-bg-no-repeat tw-rounded-[8px] tw-transition-all tw-duration-200 tw-ease-in-out md:tw-h-[224px]', hoverCardIdx == idx ? 'xl:tw-w-[28%]' : 'xl:tw-w-[16.8%]']"
|
|
:style="{ 'background-image': 'url(' + theme.image + ')' }">
|
|
<nuxt-link class="tw-block tw-w-full tw-h-full tw-text-white" :to="localePath(destinations[idx])">
|
|
<div
|
|
class="overlap tw-absolute tw-left-0 tw-bottom-0 tw-w-full tw-h-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-black tw-rounded-[8px]">
|
|
</div>
|
|
<div class="tw-absolute tw-bottom-[12px] tw-left-[12px] tw-text-white xl:t18">{{ theme.name }}</div>
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
// taipei 7
|
|
// tokyo 21
|
|
// frankfurt 76
|
|
// las vegas 57
|
|
// ho chi min 31
|
|
import Swiper from "swiper/bundle";
|
|
export default {
|
|
delimiters: ['${', '}'],
|
|
components: {
|
|
Swiper
|
|
},
|
|
props: {
|
|
themes: {
|
|
type: Array,
|
|
},
|
|
title: {
|
|
type: String,
|
|
},
|
|
},
|
|
created() {
|
|
if (this.$props.themes.length > 5) {
|
|
this.$props.themes = this.$props.themes.slice(0, 5);
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
hoverCardIdx: 0,
|
|
slide: null,
|
|
trendingDestinationServicesSwiper: null,
|
|
destinations: [
|
|
"/exhibition?city=7",
|
|
"/exhibition?city=21",
|
|
"/exhibition?city=76",
|
|
"/exhibition?city=57",
|
|
"/exhibition?city=31",
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
let vm = this;
|
|
vm.$nextTick(function () {
|
|
vm.trendingDestinationServicesSwiper = new Swiper(".swiper-container.trendingDestinationServices", {
|
|
direction: "horizontal",
|
|
initialSlide: 0,
|
|
slidesPerView: 2.2,
|
|
slidesPerGroup: 2,
|
|
observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
|
observeParents: true, //修改swiper的父元素时，自动初始化swiper
|
|
spaceBetween: 15,
|
|
preloadImages: false,
|
|
lazy: {
|
|
loadPrevNext: true,
|
|
loadOnTransitionStart: true,
|
|
loadPrevNextAmount: 3,
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 2.5,
|
|
},
|
|
1366: {
|
|
slidesPerView: 5,
|
|
allowTouchMove: false,
|
|
},
|
|
},
|
|
});
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.swiper-slide {
|
|
background-position: 50%;
|
|
}
|
|
|
|
.card-text {
|
|
position: absolute;
|
|
bottom: 0%;
|
|
left: 10%;
|
|
}
|
|
|
|
.span {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.v-slide-group__wrapper {
|
|
touch-action: auto !important;
|
|
}
|
|
</style>
|