<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>