haditha_ui/pages/hadith/index.vue
mustafa-rezae 631e6cce32 Add font icons.
Work on hero page
2025-02-16 16:21:52 +03:30

226 lines
5.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<HadithLayout :menu="sidbarMenu">
<section class="section-one flex flex-col justify-center">
<div class="bg-container h-full">
<navigation-menu></navigation-menu>
<div class="text-logo flex justify-center flex-col items-center">
<NuxtImg fit="auto" quality="80" placeholder src="/img/logo.svg" />
<div class="title">
کاوش با
<span class="badge-style"> هوش مصنوعی </span>
در احادیث اسلامی
</div>
</div>
</div>
<div class="search-box-container flex justify-center">
<auto-complation></auto-complation>
</div>
</section>
<section class="section-two">
<div class="bg-container h-full">
<div class="flex flex-col items-center py-6">
<div>قابلیت ها</div>
<div>
<NuxtImg
width="32"
height="32"
fit="auto"
quality="80"
placeholder
src="/img/chevron-down.svg"
/>
</div>
</div>
</div>
</section>
</HadithLayout>
</template>
<script>
import { useStorage } from "@vueuse/core";
import { mapActions, mapState } from "pinia";
import { useHadithStore } from "@hadith/stores/hadithStore";
import { useCommonStore } from "~/stores/commonStore";
import hadithApi from "@hadith/apis/hadithApi.js";
import navbarMenu from "@hadith/json/hadith/menu.json";
export default {
name: "hadith",
setup() {
useHead({
title: import.meta.env.VITE_HADITH_PAGE_TITLE,
meta: [
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
],
bodyAttrs: {
class: import.meta.env.VITE_HADITH_SYSTEM,
},
});
definePageMeta({
layout: false,
name: "hadith",
});
},
created() {
this.httpService = useNuxtApp()["$http"];
},
async mounted() {
let schemaExist = this.searchActiveTabGetter && this.searchSchemaGetter;
if (!schemaExist) this.getSchemas();
else this.setSearchDomain(this.searchActiveTabGetter);
if (window.outerWidth < 992) {
this.$store.commit("TOGGLE_SIDEBAR_MENU");
this.showMobileFilterList = true;
}
},
data() {
return {
httpService: {},
logo: "",
sidbarMenuDefault: navbarMenu,
};
},
computed: {
// ...mapState(useHadithStore, [
// "domainActiveGetter",
// "searchActiveTabGetter",
// "searchSchemaGetter",
// "searchSynonymTitleGetter",
// ]),
...mapState(useCommonStore, [
"currentUser",
"organNameGetter",
"isSidebarCollapsed",
"userPermisionGetter",
]),
sidbarMenu() {
return this.sidbarMenuDefault;
},
},
methods: {
...mapActions(useCommonStore, [
"TOGGLE_SIDEBAR_MENU",
"sidebarCollapsedSetter",
]),
// ...mapActions(useHadithStore, [
// "searchActiveTabSetter",
// "searchSchemaSetter",
// "domainActiveSetter",
// "searchSynonymTitleSetter",
// ]),
async getSchemas() {
let localStoageSearchSchema = useStorage("searchSchema", undefined).value;
if (localStoageSearchSchema) {
let searchSchema = JSON.parse(localStoageSearchSchema);
this.searchSchemaSetter(searchSchema);
this.searchActiveTabSetter(searchSchema[0]);
} else {
const payload = {
organ: this.organNameGetter,
system: "search",
build_state: buildState(),
};
const url = repoUrl() + hadithApi.schema.list;
this.httpService
.postRequest(url, payload)
.then((res) => {
this.searchSchemaSetter(res.data.search);
this.searchActiveTabSetter(res.data.search[0]);
this.fetchingData = false;
const toast = useToast();
toast.add({
title: "Success",
description: "Your action was completed successfully.",
color: "success",
});
})
.catch((err) => {
this.fetchingData = false;
});
}
},
},
components: {
AutoComplation: defineAsyncComponent(() =>
import("@hadith/components/hadith/AutoComplation.vue")
),
NavigationMenu: defineAsyncComponent(() =>
import("@hadith/components/hadith/NavigationMenu.vue")
),
AutoComplation: defineAsyncComponent(() =>
import("@hadith/components/hadith/AutoComplation.vue")
),
HadithLayout: defineAsyncComponent(() =>
import("@hadith/layouts/HadithLayout.vue")
),
},
};
</script>
<style scoped>
.section-one {
.bg-container {
height: 521px;
background-size: 100% auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url("/img/background.svg"),
linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%);
}
.text-logo {
padding-top: 10em;
position: relative;
.title {
margin-top: 3.5em;
font-family: IRANSansX;
font-size: 14px;
line-height: 21px;
letter-spacing: 0%;
text-align: center;
color: #1b2132;
}
.badge-style {
width: 100;
height: 23;
border-radius: 40px;
padding-right: 8px;
padding-bottom: 2px;
padding-left: 8px;
gap: 10px;
color: #fff;
background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
}
}
.search-box-container {
padding-top: 1em;
padding-bottom: 4em; /*64px */
}
}
.section-two {
font-weight: 200;
font-size: 20px;
line-height: 30px;
letter-spacing: 0%;
text-align: center;
}
</style>