marzban-dev
49 lines
2.1 KiB
Vue
49 lines
2.1 KiB
Vue
<script lang="ts" setup>
|
|
// import
|
|
|
|
import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
|
|
|
|
// provide / inject
|
|
|
|
const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
|
|
</script>
|
|
|
|
<template>
|
|
<section class="w-full container py-20 flex flex-col gap-y-[1.5rem]">
|
|
<div class="w-full flex">
|
|
<span class="text-black max-lg:hidden typo-h-4 mb-4"> جزئيات محصول </span>
|
|
</div>
|
|
<div class="w-full flex items-start justify-between gap-[3rem] max-lg:flex-col-reverse">
|
|
<div class="flex-1 w-full">
|
|
<Accordion />
|
|
</div>
|
|
<div class="w-full lg:w-[450px] xl:w-[600px]">
|
|
<div class="w-full bg-slate-50 rounded-xl flex-col-center px-5 py-16 sm:p-[5rem] gap-[1.5rem]">
|
|
<span class="typo-h-6 mb-8">داخل جعبه چیه؟</span>
|
|
<div class="w-full grid grid-cols-2 gap-y-[1.5rem] sm:gap-x-[3rem]">
|
|
<div
|
|
v-for="inPackItem in selectedVariant!.in_pack_items"
|
|
class="w-full flex-col-center gap-[.75rem]"
|
|
>
|
|
<div class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center">
|
|
<div class="size-11 relative">
|
|
<NuxtImg
|
|
class="size-full absolute object-cover"
|
|
:src="inPackItem.cover"
|
|
:alt="inPackItem.item_title"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<span class="text-black typo-p-md">
|
|
{{ inPackItem.item_title }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|