marzban-dev
38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// import
|
|
|
|
import useGetProduct from "~/composables/api/product/useGetProduct";
|
|
import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
|
|
|
|
// state
|
|
|
|
const route = useRoute();
|
|
const id = route.params.id as string | undefined;
|
|
|
|
const { data: product } = useGetProduct(id);
|
|
|
|
const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="selectedVariant?.video" class="h-[110svh] w-full relative bg-black mt-[5rem]">
|
|
<video
|
|
:src="selectedVariant.video"
|
|
class="object-cover absolute size-full"
|
|
muted
|
|
autoplay
|
|
loop
|
|
/>
|
|
<div class="size-full absolute inset-0 bg-black/20" />
|
|
<StickyCard
|
|
:color="selectedVariant.color!"
|
|
:price="selectedVariant.price"
|
|
:picture="selectedVariant.images[0].image"
|
|
:title="product!.name"
|
|
class="absolute right-10 bottom-10"
|
|
/>
|
|
</section>
|
|
</template>
|