heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new changes

Browse Source
This commit is contained in:
Mamalizz
2024-12-15 22:58:00 +03:30
parent 4b14e9ec31
commit 3e19c84e3b
2 changed files with 29 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/product/ProductHero.vue
+23 -29
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup>
// state
const quantity = ref(1);
const maxQuantity = ref(10);
@@ -8,61 +7,56 @@ const selectedSlide = ref(0);
const slides = [
{
id: 0,
picture: "/img/product-1.jpg"
picture: "/img/product-1.jpg",
},
{
id: 1,
picture: "/img/product-2.jpg"
picture: "/img/product-2.jpg",
},
{
id: 2,
picture: "/img/product-3.jpg"
}
picture: "/img/product-3.jpg",
},
];
</script>
<template>
<div class="flex gap-12 container">
<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>
<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>
<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" />
<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 class="w-full rounded-full" end-icon="ci:plus">
افزودن به سبد خرید
</Button>
<QuantityCounter v-model="quantity" :max="maxQuantity" />
<QuantityCounter
v-model="quantity"
:max="maxQuantity"
/>
</div>
<Button
class="w-full rounded-full"
variant="outlined"
>
<Button class="w-full rounded-full" variant="outlined">
همین الان بخر
</Button>
</div>
frontend/components/product/Video.vue
+4 -9
View File
@@ -1,14 +1,9 @@
<script lang="ts" setup>
</script>
<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"/>
<div class="h-[95svh] w-full relative bg-black mt-[5rem]">
<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"