haditha_ui/pages/haditha/public-pages/index.vue
mustafa-rezae 953d98f3be Rename files.
Add svg icons
2025-03-06 14:58:20 +03:30

107 lines
2.8 KiB
Vue

<script setup>
const route = useRoute();
definePageMeta({
layout: false,
name: "hadithaPublicPage",
});
useHead({
name: "hadithaPublicPage",
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 HadithaLayout = defineAsyncComponent(() =>
import("@haditha/layouts/HadithaLayout.vue")
);
const NavigationMenu = defineAsyncComponent(() =>
import("@haditha/components/haditha/NavigationMenu.vue")
);
const AboutUs = defineAsyncComponent(() =>
import("@haditha/pages/haditha/public-pages/about-us.vue")
);
const ContactUs = defineAsyncComponent(() =>
import("@haditha/pages/haditha/public-pages/contactus.vue")
);
const Rules = defineAsyncComponent(() =>
import("@haditha/pages/haditha/public-pages/rules.vue")
);
onMounted(() => {
console.info(route.path);
// if (route.path == "/haditha/about-us") componentName.value = "AboutUs";
// if (route.path == "/haditha/contact-us") componentName.value = "ContactUs";
// if (route.path == "/haditha/rules") componentName.value = "Rules";
});
</script>
<template>
<HadithaLayout>
<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/haditha-title.svg"
/>
</div>
</div>
<div class="page-content p-6">
<ContactUs v-if="route.path == '/haditha/contact-us'"></ContactUs>
<AboutUs v-if="route.path == '/haditha/about-us'"></AboutUs>
<Rules v-else-if="route.path == '/haditha/rules'"></Rules>
</div>
</UContainer>
</div>
</HadithaLayout>
</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>