Fix. GR_VISUAL 템플릿 컴포넌트 정리
This commit is contained in:
clkim
63
layers/components/blocks/CardNews.vue
Normal file
63
layers/components/blocks/CardNews.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string
|
||||
description: string | number
|
||||
imgPath: string
|
||||
linkTarget?: string
|
||||
url?: string
|
||||
class?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="props.title || props.description"
|
||||
:class="`card-news ${props.class || ''}`"
|
||||
>
|
||||
<img
|
||||
:src="props.imgPath"
|
||||
:alt="props.title"
|
||||
class="card-image"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="card-overlay">
|
||||
<h3 v-if="props.title" class="card-title">
|
||||
{{ props.title }}
|
||||
</h3>
|
||||
<p v-if="props.description" class="card-description">
|
||||
{{ props.description }}
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
v-if="props.url"
|
||||
:href="props.url"
|
||||
:target="props.linkTarget"
|
||||
class="card-link"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card-news {
|
||||
@apply overflow-hidden relative flex items-center justify-center h-full rounded-lg
|
||||
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
|
||||
after:border after:border-white/10 after:rounded-lg;
|
||||
}
|
||||
.card-image {
|
||||
@apply transition-transform duration-300 w-full h-full object-cover;
|
||||
}
|
||||
.card-overlay {
|
||||
@apply absolute bottom-0 left-0 right-0 pt-[14px] px-[18px] pb-[16px] flex flex-col justify-end border-t border-white/10 bg-black/40 shadow-[0_-10px_10px_0_rgba(0,0,0,0.25)] backdrop-blur-[25px] md:pt-[20px] md:px-[26px] md:pb-[26px];
|
||||
}
|
||||
.card-title {
|
||||
@apply text-[14px] leading-[20px] font-medium text-white md:text-lg md:leading-[26px];
|
||||
}
|
||||
.card-description {
|
||||
@apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
|
||||
}
|
||||
.card-link {
|
||||
@apply absolute top-0 left-0 w-full h-full z-[5];
|
||||
}
|
||||
</style>
|
||||
119
layers/components/blocks/slide/CenterHighlight.vue
Normal file
119
layers/components/blocks/slide/CenterHighlight.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import { Splide } from '@splidejs/vue-splide'
|
||||
import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
|
||||
import type { SlideItemSize } from '#layers/types/components/slide'
|
||||
|
||||
interface Props {
|
||||
slideItemSize: SlideItemSize
|
||||
autoplay?: boolean | string
|
||||
arrows?: boolean
|
||||
pagination?: boolean
|
||||
class?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
autoplay: false,
|
||||
arrows: true,
|
||||
pagination: true,
|
||||
})
|
||||
|
||||
const options = computed((): ResponsiveOptions => {
|
||||
return {
|
||||
type: 'loop',
|
||||
focus: 'center',
|
||||
autoWidth: true,
|
||||
autoHeight: true,
|
||||
speed: 400,
|
||||
updateOnMove: true,
|
||||
arrows: props.arrows,
|
||||
pagination: props.pagination,
|
||||
autoplay: props.autoplay,
|
||||
classes: {
|
||||
arrows: 'splide-arrows',
|
||||
arrow: 'splide-arrow',
|
||||
prev: 'arrow-prev',
|
||||
next: 'arrow-next',
|
||||
pagination: 'splide-pagination-bullets',
|
||||
page: 'splide-pagination-bullet',
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const style = computed(() => {
|
||||
if (!props.slideItemSize) return {}
|
||||
|
||||
const { mo, pc } = props.slideItemSize
|
||||
const scaleFactor = 1.1429
|
||||
|
||||
return {
|
||||
// 모바일 기본값
|
||||
'--banner-width-mo': `${mo.width}px`,
|
||||
'--banner-height-mo': `${mo.height}px`,
|
||||
'--banner-gap-mo': `${mo.gap}px`,
|
||||
// 모바일 확대값
|
||||
'--banner-width-mo-active': `${mo.width * scaleFactor}px`,
|
||||
'--banner-height-mo-active': `${mo.height * scaleFactor}px`,
|
||||
'--banner-width-mo-container': `${mo.width * scaleFactor + mo.gap}px`,
|
||||
|
||||
// PC 기본값
|
||||
'--banner-width-pc': `${pc.width}px`,
|
||||
'--banner-height-pc': `${pc.height}px`,
|
||||
'--banner-gap-pc': `${pc.gap}px`,
|
||||
// PC 확대값
|
||||
'--banner-width-pc-active': `${pc.width * scaleFactor}px`,
|
||||
'--banner-height-pc-active': `${pc.height * scaleFactor}px`,
|
||||
'--banner-width-pc-container': `${pc.width * scaleFactor + pc.gap * 4}px`,
|
||||
// PC arrow값
|
||||
'--banner-arrow-pc': `${(pc.width * scaleFactor) / 2 + (pc.gap * 3) / 2}px`,
|
||||
}
|
||||
})
|
||||
|
||||
const handleSplideMounted = (splide: SplideType) => {
|
||||
splide.refresh()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`center-highlight ${props.class || ''}`" :style="style">
|
||||
<Splide :options="options" @splide:mounted="handleSplideMounted">
|
||||
<slot />
|
||||
</Splide>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.center-highlight {
|
||||
@apply w-full;
|
||||
}
|
||||
.center-highlight:deep(.splide__slide) {
|
||||
@apply flex items-center justify-center;
|
||||
width: var(--banner-width-mo);
|
||||
height: var(--banner-height-mo-active);
|
||||
margin-right: var(--banner-gap-mo);
|
||||
}
|
||||
.center-highlight:deep(.splide__slide.is-active) {
|
||||
width: var(--banner-width-mo-container);
|
||||
}
|
||||
|
||||
/* PC 스타일 */
|
||||
@media (min-width: 1024px) {
|
||||
.center-highlight:deep(.splide__slide) {
|
||||
width: var(--banner-width-pc);
|
||||
height: var(--banner-height-pc-active);
|
||||
margin-right: var(--banner-gap-pc);
|
||||
}
|
||||
.center-highlight:deep(.splide__slide.is-active) {
|
||||
width: var(--banner-width-pc-container);
|
||||
}
|
||||
.center-highlight:deep(.splide-arrow) {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.center-highlight:deep(.arrow-prev) {
|
||||
margin-left: calc(-1 * var(--banner-arrow-pc));
|
||||
}
|
||||
.center-highlight:deep(.arrow-next) {
|
||||
margin-left: var(--banner-arrow-pc);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
52
layers/components/blocks/slide/Fade.vue
Normal file
52
layers/components/blocks/slide/Fade.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import { Splide } from '@splidejs/vue-splide'
|
||||
import type { ResponsiveOptions } from '@splidejs/splide'
|
||||
|
||||
interface Props {
|
||||
autoplay?: boolean | string
|
||||
arrows?: boolean
|
||||
pagination?: boolean
|
||||
class?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
autoplay: false,
|
||||
arrows: true,
|
||||
pagination: true,
|
||||
})
|
||||
|
||||
// 페이드 슬라이드 옵션
|
||||
const fadeOptions = computed((): ResponsiveOptions => {
|
||||
return {
|
||||
type: 'fade',
|
||||
rewind: true,
|
||||
perPage: 1,
|
||||
perMove: 1,
|
||||
speed: 600,
|
||||
updateOnMove: true,
|
||||
autoplay: props.autoplay,
|
||||
arrows: props.arrows,
|
||||
pagination: props.pagination,
|
||||
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>
|
||||
<Splide :options="fadeOptions" class="h-full">
|
||||
<slot />
|
||||
</Splide>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.splide:deep(.splide__track) {
|
||||
@apply h-full;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user