haditha_ui/pages/hadith/public-pages/index.vue
2025-02-26 11:22:21 +03:30

107 lines
2.7 KiB
Vue

<script setup>
const route = useRoute();
definePageMeta({
layout: false,
name: "hadithPublicPage",
});
useHead({
name: "hadithPublicPage",
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | در باره حدیثا`,
meta: [
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
],
bodyAttrs: {
class: import.meta.env.VITE_HADITH_SYSTEM,
},
});
const componentName = ref("");
// components declaration
const HadithLayout = defineAsyncComponent(() =>
import("@hadith/layouts/HadithLayout.vue")
);
const NavigationMenu = defineAsyncComponent(() =>
import("@hadith/components/hadith/NavigationMenu.vue")
);
const AboutUs = defineAsyncComponent(() =>
import("@hadith/pages/hadith/public-pages/about-us.vue")
);
const ContactUs = defineAsyncComponent(() =>
import("@hadith/pages/hadith/public-pages/contactus.vue")
);
const Rules = defineAsyncComponent(() =>
import("@hadith/pages/hadith/public-pages/rules.vue")
);
onMounted(() => {
console.info(route.path);
// if (route.path == "/hadith/about-us") componentName.value = "AboutUs";
// if (route.path == "/hadith/contact-us") componentName.value = "ContactUs";
// if (route.path == "/hadith/rules") componentName.value = "Rules";
});
</script>
<template>
<HadithLayout>
<div class="page-container h-full">
<!-- max-w-[var(--ui-container-two)] -->
<UContainer class="page-inner-container sm:px-6 lg:px-4">
<navigation-menu></navigation-menu>
<div class="page-header pt-38 pb-4 flex justify-between items-center">
<div class="flex items-center">
<h1 class="m-0 title">درباره</h1>
<NuxtImg
fit="auto"
quality="80"
placeholder
src="/img/haditha-title.svg"
/>
</div>
</div>
<div class="page-content p-6">
<ContactUs v-if="route.path == '/hadith/contact-us'"></ContactUs>
<AboutUs v-if="route.path == '/hadith/about-us'"></AboutUs>
<Rules v-else-if="route.path == '/hadith/rules'"></Rules>
</div>
</UContainer>
</div>
</HadithLayout>
</template>
<style scoped>
.page-container {
background: #f7fffd;
.page-inner-container {
.page-header {
color: var(--ui-color-two);
.title {
font-family: IRANSansX;
font-weight: 300;
font-size: 24px;
line-height: 36px;
letter-spacing: 0%;
text-align: center;
}
}
.page-content {
color: var(--ui-color-two);
p {
font-family: IRANSansX;
font-weight: 300;
font-size: 14px;
line-height: 21px;
letter-spacing: 0%;
text-align: right;
}
}
}
}
</style>