102 lines
2.9 KiB
Vue
102 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import { EffectFade, Navigation, Pagination } from 'swiper/modules'
|
|
import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'
|
|
|
|
interface Props {
|
|
components: Record<string, any>
|
|
pageVerTmplSeq: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const arrow = computed(() => {
|
|
return props.components.arrow.groups
|
|
})
|
|
|
|
const modules = [EffectFade, Navigation, Pagination]
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative h-[640px] md:h-[1000px]">
|
|
<Swiper
|
|
:modules="modules"
|
|
:loop="true"
|
|
effect="fade"
|
|
:pagination="
|
|
{
|
|
el: '.slide-pagination',
|
|
clickable: true,
|
|
} as any
|
|
"
|
|
:navigation="
|
|
{
|
|
nextEl: '.slide-next',
|
|
prevEl: '.slide-prev',
|
|
} as any
|
|
"
|
|
class="h-full"
|
|
>
|
|
<SwiperSlide
|
|
v-for="group in props.components.group_sets"
|
|
:key="group.set_order"
|
|
class="bg-black"
|
|
>
|
|
<WidgetsBackground
|
|
v-if="group?.background.groups"
|
|
:resources-data="group.background.groups[0]"
|
|
/>
|
|
<div
|
|
class="relative h-full flex flex-col items-center justify-center gap-[14px] text-center md:gap-5"
|
|
>
|
|
<WidgetsSubTitle
|
|
v-if="group.subTitle && group.subTitle.groups"
|
|
:resources-data="group.subTitle.groups[0]"
|
|
class="line-clamp-2 text-[16px] font-[500] leading-[24px] md:line-clamp-1 md:text-[24px] md:leading-[34px]"
|
|
/>
|
|
<WidgetsMainTitle
|
|
v-if="group.mainTitle && group.mainTitle.groups"
|
|
:resources-data="group.mainTitle.groups[0]"
|
|
class="line-clamp-3 text-[24px] font-[700] leading-[34px] md:text-[50px] md:leading-[70px]"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="group.description && group.description.groups"
|
|
:resources-data="group.description.groups[0]"
|
|
class="line-clamp-3 text-[15px] font-[400] leading-[24px] md:text-[20px] md:leading-[30px]"
|
|
/>
|
|
<WidgetsButtonList
|
|
v-if="group.buttonList && group.buttonList.groups"
|
|
:groups-data="group.buttonList.groups"
|
|
/>
|
|
</div>
|
|
</SwiperSlide>
|
|
|
|
<div class="slide-pagination" />
|
|
|
|
<!-- Navigation buttons -->
|
|
<div
|
|
class="slide-prev hidden md:block"
|
|
:class="getResponsiveClass()"
|
|
:style="
|
|
getResponsiveSrc(arrow[0].res_path, {
|
|
resourcesType: 'bg',
|
|
})
|
|
"
|
|
>
|
|
<span class="sr-only">prev</span>
|
|
</div>
|
|
<div
|
|
class="slide-next hidden md:block"
|
|
:class="getResponsiveClass()"
|
|
:style="
|
|
getResponsiveSrc(arrow[1].res_path, {
|
|
resourcesType: 'bg',
|
|
})
|
|
"
|
|
>
|
|
<span class="sr-only">next</span>
|
|
</div>
|
|
</Swiper>
|
|
</section>
|
|
</template>
|