merge with front adn items in pack product and detail for product
This commit is contained in:
Parsa Nazer
@@ -28,7 +28,7 @@ class UserAdmin(BaseUserAdmin, ModelAdmin, ImportExportModelAdmin):
|
|||||||
list_filter = ['is_superuser']
|
list_filter = ['is_superuser']
|
||||||
search_fields = ['phone', 'first_name', 'last_name', 'email']
|
search_fields = ['phone', 'first_name', 'last_name', 'email']
|
||||||
list_display = ['full_name_display', 'phone', 'email', 'is_superuser', ]
|
list_display = ['full_name_display', 'phone', 'email', 'is_superuser', ]
|
||||||
readonly_fields = []
|
# readonly_fields = ['phone', 'email', 'otp_expiry', 'otp_hash', 'date_joined', 'profile_photo']
|
||||||
|
|
||||||
exclude = ('otp_hash', 'otp_expiry', 'is_active', 'is_staff', 'password', 'last_login')
|
exclude = ('otp_hash', 'otp_expiry', 'is_active', 'is_staff', 'password', 'last_login')
|
||||||
import_form_class = ImportForm
|
import_form_class = ImportForm
|
||||||
@@ -73,6 +73,7 @@ class AddressAdmin(ModelAdmin, ImportExportModelAdmin):
|
|||||||
export_form_class = ExportForm
|
export_form_class = ExportForm
|
||||||
search_fields = ['address', 'name', 'city', 'province']
|
search_fields = ['address', 'name', 'city', 'province']
|
||||||
list_display = ['user', 'name', 'address_display', 'postal_code', 'city', 'province', 'for_me']
|
list_display = ['user', 'name', 'address_display', 'postal_code', 'city', 'province', 'for_me']
|
||||||
|
#readonly_fields = ['user', 'name', 'address', 'postal_code', 'phone', 'city', 'province', 'for_me']
|
||||||
compressed_fields = True
|
compressed_fields = True
|
||||||
warn_unsaved_form = True
|
warn_unsaved_form = True
|
||||||
formfield_overrides = {
|
formfield_overrides = {
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
// types
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
src: string;
|
||||||
|
alt: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// props
|
||||||
|
|
||||||
|
defineProps<Props>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<AvatarRoot
|
||||||
|
class="bg-black inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle"
|
||||||
|
>
|
||||||
|
<AvatarImage
|
||||||
|
class="h-full w-full rounded-[inherit] object-cover"
|
||||||
|
:src="src"
|
||||||
|
:alt="alt"
|
||||||
|
/>
|
||||||
|
<AvatarFallback
|
||||||
|
class="text-slate-300 leading-1 flex h-full w-full items-center justify-center bg-white text-sm font-medium"
|
||||||
|
:delay-ms="600"
|
||||||
|
>
|
||||||
|
{{ alt }}
|
||||||
|
</AvatarFallback>
|
||||||
|
</AvatarRoot>
|
||||||
|
</template>
|
||||||
@@ -14,6 +14,7 @@ type NavLink = {
|
|||||||
// state
|
// state
|
||||||
|
|
||||||
const { data: account } = useGetAccount();
|
const { data: account } = useGetAccount();
|
||||||
|
const route = useRoute();
|
||||||
const { logout } = useAuth();
|
const { logout } = useAuth();
|
||||||
|
|
||||||
const nav_links = ref<NavLink[]>([
|
const nav_links = ref<NavLink[]>([
|
||||||
@@ -38,41 +39,56 @@ const nav_links = ref<NavLink[]>([
|
|||||||
path: "#",
|
path: "#",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
// computed
|
||||||
|
|
||||||
|
const isHomePage = computed(() => route.path === "/");
|
||||||
|
|
||||||
|
// lifecycle
|
||||||
|
|
||||||
|
onMounted(() => {});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="w-full bg-white flex-center">
|
<header
|
||||||
|
id="header-navbar"
|
||||||
|
class="w-full flex-center"
|
||||||
|
:class="isHomePage ? 'fixed top-0 left-0 z-999' : 'z-999'"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="size-full flex items-center justify-between container py-[2.25rem]"
|
class="size-full flex items-center justify-between container py-[2.25rem]"
|
||||||
>
|
>
|
||||||
<div class="flex items-center gap-16">
|
<div class="flex items-center gap-16">
|
||||||
<div class="flex items-center justify-end gap-[1.5rem]">
|
<div class="flex items-center justify-end gap-[1.5rem]">
|
||||||
<button
|
<Tooltip v-if="!!account" title="حساب کاربری">
|
||||||
v-if="!!account"
|
<button
|
||||||
:title="account.first_name + ' ' + account.last_name"
|
@click="() => logout(true)"
|
||||||
@click="() => logout(true)"
|
class="size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full bg-slate-300"
|
||||||
class="size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full bg-slate-300"
|
>
|
||||||
>
|
<Avatar
|
||||||
<img
|
:src="account.profile_photo"
|
||||||
class="absolute object-cover size-full"
|
:alt="`${account.first_name} ${account.last_name}`"
|
||||||
:src="account.profile_photo"
|
/>
|
||||||
:alt="account.first_name + ' ' + account.last_name"
|
</button>
|
||||||
/>
|
</Tooltip>
|
||||||
</button>
|
<Tooltip v-else title="ورود">
|
||||||
<NuxtLink to="/signin" v-else class="flex-center">
|
<NuxtLink to="/signin" class="flex-center">
|
||||||
<Icon
|
<Icon
|
||||||
name="ci:profile"
|
name="ci:profile"
|
||||||
size="24px"
|
size="24px"
|
||||||
class="**:stroke-black"
|
class="**:stroke-black"
|
||||||
/>
|
/>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink to="/products" class="flex-center">
|
</Tooltip>
|
||||||
<Icon
|
<Tooltip title="محصولات">
|
||||||
name="ci:search"
|
<NuxtLink to="/products" class="flex-center">
|
||||||
size="21px"
|
<Icon
|
||||||
class="**:stroke-black"
|
name="ci:search"
|
||||||
/>
|
size="21px"
|
||||||
</NuxtLink>
|
class="**:stroke-black"
|
||||||
|
/>
|
||||||
|
</NuxtLink>
|
||||||
|
</Tooltip>
|
||||||
<NuxtLink to="/cart" class="flex-center">
|
<NuxtLink to="/cart" class="flex-center">
|
||||||
<Icon
|
<Icon
|
||||||
name="ci:cart"
|
name="ci:cart"
|
||||||
@@ -83,7 +99,7 @@ const nav_links = ref<NavLink[]>([
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav
|
<nav
|
||||||
class="flex-center gap-[2.5rem] typo-label-sm text-slate-600"
|
class="flex-center gap-[2.5rem] typo-label-sm font-light text-black/80"
|
||||||
>
|
>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
v-for="(link, index) in nav_links"
|
v-for="(link, index) in nav_links"
|
||||||
@@ -103,11 +119,11 @@ const nav_links = ref<NavLink[]>([
|
|||||||
viewBox="0 0 220 40"
|
viewBox="0 0 220 40"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill="#0E1534"
|
fill="black"
|
||||||
d="M20 40c11.046 0 20-8.954 20-20V6a6 6 0 0 0-6-6H21v8.774c0 2.002.122 4.076 1.172 5.78a9.999 9.999 0 0 0 6.904 4.627l.383.062a.8.8 0 0 1 0 1.514l-.383.062a10 10 0 0 0-8.257 8.257l-.062.383a.8.8 0 0 1-1.514 0l-.062-.383a10 10 0 0 0-4.627-6.904C12.85 21.122 10.776 21 8.774 21H.024C.547 31.581 9.29 40 20 40Z"
|
d="M20 40c11.046 0 20-8.954 20-20V6a6 6 0 0 0-6-6H21v8.774c0 2.002.122 4.076 1.172 5.78a9.999 9.999 0 0 0 6.904 4.627l.383.062a.8.8 0 0 1 0 1.514l-.383.062a10 10 0 0 0-8.257 8.257l-.062.383a.8.8 0 0 1-1.514 0l-.062-.383a10 10 0 0 0-4.627-6.904C12.85 21.122 10.776 21 8.774 21H.024C.547 31.581 9.29 40 20 40Z"
|
||||||
></path>
|
></path>
|
||||||
<path
|
<path
|
||||||
fill="#0E1534"
|
fill="black"
|
||||||
d="M0 19h8.774c2.002 0 4.076-.122 5.78-1.172a10.018 10.018 0 0 0 3.274-3.274C18.878 12.85 19 10.776 19 8.774V0H6a6 6 0 0 0-6 6v13ZM46.455 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM211.711 12.104c5.591 0 8.289 3.905 8.289 8.428v8.495h-5.851V21.54c0-2.05-.748-3.742-2.893-3.742-2.145 0-2.86 1.692-2.86 3.742v7.486h-5.851V21.54c0-2.05-.715-3.742-2.861-3.742-2.145 0-2.893 1.692-2.893 3.742v7.486h-5.85v-8.495c0-4.523 2.697-8.428 8.288-8.428 3.056 0 5.266 1.204 6.274 3.189 1.072-1.985 3.413-3.19 6.208-3.19ZM180.427 23.82c1.885 0 2.698-1.725 2.698-3.776v-7.29h5.85v8.006c0 4.784-2.795 8.755-8.548 8.755-5.754 0-8.549-3.97-8.549-8.755v-8.006h5.851v7.29c0 2.05.812 3.776 2.698 3.776ZM163.275 29.547c-3.673 0-6.046-1.269-7.444-3.742l4.226-2.376c.585 1.041 1.462 1.562 2.925 1.562 1.203 0 1.755-.423 1.755-.944 0-1.985-8.581.033-8.581-6.28 0-3.06 2.6-5.533 7.021-5.533 3.868 0 5.981 1.887 6.924 3.71l-4.226 2.408c-.357-.976-1.463-1.562-2.568-1.562-.845 0-1.3.358-1.3.846 0 2.018 8.581.163 8.581 6.281 0 3.417-3.348 5.63-7.313 5.63ZM142.833 36.512h-5.851V20.858c0-4.98 3.738-8.592 8.939-8.592 5.071 0 8.939 3.873 8.939 8.592 0 5.207-3.446 8.657-8.614 8.657-1.203 0-2.405-.358-3.413-.912v7.909Zm3.088-12.497c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.124-3.088-3.124s-3.088 1.4-3.088 3.125c0 1.692 1.235 3.124 3.088 3.124ZM131.121 11.03c-1.918 0-3.51-1.595-3.51-3.515 0-1.92 1.592-3.515 3.51-3.515 1.918 0 3.511 1.595 3.511 3.515 0 1.92-1.593 3.515-3.511 3.515Zm-2.925 1.724h5.851v16.273h-5.851V12.754ZM116.97 29.515c-5.071 0-8.939-3.905-8.939-8.657 0-4.719 3.868-8.624 8.939-8.624s8.939 3.905 8.939 8.624c0 4.752-3.868 8.657-8.939 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM96.983 37c-4.03 0-6.956-1.79-8.451-4.98l4.843-2.603c.52 1.107 1.495 2.246 3.51 2.246 2.114 0 3.511-1.335 3.674-3.678-.78.684-2.016 1.204-3.868 1.204-4.519 0-8.16-3.482-8.16-8.364 0-4.718 3.869-8.559 8.94-8.559 5.201 0 8.939 3.613 8.939 8.592v6.444c0 5.858-4.064 9.698-9.427 9.698Zm.39-13.31c1.755 0 3.088-1.205 3.088-2.995 0-1.757-1.332-2.929-3.088-2.929-1.723 0-3.088 1.172-3.088 2.93 0 1.79 1.365 2.993 3.088 2.993ZM78.607 29.515c-5.071 0-8.94-3.905-8.94-8.657 0-4.719 3.869-8.624 8.94-8.624 5.07 0 8.939 3.905 8.939 8.624 0 4.752-3.869 8.657-8.94 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM59.013 7.06v16.434H68.7v5.533H58.2c-3.705 0-5.2-1.953-5.2-5.045V7.06h6.013Z"
|
d="M0 19h8.774c2.002 0 4.076-.122 5.78-1.172a10.018 10.018 0 0 0 3.274-3.274C18.878 12.85 19 10.776 19 8.774V0H6a6 6 0 0 0-6 6v13ZM46.455 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM211.711 12.104c5.591 0 8.289 3.905 8.289 8.428v8.495h-5.851V21.54c0-2.05-.748-3.742-2.893-3.742-2.145 0-2.86 1.692-2.86 3.742v7.486h-5.851V21.54c0-2.05-.715-3.742-2.861-3.742-2.145 0-2.893 1.692-2.893 3.742v7.486h-5.85v-8.495c0-4.523 2.697-8.428 8.288-8.428 3.056 0 5.266 1.204 6.274 3.189 1.072-1.985 3.413-3.19 6.208-3.19ZM180.427 23.82c1.885 0 2.698-1.725 2.698-3.776v-7.29h5.85v8.006c0 4.784-2.795 8.755-8.548 8.755-5.754 0-8.549-3.97-8.549-8.755v-8.006h5.851v7.29c0 2.05.812 3.776 2.698 3.776ZM163.275 29.547c-3.673 0-6.046-1.269-7.444-3.742l4.226-2.376c.585 1.041 1.462 1.562 2.925 1.562 1.203 0 1.755-.423 1.755-.944 0-1.985-8.581.033-8.581-6.28 0-3.06 2.6-5.533 7.021-5.533 3.868 0 5.981 1.887 6.924 3.71l-4.226 2.408c-.357-.976-1.463-1.562-2.568-1.562-.845 0-1.3.358-1.3.846 0 2.018 8.581.163 8.581 6.281 0 3.417-3.348 5.63-7.313 5.63ZM142.833 36.512h-5.851V20.858c0-4.98 3.738-8.592 8.939-8.592 5.071 0 8.939 3.873 8.939 8.592 0 5.207-3.446 8.657-8.614 8.657-1.203 0-2.405-.358-3.413-.912v7.909Zm3.088-12.497c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.124-3.088-3.124s-3.088 1.4-3.088 3.125c0 1.692 1.235 3.124 3.088 3.124ZM131.121 11.03c-1.918 0-3.51-1.595-3.51-3.515 0-1.92 1.592-3.515 3.51-3.515 1.918 0 3.511 1.595 3.511 3.515 0 1.92-1.593 3.515-3.511 3.515Zm-2.925 1.724h5.851v16.273h-5.851V12.754ZM116.97 29.515c-5.071 0-8.939-3.905-8.939-8.657 0-4.719 3.868-8.624 8.939-8.624s8.939 3.905 8.939 8.624c0 4.752-3.868 8.657-8.939 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM96.983 37c-4.03 0-6.956-1.79-8.451-4.98l4.843-2.603c.52 1.107 1.495 2.246 3.51 2.246 2.114 0 3.511-1.335 3.674-3.678-.78.684-2.016 1.204-3.868 1.204-4.519 0-8.16-3.482-8.16-8.364 0-4.718 3.869-8.559 8.94-8.559 5.201 0 8.939 3.613 8.939 8.592v6.444c0 5.858-4.064 9.698-9.427 9.698Zm.39-13.31c1.755 0 3.088-1.205 3.088-2.995 0-1.757-1.332-2.929-3.088-2.929-1.723 0-3.088 1.172-3.088 2.93 0 1.79 1.365 2.993 3.088 2.993ZM78.607 29.515c-5.071 0-8.94-3.905-8.94-8.657 0-4.719 3.869-8.624 8.94-8.624 5.07 0 8.939 3.905 8.939 8.624 0 4.752-3.869 8.657-8.94 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM59.013 7.06v16.434H68.7v5.533H58.2c-3.705 0-5.2-1.953-5.2-5.045V7.06h6.013Z"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -1,35 +1,26 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
||||||
// type
|
// type
|
||||||
type Props = {
|
type Props = {
|
||||||
title?: string
|
title?: string;
|
||||||
}
|
};
|
||||||
|
|
||||||
// prop
|
// prop
|
||||||
defineProps<Props>();
|
defineProps<Props>();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<TooltipProvider
|
<TooltipProvider :disabled="!title" :delay-duration="0">
|
||||||
:disabled="!title"
|
|
||||||
:delay-duration="0"
|
|
||||||
>
|
|
||||||
<TooltipRoot>
|
<TooltipRoot>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger>
|
||||||
<slot />
|
<slot />
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipPortal>
|
<TooltipPortal>
|
||||||
<TooltipContent
|
<TooltipContent
|
||||||
class="bg-black text-white px-4 py-3 rounded-full"
|
class="bg-black text-white px-4 py-3 rounded-full text-sm font-iran-yekan-x animate-slide-down-fade"
|
||||||
:side-offset="5"
|
:side-offset="5"
|
||||||
>
|
>
|
||||||
{{ title }}
|
{{ title }}
|
||||||
<TooltipArrow
|
<TooltipArrow class="fill-black" :width="12" :height="6" />
|
||||||
class="fill-black"
|
|
||||||
:width="12"
|
|
||||||
:height="6"
|
|
||||||
/>
|
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</TooltipPortal>
|
</TooltipPortal>
|
||||||
</TooltipRoot>
|
</TooltipRoot>
|
||||||
|
|||||||
@@ -23,9 +23,7 @@ const swiper_instance = ref<SwiperClass | null>(null);
|
|||||||
|
|
||||||
// queries
|
// queries
|
||||||
|
|
||||||
await useAsyncData(async () => {
|
await suspense();
|
||||||
await suspense();
|
|
||||||
});
|
|
||||||
|
|
||||||
// methods
|
// methods
|
||||||
|
|
||||||
|
|||||||
@@ -29,13 +29,20 @@ const onSwiper = (swiper: SwiperClass) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="flex flex-col justify-center gap-4 bg-black h-[150svh] mt-40">
|
<section class="flex flex-col justify-center gap-4 bg-black h-[150svh] mt-40 relative overflow-hidden">
|
||||||
<div class="w-full flex justify-center items-center">
|
|
||||||
|
<div class="w-full flex justify-center items-center relative z-10">
|
||||||
<span class="text-white typo-h-4">
|
<span class="text-white typo-h-4">
|
||||||
دسته بندی ها
|
دسته بندی ها
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<img
|
||||||
|
src="/img/gradient-2.png"
|
||||||
|
class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="w-full my-20 relative">
|
<div class="w-full my-20 relative">
|
||||||
<Swiper
|
<Swiper
|
||||||
:loop="true"
|
:loop="true"
|
||||||
|
|||||||
@@ -9,8 +9,14 @@ import useHomeData from "~/composables/api/home/useHomeData";
|
|||||||
// state
|
// state
|
||||||
|
|
||||||
const { data: homeData } = useHomeData();
|
const { data: homeData } = useHomeData();
|
||||||
|
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
const swiper_instance = ref<SwiperClass | null>(null);
|
const swiper_instance = ref<SwiperClass | null>(null);
|
||||||
const isMuted = ref(true);
|
const isMuted = ref(true);
|
||||||
|
const slidesPerView = ref(1);
|
||||||
|
|
||||||
|
let gsapTimeline: gsap.core.Timeline;
|
||||||
|
|
||||||
// methods
|
// methods
|
||||||
|
|
||||||
@@ -22,15 +28,87 @@ const onChange = (swiper: SwiperClass) => {
|
|||||||
console.log(swiper.activeIndex, swiper.realIndex, swiper.snapIndex);
|
console.log(swiper.activeIndex, swiper.realIndex, swiper.snapIndex);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// lifecycle
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
gsapTimeline = gsap.timeline({});
|
||||||
|
|
||||||
|
gsapTimeline
|
||||||
|
.fromTo(".header-slider-item", {
|
||||||
|
borderRadius: 0,
|
||||||
|
height: "100svh"
|
||||||
|
}, {
|
||||||
|
height: "80svh",
|
||||||
|
borderRadius: "20px"
|
||||||
|
})
|
||||||
|
.fromTo(slidesPerView, {
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
value: 1.2
|
||||||
|
}, "=")
|
||||||
|
.fromTo("#header-navbar", {
|
||||||
|
filter: "invert(100%)"
|
||||||
|
}, {
|
||||||
|
filter: "invert(0%)"
|
||||||
|
}, "=")
|
||||||
|
.fromTo("#header-navbar", {
|
||||||
|
background: "transparent"
|
||||||
|
}, {
|
||||||
|
background: "white"
|
||||||
|
})
|
||||||
|
.fromTo("#header-slider-wrapper", {
|
||||||
|
marginTop: "0px",
|
||||||
|
scale: 1.025
|
||||||
|
}, {
|
||||||
|
marginTop: "96px",
|
||||||
|
scale: 1
|
||||||
|
}, "=")
|
||||||
|
.fromTo("#header-slider-pagination-child", {
|
||||||
|
padding: "0px 0px"
|
||||||
|
}, {
|
||||||
|
padding: "0px 80px"
|
||||||
|
}, "=")
|
||||||
|
.fromTo(".header-slider-item-child", {
|
||||||
|
padding: "0px 80px"
|
||||||
|
}, {
|
||||||
|
padding: "0px 40px"
|
||||||
|
}, "=")
|
||||||
|
.to(".header-slider-logo", {
|
||||||
|
opacity: 0
|
||||||
|
}, "-=150%");
|
||||||
|
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: "#header-slider-container",
|
||||||
|
animation: gsapTimeline,
|
||||||
|
scrub: 1,
|
||||||
|
pin: true,
|
||||||
|
start: "top top",
|
||||||
|
// markers: true,
|
||||||
|
end: "bottom top"
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(() => route.path, (nv) => {
|
||||||
|
if (gsapTimeline) {
|
||||||
|
if (nv === "/") {
|
||||||
|
gsapTimeline.play();
|
||||||
|
} else {
|
||||||
|
gsapTimeline.pause().progress(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
immediate: true
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full mb-20">
|
<div id="header-slider-container" class="w-full mb-20 z-50">
|
||||||
<div
|
|
||||||
class="relative"
|
<div id="header-slider-wrapper" class="relative">
|
||||||
>
|
|
||||||
<Swiper
|
<Swiper
|
||||||
:slides-per-view="1.2"
|
:slides-per-view="slidesPerView"
|
||||||
:loop="true"
|
:loop="true"
|
||||||
:space-between="40"
|
:space-between="40"
|
||||||
:centered-slides="true"
|
:centered-slides="true"
|
||||||
@@ -41,23 +119,47 @@ const onChange = (swiper: SwiperClass) => {
|
|||||||
v-for="(slide, index) in homeData!.sliders"
|
v-for="(slide, index) in homeData!.sliders"
|
||||||
:key="slide.id"
|
:key="slide.id"
|
||||||
>
|
>
|
||||||
<div class="relative w-full rounded-200 h-[80svh] overflow-hidden">
|
<div
|
||||||
|
class="header-slider-item relative w-full overflow-hidden"
|
||||||
|
>
|
||||||
<template v-if="!!slide.video">
|
<template v-if="!!slide.video">
|
||||||
<button
|
<div class="flex items-center justify-between w-full absolute z-20 top-10 px-20">
|
||||||
@click="isMuted = !isMuted"
|
|
||||||
class="transition-all hover:invert cursor-pointer flex-center hover:scale-110 size-[50px] border border-white hover:border-transparent rounded-full absolute z-20 top-10 right-20 bg-black"
|
<button
|
||||||
>
|
@click="isMuted = !isMuted"
|
||||||
<Icon
|
class="transition-all cursor-pointer flex-center hover:scale-110 size-[50px] rounded-full bg-white"
|
||||||
:name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
|
>
|
||||||
class="text-white"
|
<Icon
|
||||||
size="24px"
|
:name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
|
||||||
/>
|
class="text-black"
|
||||||
</button>
|
size="24px"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- <div class="header-slider-logo">-->
|
||||||
|
<!-- <svg-->
|
||||||
|
<!-- xmlns="http://www.w3.org/2000/svg"-->
|
||||||
|
<!-- height="23"-->
|
||||||
|
<!-- fill="none"-->
|
||||||
|
<!-- viewBox="0 0 220 40"-->
|
||||||
|
<!-- >-->
|
||||||
|
<!-- <path-->
|
||||||
|
<!-- fill="white"-->
|
||||||
|
<!-- d="M20 40c11.046 0 20-8.954 20-20V6a6 6 0 0 0-6-6H21v8.774c0 2.002.122 4.076 1.172 5.78a9.999 9.999 0 0 0 6.904 4.627l.383.062a.8.8 0 0 1 0 1.514l-.383.062a10 10 0 0 0-8.257 8.257l-.062.383a.8.8 0 0 1-1.514 0l-.062-.383a10 10 0 0 0-4.627-6.904C12.85 21.122 10.776 21 8.774 21H.024C.547 31.581 9.29 40 20 40Z"-->
|
||||||
|
<!-- ></path>-->
|
||||||
|
<!-- <path-->
|
||||||
|
<!-- fill="white"-->
|
||||||
|
<!-- d="M0 19h8.774c2.002 0 4.076-.122 5.78-1.172a10.018 10.018 0 0 0 3.274-3.274C18.878 12.85 19 10.776 19 8.774V0H6a6 6 0 0 0-6 6v13ZM46.455 2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM211.711 12.104c5.591 0 8.289 3.905 8.289 8.428v8.495h-5.851V21.54c0-2.05-.748-3.742-2.893-3.742-2.145 0-2.86 1.692-2.86 3.742v7.486h-5.851V21.54c0-2.05-.715-3.742-2.861-3.742-2.145 0-2.893 1.692-2.893 3.742v7.486h-5.85v-8.495c0-4.523 2.697-8.428 8.288-8.428 3.056 0 5.266 1.204 6.274 3.189 1.072-1.985 3.413-3.19 6.208-3.19ZM180.427 23.82c1.885 0 2.698-1.725 2.698-3.776v-7.29h5.85v8.006c0 4.784-2.795 8.755-8.548 8.755-5.754 0-8.549-3.97-8.549-8.755v-8.006h5.851v7.29c0 2.05.812 3.776 2.698 3.776ZM163.275 29.547c-3.673 0-6.046-1.269-7.444-3.742l4.226-2.376c.585 1.041 1.462 1.562 2.925 1.562 1.203 0 1.755-.423 1.755-.944 0-1.985-8.581.033-8.581-6.28 0-3.06 2.6-5.533 7.021-5.533 3.868 0 5.981 1.887 6.924 3.71l-4.226 2.408c-.357-.976-1.463-1.562-2.568-1.562-.845 0-1.3.358-1.3.846 0 2.018 8.581.163 8.581 6.281 0 3.417-3.348 5.63-7.313 5.63ZM142.833 36.512h-5.851V20.858c0-4.98 3.738-8.592 8.939-8.592 5.071 0 8.939 3.873 8.939 8.592 0 5.207-3.446 8.657-8.614 8.657-1.203 0-2.405-.358-3.413-.912v7.909Zm3.088-12.497c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.124-3.088-3.124s-3.088 1.4-3.088 3.125c0 1.692 1.235 3.124 3.088 3.124ZM131.121 11.03c-1.918 0-3.51-1.595-3.51-3.515 0-1.92 1.592-3.515 3.51-3.515 1.918 0 3.511 1.595 3.511 3.515 0 1.92-1.593 3.515-3.511 3.515Zm-2.925 1.724h5.851v16.273h-5.851V12.754ZM116.97 29.515c-5.071 0-8.939-3.905-8.939-8.657 0-4.719 3.868-8.624 8.939-8.624s8.939 3.905 8.939 8.624c0 4.752-3.868 8.657-8.939 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM96.983 37c-4.03 0-6.956-1.79-8.451-4.98l4.843-2.603c.52 1.107 1.495 2.246 3.51 2.246 2.114 0 3.511-1.335 3.674-3.678-.78.684-2.016 1.204-3.868 1.204-4.519 0-8.16-3.482-8.16-8.364 0-4.718 3.869-8.559 8.94-8.559 5.201 0 8.939 3.613 8.939 8.592v6.444c0 5.858-4.064 9.698-9.427 9.698Zm.39-13.31c1.755 0 3.088-1.205 3.088-2.995 0-1.757-1.332-2.929-3.088-2.929-1.723 0-3.088 1.172-3.088 2.93 0 1.79 1.365 2.993 3.088 2.993ZM78.607 29.515c-5.071 0-8.94-3.905-8.94-8.657 0-4.719 3.869-8.624 8.94-8.624 5.07 0 8.939 3.905 8.939 8.624 0 4.752-3.869 8.657-8.94 8.657Zm0-5.5c1.853 0 3.088-1.432 3.088-3.125 0-1.724-1.235-3.156-3.088-3.156s-3.088 1.432-3.088 3.156c0 1.693 1.235 3.125 3.088 3.125ZM59.013 7.06v16.434H68.7v5.533H58.2c-3.705 0-5.2-1.953-5.2-5.045V7.06h6.013Z"-->
|
||||||
|
<!-- ></path>-->
|
||||||
|
<!-- </svg>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
</div>
|
||||||
<video
|
<video
|
||||||
:muted="swiper_instance?.realIndex !== index ? true : isMuted"
|
:muted="swiper_instance?.realIndex !== index ? true : isMuted"
|
||||||
autoplay
|
autoplay
|
||||||
loop
|
loop
|
||||||
class="absolute inset-0 size-full object-cover"
|
class="absolute inset-0 size-full object-cover brightness-90"
|
||||||
:src="slide.video"
|
:src="slide.video"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
@@ -68,27 +170,33 @@ const onChange = (swiper: SwiperClass) => {
|
|||||||
:alt="slide.title"
|
:alt="slide.title"
|
||||||
/>
|
/>
|
||||||
<div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
|
<div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
|
||||||
<div class="px-20 absolute z-10 w-full bottom-36">
|
<div class="header-slider-item-child absolute z-10 w-full bottom-36">
|
||||||
<div class="border-b border-white/10 pb-6 flex flex-col gap-4">
|
<div class="w-full container">
|
||||||
<h3 class="typo-h-1 tracking-[-2px] text-white">
|
<div class="border-b border-white/10 pb-6 flex flex-col gap-4">
|
||||||
{{ slide.title }}
|
<h3 class="typo-h-1 tracking-[-2px] text-white">
|
||||||
</h3>
|
{{ slide.title }}
|
||||||
<div class="flex justify-between items-end">
|
</h3>
|
||||||
|
<div class="flex justify-between items-end">
|
||||||
<span class="typo-p-lg text-white">
|
<span class="typo-p-lg text-white">
|
||||||
{{ slide.description }}
|
{{ slide.description }}
|
||||||
</span>
|
</span>
|
||||||
<Button class="invert rounded-full hover:bg-transparent">
|
<Button class="invert rounded-full hover:bg-transparent">
|
||||||
مشاهده
|
مشاهده
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SwiperSlide>
|
</SwiperSlide>
|
||||||
</Swiper>
|
</Swiper>
|
||||||
<div class="absolute w-full bottom-20 left-[50%] translate-x-[-50%] z-100">
|
<div
|
||||||
|
id="header-slider-pagination"
|
||||||
|
class="absolute w-full left-1/2 -translate-x-1/2 z-100"
|
||||||
|
:style="{ bottom : '80px' }"
|
||||||
|
>
|
||||||
<div class="container h-full">
|
<div class="container h-full">
|
||||||
<div class="h-full flex items-center justify-between px-20">
|
<div id="header-slider-pagination-child" class="h-full flex items-center justify-between">
|
||||||
<button @click="swiper_instance?.slidePrev()">
|
<button @click="swiper_instance?.slidePrev()">
|
||||||
<Icon
|
<Icon
|
||||||
class="**:stroke-white cursor-pointer"
|
class="**:stroke-white cursor-pointer"
|
||||||
@@ -117,5 +225,6 @@ const onChange = (swiper: SwiperClass) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 MiB |
Reference in New Issue
Block a user