82 lines
2.4 KiB
Vue
82 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { Splide, SplideSlide } from '@splidejs/vue-splide'
|
|
import {
|
|
hasComponentGroup,
|
|
getComponentGroup,
|
|
getComponentGroupAry,
|
|
} from '#layers/utils/dataUtil'
|
|
|
|
interface Props {
|
|
components: Record<string, any>
|
|
pageVerTmplSeq: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const splideOptions = computed(() => {
|
|
return {
|
|
type: 'fade',
|
|
rewind: true,
|
|
speed: 600,
|
|
updateOnMove: true,
|
|
arrows: true,
|
|
pagination: true,
|
|
classes: {
|
|
arrows: 'splide-arrows type-full',
|
|
arrow: 'splide-arrow',
|
|
prev: 'arrow-prev',
|
|
next: 'arrow-next',
|
|
pagination: 'splide-pagination-bullets type-full',
|
|
page: 'splide-pagination-bullet',
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative h-[640px] md:h-[1000px]">
|
|
<Splide :options="splideOptions" class="h-full">
|
|
<SplideSlide
|
|
v-for="group in props.components.group_sets"
|
|
:key="group.set_order"
|
|
class="bg-black"
|
|
>
|
|
<WidgetsBackground
|
|
v-if="hasComponentGroup(group, 'background')"
|
|
:resources-data="getComponentGroup(group, 'background')"
|
|
/>
|
|
<div
|
|
class="relative h-full flex flex-col items-center justify-center gap-[14px] text-center md:gap-5"
|
|
>
|
|
<WidgetsSubTitle
|
|
v-if="hasComponentGroup(group, 'subTitle')"
|
|
:resources-data="getComponentGroup(group, 'subTitle')"
|
|
class="line-clamp-2 text-[16px] font-[500] leading-[24px] md:line-clamp-1 md:text-[24px] md:leading-[34px]"
|
|
/>
|
|
<WidgetsMainTitle
|
|
v-if="hasComponentGroup(group, 'mainTitle')"
|
|
:resources-data="getComponentGroup(group, 'mainTitle')"
|
|
class="line-clamp-3 text-[24px] font-[700] leading-[34px] md:text-[50px] md:leading-[70px]"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="hasComponentGroup(group, 'description')"
|
|
:resources-data="getComponentGroup(group, 'description')"
|
|
class="line-clamp-3 text-[15px] font-[400] leading-[24px] md:text-[20px] md:leading-[30px]"
|
|
/>
|
|
<WidgetsButtonList
|
|
v-if="hasComponentGroup(group, 'buttonList')"
|
|
:groups-data="getComponentGroupAry(group, 'buttonList')"
|
|
/>
|
|
</div>
|
|
</SplideSlide>
|
|
</Splide>
|
|
<div class="slide-pagination position-absolute" />
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.splide:deep(.splide__track) {
|
|
@apply h-full;
|
|
}
|
|
</style>
|