marzban-dev
56 lines
2.2 KiB
Vue
56 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// state
|
|
const quantity = ref(1);
|
|
const maxQuantity = ref(10);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex gap-12">
|
|
<div class="bg-red-300 w-full h-[500px] flex-1 rounded-200">
|
|
|
|
</div>
|
|
<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">
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
|
|
متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
|
|
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته.
|
|
</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> |