55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
getResponsiveResolvedSrc,
|
|
getResponsiveClass,
|
|
} from "#layers/utils/dataUtil";
|
|
import type { PageDataComponent } from "#layers/types/api/pageData";
|
|
|
|
const props = defineProps<{ componentData: PageDataComponent }>();
|
|
|
|
const assetType = computed(() => {
|
|
return props.componentData?.component_type;
|
|
});
|
|
const assetPath = computed(() => {
|
|
// [TODO] 이미지 그룹 여러개 처리
|
|
// [TODO] comm 처리
|
|
return props.componentData?.resources[0]["groups"][0]?.img_path?.comm;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="absolute inset-0 w-full h-full">
|
|
<!-- 이미지 타입-->
|
|
<div
|
|
v-if="assetType === 'IMG'"
|
|
class="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat"
|
|
:class="getResponsiveClass()"
|
|
:style="getResponsiveResolvedSrc(assetPath, 'bg')"
|
|
></div>
|
|
|
|
<!-- 비디오 타입 -->
|
|
<video
|
|
v-else-if="assetType === 'VIDEO'"
|
|
class="absolute inset-0 w-full h-full object-cover"
|
|
:poster="assetPoster"
|
|
autoplay
|
|
muted
|
|
loop
|
|
playsinline
|
|
>
|
|
<source :src="assetPath" type="video/mp4" />
|
|
<source :src="assetPath" type="video/webm" />
|
|
</video>
|
|
<div
|
|
class="absolute inset-0"
|
|
style="
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(16, 13, 15, 0) 0%,
|
|
#100d0f 95%
|
|
);
|
|
"
|
|
></div>
|
|
</div>
|
|
</template>
|