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.
107 lines
2.2 KiB
107 lines
2.2 KiB
<template>
|
|
<section :class="[
|
|
'swiper-container stickyBar tw-w-full tw-bg-white tw-shadow-[0_1px_2px_rgba(0,0,0,0.1)] md:tw-px-[16px] xl:tw-hidden',
|
|
fixBar
|
|
? 'tw-fixed tw-left-0 tw-top-[64px] tw-z-[8] md:tw-top-[72px]'
|
|
: 'tw-hidden',
|
|
]">
|
|
<div :class="[
|
|
'tw-w-full tw-flex swiper-wrapper tw-px-[25px] tw-py-[12px] md:tw-mx-[40px] md:tw-px-[12px]',
|
|
]">
|
|
<template v-for="(item, index) in list">
|
|
<a :key="index" v-if="item.show" :class="[
|
|
'swiper-slide crollactive-item tw-body-3 tw-w-fit tw-text-base-tertiary',
|
|
step == item.id ? 'active tw-text-primary-1' : 'tw-text-black',
|
|
]" href="#" v-scroll-to="{
|
|
el: `#${item.id}`,
|
|
offset: -140,
|
|
}" @click="activeStep(item.id)">{{ $t(item.title) }}</a></template>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import Swiper from "swiper/bundle";
|
|
export default {
|
|
components: {
|
|
Swiper,
|
|
},
|
|
props: {
|
|
fixBar: {
|
|
type: Boolean,
|
|
},
|
|
currStep: {
|
|
type: String,
|
|
},
|
|
list: {
|
|
type: Array,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
stickySwiper: null,
|
|
step: '',
|
|
click: false,
|
|
};
|
|
},
|
|
watch: {
|
|
currStep: {
|
|
handler: function () {
|
|
if (!this.click) {
|
|
this.step = this.currStep;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
let vm = this;
|
|
vm.$nextTick(function () {
|
|
vm.stickySwiper = new Swiper(".swiper-container.stickyBar", {
|
|
observer: true,
|
|
observeParents: true,
|
|
slidesPerView: 3,
|
|
breakpoints: {
|
|
// when window width is >= 768px
|
|
768: {
|
|
slidesPerView: 5,
|
|
},
|
|
},
|
|
});
|
|
vm.stickySwiper.init();
|
|
vm.stickySwiper.update();
|
|
});
|
|
},
|
|
methods: {
|
|
slideTo(index) {
|
|
if (!this.click) {
|
|
this.stickySwiper.slideTo(index);
|
|
}
|
|
},
|
|
activeStep(id) {
|
|
this.click = true;
|
|
this.step = id;
|
|
setTimeout(() => {
|
|
this.click = false;
|
|
}, 300)
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.swiper-slide {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.active {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: -12px;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: #f48800;
|
|
}
|
|
}
|
|
</style>
|