components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue

@@ -38,7 +38,7 @@ const _dataResult = computed(() => {
 <template>
   <div>
     <div class="collection-container grid gap-5" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'"
-    :style="`grid-template-columns: repeat(${Number(LAYOUT_PARSE['COLUMN'])}}, minmax(0, 1fr))`">
+    :style="`grid-template-columns: repeat(${LAYOUT_PARSE['COLUMN']}, minmax(0, 1fr))`">
       <div v-for="(component, index) in _dataResult" :key="index">
         <template v-if="!isEmpty(component)">
           <DynamicComponent

components/dynamic-page/page-section/RecusiveSection.vue

@@ -44,7 +44,6 @@ const findDataPosition = computed(() => {
         :settings="findDataPosition.settings" 
         :component="findDataPosition"
       />
-      <div v-else class="empty"></div>
     </template>
     <template v-else-if="props.type === defineTypeRecusive.SECTION">
       <DynamicSection 
@@ -53,18 +52,10 @@ const findDataPosition = computed(() => {
         :content="findDataPosition.content ? JSON.parse(findDataPosition.content) : null" 
         :section="findDataPosition"
        />
-      <div v-else class="empty"></div>
-    </template>
-    <template v-else>
-      <div class="empty"></div>
     </template>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.empty {
+
-  min-height: 100px;
-  border-radius: 6px;
-  background: #409eff;
-}
 </style>