MoreStrive
78 lines
1.9 KiB
Vue
78 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import HeaderHomeTemplate from '~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue'
|
|
import FooterHomeTemplate from '~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue'
|
|
|
|
const props = defineProps<{
|
|
layout?: any
|
|
}>()
|
|
|
|
const classForLayout = computed(() => {
|
|
let _empty = {
|
|
page_container: 'page_container',
|
|
layout_container: 'layout_container',
|
|
};
|
|
switch (props.layout) {
|
|
case 'Full_Page':
|
|
_empty = {
|
|
page_container: 'page_container full-size-page',
|
|
layout_container: 'layout_container full-size-layout',
|
|
};
|
|
break;
|
|
case 'Center_Page':
|
|
_empty = {
|
|
page_container: 'page_container full-size-page',
|
|
layout_container: 'layout_container center-layout',
|
|
};
|
|
break;
|
|
case 'Background_Page':
|
|
_empty = {
|
|
page_container: 'page_container full-size-page background-container',
|
|
layout_container: 'layout_container center-layout',
|
|
};
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return _empty;
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-100 overflow-y-auto">
|
|
<HeaderHomeTemplate />
|
|
|
|
<div :class="[classForLayout.page_container]">
|
|
<div :class="[classForLayout.layout_container]">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<FooterHomeTemplate />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.body-center {
|
|
padding: 40px 0px;
|
|
}
|
|
|
|
.page_container {
|
|
&.full-size-page {
|
|
width: 100%;
|
|
}
|
|
.full-size-layout {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
.layout_container {
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
|
|
&.center-layout {
|
|
max-width: 1300px;
|
|
margin: auto;
|
|
}
|
|
}
|
|
</style>
|