77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { getInputValue } from "@/utils/parseSQL";
|
||
|
|
import { enumPageLayouts, enumPageTemplate, enumPageKey } from "@/definitions/enum";
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
layout?: any,
|
||
|
|
label?:any
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const CLASS_FOR_LAYOUT = computed(() => {
|
||
|
|
let _classForLayout = {};
|
||
|
|
switch (props.layout) {
|
||
|
|
case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['DEFAULT']:
|
||
|
|
_classForLayout = {
|
||
|
|
page_container: "page_container full-size-page",
|
||
|
|
layout_container: "layout_container center-layout",
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['FULL']:
|
||
|
|
_classForLayout = {
|
||
|
|
page_container: "page_container full-size-page",
|
||
|
|
layout_container: "layout_container full-size-layout",
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['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 {
|
||
|
|
// padding: 20px 0;
|
||
|
|
&.full-size-page {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
// .full-size-layout {
|
||
|
|
// padding-left: 20px;
|
||
|
|
// padding-right: 20px;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout_container {
|
||
|
|
padding-top: 20px;
|
||
|
|
|
||
|
|
&.center-layout {
|
||
|
|
max-width: 1440px;
|
||
|
|
padding: 0 27.5px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
</style>
|