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:
marzban-dev
2025-04-22 19:04:28 +03:30
parent 0e1369146f 50f5d19aa3
commit 7bdd3fce5c
30 changed files with 567 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/cart/index/CartItem.vue
+5 -2
View File
@@ -150,9 +150,12 @@ watch(
</div>
</div>
<span class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black">
<NuxtLink
:to="`product/${data.product.id}`"
class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black underline underline-offset-2"
>
{{ data.product.title }}
</span>
</NuxtLink>
<div class="flex items-center justify-start gap-1.5">
<div
frontend/components/global/Brands.vue
+106 -30
View File
@@ -12,11 +12,9 @@ const {} = toRefs(props);
</script>
<template>
<div class="relative w-full flex flex-col justify-center min-h-[450px] h-svh">
<div class="relative w-full flex flex-col justify-center py-32 lg:py-48">
<div class="flex-col-center gap-6 mb-24 sm:mb-32 container">
<span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black">
مجله در ستون و سطرآنچ
</span>
<span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black"> مجله در ستون و سطرآنچ </span>
<p class="text-slate-500 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
@@ -30,13 +28,19 @@ const {} = toRefs(props);
<div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
HEYMLZ
</div>
<NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[25px] sm:h-[45px] invert opacity-85" />
<NuxtImg
src="/img/heymlz/heymlz-logo.png"
class="h-[25px] sm:h-[45px] invert opacity-85"
/>
</template>
<template v-for="i in 10">
<div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
HEYMLZ
</div>
<NuxtImg src="/img/heymlz/heymlz-logo.png" class="h-[25px] sm:h-[45px] invert opacity-85" />
<NuxtImg
src="/img/heymlz/heymlz-logo.png"
class="h-[25px] sm:h-[45px] invert opacity-85"
/>
</template>
</div>
</div>
@@ -46,32 +50,104 @@ const {} = toRefs(props);
class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[90px] sm:h-[140px]"
>
<template v-for="i in 1">
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg
src="/img/brands/brand-1.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-2.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-3.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-4.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-5.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-6.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-1.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-2.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-3.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-4.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-5.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-6.png"
class="h-[25px] sm:h-[45px]"
/>
</template>
<template v-for="i in 1">
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-1.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-2.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-3.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-4.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-5.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg src="/img/brands/brand-6.png" class="h-[25px] sm:h-[45px]" />
<NuxtImg
src="/img/brands/brand-1.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-2.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-3.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-4.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-5.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-6.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-1.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-2.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-3.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-4.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-5.png"
class="h-[25px] sm:h-[45px]"
/>
<NuxtImg
src="/img/brands/brand-6.png"
class="h-[25px] sm:h-[45px]"
/>
</template>
</div>
</div>
frontend/components/global/DataField.vue
+10 -4
View File
@@ -18,10 +18,16 @@ withDefaults(defineProps<Props>(), {
<template>
<div class="w-full flex flex-col gap-2">
<div class="flex items-center gap-1 ps-2">
<label :for="id" class="typo-label-xs lg:typo-label-sm">{{
label
}}</label>
<span v-if="!!required && required" class="text-danger-600">*</span>
<label
:for="id"
class="typo-label-xs lg:typo-label-sm"
>{{ label }}</label
>
<span
v-if="!!required && required"
class="text-danger-600"
>*</span
>
</div>
<slot />
<div
frontend/components/global/SideDrawer.vue
+125 -48
View File
@@ -20,6 +20,8 @@ defineProps<Props>();
const { token } = useAuth();
const { data: account } = useGetAccount();
const route = useRoute();
// emit
const emit = defineEmits(["update:modelValue"]);
@@ -29,13 +31,22 @@ const emit = defineEmits(["update:modelValue"]);
const closeSideDrawer = () => {
emit("update:modelValue", false);
};
// watch
watch(
() => route.fullPath,
() => {
closeSideDrawer();
}
);
</script>
<template>
<Transition name="fade">
<div
v-if="modelValue"
class="md:hidden fixed inset-0 h-svh z-999 size-full bg-black/50 cursor-pointer"
class="md:hidden fixed inset-0 min-h-svh z-1001 size-full bg-black/50 cursor-pointer"
@click="closeSideDrawer"
/>
</Transition>
@@ -43,61 +54,127 @@ const closeSideDrawer = () => {
<div
@click.stop
:class="modelValue ? 'translate-x-0' : 'translate-x-[100%]'"
class="md:hidden cursor-default flex top-0 right-0 fixed z-999 transition-all duration-500 rounded-e-xl flex-col bg-white w-[300px] h-full gap-8 pt-12"
class="md:hidden cursor-default flex top-0 right-0 fixed z-1002 transition-all duration-500 flex-col bg-white w-[300px] h-full px-4"
>
<div class="flex items-center flex-col justify-end gap-[1.5rem]">
<Tooltip v-if="!!account && !!token" title="حساب کاربری">
<NuxtLink
:to="{ name: 'profile' }"
class="flex items-center justify-center"
>
<Avatar
class="!size-7"
:src="account.profile_photo"
:alt="
account.first_name && account.last_name
? `${account.first_name.charAt(
0
)} ${account.last_name.charAt(0)}`
: 'بدون نام کاربری'
"
/>
</NuxtLink>
</Tooltip>
<Tooltip v-else title="ورود">
<NuxtLink to="/signin" class="flex-center">
<Icon
name="ci:profile"
size="24px"
class="**:stroke-black"
/>
</NuxtLink>
</Tooltip>
<Tooltip title="محصولات">
<NuxtLink to="/products" class="flex-center">
<Icon
name="ci:search"
size="21px"
class="**:stroke-black"
/>
</NuxtLink>
</Tooltip>
<Tooltip title="سبد خرید">
<NuxtLink to="/cart" class="flex-center">
<Icon name="ci:cart" size="24px" class="**:stroke-black" />
</NuxtLink>
</Tooltip>
<div class="flex items-center flex-col justify-end gap-2 border-b border-slate-200 py-5">
<NuxtLink
v-if="!!account && !!token"
:to="{ name: 'profile' }"
class="w-full flex items-center justify-between gap-3 p-2 transition-all"
active-class="bg-black rounded-md text-white **:stroke-white"
>
<div class="flex items-center gap-3">
<div class="size-5 flex-center">
<Avatar
class="!size-5"
:src="account.profile_photo"
:alt="
account.first_name && account.last_name
? `${account.first_name.charAt(0)} ${account.last_name.charAt(0)}`
: 'بدون نام کاربری'
"
/>
</div>
<span class="text-xs"> {{ account.first_name }} {{ account.last_name }} </span>
</div>
<Icon
name="bi:chevron-left"
size="12"
class="**:stroke-black/50 opacity-70"
/>
</NuxtLink>
<NuxtLink
v-else
to="/signin"
class="w-full flex items-center justify-between gap-4 p-2 transition-all"
active-class="bg-black rounded-md text-white **:stroke-white"
>
<div class="flex items-center gap-3">
<div class="size-5 flex-center">
<Icon
name="ci:profile"
size="18"
class="**:stroke-black"
/>
</div>
<span class="text-xs"> ورود به حساب </span>
</div>
<Icon
name="bi:chevron-left"
size="12"
class="**:stroke-black/50 opacity-70"
/>
</NuxtLink>
<!--
<NuxtLink
to="/products"
class="w-full flex items-center justify-between gap-4 p-2"
active-class="bg-black rounded-md text-white **:stroke-white"
>
<div class="flex items-center gap-3">
<div class="size-5 flex-center">
<Icon
name="ci:search"
size="18"
class="**:stroke-black"
/>
</div>
<span class="text-xs"> جست و جو </span>
</div>
<Icon
name="bi:chevron-left"
size="12"
class="**:stroke-black/50 opacity-70"
/>
</NuxtLink> -->
<NuxtLink
to="/cart"
class="w-full flex items-center justify-between gap-4 p-2 transition-all"
active-class="bg-black rounded-md text-white **:stroke-white"
>
<div class="flex items-center gap-3">
<div class="size-5 flex-center">
<Icon
name="ci:cart"
size="19"
class="**:stroke-black"
/>
</div>
<span class="text-xs"> سبد خرید </span>
</div>
<Icon
name="bi:chevron-left"
size="12"
class="**:stroke-black/50 opacity-70"
/>
</NuxtLink>
</div>
<nav
class="flex-center flex-col gap-[2.5rem] typo-label-sm font-light text-black/80"
>
<nav class="flex-center flex-col gap-2 typo-label-sm font-light text-black/80 py-5">
<NuxtLink
v-for="(link, index) in NAV_LINKS"
:key="index"
:to="link.path"
class="w-full flex items-center justify-between gap-3 p-2 transition-all"
active-class="bg-black rounded-md text-white **:stroke-white"
>
{{ link.title }}
<div class="flex items-center gap-3">
<div class="size-5 flex-center">
<Icon
:name="link.icon"
size="18"
class="**:stroke-black"
/>
</div>
<span class="text-xs"> {{ link.title }}</span>
</div>
<Icon
name="bi:chevron-left"
size="12"
class="**:stroke-black/50 opacity-70"
/>
</NuxtLink>
</nav>
</div>
frontend/components/home/Categories.vue
+4 -4
View File
@@ -20,13 +20,13 @@ const onSwiper = (swiper: SwiperClass) => {
<template>
<section
ref="sectionTarget"
class="flex flex-col justify-center gap-4 bg-black h-[110svh] sm:h-[150svh] relative overflow-hidden"
class="flex flex-col justify-center gap-4 bg-black sm:min-h-[110svh] relative overflow-hidden shrink-0 py-24 lg:py-32"
>
<div class="w-full relative translate-y-[-55px] sm:translate-y-[-130px] flex-center z-10 container">
<div class="w-full relative flex-center z-10 container">
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4"> دسته بندی ها </span>
</div>
<div class="w-full my-20 relative">
<div class="w-full mt-44 lg:mt-64 relative">
<NuxtImg
class="aspect-square w-[240px] md:w-[300px] lg:w-[350px] translate-y-[-164px] md:translate-y-[-206px] lg:translate-y-[-240px] absolute left-1/2 -translate-x-1/2 z-10"
:style="{
@@ -89,7 +89,7 @@ const onSwiper = (swiper: SwiperClass) => {
</div>
</div>
<div class="w-full flex justify-center items-center">
<div class="w-full flex justify-center items-center mt-14">
<NuxtLink to="/category">
<Button
variant="primary"
frontend/components/home/LatestStories.vue
+11 -10
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
// state
import useGetArticles from "~/composables/api/blog/useGetArticles";
@@ -10,22 +9,24 @@ const { data: articles, suspense } = useGetArticles(page);
// ssr
await suspense();
</script>
<template>
<section class="mt-20 container">
<section class="container">
<div class="flex items-center justify-between mb-12 md:mb-20">
<span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black">
مقالات اخیر سایت
</span>
<span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black"> مقالات اخیر سایت </span>
<NuxtLink to="/articles">
<Button variant="primary" class="rounded-full max-sm:typo-label-sm max-sm:py-2"
end-icon="ci:arrow-left">
<Button
variant="primary"
class="rounded-full max-sm:typo-label-sm max-sm:py-2"
end-icon="ci:arrow-left"
>
نمایش همه
</Button>
</NuxtLink>
</div>
<ArticlesList :articles="[...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results]" />
<ArticlesList
:articles="[...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results]"
/>
</section>
</template>
</template>
frontend/components/home/Preview.vue
+1 -1
View File
@@ -72,7 +72,7 @@ watch(
</script>
<template>
<div class="container mb-40 lg:mb-80 mt-20">
<div class="container mb-40 lg:mb-40 max-lg:mt-20 lg:-mt-32">
<div>
<div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
<span class="typo-p-sm md:typo-p-md text-slate-500"> مقایسه محصولات </span>
frontend/components/home/ProductsShowcase.vue
+10 -11
View File
@@ -85,14 +85,14 @@ onUnmounted(() => {
<template>
<section
id="products-showcase-container"
class="perspective-midrange relative z-[99999]"
class="perspective-midrange relative z-[999]"
>
<div class="w-full h-[102svh] bg-black">
<div class="w-full min-h-[120svh] lg:min-h-[102svh] bg-black">
<NuxtLink
v-for="slide in homeData!.show_case_slider"
:key="slide.id"
:to="slide.link"
class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center max-lg:-mt-16 lg:mt-5"
>
<NuxtImg
class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
@@ -102,12 +102,8 @@ onUnmounted(() => {
}"
alt=""
/>
<div
class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20"
>
<span
class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3"
>
<div class="flex flex-col items-center justify-center gap-6 text-center absolute z-20 mt-20">
<span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
{{ slide.title }}
</span>
<p
@@ -115,10 +111,13 @@ onUnmounted(() => {
>
{{ slide.description }}
</p>
<NuxtLink :to="slide.link" class="relative">
<NuxtLink
:to="slide.link"
class="relative"
>
<NuxtImg
src="/img/heymlz/heymlz-falling.gif"
class="absolute top-[106px] sm:top-[105px] lg:top-[117px] left-1/2 -translate-1/2 w-[250px] drop-shadow-md"
class="absolute top-[101px] sm:top-[100px] lg:top-[117px] left-1/2 -translate-1/2 w-[200px] lg:w-[250px] drop-shadow-md"
/>
<Button
variant="primary"