sajjadtalkhabi
73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
Vue
<template>
|
||
<div class="auth-heading">
|
||
<img :src="logo" alt="مدرسه بانو" class="auth-heading__logo" />
|
||
<h2 class="auth-heading__title">{{ title }}</h2>
|
||
<p v-if="step === 'otp'" class="auth-heading__subtitle">
|
||
<span class="auth-heading__phone-label">ارسال کد فعالسازی به شماره</span>
|
||
<span class="auth-heading__phone">{{ phoneNumber || '*******' }}</span>
|
||
</p>
|
||
<p v-else-if="subtitle" class="auth-heading__subtitle">
|
||
<slot name="subtitle">{{ subtitle }}</slot>
|
||
</p>
|
||
<slot name="below" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { gallery } from '@/utils/gallery'
|
||
|
||
defineProps({
|
||
title: { type: String, required: true },
|
||
subtitle: { type: String, default: '' },
|
||
step: { type: String, default: '' },
|
||
phoneNumber: { type: String, default: '' },
|
||
})
|
||
|
||
const logo = gallery.authLogo
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.auth-heading {
|
||
text-align: center;
|
||
margin-bottom: 1.5rem;
|
||
|
||
&__logo {
|
||
margin: 0 auto 0.5rem;
|
||
max-height: 59px;
|
||
|
||
@media (min-width: 1024px) {
|
||
height: 2.75rem;
|
||
}
|
||
}
|
||
|
||
&__title {
|
||
font-family: var(--font-family-fa);
|
||
font-weight: 600;
|
||
font-size: 1.125rem;
|
||
color: var(--color-prim-text);
|
||
margin: 0;
|
||
}
|
||
|
||
&__subtitle {
|
||
font-family: var(--font-family-fa);
|
||
font-weight: 400;
|
||
font-size: 0.75rem;
|
||
color: #a7a7a7;
|
||
margin: 0.25rem 0 0;
|
||
}
|
||
|
||
&__phone-label {
|
||
padding-inline-end: 0.75rem;
|
||
color: #a7a7a7;
|
||
font-family: var(--font-family-fa);
|
||
border-left: 1px solid #a7a7a7;
|
||
}
|
||
|
||
&__phone {
|
||
padding-inline-start: 0.75rem;
|
||
color: var(--color-prim-gray);
|
||
font-family: var(--font-family-number-fa);
|
||
}
|
||
}
|
||
</style>
|