fixed merge
This commit is contained in:
Mamalizz
@@ -9,12 +9,12 @@
|
||||
<Icon name="ci:check" class="size-4 **:stroke-white"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="typo-label-sm whitespace-nowrap">Pick up from Store</span>
|
||||
<span class="typo-p-sm whitespace-nowrap">Usually ready in 2 hours</span>
|
||||
<span class="typo-label-sm whitespace-nowrap">دریافت حضوری فروشگاه</span>
|
||||
<span class="typo-p-sm whitespace-nowrap">معمولا طی ۲ ساعت اماده میشود</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="typo-p-xs">
|
||||
Check availability at other stores
|
||||
برسی موجودی در فروشگاه های دیگر
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -4,9 +4,6 @@
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="typo-p-sm">
|
||||
5.0
|
||||
</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<Icon
|
||||
name="ci:star-solid"
|
||||
@@ -29,5 +26,8 @@
|
||||
class="size-4.5 **:fill-yellow-500"
|
||||
/>
|
||||
</div>
|
||||
<span class="typo-p-sm">
|
||||
5.0
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -3,6 +3,7 @@
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
maxQuantity: number;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
@@ -13,16 +14,19 @@ defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 w-full items-end">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<p class="typo-p-sm text-slate-500">
|
||||
Hurry, only
|
||||
سریع باش فقط
|
||||
<span class="text-black">
|
||||
{{ quantity }}
|
||||
{{ maxQuantity }}
|
||||
</span>
|
||||
items left in stock
|
||||
عدد از این محصول باقی مانده
|
||||
</p>
|
||||
<div class="h-2 rounded-full relative bg-slate-200 w-full">
|
||||
<div class="w-[85%] h-full absolute left-0 rounded-full bg-black" />
|
||||
<div
|
||||
:style="{ width: `${quantity * (100 / maxQuantity)}%` }"
|
||||
class="h-full absolute right-0 rounded-full bg-black transition-all ease-out"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="typo-p-md text-black">
|
||||
Share:
|
||||
اشتراک گذاری:
|
||||
</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<NuxtLink>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
selectedSlide: number;
|
||||
slides: {
|
||||
id: number;
|
||||
picture: string;
|
||||
}[]
|
||||
}
|
||||
|
||||
// props
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const { slides, selectedSlide } = toRefs(props);
|
||||
|
||||
// emit
|
||||
const emit = defineEmits(["update:selectedSlide"]);
|
||||
|
||||
// computed
|
||||
|
||||
const selectedSlideDetail = computed(() => {
|
||||
return slides.value.find((item) => {
|
||||
return item.id === selectedSlide.value;
|
||||
})!;
|
||||
});
|
||||
|
||||
// method
|
||||
|
||||
const changeSlide = (id: number) => {
|
||||
emit("update:selectedSlide", id);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col relative gap-4">
|
||||
<div class="bg-red-300 w-full relative aspect-square overflow-hidden rounded-200">
|
||||
<img
|
||||
class="size-full absolute object-cover"
|
||||
:src="selectedSlideDetail.picture"
|
||||
:alt="String(selectedSlideDetail.id)"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div
|
||||
@click="changeSlide(slide.id)"
|
||||
v-for="slide in slides"
|
||||
:class="selectedSlide === slide.id ? 'ring-black' : 'ring-transparent'"
|
||||
class="cursor-pointer aspect-square w-[108px] ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
|
||||
:key="slide.id"
|
||||
>
|
||||
<img class="absolute object-cover size-full" :src="slide.picture" :alt="String(slide.id)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full p-12 rounded-150 bg-white border-[0.5px] border-slate-200 flex flex-col gap-6">
|
||||
<div class="flex justify-between items-start w-full">
|
||||
<div class="flex flex-col gap-3">
|
||||
<span class="typo-h-6 text-black">
|
||||
خیلی محصول خوبی بودددد
|
||||
</span>
|
||||
<span class="typo-p-sm text-slate-500">
|
||||
منصور مرزبان در ۱۴۰۳/۱۲/۲ ساعت ۱۲:۳۴
|
||||
</span>
|
||||
</div>
|
||||
<Rating />
|
||||
</div>
|
||||
<div class="typo-p-md">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
|
||||
بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرد گذشته.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
picture: string;
|
||||
title: string;
|
||||
color: string;
|
||||
price: number;
|
||||
}
|
||||
|
||||
// props
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const { picture, price, title, color } = toRefs(props);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 bg-white rounded-150">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative size-[100px] rounded-100 overflow-hidden border-[0.5px] border-slate-200">
|
||||
<img :src="picture" :alt="title" class="object-cover absolute" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="typo-sub-h-md text-black">{{ title }}</span>
|
||||
<span class="typo-p-sm text-slate-500">{{ color }}</span>
|
||||
<span class="typo-p-md text-black">{{ price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button class="rounded-full">
|
||||
افزودن به سبد
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="bg-slate-50 p-20">
|
||||
<div class="flex gap-12 my-42 container">
|
||||
<div class="flex flex-col gap-6 min-w-fit">
|
||||
<h3 class="typo-h-3">
|
||||
نظرات کاربران
|
||||
</h3>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Rating />
|
||||
<span class="typo-p-sm">
|
||||
بر اساس ۴ نظر
|
||||
</span>
|
||||
</div>
|
||||
<Button class="rounded-full">
|
||||
نظر بنویسید
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex flex-col gap-12">
|
||||
<Comment />
|
||||
<Comment />
|
||||
<Comment />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -4,52 +4,71 @@
|
||||
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">
|
||||
<div class="w-[800px] flex flex-col items-end gap-3 mt-12">
|
||||
<div class="flex gap-12 container">
|
||||
<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">
|
||||
Nova
|
||||
سامسونگ
|
||||
</span>
|
||||
<h1 class="typo-h-2">
|
||||
Nova
|
||||
موبایل Nova
|
||||
</h1>
|
||||
<div class="flex w-full items-center justify-between">
|
||||
<Rating />
|
||||
<span class="typo-p-2xl">
|
||||
$689.00
|
||||
</span>
|
||||
<Rating />
|
||||
</div>
|
||||
<p class="typo-p-md text-slate-500 text-left">
|
||||
Compact, stylish, and engineered for the future, Eco Tunes are more than just headphones; they're a
|
||||
statement. Hear the future, save the planet.
|
||||
<p class="typo-p-md text-slate-500 text-justify">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
|
||||
متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
|
||||
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته.
|
||||
</p>
|
||||
<div class="w-full flex flex-col gap-6 mt-4">
|
||||
<RemainQuantity :quantity="maxQuantity" />
|
||||
<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"
|
||||
class="w-full rounded-full"
|
||||
end-icon="ci:plus"
|
||||
>
|
||||
Add to cart
|
||||
افزودن به سبد خرید
|
||||
</Button>
|
||||
<QuantityCounter v-model="quantity" :max="maxQuantity" />
|
||||
</div>
|
||||
<Button
|
||||
class="w-full"
|
||||
class="w-full rounded-full"
|
||||
variant="outlined"
|
||||
>
|
||||
Buy it now
|
||||
همین الان بخر
|
||||
</Button>
|
||||
</div>
|
||||
<InfoCard />
|
||||
<Share />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-red-300 w-full h-[500px] rounded-200">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-[95svh] w-full relative bg-black my-20">
|
||||
<img
|
||||
src="/img/product-3.jpg"
|
||||
class="object-cover absolute size-full"
|
||||
/>
|
||||
<div class="size-full absolute inset-0 bg-black/60"/>
|
||||
<StickyCard
|
||||
color="سبز"
|
||||
:price="240000"
|
||||
picture="/img/product-1.jpg"
|
||||
title="نام محصول"
|
||||
class="absolute right-6 bottom-6"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user