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 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 mx-auto',
            };
            break;
        case 'Background_Page':
            _classForLayout = {
                page_container: 'page_container w-full background-container',
                layout_container: 'layout_container container 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 style_layout">
            <slot />
        </div>
    </div>
</template>

<style lang="scss" scoped>

</style>