67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import type { ListOperateGroupItem } from '#layers/types/api/resourcesData'
|
|
import type { SlideItemSize } from '#layers/types/components/slide'
|
|
|
|
interface BannerListProps {
|
|
slideItemList: ListOperateGroupItem[]
|
|
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"
|
|
:arrows="true"
|
|
:pagination="false"
|
|
class="mt-[36px] md:mt-[60px]"
|
|
>
|
|
<SplideSlide
|
|
v-for="(item, index) in props.slideItemList"
|
|
:key="index"
|
|
class="splide-slide"
|
|
>
|
|
<BlocksCardNews
|
|
:title="item.title"
|
|
:description="item.option01"
|
|
:img-path="getResolvedHost(item.img_path)"
|
|
:url="item.url"
|
|
:link-target="item.link_target"
|
|
class="news-center-highlight"
|
|
/>
|
|
</SplideSlide>
|
|
</BlocksSlideCenterHighlight>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.center-highlight:deep(.splide__slide.is-active .news-center-highlight) {
|
|
width: var(--banner-width-mo-active);
|
|
height: var(--banner-height-mo-active);
|
|
}
|
|
.news-center-highlight {
|
|
width: var(--banner-width-mo);
|
|
height: var(--banner-height-mo);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* PC 스타일 */
|
|
@media (min-width: 1024px) {
|
|
.center-highlight:deep(.splide__slide.is-active .news-center-highlight) {
|
|
width: var(--banner-width-pc-active);
|
|
height: var(--banner-height-pc-active);
|
|
}
|
|
.news-center-highlight {
|
|
width: var(--banner-width-pc);
|
|
height: var(--banner-height-pc);
|
|
}
|
|
}
|
|
</style>
|