NSG_PORTAL_V2/components/dynamic-page/page/layouts/Default.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 mx-auto w-full px-2',
                layout_container: 'layout_container px-5',
            };
            break;
        case 'Center_Page':
            _classForLayout = {
                page_container: 'page_container mx-auto w-full px-2 container ',
                layout_container: 'layout_container container-xxl mx-auto',
            };
            break;
        case 'Background_Page':
            _classForLayout = {
                page_container: 'page_container mx-auto w-full background-container px-2',
                layout_container: 'layout_container mx-auto',
            };
            break;
        default: 
            _classForLayout = {
                page_container: 'page_container mx-auto 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-10 style_layout">
            <slot />
        </div>
    </div>
</template>

<style lang="scss" scoped>

</style>