HAM!DREZA
404 lines
16 KiB
Vue
404 lines
16 KiB
Vue
<template>
|
|
<div class="flex justify-center">
|
|
<nav
|
|
class="fixed bg-white hidden md:block w-full rounded-b-2xl shadow-md z-[100]"
|
|
:class="{
|
|
'!hidden':
|
|
$route.path === '/signup' ||
|
|
$route.path === '/login' ||
|
|
$route.path === '/reset-password' ||
|
|
$route.path === '/new-password',
|
|
}"
|
|
>
|
|
<div
|
|
class="text-white bg-[#252731] flex justify-between items-center px-[1.25vw] h-[2.448vw]"
|
|
>
|
|
<div id="text" class="gap-x-[0.625vw] flex -ms-[0.052vw]">
|
|
<span class="p-[0.573vw] text-[0.938vw]">شینان</span>
|
|
<span class="p-[0.573vw] text-[0.938vw]">فروشگاه</span>
|
|
</div>
|
|
<div id="contact" class="flex gap-x-[0.833vw] me-[0.052vw]">
|
|
<span class="text-[0.833vw] flexBox gap-[0.5vw]">
|
|
<svg
|
|
width="1.042vw"
|
|
height="1.094vw"
|
|
viewBox="0 0 20 21"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M18.3077 15.7745C18.3077 16.0745 18.241 16.3829 18.0994 16.6829C17.9577 16.9829 17.7744 17.2662 17.5327 17.5329C17.1244 17.9829 16.6744 18.3079 16.166 18.5162C15.666 18.7245 15.1244 18.8329 14.541 18.8329C13.691 18.8329 12.7827 18.6329 11.8243 18.2245C10.866 17.8162 9.90768 17.2662 8.95768 16.5745C7.99935 15.8745 7.09102 15.0995 6.22435 14.2412C5.36602 13.3745 4.59102 12.4662 3.89935 11.5162C3.21602 10.5662 2.66602 9.6162 2.26602 8.67453C1.86602 7.72453 1.66602 6.8162 1.66602 5.94953C1.66602 5.38286 1.76602 4.8412 1.96602 4.3412C2.16602 3.83287 2.48268 3.3662 2.92435 2.94953C3.45768 2.42453 4.04102 2.1662 4.65768 2.1662C4.89102 2.1662 5.12435 2.2162 5.33268 2.3162C5.54935 2.4162 5.74102 2.5662 5.89102 2.78287L7.82435 5.50787C7.97435 5.7162 8.08268 5.90786 8.15768 6.0912C8.23268 6.2662 8.27435 6.4412 8.27435 6.59953C8.27435 6.79953 8.21602 6.99953 8.09935 7.1912C7.99102 7.38286 7.83268 7.58286 7.63268 7.78286L6.99935 8.4412C6.90768 8.53286 6.86602 8.6412 6.86602 8.77453C6.86602 8.8412 6.87435 8.89953 6.89102 8.9662C6.91602 9.03286 6.94102 9.08286 6.95768 9.13286C7.10768 9.40786 7.36602 9.7662 7.73268 10.1995C8.10768 10.6329 8.50768 11.0745 8.94102 11.5162C9.39102 11.9579 9.82435 12.3662 10.266 12.7412C10.6993 13.1079 11.0577 13.3579 11.341 13.5079C11.3827 13.5245 11.4327 13.5495 11.491 13.5745C11.5577 13.5995 11.6244 13.6079 11.6994 13.6079C11.841 13.6079 11.9494 13.5579 12.041 13.4662L12.6744 12.8412C12.8827 12.6329 13.0827 12.4745 13.2744 12.3745C13.466 12.2579 13.6577 12.1995 13.866 12.1995C14.0243 12.1995 14.191 12.2329 14.3744 12.3079C14.5577 12.3829 14.7494 12.4912 14.9577 12.6329L17.716 14.5912C17.9327 14.7412 18.0827 14.9162 18.1744 15.1245C18.2577 15.3329 18.3077 15.5412 18.3077 15.7745Z"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
/>
|
|
</svg>
|
|
تلفن: 67341</span
|
|
>
|
|
|
|
|
<span class="text-[0.833vw] flexBox gap-[0.5vw]">
|
|
<svg
|
|
width="1.042vw"
|
|
height="1.094vw"
|
|
viewBox="0 0 20 21"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M14.167 17.5833H5.83366C3.33366 17.5833 1.66699 16.3333 1.66699 13.4167V7.58333C1.66699 4.66667 3.33366 3.41667 5.83366 3.41667H14.167C16.667 3.41667 18.3337 4.66667 18.3337 7.58333V13.4167C18.3337 16.3333 16.667 17.5833 14.167 17.5833Z"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M14.1663 8L11.558 10.0833C10.6997 10.7667 9.29134 10.7667 8.433 10.0833L5.83301 8"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
ShinanLearning@gmail.com</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex w-full justify-between h-100 px-[1.25vw] py-[0.625vw]">
|
|
<img
|
|
src="/images/Logo.png"
|
|
alt="logo"
|
|
class="h-[3.698vw] w-[3.698vw]"
|
|
/>
|
|
<div
|
|
class="relative navigator flexBox gap-[2.2vw] text-[0.938vw] text-[#383E43] font-medium"
|
|
>
|
|
<div
|
|
v-if="showSearchBox"
|
|
id="searchBox"
|
|
class="absolute right-0 w-full"
|
|
>
|
|
<svg
|
|
class="h-[1.406vw] w-[1.406vw] absolute top-[0.5vw] right-[1vw]"
|
|
viewBox="0 0 26 27"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12.4582 23.25C18.1421 23.25 22.7498 18.6422 22.7498 12.9583C22.7498 7.27436 18.1421 2.66663 12.4582 2.66663C6.77424 2.66663 2.1665 7.27436 2.1665 12.9583C2.1665 18.6422 6.77424 23.25 12.4582 23.25Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M23.8332 24.3333L21.6665 22.1666"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
<input
|
|
autofocus
|
|
id="searchElement"
|
|
v-model="search"
|
|
@click="logClick(true)"
|
|
@blur="logClick(false)"
|
|
type="text"
|
|
placeholder="نام آموزش، دوره و... را وارد کنید"
|
|
class="thin w-full h-[2.604vw] rounded-[0.521vw] bg-[#F5F5F5] text-[#878787] text-[0.658vw] ps-[3vw]"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="border-e pe-[0.8vw] cursor-pointer"
|
|
@click="openSearchBox"
|
|
>
|
|
<svg
|
|
width="1.458vw"
|
|
height="1.406vw"
|
|
viewBox="0 0 28 27"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M13.4375 23.625C19.34 23.625 24.125 18.84 24.125 12.9375C24.125 7.03496 19.34 2.25 13.4375 2.25C7.53496 2.25 2.75 7.03496 2.75 12.9375C2.75 18.84 7.53496 23.625 13.4375 23.625Z"
|
|
stroke="#0D3F40"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M25.25 24.75L23 22.5"
|
|
stroke="#0D3F40"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<nuxt-link to="/">
|
|
<span
|
|
class="flexBox gap-[0.6vw] !-ms-[0.8vw]"
|
|
:class="{ 'text-primaryGreen': $route.path === '/' }"
|
|
>
|
|
<svg
|
|
width="1.302vw"
|
|
height="1.302vw"
|
|
viewBox="0 0 25 25"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
:class="{ 'stroke-primaryGreen': $route.path === '/' }"
|
|
d="M6.94 2.5H18.05C21.61 2.5 22.5 3.39 22.5 6.94V13.27C22.5 16.83 21.61 17.71 18.06 17.71H6.94C3.39 17.72 2.5 16.83 2.5 13.28V6.94C2.5 3.39 3.39 2.5 6.94 2.5Z"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
:class="{ 'stroke-primaryGreen': $route.path === '/' }"
|
|
d="M12.5 17.72V22.5"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
:class="{ 'stroke-primaryGreen': $route.path === '/' }"
|
|
d="M2.5 13.5H22.5"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
:class="{ 'stroke-primaryGreen': $route.path === '/' }"
|
|
d="M8 22.5H17"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
صفحه اصلی
|
|
</span>
|
|
</nuxt-link>
|
|
<nuxt-link to="/courses">
|
|
<span
|
|
class="flexBox gap-[0.6vw]"
|
|
:class="{ 'text-primaryGreen': $route.path === '/courses' }"
|
|
>
|
|
<svg
|
|
width="1.302vw"
|
|
height="1.302vw"
|
|
viewBox="0 0 25 25"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
:class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
|
|
d="M10.55 3.03004L4.53002 6.96004C2.60002 8.22004 2.60002 11.04 4.53002 12.3L10.55 16.23C11.63 16.94 13.41 16.94 14.49 16.23L20.48 12.3C22.4 11.04 22.4 8.23004 20.48 6.97004L14.49 3.04004C13.41 2.32004 11.63 2.32004 10.55 3.03004Z"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
:class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
|
|
d="M6.13012 13.58L6.12012 18.27C6.12012 19.54 7.10012 20.9 8.30012 21.3L11.4901 22.36C12.0401 22.54 12.9501 22.54 13.5101 22.36L16.7001 21.3C17.9001 20.9 18.8801 19.54 18.8801 18.27V13.63"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
:class="{ 'stroke-primaryGreen': $route.path === '/courses' }"
|
|
d="M21.8999 15.5V9.5"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
دوره های آموزشی
|
|
</span>
|
|
</nuxt-link>
|
|
<nuxt-link to="/about-us">
|
|
<span
|
|
class="flexBox gap-[0.6vw]"
|
|
:class="{ 'text-primaryGreen': $route.path === '/about-us' }"
|
|
>
|
|
<svg
|
|
width="1.302vw"
|
|
height="1.302vw"
|
|
viewBox="0 0 25 25"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
:class="{
|
|
'stroke-primaryGreen': $route.path === '/about-us',
|
|
}"
|
|
d="M12.5 22.5C18 22.5 22.5 18 22.5 12.5C22.5 7 18 2.5 12.5 2.5C7 2.5 2.5 7 2.5 12.5C2.5 18 7 22.5 12.5 22.5Z"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
:class="{
|
|
'stroke-primaryGreen': $route.path === '/about-us',
|
|
}"
|
|
d="M12.5 8.5V13.5"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
:class="{
|
|
'stroke-primaryGreen': $route.path === '/about-us',
|
|
}"
|
|
d="M12.4946 16.5H12.5036"
|
|
stroke="#383E43"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
درباره ما</span
|
|
>
|
|
</nuxt-link>
|
|
</div>
|
|
|
|
<nuxt-link to="/account" v-if="authUser">
|
|
<img
|
|
v-if="authUser.avatarMedia"
|
|
:src="authUser?.avatarMedia"
|
|
alt="profile"
|
|
class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
|
|
/>
|
|
<img
|
|
v-else
|
|
src="/public/images/alt.png"
|
|
alt="profile"
|
|
class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
|
|
/>
|
|
</nuxt-link>
|
|
<nuxt-link to="/login" v-else>
|
|
<svg
|
|
class="h-[3.698vw] w-[3.698vw] rounded-full p-[0.521vw]"
|
|
viewBox="0 0 27 27"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
opacity="0.4"
|
|
d="M13.5 2.25C10.5525 2.25 8.15625 4.64625 8.15625 7.59375C8.15625 10.485 10.4175 12.825 13.365 12.9262C13.455 12.915 13.545 12.915 13.6125 12.9262C13.635 12.9262 13.6462 12.9262 13.6687 12.9262C13.68 12.9262 13.68 12.9262 13.6912 12.9262C16.5712 12.825 18.8325 10.485 18.8437 7.59375C18.8437 4.64625 16.4475 2.25 13.5 2.25Z"
|
|
fill="#878787"
|
|
/>
|
|
<path
|
|
d="M19.2151 15.9187C16.0763 13.8262 10.9576 13.8262 7.79633 15.9187C6.36758 16.875 5.58008 18.1687 5.58008 19.5525C5.58008 20.9362 6.36758 22.2187 7.78508 23.1637C9.36008 24.2212 11.4301 24.75 13.5001 24.75C15.5701 24.75 17.6401 24.2212 19.2151 23.1637C20.6326 22.2075 21.4201 20.925 21.4201 19.53C21.4088 18.1462 20.6326 16.8637 19.2151 15.9187Z"
|
|
fill="#878787"
|
|
/>
|
|
</svg>
|
|
</nuxt-link>
|
|
</div>
|
|
</nav>
|
|
<div
|
|
v-if="showSearchBox"
|
|
class="z-[10] w-[28vw] pt-[0.5vw] pb-[2vw] flex flex-col absolute mt-[8vw] rounded-[0.521vw] bg-[#F5F5F5] border shadow-md"
|
|
>
|
|
<span
|
|
class="text-[0.6vw] w-full text-end pe-[0.8vw] cursor-pointer"
|
|
@click="closeSearchBox"
|
|
>بستن</span
|
|
>
|
|
|
|
<div class="flexBox mt-[1vw] text-[0.8vw]" v-if="search?.length < 3">
|
|
برای جستجو حداقل 3 کلمه وارد کنید...
|
|
</div>
|
|
|
|
<div v-else>
|
|
<p v-if="data.courses.length < 1" class="flexBox mt-[1vw] text-[0.8vw]">
|
|
دوره ای یافت نشد !!!
|
|
</p>
|
|
|
|
<div v-else class="cursor-pointer px-[1vw] pt-[2vw] space-y-[1.5vw]">
|
|
<div
|
|
@click="goToCourse(item?._id)"
|
|
v-for="item in data.courses"
|
|
:key="item.id"
|
|
class="flex justify-between items-center"
|
|
>
|
|
<div class="flex gap-[0.5vw]">
|
|
<img :src="item.image" alt="" class="h-[2.5vw] rounded-[0.2vw]" />
|
|
<div>
|
|
<p class="text-[0.8vw]">
|
|
{{ item.name }}
|
|
</p>
|
|
<p class="text-[0.6vw]">{{ item.categories[0].name }}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-[0.7vw]">مشاهده دوره</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div v-for="item in data.courses" :key="item.id">{{ item.name }}</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
const { authUser } = useAuth();
|
|
const showSearchBox = useState("showSearchBox", () => false);
|
|
const search = ref(null);
|
|
const openSearchBox = () => {
|
|
search.value = "";
|
|
showSearchBox.value = true;
|
|
if (process.client) {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
};
|
|
const router = useRouter();
|
|
const goToCourse = (val) =>{
|
|
router.push({
|
|
path: `/${val}`,
|
|
});
|
|
showSearchBox.value = false;
|
|
|
|
}
|
|
const closeSearchBox = () => {
|
|
showSearchBox.value = false;
|
|
if (process.client) {
|
|
document.body.classList.remove("overflow-hidden");
|
|
}
|
|
};
|
|
|
|
const query = ref({});
|
|
const { data, refresh, pending } = await useFetch(() => "/api/course", {
|
|
method: "POST",
|
|
query: query,
|
|
});
|
|
watch(search, () => {
|
|
query.value = { name: search.value };
|
|
refresh();
|
|
|
|
|
|
});
|
|
|
|
</script> |