init git
This commit is contained in:
mohadese namavar
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<main class="auth">
|
||||
<section>
|
||||
<aside v-if="aside">
|
||||
<div v-show="step != undefined">
|
||||
<bdi>{{ step }} / {{ steps }}</bdi>
|
||||
<ul>
|
||||
<li v-for="s in steps" :key="s" :class="{ 'opacity-25': s > step }" />
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="`/images/${image}`" />
|
||||
<div>
|
||||
<span>{{ subtitle }}</span>
|
||||
<h2>{{ $t(title) }}</h2>
|
||||
<p>{{ $t(desc, { number: otpCode.number }) }}</p>
|
||||
<bdi>{{ $t(hint) }}</bdi>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<slot />
|
||||
</section>
|
||||
<NuxtLink to="/" >
|
||||
<Button v-bind="backBtn.props" />
|
||||
</NuxtLink>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import init from "../initialize/auth/layout";
|
||||
const { backBtn, asides } = init();
|
||||
const { device } = inject('service')
|
||||
const { aside, steps } = useAttrs()
|
||||
const { step, image, subtitle, title, desc, hint } = asides[aside] || {}
|
||||
const otpCode = useOtpCodeStore()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.auth {
|
||||
@apply min-h-screen select-none flex flex-col items-center;
|
||||
@apply gap-4 lg:justify-center lg:gap-16;
|
||||
@apply py-4 lg:py-16 lg:px-4;
|
||||
|
||||
section {
|
||||
box-shadow: 0px 8px 22px 0px rgba(0, 75, 130, 0.1);
|
||||
@apply flex flex-col rounded-2xl bg-white items-center overflow-hidden max-w-[72.1rem];
|
||||
@apply w-full h-auto py-3 gap-[5.3rem] max-lg:shadow-none;
|
||||
@apply lg:flex-row lg:p-8 lg:gap-8 lg:border-b lg:min-h-[33.5rem];
|
||||
@apply xl:px-16 xl:gap-10;
|
||||
|
||||
aside {
|
||||
@apply flex flex-col w-[21.4rem] lg:w-auto max-lg:items-center lg:justify-center gap-12;
|
||||
@apply lg:my-auto lg:gap-[5.5rem];
|
||||
|
||||
&>div:nth-child(1) {
|
||||
@apply w-full lg:-mt-[8.3rem] h-11 lg:w-[27.1rem] flex flex-col gap-4;
|
||||
|
||||
bdi {
|
||||
@apply self-start text-primary-600 text-sm lg:text-base font-medium font-poppins leading-tight;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply flex;
|
||||
|
||||
li {
|
||||
@apply grow flex h-2 relative first:before:hidden first:grow-0;
|
||||
|
||||
&::before {
|
||||
@apply block content-['_'] my-auto w-full h-[0.1rem] bg-sky-700;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@apply block content-['_'] w-2 h-2 bg-sky-700 rounded-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>div:nth-child(2) {
|
||||
@apply flex flex-col gap-[1.1rem] items-center;
|
||||
@apply lg:flex-row lg:gap-6;
|
||||
|
||||
img {
|
||||
@apply lg:w-[20%] h-[3.8rem] lg:h-[8.8rem];
|
||||
}
|
||||
|
||||
div {
|
||||
@apply flex flex-col items-center gap-2 lg:items-start;
|
||||
|
||||
span {
|
||||
@apply text-zinc-500 font-normal font-poppins tracking-widest whitespace-nowrap;
|
||||
@apply text-[1.2em] lg:text-2xl lg:leading-7;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-[#4F4F4F] font-black font-vazir whitespace-nowrap;
|
||||
@apply text-[1.6em] lg:text-[2.4em] lg:leading-[3rem];
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-[#4F4F4F] font-vazir text-justify text-sm leading-6;
|
||||
@apply max-w-[22.8rem] lg:text-base lg:leading-snug;
|
||||
}
|
||||
|
||||
bdi {
|
||||
@apply text-zinc-500 font-vazir leading-snug text-sm -mt-[1.8rem] mr-5 self-center lg:m-0 lg:self-start lg:text-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.login) {
|
||||
@apply pt-12;
|
||||
|
||||
aside {
|
||||
p {
|
||||
@apply hidden lg:block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
@apply w-[21.4rem] lg:w-[27.1rem];
|
||||
}
|
||||
}
|
||||
|
||||
&>a {
|
||||
|
||||
button {
|
||||
.p-button-label {
|
||||
@apply font-vazir text-[#8C8C8C] leading-[1.9rem] whitespace-nowrap;
|
||||
}
|
||||
|
||||
.p-button-icon {
|
||||
@apply text-2xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<AppDesktopHeader />
|
||||
<PanelToolbar v-if="toolbar" />
|
||||
<slot />
|
||||
<AppDesktopFooter />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({ inheritAttrs: false })
|
||||
const { config } = useAttrs()
|
||||
const { toolbar = false } = config.desktop || {}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.p-dialog-mask {
|
||||
@apply z-10;
|
||||
|
||||
.p-dialog {
|
||||
@apply m-0 rtl;
|
||||
|
||||
.p-dialog-header {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.p-dialog-content {
|
||||
@apply bg-transparent p-0 overflow-hidden overflow-y-auto lg:container rounded-none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<AppMobileHeader v-if="header" />
|
||||
<slot />
|
||||
<AppMobileNavigation v-if="navigation" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import init from '../initialize/mobile'
|
||||
provide('mobile', init())
|
||||
|
||||
const { sidebar } = inject('service')
|
||||
sidebar.is ??= resolveComponent('AppMobileDrawerMenu')
|
||||
|
||||
const { config } = useAttrs()
|
||||
const { header = true, navigation = true } = config.mobile
|
||||
provide('config', config)
|
||||
|
||||
const { status, data } = await useFetch('/api/headers')
|
||||
|
||||
if (status.value == 'success')
|
||||
sidebar.props = { menu: data.value }
|
||||
else throw createError(error.value)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.p-dialog-mask.p-dialog-bottom {
|
||||
|
||||
.p-dialog {
|
||||
@apply w-screen rtl;
|
||||
|
||||
.p-dialog-header {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.p-dialog-content {
|
||||
@apply p-0 bg-transparent rounded-none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user