sajjadtalkhabi
96 lines
1.8 KiB
Vue
96 lines
1.8 KiB
Vue
<template>
|
|
<div class="auth-shell">
|
|
<div class="auth-shell__form-area">
|
|
<div class="auth-shell__bg-mobile" :style="{ backgroundImage: `url(${bgPatternMobile})` }" />
|
|
<div class="auth-shell__form">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
<div class="auth-shell__pattern">
|
|
<PatternSection :front-image="logoPattern" :bg-image="bgPattern" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { gallery } from '@/utils/gallery'
|
|
import PatternSection from '@/features/auth/components/PatternSection.vue'
|
|
|
|
const bgPattern = gallery.loginPattern
|
|
const bgPatternMobile = gallery.loginPatternMobile
|
|
const logoPattern = gallery.loginPatternWithLogo
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.auth-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100dvh;
|
|
min-height: 100vh;
|
|
|
|
@media (min-width: 768px) {
|
|
flex-direction: row;
|
|
}
|
|
|
|
&__form-area {
|
|
flex-basis: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@media (min-width: 768px) {
|
|
flex-basis: 58.3333%;
|
|
}
|
|
}
|
|
|
|
&__bg-mobile {
|
|
width: 100%;
|
|
height: 20%;
|
|
background-position: bottom;
|
|
background-position-x: right;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
|
|
@media (min-width: 768px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
justify-content: space-between;
|
|
margin-inline-start: auto;
|
|
width: 100%;
|
|
padding: 0 1.25rem;
|
|
|
|
@media (min-width: 640px) {
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
max-width: 300px;
|
|
padding: 0;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
max-width: 400px;
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
max-width: 514px;
|
|
}
|
|
}
|
|
|
|
&__pattern {
|
|
display: none;
|
|
|
|
@media (min-width: 768px) {
|
|
display: block;
|
|
flex-basis: 41.6667%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|