36 lines
814 B
Vue
36 lines
814 B
Vue
<template>
|
|
<div
|
|
class="absolute inset-0 overflow-hidden bg-slate-900"
|
|
:style="containerStyle"
|
|
>
|
|
<ClientOnly>
|
|
<DotLottieVue
|
|
src="/animations/supply-chain.lottie"
|
|
autoplay
|
|
loop
|
|
:layout="{ fit: 'cover', align: [0.5, 0.5] }"
|
|
class="absolute inset-0 h-full w-full"
|
|
/>
|
|
</ClientOnly>
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-b from-slate-900/45 via-slate-900/35 to-slate-900/65" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
height?: number
|
|
fill?: boolean
|
|
}>(), {
|
|
height: 860,
|
|
fill: false
|
|
})
|
|
|
|
const containerStyle = computed(() => {
|
|
if (props.fill) return undefined
|
|
return { height: `${props.height ?? 860}px` }
|
|
})
|
|
</script>
|