minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: new layout

Browse Source
This commit is contained in:
MoreStrive
2024-06-28 15:39:26 +07:00
parent ab3419bd5f
commit ad962eda86
134 changed files with 4977 additions and 2985 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page/layouts/Default.vue
+40 -10
View File
@@ -1,6 +1,8 @@
<script setup lang="ts">
import { getInputValue } from "@/utils/parseSQL";
const props = defineProps<{
layout?: any
layout?: any,
label?:any
}>()
const CLASS_FOR_LAYOUT = computed(() => {
@@ -8,41 +10,69 @@ const CLASS_FOR_LAYOUT = computed(() => {
switch (props.layout) {
case 'Full_Page':
_classForLayout = {
page_container: 'page_container mx-auto w-full px-2',
layout_container: 'layout_container px-5',
page_container: 'page_container full-size-page',
layout_container: 'layout_container full-size-layout',
};
break;
case 'Center_Page':
_classForLayout = {
page_container: 'page_container mx-auto w-full px-2 container ',
layout_container: 'layout_container container-xxl mx-auto',
page_container: 'page_container full-size-page',
layout_container: 'layout_container center-layout',
};
break;
case 'Background_Page':
_classForLayout = {
page_container: 'page_container mx-auto w-full background-container px-2',
layout_container: 'layout_container mx-auto',
page_container: 'page_container full-size-page background-container',
layout_container: 'layout_container center-layout',
};
break;
default:
_classForLayout = {
page_container: 'page_container mx-auto px-2',
page_container: 'page_container',
layout_container: 'layout_container',
};
break;
}
return _classForLayout;
})
const LAYOUT_PARSE = computed(() => {
return props?.label ? getInputValue(props.label, "OBJECT") : {};
});
</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">
<div :class="[CLASS_FOR_LAYOUT.page_container]" :style="LAYOUT_PARSE['div.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>