MoreStrive
49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
layout?: any
|
|
}>()
|
|
|
|
const CLASS_FOR_LAYOUT = computed(() => {
|
|
let _classForLayout = {};
|
|
switch (props.layout) {
|
|
case 'Full_Page':
|
|
_classForLayout = {
|
|
page_container: 'page_container w-full px-2',
|
|
layout_container: 'layout_container px-5',
|
|
};
|
|
break;
|
|
case 'Center_Page':
|
|
_classForLayout = {
|
|
page_container: 'page_container w-full px-2',
|
|
layout_container: 'layout_container container-xxl mx-auto',
|
|
};
|
|
break;
|
|
case 'Background_Page':
|
|
_classForLayout = {
|
|
page_container: 'page_container w-full background-container',
|
|
layout_container: 'layout_container container-xxl mx-auto',
|
|
};
|
|
break;
|
|
default:
|
|
_classForLayout = {
|
|
page_container: 'page_container px-2',
|
|
layout_container: 'layout_container',
|
|
};
|
|
break;
|
|
}
|
|
return _classForLayout;
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="[CLASS_FOR_LAYOUT.page_container]">
|
|
<div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container grid grid-cols-1 gap-20 py-20 style_layout">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|