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

Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

Browse Source
This commit is contained in:
Parsa Nazer
2025-04-22 02:32:57 +03:30
parent 8539532bf4 dfa1d9be90
commit a195017f80
11 changed files with 103 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/css/other.utils.css
+3 -3
View File
@@ -1,7 +1,7 @@
@utility persian-number {
-moz-font-feature-settings: "ss03";
-webkit-font-feature-settings: "ss03";
font-feature-settings: "ss03";
-moz-font-feature-settings: "ss02";
-webkit-font-feature-settings: "ss02";
font-feature-settings: "ss02";
}
@utility text-gradient {
frontend/components/global/BlogPost.vue
+2 -2
View File
@@ -39,7 +39,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
<Tag
v-if="variant === 'lg'"
class="bg-success-500 absolute left-6 top-6 z-20"
class="bg-slate-950 absolute left-6 top-6 z-20"
>
{{ category.name }}
</Tag>
@@ -49,7 +49,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
class="aspect-square w-full rounded-150 overflow-hidden relative"
>
<Tag
class="bg-success-500 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs"
class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs"
>
{{ category.name }}
</Tag>
frontend/components/global/LoadingOverlay.vue
+1 -1
View File
@@ -92,7 +92,7 @@ onMounted(() => {
src="/img/heymlz/heymlz-text-logo.png"
class="invert w-[250px]"
/>
<div class="bg-slate-800 w-[400px] h-1 rounded-full overflow-hidden">
<div class="bg-slate-800 w-[300px] sm:w-[400px] h-1 rounded-full overflow-hidden">
<div
class="bg-slate-100 h-full w-full transition-all duration-250"
:style="progressStyle"
frontend/components/global/product-detail/Slider.vue
+3 -1
View File
@@ -97,7 +97,9 @@ const changeSlide = (id: number) => {
:key="slide"
class="py-4"
>
<div class="brightness-[97%] bg-white aspect-square rounded-[12px] md:rounded-200 w-full" />
<div class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full">
<Icon name="ci:image-slash" class="size-[40px] sm:size-[60px] **:fill-black/20" />
</div>
</SwiperSlide>
</Swiper>
frontend/components/global/product/ProductCard.vue
+19 -26
View File
@@ -22,11 +22,17 @@ type Props = {
// props
const props = defineProps<Props>();
const { id } = toRefs(props);
const { id, colors } = toRefs(props);
// state
const { colorObject } = useImageColor(`#product-image-${id.value}`);
// computed
const limitedColors = computed(() => {
return colors.value.slice(0, 3);
});
</script>
<template>
@@ -51,33 +57,26 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
<div
class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
>
<Rate v-if="rate" :rate="rate" />
<Rate
v-if="rate"
:rate="rate"
/>
<Tag v-if="tag">
{{ tag }}
</Tag>
</div>
<div
:class="
colorObject?.isLight && !darkLayer
? 'text-black'
: 'text-white'
"
:class="colorObject?.isLight && !darkLayer ? 'text-black' : 'text-white'"
class="absolute inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
>
<div class="flex flex-col gap-2 items-start w-full">
<span
class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full"
>
<span class="@max-[280px]:hidden typo-sub-h-md @[280px]:typo-sub-h-lg truncate w-full">
{{ title }}
</span>
<div
class="flex items-center justify-between w-full mt-1"
>
<div
class="flex items-center gap-2 @[280px]:mt-1"
>
<div class="flex items-center justify-between w-full mt-1">
<div class="flex items-center gap-2 @[280px]:mt-1">
<ColorCircle
v-for="color in colors"
v-for="color in limitedColors"
:key="color"
:style="{ backgroundColor: color }"
class="!size-5 @[280px]:!size-6"
@@ -93,18 +92,12 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
</div>
</div>
<div
class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden"
>
<div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4 @[280px]:hidden">
<span class="typo-sub-h-sm w-full truncate">
{{ title }}
</span>
<div
class="@[280px]:hidden flex items-center justify-between w-full mt-1"
>
<span
class="typo-p-xs !font-semibold whitespace-nowrap"
>
<div class="@[280px]:hidden flex items-center justify-between w-full mt-1">
<span class="typo-p-xs !font-semibold whitespace-nowrap">
{{ price }}
</span>
</div>
frontend/components/product/ProductComments.vue
+13 -1
View File
@@ -98,7 +98,19 @@ const limitedComments = computed(() => {
:username="'منصور مرزبان'"
/>
<div class="flex items-center justify-center w-full">
<div
class="h-[400px] lg:flex-grow w-full border-[0.5px] flex-col-center border-slate-200 bg-white rounded-xl"
>
<NuxtImg
src="/img/heymlz/heymlz-contact-us.gif"
class="w-[200px] lg:w-[300px] translate-y-[-25px]"
/>
<span class="text-xl text-black font-semibold translate-y-[-25px]"> هیچ نظری ثبت نشده است </span>
</div>
<div
v-if="comments!.count > 0"
class="flex items-center justify-center w-full"
>
<Pagination
v-if="showMoreComments"
:total="comments!.count"
frontend/components/product/ProductHero.vue
+41 -28
View File
@@ -59,6 +59,9 @@ watch(
(newValue) => {
selectedQuantity.value = 1;
selectedSlide.value = newValue.images[0].id;
},
{
immediate: true,
}
);
</script>
@@ -180,7 +183,7 @@ watch(
<div class="flex items-center gap-6 flex-wrap">
<ProductVariant
@click="variant.in_stock > 0 ? (selectedVariantId = variant.id) : undefined"
@click="selectedVariantId = variant.id"
v-for="variant in product!.variants.filter(p => p.color === selectedColor)"
:key="variant.id"
:variantDetail="variant"
@@ -190,57 +193,67 @@ watch(
<div class="w-full flex flex-col gap-6 mt-10">
<RemainQuantity
v-if="selectedVariant!.in_stock > 0"
:showSlider="selectedVariant!.cart_quantity === 0"
:maxQuantity="selectedVariant!.in_stock"
:quantity="selectedQuantity"
/>
<div class="w-full flex gap-3">
<template v-if="token">
<Button
v-if="selectedVariant!.cart_quantity === 0"
@click="addItemToCart"
:loading="isAddCartItemPending"
:disabled="isAddCartItemPending"
class="w-full rounded-full max-sm:h-[48px]"
end-icon="ci:plus"
>
افزودن به سبد خرید
</Button>
<template v-if="selectedVariant!.in_stock > 0">
<template v-if="token">
<Button
v-if="selectedVariant!.cart_quantity === 0"
@click="addItemToCart"
:loading="isAddCartItemPending"
:disabled="isAddCartItemPending"
class="w-full rounded-full max-sm:h-[48px]"
end-icon="ci:plus"
>
افزودن به سبد خرید
</Button>
<NuxtLink
v-else
to="/cart"
class="w-full"
>
<Button
class="w-full rounded-full h-full max-sm:h-[48px]"
end-icon="ci:cart"
>
مشاهده در سبد خرید
</Button>
</NuxtLink>
</template>
<NuxtLink
v-else
to="/cart"
to="/signin"
class="w-full"
>
<Button
class="w-full rounded-full h-full max-sm:h-[48px]"
end-icon="ci:cart"
end-icon="ci:user"
>
مشاهده در سبد خرید
ابتدا وارد شوید
</Button>
</NuxtLink>
</template>
<NuxtLink
<Button
v-else
to="/signin"
class="w-full"
class="w-full !cursor-default rounded-full h-full max-sm:h-[48px]"
end-icon="ci:cart"
>
<Button
class="w-full rounded-full h-full max-sm:h-[48px]"
end-icon="ci:user"
>
ابتدا وارد شوید
</Button>
</NuxtLink>
اتمام موجودی
</Button>
<QuantityCounter
v-if="selectedVariant!.cart_quantity === 0"
v-if="selectedVariant!.in_stock > 0 && selectedVariant!.cart_quantity === 0"
:disable="isAddCartItemPending"
v-model="selectedQuantity"
:max="selectedVariant!.in_stock"
/>
<UpdateQuantity v-else />
<UpdateQuantity v-else-if="selectedVariant!.in_stock > 0" />
</div>
<InfoCard />
frontend/components/product/ProductVariant.vue
+19 -31
View File
@@ -13,22 +13,12 @@ defineProps<Props>();
<template>
<div
:class="[
isSelected ? 'border-blue-500' : 'border-slate-300',
variantDetail.in_stock > 0 ? 'cursor-pointer' : '!border-slate-100',
]"
class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4"
:class="isSelected ? 'border-blue-500' : 'border-slate-300'"
class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4 cursor-pointer"
>
<div>
<div
:class="[
isSelected
? 'ring-blue-500 bg-blue-500'
: 'ring-slate-300 bg-slate-300',
variantDetail.in_stock > 0
? ''
: '!ring-slate-100 !bg-slate-300-100',
]"
:class="isSelected ? 'ring-blue-500 bg-blue-500' : 'ring-slate-300 bg-slate-300'"
class="size-3 mt-2 ring-2 ring-offset-2 rounded-full"
></div>
</div>
@@ -38,27 +28,25 @@ defineProps<Props>();
{{ variantDetail.price }}
</span>
<div
v-if="variantDetail.discount > 0"
:class="
variantDetail.in_stock > 0
? 'bg-blue-500'
: 'bg-slate-400/60'
"
class="text-white mb-1 px-3 py-1 text-xs rounded-full w-fit flex items-center justify-center gap-1"
v-if="variantDetail.in_stock > 0 && variantDetail.discount > 0"
class="text-white mb-1 px-3 py-1 bg-blue-500 text-xs rounded-full w-fit flex items-center justify-center gap-1"
>
<template v-if="variantDetail.in_stock > 0">
<Icon name="bi:percent" class="size-3.5" />
<span class="mt-px">
{{ variantDetail.discount }}
</span>
</template>
<span v-else class="mt-px"> اتمام موجودی </span>
<Icon
name="bi:percent"
class="size-3.5"
/>
<span class="mt-px">
{{ variantDetail.discount }}
</span>
</div>
<div
v-if="variantDetail.in_stock === 0"
class="text-slate-700 mb-1 px-3 py-1 bg-slate-200 text-xs rounded-full w-fit flex items-center justify-center gap-1"
>
اتمام موجودی
</div>
</div>
<div
class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4"
>
<div class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4">
<!-- <div-->
<!-- class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
<!-- >-->
frontend/pages/contact-us.vue
+1 -1
View File
@@ -168,7 +168,7 @@ const contactWays = ref([
</div>
<div class="w-full lg:w-4/12 h-full flex-center">
<NuxtImg
src="/img/heymlz/contact-us.gif"
src="/img/heymlz/heymlz-contact-us.gif"
class="size-2/3 -mt-5 lg:scale-150 drop-shadow-2xl"
/>
</div>
frontend/public/icons/image-slash.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --><defs><style>.fa-secondary{opacity:.4}</style></defs><path class="fa-secondary" d="M64 146.4L64 416c0 35.3 28.7 64 64 64l359.4 0-81.2-64L320 416l-72 0-96 0c-9.3 0-17.8-5.4-21.8-13.9s-2.6-18.5 3.5-25.6l88-104c.3-.4 .6-.7 1-1.1L64 146.4zM89.5 44.9c23.1 18.1 46.2 36.2 69.3 54.3c5.3-2 11.1-3.2 17.2-3.2c26.5 0 48 21.5 48 48c0 2-.1 4-.4 6c34.8 27.3 69.7 54.6 104.5 81.9l20-29.4c4.5-6.6 11.9-10.5 19.8-10.5s15.4 3.9 19.8 10.5L499.4 366.1l75.9 59.5c.5-3.1 .7-6.3 .7-9.6l0-320c0-35.3-28.7-64-64-64L128 32c-14.4 0-27.8 4.8-38.5 12.9z"/><path class="fa-primary" d="M5.1 9.2C13.3-1.2 28.4-3.1 38.8 5.1l592 464c10.4 8.2 12.3 23.3 4.1 33.7s-23.3 12.3-33.7 4.1L9.2 42.9C-1.2 34.7-3.1 19.6 5.1 9.2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 923 B

frontend/public/img/heymlz/contact-us.gif → frontend/public/img/heymlz/heymlz-contact-us.gif
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB