marzban-dev
42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// import
|
|
|
|
import useGetProduct from "~/composables/api/product/useGetProduct";
|
|
import type { ProductVariantProvideType } from "~/pages/product/types";
|
|
|
|
// 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"
|
|
playsinline
|
|
webkit-playsinline
|
|
muted
|
|
autoplay
|
|
loop
|
|
/>
|
|
<div class="size-full absolute inset-0 bg-black/20" />
|
|
<div class="absolute max-sm:flex items-center justify-center max-sm:px-5 sm:right-10 bottom-10 w-full">
|
|
<StickyCard
|
|
:color="selectedVariant.color!"
|
|
:price="selectedVariant.price"
|
|
:picture="selectedVariant.images[0].image"
|
|
:title="product!.name"
|
|
class="max-sm:!w-full"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|