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

thainv-dev

Browse Source
This commit is contained in:
nguyen van thai
2024-07-05 10:39:07 +07:00
parent 17036b77af
commit 5889e9af0e
16 changed files with 289 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-section/layouts/none/Default.vue
+57 -2
View File
@@ -150,7 +150,6 @@ const SETTING_OPTIONS = computed(() => {
return _setting_options;
});
const CLASS_FOR_SECTION = computed(() => {
let _classForSection = {};
switch (props.layout) {
@@ -278,7 +277,7 @@ const mapActivesToItems = (index: number) => {
<div class="section_layout border-custom" :class="[CLASS_FOR_SECTION.section_layout]" :style="LAYOUT_PARSE['div.section_layout']">
<div
class="section_child"
v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
v-for="(position, index) in props.content || Array(SETTING_OPTIONS?.MAX_ELEMENT).fill({})"
:key="index"
:class="['border-custom', CLASS_FOR_SECTION[index]]"
:style="mapActivesToItems(index)['div.section_child']"
@@ -298,6 +297,20 @@ const mapActivesToItems = (index: number) => {
}
.section_layout {
display: grid;
position: relative;
.section_child {
z-index: 1;
}
.attributeBackground {
position: absolute;
height: 100%;
z-index: 0;
display: none;
left: -50vw;
width: 150vw;
}
&.smartphone_layout {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@@ -321,6 +334,24 @@ const mapActivesToItems = (index: number) => {
&.six_col_layout {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
&.seven_col_layout {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
&.eight_col_layout {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
&.nine_col_layout {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
&.ten_col_layout {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
&.eleven_col_layout {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
&.twelve_col_layout {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-span-2 {
grid-column: span 2 / span 2;
}
@@ -330,6 +361,30 @@ const mapActivesToItems = (index: number) => {
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-5 {
grid-column: span 5 / span 5;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.col-span-7 {
grid-column: span 7 / span 7;
}
.col-span-8 {
grid-column: span 8 / span 8;
}
.col-span-9 {
grid-column: span 9 / span 9;
}
.col-span-10 {
grid-column: span 10 / span 10;
}
.col-span-11 {
grid-column: span 11 / span 11;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
.border-custom {
border-color: #e5e5e5 !important;
}