Split desktop and mobile layouts with shared page data so APIs fetch once per context.
Add layout shells, desktop views, module-level page caches, and UI fixes for auth, home, wallet, transactions, address, and related pages. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div
|
||||
:class="variant === 'desktop'
|
||||
? (isBoursecu ? 'dabout-content--boursecu' : 'dabout-content--default')
|
||||
: (isBoursecuProject()
|
||||
? 'mt-5 border-solid border-2 border-primary text-primary rounded-[12px] p-4 text-xs leading-5'
|
||||
: 'bg-primary text-white rounded-[12px] p-4 text-xs leading-5')"
|
||||
class="dabout-content"
|
||||
>
|
||||
<template v-for="(section, sectionIndex) in aboutSections" :key="sectionIndex">
|
||||
<div
|
||||
v-if="sectionIndex > 0"
|
||||
:class="variant === 'desktop' ? 'dabout-content__divider' : 'w-full h-1px my-3 bg-tertiary'"
|
||||
></div>
|
||||
<div
|
||||
v-if="section.title"
|
||||
:class="variant === 'desktop' ? 'dabout-content__title' : 'font-bold text-sm mb-2'"
|
||||
>
|
||||
{{ section.title }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(paragraph, paragraphIndex) in section.paragraphs ?? []"
|
||||
:key="`paragraph-${sectionIndex}-${paragraphIndex}`"
|
||||
:class="[
|
||||
variant === 'desktop' ? 'dabout-content__paragraph' : '',
|
||||
paragraphIndex > 0 ? 'mt-3' : '',
|
||||
]"
|
||||
>
|
||||
{{ paragraph }}
|
||||
</div>
|
||||
<ul
|
||||
v-if="(section.items ?? []).length"
|
||||
:class="variant === 'desktop' ? 'dabout-content__list' : ''"
|
||||
>
|
||||
<li
|
||||
v-for="(item, itemIndex) in section.items ?? []"
|
||||
:key="`item-${sectionIndex}-${itemIndex}`"
|
||||
:class="variant === 'desktop' ? 'dabout-content__list-item' : 'mt-2'"
|
||||
>
|
||||
<template v-if="variant !== 'desktop'">• {{ item }}</template>
|
||||
<template v-else>{{ item }}</template>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<div
|
||||
v-if="variant !== 'desktop'"
|
||||
class="w-full h-1px my-3 bg-tertiary"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useAboutPageContext } from '../composables/useAboutPage'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
variant?: 'mobile' | 'desktop'
|
||||
}>(),
|
||||
{ variant: 'mobile' },
|
||||
)
|
||||
|
||||
const {
|
||||
aboutSections,
|
||||
isBoursecu,
|
||||
isBoursecuProject,
|
||||
} = useAboutPageContext()
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div :class="variant === 'desktop' ? 'dabout-support' : 'wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white'">
|
||||
<a class="w-full" :href="supportHref">
|
||||
<BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
|
||||
</a>
|
||||
<a :href="baleHref" target="_blank" rel="noopener noreferrer">
|
||||
<img src="@/assets/img/bale.png" alt="بله" :class="variant === 'desktop' ? 'dabout-support__bale' : 'h-10 w-10'" />
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import { useAboutPageContext } from '../composables/useAboutPage'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
variant?: 'mobile' | 'desktop'
|
||||
}>(),
|
||||
{ variant: 'mobile' },
|
||||
)
|
||||
|
||||
const {
|
||||
config,
|
||||
getProjectSupportPhoneLink,
|
||||
getProjectBaleLink,
|
||||
} = useAboutPageContext()
|
||||
|
||||
const supportHref = computed(() =>
|
||||
config.config.name === 'garoosi'
|
||||
? 'tel:09031265925'
|
||||
: getProjectSupportPhoneLink(),
|
||||
)
|
||||
|
||||
const baleHref = computed(() =>
|
||||
config.config.name === 'garoosi'
|
||||
? 'https://ble.ir/garoosigallery'
|
||||
: getProjectBaleLink(),
|
||||
)
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
import { computed, inject, provide, type InjectionKey, type ComputedRef } from 'vue'
|
||||
import { useConfigStore } from '@/store/configStore'
|
||||
import {
|
||||
getProjectBaleLink,
|
||||
getProjectSupportPhoneLink,
|
||||
isBoursecuProject,
|
||||
} from '@/utils/config'
|
||||
import { getAboutSections, type AboutSection } from '../aboutContent'
|
||||
|
||||
export interface AboutPageContext {
|
||||
config: ReturnType<typeof useConfigStore>
|
||||
aboutSections: ComputedRef<AboutSection[]>
|
||||
isBoursecu: ComputedRef<boolean>
|
||||
isBoursecuProject: typeof isBoursecuProject
|
||||
getProjectSupportPhoneLink: typeof getProjectSupportPhoneLink
|
||||
getProjectBaleLink: typeof getProjectBaleLink
|
||||
}
|
||||
|
||||
export const ABOUT_PAGE_CONTEXT_KEY: InjectionKey<AboutPageContext> = Symbol('aboutPageContext')
|
||||
|
||||
export function useAboutPage() {
|
||||
const config = useConfigStore()
|
||||
const nameProject = config.config.name_fa
|
||||
|
||||
const isBoursecu = computed(() => isBoursecuProject())
|
||||
|
||||
const aboutSections = computed(() => getAboutSections(nameProject, isBoursecu.value))
|
||||
|
||||
const context: AboutPageContext = {
|
||||
config,
|
||||
aboutSections,
|
||||
isBoursecu,
|
||||
isBoursecuProject,
|
||||
getProjectSupportPhoneLink,
|
||||
getProjectBaleLink,
|
||||
}
|
||||
|
||||
provide(ABOUT_PAGE_CONTEXT_KEY, context)
|
||||
return context
|
||||
}
|
||||
|
||||
export function useAboutPageContext() {
|
||||
const context = inject(ABOUT_PAGE_CONTEXT_KEY)
|
||||
if (!context) {
|
||||
throw new Error('useAboutPageContext must be used within a page that calls useAboutPage()')
|
||||
}
|
||||
return context
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="dabout">
|
||||
<div class="dabout__container">
|
||||
<header class="dabout-topbar">
|
||||
<button type="button" class="dabout-topbar__back" @click="router.back()">
|
||||
<BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
|
||||
<span>بازگشت</span>
|
||||
</button>
|
||||
<div class="dabout-topbar__meta">
|
||||
<p class="dabout-topbar__eyebrow">اطلاعات</p>
|
||||
<h1 class="dabout-topbar__title">درباره ما</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="dabout-layout">
|
||||
<section class="dabout-surface dabout-main">
|
||||
<div class="dabout-main__intro">
|
||||
<div class="dabout-main__logo">
|
||||
<BasicIcon icon="vuesax-linear:info-circle" size="28" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="dabout-main__project">{{ config.config.name_fa }}</h2>
|
||||
<p class="dabout-main__tagline">آشنایی با خدمات و چشمانداز ما</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AboutSectionsContent variant="desktop" />
|
||||
</section>
|
||||
|
||||
<aside class="dabout-surface dabout-side">
|
||||
<h3 class="dabout-side__title">پشتیبانی و ارتباط</h3>
|
||||
<p class="dabout-side__text">
|
||||
در صورت نیاز به راهنمایی یا پاسخ به سوالات، از راههای زیر با ما در ارتباط باشید.
|
||||
</p>
|
||||
<AboutSupportActions variant="desktop" />
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import router from '@/router'
|
||||
import AboutSectionsContent from '../components/AboutSectionsContent.vue'
|
||||
import AboutSupportActions from '../components/AboutSupportActions.vue'
|
||||
import { useAboutPageContext } from '../composables/useAboutPage'
|
||||
|
||||
const { config } = useAboutPageContext()
|
||||
</script>
|
||||
@@ -0,0 +1,234 @@
|
||||
/* Premium desktop about page */
|
||||
|
||||
.dabout {
|
||||
min-height: 100%;
|
||||
background: #f6f7f9;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.dabout__container {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 28px 36px 40px;
|
||||
}
|
||||
|
||||
.dabout-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
|
||||
|
||||
&__back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
|
||||
&:hover {
|
||||
color: #111827;
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__eyebrow {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.dabout-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dabout-surface {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(15, 23, 42, 0.06);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.dabout-main {
|
||||
padding: 28px;
|
||||
|
||||
&__intro {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
background: rgba(9, 61, 81, 0.08);
|
||||
color: @App-primary-color;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__project {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
&__tagline {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dabout-content {
|
||||
&--default {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
&--boursecu {
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(9, 61, 81, 0.15);
|
||||
border-radius: 12px;
|
||||
background: rgba(9, 61, 81, 0.03);
|
||||
color: @App-primary-color;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #eef0f3;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: inherit;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
&__paragraph {
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
color: inherit;
|
||||
text-align: justify;
|
||||
margin: 0 0 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&__list-item {
|
||||
position: relative;
|
||||
padding-right: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: inherit;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dabout-side {
|
||||
padding: 24px;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: #6b7280;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dabout-support {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
> a:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__bale {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023.98px) {
|
||||
.dabout-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dabout-side {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
+12
-164
@@ -1,176 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-white wrap-fix z-200001 py-3 px-3 text-primary font-bold drop-shadow flex">
|
||||
<div @click="router.back()" class="cursor-pointer">
|
||||
<BasicIcon icon="vuesax-linear:arrow-right-1" />
|
||||
</div>
|
||||
<div class="mr-2">درباره ما</div>
|
||||
</div>
|
||||
<div class="pt-20">
|
||||
<div>
|
||||
<img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
|
||||
</div>
|
||||
<div class="text-justify text-base z-200000 relative">
|
||||
<div class="px-10">
|
||||
<!-- <img :src="logoFull" class="mb-20 mt-5" />-->
|
||||
<div class="overflow-y-auto h-65vh pb-20">
|
||||
<div class="bg-primary text-white rounded-[12px] p-4 text-xs leading-5">
|
||||
<template v-for="(section, sectionIndex) in aboutSections" :key="sectionIndex">
|
||||
<div v-if="sectionIndex > 0" class="w-full h-1px my-3 bg-tertiary"></div>
|
||||
<div v-if="section.title" class="font-bold text-sm mb-2">
|
||||
{{ section.title }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(paragraph, paragraphIndex) in section.paragraphs ?? []"
|
||||
:key="`paragraph-${sectionIndex}-${paragraphIndex}`"
|
||||
:class="paragraphIndex > 0 ? 'mt-3' : ''"
|
||||
>
|
||||
{{ paragraph }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, itemIndex) in section.items ?? []"
|
||||
:key="`item-${sectionIndex}-${itemIndex}`"
|
||||
class="mt-2"
|
||||
>
|
||||
• {{ item }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="w-full h-1px my-3 bg-tertiary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
|
||||
<a class="w-full" href="tel:09031265925">
|
||||
<BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
|
||||
</a>
|
||||
<a href="https://ble.ir/garoosigallery">
|
||||
<img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
|
||||
</a>
|
||||
</div>
|
||||
<div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
|
||||
<a class="w-full" :href="getProjectSupportPhoneLink()">
|
||||
<BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
|
||||
</a>
|
||||
<a :href="getProjectBaleLink()" target="_blank" rel="noopener noreferrer">
|
||||
<img src="@/assets/img/bale.png" alt="بله" class="h-10 w-10"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
|
||||
<div class="about-page-root">
|
||||
<DesktopAboutView v-show="isDesktop" />
|
||||
<MobileAboutView v-show="!isDesktop" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, computed } from 'vue'
|
||||
import img from '@/assets/img/user_ly1.svg'
|
||||
import gr_bottom from './assets/img/gr_bottom_white.svg'
|
||||
import { loading } from '@/utils'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
|
||||
import { lengthValidation, required } from '@/utils/inputRules'
|
||||
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
||||
import type { User } from '@/models/login'
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import router from '@/router'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { updateMe } from '@/api/me'
|
||||
import { useUserStore } from '@/store/userStore'
|
||||
import {useConfigStore} from "@/store/configStore";
|
||||
import {getProjectBaleLink, getProjectSupportPhoneLink, getReferralShareText, getReferralShareTitle, isBoursecuProject} from "@/utils/config";
|
||||
import { getAboutSections } from './aboutContent'
|
||||
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
|
||||
import { useAboutPage } from './composables/useAboutPage'
|
||||
import DesktopAboutView from './desktop/DesktopAboutView.vue'
|
||||
import MobileAboutView from './mobile/MobileAboutView.vue'
|
||||
|
||||
const config=useConfigStore()
|
||||
const isDesktop = useDesktopBreakpoint()
|
||||
|
||||
const userFormState = ref<User>({
|
||||
fname: '',
|
||||
lname: '',
|
||||
mobile: undefined,
|
||||
birth_date: '',
|
||||
phone_number: '',
|
||||
province: '',
|
||||
city: '',
|
||||
n_code: undefined
|
||||
})
|
||||
const formRef = ref<FormInstance>()
|
||||
const userStore = useUserStore()
|
||||
const nameProject= useConfigStore().config.name_fa
|
||||
const aboutSections = computed(() => getAboutSections(nameProject, isBoursecuProject()))
|
||||
|
||||
// const editPassVisible = ref<boolean>(false)
|
||||
const editPassVisible = ref<boolean>(false)
|
||||
|
||||
function setForm() {
|
||||
userFormState.value = userStore.userInfo
|
||||
}
|
||||
|
||||
function copyCode() {
|
||||
// nextTick(() => {
|
||||
const val = userStore.userInfo?.referral_id
|
||||
navigator.clipboard.writeText(val)
|
||||
message.info('کد رونوشت شد')
|
||||
// })
|
||||
}
|
||||
|
||||
function shareCode() {
|
||||
const val = getReferralShareText({
|
||||
userName: userStore.userInfo?.name,
|
||||
projectName: nameProject,
|
||||
referralId: userStore.userInfo?.referral_id,
|
||||
})
|
||||
navigator.share({
|
||||
title: getReferralShareTitle(nameProject),
|
||||
text: val
|
||||
})
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
formRef.value?.resetFields()
|
||||
userFormState.value = {
|
||||
fname: '',
|
||||
lname: '',
|
||||
mobile: undefined,
|
||||
birth_date: '',
|
||||
phone_number: '',
|
||||
province: '',
|
||||
city: '',
|
||||
n_code: undefined
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setForm()
|
||||
})
|
||||
|
||||
function ok() {
|
||||
formRef.value?.validateFields().then(async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
await updateMe(userFormState.value)
|
||||
await userStore.getMyInfo()
|
||||
editPassVisible.value = false
|
||||
message.success('اطلاعات شما با موفقیت به روز رسانی شد')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
useAboutPage()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
.about-page-root {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}*/
|
||||
/*.trans{
|
||||
transition: height 1s;
|
||||
}*/
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-white wrap-fix z-200001 py-3 px-3 text-primary font-bold drop-shadow flex">
|
||||
<div class="cursor-pointer" @click="router.back()">
|
||||
<BasicIcon icon="vuesax-linear:arrow-right-1" />
|
||||
</div>
|
||||
<div class="mr-2">درباره ما</div>
|
||||
</div>
|
||||
<div class="pt-20">
|
||||
<div>
|
||||
<img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
|
||||
</div>
|
||||
<div class="text-justify text-base z-200000 relative">
|
||||
<div class="px-10">
|
||||
<div class="overflow-y-auto h-65vh pb-20">
|
||||
<AboutSectionsContent variant="mobile" />
|
||||
</div>
|
||||
</div>
|
||||
<AboutSupportActions variant="mobile" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import img from '@/assets/img/user_ly1.svg'
|
||||
import router from '@/router'
|
||||
import AboutSectionsContent from '../components/AboutSectionsContent.vue'
|
||||
import AboutSupportActions from '../components/AboutSupportActions.vue'
|
||||
</script>
|
||||
Reference in New Issue
Block a user