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

minhnt-dev: make UI

Browse Source
This commit is contained in:
MoreStrive
2024-05-30 21:32:51 +07:00
parent 2aa5607c48
commit b52352660d
16 changed files with 315 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page/layouts/Default.vue
+7 -31
View File
@@ -8,20 +8,20 @@ const CLASS_FOR_LAYOUT = computed(() => {
switch (props.layout) {
case 'Full_Page':
_classForLayout = {
page_container: 'page_container full-size-page',
layout_container: 'layout_container full-size-layout',
page_container: 'page_container w-full',
layout_container: 'layout_container px-5',
};
break;
case 'Center_Page':
_classForLayout = {
page_container: 'page_container full-size-page',
layout_container: 'layout_container center-layout',
page_container: 'page_container w-full',
layout_container: 'layout_container container mx-auto',
};
break;
case 'Background_Page':
_classForLayout = {
page_container: 'page_container full-size-page background-container',
layout_container: 'layout_container center-layout',
page_container: 'page_container w-full background-container',
layout_container: 'layout_container container mx-auto',
};
break;
default:
@@ -37,36 +37,12 @@ const CLASS_FOR_LAYOUT = computed(() => {
<template>
<div :class="[CLASS_FOR_LAYOUT.page_container]">
<div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-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>
.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>