48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import type { OperateGroupItem } from '#layers/types/api/resourcesData'
|
|
import type { SlideItemSize } from '#layers/types/components/slide'
|
|
|
|
interface BannerListProps {
|
|
resourcesData: OperateGroupItem[]
|
|
slideItemSize: SlideItemSize
|
|
arrows?: boolean
|
|
pagination?: boolean
|
|
class?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<BannerListProps>(), {
|
|
arrows: true,
|
|
pagination: true,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<BlocksSlideCenterHighlight
|
|
:slide-item-size="props.slideItemSize"
|
|
:slide-item-length="props.resourcesData.length"
|
|
:pagination="false"
|
|
class="mt-[36px] md:mt-[60px]"
|
|
>
|
|
<SplideSlide v-for="(item, index) in props.resourcesData" :key="index">
|
|
<BlocksCardNews
|
|
:title="item.title"
|
|
:description="item.option01"
|
|
:img-path="getResolvedHost(item.img_path)"
|
|
:url="item.url"
|
|
:link-target="item.link_target"
|
|
class="slide-inner"
|
|
/>
|
|
</SplideSlide>
|
|
</BlocksSlideCenterHighlight>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.center-highlight:deep(.splide__slide.is-active .card-link) {
|
|
pointer-events: auto;
|
|
}
|
|
.center-highlight:deep(.splide__slide .card-link) {
|
|
pointer-events: none;
|
|
}
|
|
</style>
|