190 lines
4.6 KiB
Vue
190 lines
4.6 KiB
Vue
<script setup>
|
||
definePageMeta({
|
||
layout: false,
|
||
name: "hadithContact",
|
||
});
|
||
useHead({
|
||
name: "hadithContact",
|
||
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | تماس با ما`,
|
||
meta: [
|
||
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
|
||
],
|
||
bodyAttrs: {
|
||
class: import.meta.env.VITE_HADITH_SYSTEM,
|
||
},
|
||
});
|
||
|
||
// components declaration
|
||
const HadithLayout = defineAsyncComponent(() =>
|
||
import("@hadith/layouts/HadithLayout.vue")
|
||
);
|
||
const NavigationMenu = defineAsyncComponent(() =>
|
||
import("@hadith/components/hadith/NavigationMenu.vue")
|
||
);
|
||
</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">
|
||
<span class="top-left-bgi z-0"></span>
|
||
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-content p-6">
|
||
<div class="mb-4">
|
||
<span class="label">تلفن ثابت</span>
|
||
<span class="value"> ۰۲۵۳۲۹۰۶۴۵۲</span>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<span class="label">تلفن همراه </span>
|
||
<span class="value">۰۹۱۲۷۵۰۵۰۵۰ </span>
|
||
</div>
|
||
<div class="mb-4">
|
||
<span class="label">پشتیبان ایتا </span>
|
||
<span class="value"> ۰۹۱۲۷۵۰۵۰۵۰</span>
|
||
</div>
|
||
<div class="mb-4">
|
||
<span class="label">کدپستی </span>
|
||
<span class="value">۱۲۳۴۵۶۷۸ </span>
|
||
</div>
|
||
<div class="mb-4">
|
||
<span class="label"> آدرس</span>
|
||
<span class="value">
|
||
دفتر مرکزی: قم، خیابان معلم، کوچه ۱۰، فرعی ۳ پلاک ۵۵ ساختمان
|
||
اشراق، واحد ۳۰۵</span
|
||
>
|
||
</div>
|
||
<div class="location">
|
||
<NuxtImg
|
||
fit="auto"
|
||
quality="80"
|
||
placeholder
|
||
src="/img/location.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</UContainer>
|
||
</div>
|
||
</HadithLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page-container {
|
||
background: #f7fffd;
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
.top-left-bgi {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background-image: url("../../../assets/hadith/images/modal-top-bgi.png");
|
||
backdrop-filter: blur(54px);
|
||
width: 447px;
|
||
height: 447px;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
background-repeat: no-repeat;
|
||
background-size: auto;
|
||
z-index: -1;
|
||
}
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-image: url("../../../assets/hadith/images/modal-bttom-right-bgi.png");
|
||
backdrop-filter: blur(54px);
|
||
width: 438px;
|
||
height: 238px;
|
||
mix-blend-mode: Multiply;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
z-index: -1;
|
||
}
|
||
|
||
&::after {
|
||
content: "";
|
||
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
|
||
width: 458px;
|
||
height: 239px;
|
||
mix-blend-mode: Multiply;
|
||
background-image: url("../../../assets/hadith/images/modal-bottom-left-bgi.png");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
backdrop-filter: blur(54px);
|
||
z-index: -1;
|
||
}
|
||
.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);
|
||
|
||
.label {
|
||
display: inline-block;
|
||
margin-inline-end: 1em;
|
||
font-family: IRANSansX;
|
||
font-weight: 300;
|
||
font-size: 14px;
|
||
line-height: 21px;
|
||
letter-spacing: 0%;
|
||
text-align: right;
|
||
color: #626b84;
|
||
width: 77px;
|
||
height: 21;
|
||
}
|
||
.value {
|
||
font-family: IRANSansX;
|
||
font-weight: 300;
|
||
font-size: 14px;
|
||
line-height: 21px;
|
||
letter-spacing: 0%;
|
||
text-align: right;
|
||
color: #1b2132;
|
||
}
|
||
|
||
.location {
|
||
width: 672;
|
||
height: 348;
|
||
border-width: 1px;
|
||
border-radius: 16px;
|
||
|
||
border: 1px solid;
|
||
|
||
border-image-source: linear-gradient(
|
||
102.02deg,
|
||
#4be8ae 7.38%,
|
||
#00a762 91.78%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|