Mamalizz
69 lines
2.5 KiB
Vue
69 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
|
// state
|
|
const quantity = ref(1);
|
|
const maxQuantity = ref(10);
|
|
|
|
const selectedSlide = ref(0);
|
|
const slides = [
|
|
{
|
|
id: 0,
|
|
picture: "/img/product-1.jpg",
|
|
},
|
|
{
|
|
id: 1,
|
|
picture: "/img/product-2.jpg",
|
|
},
|
|
{
|
|
id: 2,
|
|
picture: "/img/product-3.jpg",
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-12 container pt-[5rem]">
|
|
<Slider
|
|
class="flex-1"
|
|
v-model:selectedSlide="selectedSlide"
|
|
:slides="slides"
|
|
/>
|
|
<div class="flex-1 flex flex-col gap-3 mt-12">
|
|
<span class="typo-label-sm"> سامسونگ </span>
|
|
<h1 class="typo-h-2">موبایل Nova</h1>
|
|
<div class="flex w-full items-center justify-between">
|
|
<span class="typo-p-2xl"> $689.00 </span>
|
|
<Rating />
|
|
</div>
|
|
<p class="typo-p-md text-slate-500 text-justify">
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
|
|
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
|
|
در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
|
|
نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
|
|
کتابهای زیادی در شصت و سه درصد گذشته.
|
|
</p>
|
|
<div class="w-full flex flex-col gap-6 mt-4">
|
|
<RemainQuantity
|
|
:maxQuantity="maxQuantity"
|
|
:quantity="quantity"
|
|
/>
|
|
<div class="w-full flex gap-3 flex-col">
|
|
<div class="w-full flex gap-3">
|
|
<Button class="w-full rounded-full" end-icon="ci:plus">
|
|
افزودن به سبد خرید
|
|
</Button>
|
|
<QuantityCounter
|
|
v-model="quantity"
|
|
:max="maxQuantity"
|
|
/>
|
|
</div>
|
|
<Button class="w-full rounded-full" variant="outlined">
|
|
همین الان بخر
|
|
</Button>
|
|
</div>
|
|
<InfoCard />
|
|
<Share />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|