mohadese namavar
94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<template>
|
|
<NuxtLayout :name="device" :config="config">
|
|
<main class="about-us">
|
|
<section>
|
|
<h1>{{ $t("aboutUs") }}</h1>
|
|
<ul>
|
|
<li v-for="({ title, content }, i) in items" :key="i">
|
|
<span />
|
|
<div>
|
|
<h2>{{ title }}</h2>
|
|
<div v-html="content" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({ path: '/about-us' })
|
|
|
|
const config = reactive({
|
|
mobile: {
|
|
header: { search: true, menu: true },
|
|
navigation: false
|
|
},
|
|
})
|
|
const { device } = inject('service')
|
|
|
|
const items = ref([])
|
|
|
|
const { status, data, error } = await useFetch('/api/abouts')
|
|
|
|
if (status.value == 'success')
|
|
items.value = data.value
|
|
else throw createError(error.value)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.about-us {
|
|
@apply w-full flex pt-8 pb-5 lg:pt-[6.5rem] lg:pb-[9.3rem];
|
|
|
|
section {
|
|
@apply w-full flex flex-col gap-6 lg:gap-[4.1rem];
|
|
|
|
h1 {
|
|
@apply mx-auto text-zinc-800 font-black font-vazir text-lg lg:text-3xl;
|
|
}
|
|
|
|
ul {
|
|
@apply flex flex-col;
|
|
|
|
li {
|
|
&:nth-child(odd) {
|
|
@apply bg-slate-100;
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
@apply bg-zinc-100;
|
|
}
|
|
|
|
|
|
@apply w-full flex overflow-hidden;
|
|
@apply h-[14.7rem] gap-[1.1rem] p-6;
|
|
@apply lg:h-[17.8rem] lg:gap-[5.5rem] lg:px-[5.3rem] lg:py-[4.4rem] lg:items-center;
|
|
|
|
span {
|
|
@apply max-lg:hidden w-36 h-36 bg-white shrink-0;
|
|
}
|
|
|
|
&>div {
|
|
@apply flex flex-col font-vazir gap-[1.1rem] xl:gap-6;
|
|
|
|
h2 {
|
|
@apply w-max text-primary-600 font-black border-b-2 border-current pb-2;
|
|
@apply text-lg lg:text-3xl lg:border-b-4 lg:pb-2.5;
|
|
}
|
|
|
|
div {
|
|
p {
|
|
@apply text-zinc-800 font-normal font-vazir;
|
|
@apply w-auto max-w-[53.5rem] text-sm lg:text-xl leading-6;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|