73 lines
1.8 KiB
Vue
73 lines
1.8 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 full-size-page',
|
||
|
|
layout_container: 'layout_container full-size-layout',
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'Center_Page':
|
||
|
|
_classForLayout = {
|
||
|
|
page_container: 'page_container full-size-page',
|
||
|
|
layout_container: 'layout_container center-layout',
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'Background_Page':
|
||
|
|
_classForLayout = {
|
||
|
|
page_container: 'page_container full-size-page background-container',
|
||
|
|
layout_container: 'layout_container center-layout',
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
_classForLayout = {
|
||
|
|
page_container: 'page_container',
|
||
|
|
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">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.page_container {
|
||
|
|
&.full-size-page {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.full-size-layout {
|
||
|
|
padding-left: 20px;
|
||
|
|
padding-right: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout_container {
|
||
|
|
padding-top: 40px;
|
||
|
|
padding-bottom: 40px;
|
||
|
|
|
||
|
|
&.center-layout {
|
||
|
|
max-width: 1300px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||
|
|
gap: 40px;
|
||
|
|
}
|
||
|
|
</style>
|