thainv-dev: UI

assets/styles/app.sass

@@ -1,6 +1,6 @@
 @import custom.css
 body
-    font-family: 'Nunito', sans-serif
+    @apply font-beVietnam text-black-500
 
 // video
 //     max-width: 100% !important

assets/styles/custom.css

@@ -1,5 +1,8 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
 
 .custom_scrollbar {
   white-space: nowrap;
@@ -146,7 +149,7 @@ span.boxRelation .relationBoxText{
 }
 
 span.boxRelation .relationText{
-  font-size: 18px;
+  font-size: 16px;
     font-weight: 600;
 }
 span.boxRelation .relationDay{

assets/styles/style.scss

@@ -8,6 +8,7 @@
 //     }
 // }
 
+
 figure {
     margin: auto !important;
 }
@@ -18,7 +19,15 @@ img {
 
 .content {
     & p {
-        @apply mb-2;
+        @apply mb-2 font-arial  leading-160%;
+    }
+
+    & #title {
+        @apply font-merriweather font-bold leading-150%;
+    }
+
+    & #intro, & #sub {
+        @apply font-arial  font-medium leading-160%;
     }
 
     & audio {
@@ -42,10 +51,8 @@ div[layout="ARTICLE_PAGE"] {
     }
 }
 
-// .layout_define {
+.container-long {
-//     & .section_layout.three_col_layout {
+    & .section_layout.grid {
-//         @media (max-width: 768px) {
+        @apply md:gap-20px
-//             grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
-//           }
+}
-//     }
-// }

components/article/immerse/Quiz.vue

@@ -246,12 +246,12 @@ async function submitSend() {}
 </script>
 
 <template>
-  <div class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5] !text-black">
+  <div class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5] !text-black-500">
     <h5 class="underline decoration-gray-500 font-bold mb-2">Câu đố: {{ data?.title }}</h5>
 
     <ul class="px-3">
       <li v-for="(question, questionIndex) in data.questionGeneral" :key="questionIndex" class="mb-2">
-        <h5 class="mb-1 font-700 text-black">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
+        <h5 class="mb-1 font-700 text-black-500">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
 
         <ul>
           <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">

components/article/immerse/Survey.vue

@@ -270,12 +270,12 @@ async function submitSend() {
 
 <template>
 
-<div class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5] !text-black">
+<div class="inline-block px-4 py-2 shadow-xl rounded-lg bg-[#f5f5f5] !text-black-500">
     <h5 class="underline decoration-gray-500 font-bold mb-2">Khảo sát: {{ dataSurvey?.title }}</h5>
 
     <ul class="px-3">
         <li v-for="(question, questionIndex) in dataSurvey.questionGeneral" :key="questionIndex" class="mb-2">
-            <h5 class="mb-1 font-700  text-black">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
+            <h5 class="mb-1 font-700  text-black-500">{{ `${questionIndex + 1}. ${question.title}` }}</h5>
 
             <ul>
                 <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">

components/dynamic-page/page-component/templates/advertising/layouts/Default.vue

@@ -2,7 +2,7 @@
 import ADSDefault from '@/assets/images/ads.jpg'
 </script>
 <template>
-    <div class="shadow">
+    <div class="shadow sticky top-10px">
         <img :src="ADSDefault" alt="quảng cáo" class=" object-cover">
     </div>
 </template>

components/dynamic-page/page-component/templates/articles/layouts/Card.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
-import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
+import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
-import { getInputValue } from "@/utils/parseSQL";
 
 const props = defineProps<{
   dataResult?: any;
@@ -20,7 +19,6 @@ const LAYOUT_PARSE = computed(() => {
       };
     }) || [];
   const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
-
   return Object.assign({}, ...parseLayout, designObject);
 });
 
@@ -65,21 +63,37 @@ const drop = (e: any) => {
         <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
       </nuxt-link>
       </template>
-      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
     </div>
-    <div class="basic-article_content !py-0" :class="[!parseData && 'no-data']">
+    <div class="basic-article_content" :class="[!parseData && 'no-data']">
       <div>
-        <nuxt-link :to="`bai-viet/${parseData?.slug}`" v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 text-truncate-two-lines font-bold  line-clamp-2 hover:text-primary-600">
+        <nuxt-link :to="`bai-viet/${parseData?.slug}`"
+          v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')"
+          class="line-clamp hover:text-primary-600"
+          :style="[
+            LAYOUT_PARSE['fontSizeTitle'] && `font-size: ${LAYOUT_PARSE['fontSizeTitle']}px`,
+            LAYOUT_PARSE['fontWeightTitle'] && `font-weight: ${LAYOUT_PARSE['fontWeightTitle']}`,
+            LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
+            LAYOUT_PARSE['lineClampTitle'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampTitle']}`
+          ]"
+        >
           <template v-if="parseData">
             {{ parseData.title?.replace(/<[^>]+>/g, "") }}
           </template>
-          <span v-else class="empty-block" style="height: 8px"></span>
+          
         </nuxt-link>
-        <p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 line-clamp-3">
+        <p
+          v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')"
+          class="mb-0 line-clamp font-arial"
+          :style="[
+            LAYOUT_PARSE['fontSizeIntro'] && `font-size: ${LAYOUT_PARSE['fontSizeIntro']}px`,
+            LAYOUT_PARSE['fontWeightIntro'] && `font-weight: ${LAYOUT_PARSE['fontWeightIntro']}`,
+            LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
+            LAYOUT_PARSE['lineClampIntro'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampIntro']}`
+          ]"
+        >
           <template v-if="parseData">
-            {{ parseData.intro ? parseData.intro?.replace(/<[^>]+>/g, "") : parseData.detail?.replace(/<[^>]+>/g, "") }}
+            {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
           </template>
-          <span v-else class="empty-block" style="height: 5px"></span>
         </p>
       </div>
     </div>
@@ -89,12 +103,19 @@ const drop = (e: any) => {
 <style lang="scss" scoped>
 .basic-article {
   display: flex;
-  gap: 12px;
+  gap: 16px;
   height: 100%;
-
+  padding: 20px;
   &.no-data {
     gap: 5px !important;
   }
+  .line-clamp {
+    display: -webkit-box;
+    /* -webkit-line-clamp: 3; */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   &.vertical {
     flex-direction: column;
@@ -103,12 +124,6 @@ const drop = (e: any) => {
     }
     &.reverse {
       flex-direction: column-reverse;
-      height: 100%;
-
-      @media (max-width: 640px) {
-        flex-direction:column;
-      }
-      
     }
   }
   &.border-custom {
@@ -116,39 +131,20 @@ const drop = (e: any) => {
   }
   &.borderLeft {
     border-left: 1px solid;
-    padding-left: 16px;
-    
   }
   &.borderRight {
     border-right: 1px solid;
-    padding-right: 16px;
   }
   &.borderTop {
     border-top: 1px solid;
-    padding-top: 16px;
   }
   &.borderBottom {
     border-bottom: 1px solid;
-    padding-bottom: 16px;
   }
-  &.borderRight ,
-  &.borderLeft, 
-  &.borderTop, 
-  &.borderBottom {
-
-    @media (max-width: 640px) {
-        border: 0;
-        padding: 0;
-      }
-  }
-
   &.horizontal {
-    @apply sm:flex-row flex-col;
+    flex-direction: row;
     .basic-article_thumbnail {
       width: 40%;
-      @media (max-width: 640px) {
-        width: 100% !important;
-      }
     }
     &.reverse {
       flex-direction: row-reverse;
@@ -158,32 +154,27 @@ const drop = (e: any) => {
   &_thumbnail {
     img {
       width: 100%;
-      border-radius: 6px;
+      border-radius: 2px;
       aspect-ratio: 16/10;
     }
   }
 
   &_content {
-    padding: 10px 0px;
+    /* padding: 10px 0px; */
     flex: 1;
     &.no-data {
       padding: 0px;
     }
 
     h3 {
-      font-size: 15px;
+      font-size: 16px;
     }
 
     p {
-      font-size: 12px;
+      font-size: 14px;
       margin-top: 10px;
+      opacity: 85%;
     }
   }
-
-  // .empty-block {
-  //   background-color: #409eff;
-  //   height: 100px;
-  //   display: block;
-  // }
 }
 </style>

components/dynamic-page/page-component/templates/articles/layouts/details/General.vue

@@ -48,7 +48,6 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
   }
   return null;
 }
-
 onMounted(async () => {
 
   clickElement("figure", "custom-figure", "data-code");
@@ -94,12 +93,13 @@ async function copyLink() {
   }
 
 }
+
 </script>
 <template>
-  <div id="breakcrumb" class="flex justify-between items-center my-3">
+  <div id="breakcrumb" class="flex justify-between items-center my-3 font-arial">
     <ul class="flex gap-6 items-center text-md">
       <template v-for="(category, index) in currentCategoryTree" :key="index">
-        <li class="first:text-primary-600 hover:text-primary-600 font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
+        <li class="first:text-primary-600 hover:text-primary-600 font-medium relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
           <nuxt-link :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
         </li>
       </template>
@@ -131,7 +131,7 @@ async function copyLink() {
     <h1 id="sub" v-html="currentArticle?.sub" class="font-bold opacity-60 pb-1"></h1>
     <h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
     <p id="published-on" class="text-gray-600 mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
-    <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1 mb-3"></div>
+    <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold pb-1 mb-3"></div>
     <component :is="{ template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
   </div>
 
@@ -152,6 +152,46 @@ async function copyLink() {
       </button>
     </div>
   </div>
+
+
+    <div class="flex gap-2 items-start mb-2  text-15px" v-if="currentArticle?.topics">
+      <div>
+        <Icon name="material-symbols:trending-up" class="w-5 h-5"/>
+      </div>
+      <span>Chủ đề: </span>
+      <ul>
+        <li v-for="(topic, index) in currentArticle?.topics" :key="index" class="mb-1">
+          <nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link>
+          <!-- <nuxt-link :to="`topic/${topic.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link> -->
+        </li>
+      </ul> 
+    </div>
+
+    <div class="flex gap-2 items-start mb-2  text-15px" v-if="currentArticle?.events">
+      <div>
+        <Icon name="ic:baseline-event" class="w-5 h-5"/>
+      </div>
+      <span>Sự kiện: </span>
+      <ul>
+        <li v-for="(event, index) in currentArticle?.events" :key="index" class="mb-1">
+          <nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link>
+          <!-- <nuxt-link :to="`event/${event.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link> -->
+        </li>
+      </ul> 
+    </div>
+    
+    <div class="flex gap-2 items-start mb-2  text-15px" v-if="currentArticle?.tags">
+      <div>
+        <Icon name="mdi:tag" class="w-5 h-5"/>
+      </div>
+      <span>Tags: </span>
+      <ul class="flex gap-6 flex-wrap">
+        <li v-for="(tag, index) in currentArticle?.tags" :key="index" class="mb-1 font-normal text-black-500 relative after:absolute after:content-['/'] after:right--4 last:after:content-[''] after:text-[#eee]">
+          <nuxt-link to="#" class="hover:text-primary-600">{{ tag.title }}</nuxt-link>
+          <!-- <nuxt-link :to="`topic/${tag.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ tag.title }}</nuxt-link> -->
+        </li>
+      </ul> 
+    </div>
 </template>
 
 <style lang="scss" scoped>

components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue

@@ -84,7 +84,7 @@ async function copyLink() {
       <ul class="flex gap-6 items-center text-md">
         <template v-for="(category, index) in currentCategoryTree" :key="index">
           <li class="font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
-            <nuxt-link :class="index !== 0 ? '!text-black' : ''" class="hover:!text-primary-600" :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
+            <nuxt-link :class="index !== 0 ? '!text-black-500' : ''" class="hover:!text-primary-600" :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
           </li>
         </template>
       </ul>

components/dynamic-page/page-component/templates/articles/layouts/details/Podcast.vue

@@ -228,7 +228,7 @@ const durationComputed = computed(() => {
         <div class="flex items-center justify-center gap-4 flex-1 text-28px text-primary-600">
           <Icon @click="replayAndForward(-10)" name="fluent:skip-back-10-48-filled" />
           <button @click="togglePlayer" class="bg-transparent">
-            <Icon v-if="isPlayed" name="material-symbols:play-arrow" class="text-64px" />
+            <Icon v-if="isPlayed" name="material-symbols:play-arrow-rounded" class="text-64px" />
             <Icon v-if="!isPlayed" name="material-symbols:pause" class="text-64px" />
           </button>
 

components/dynamic-page/page-component/templates/categories/layouts/Default.vue

@@ -47,21 +47,48 @@ const selectComponent = () => {
   emit("selectComponent");
 };
 
+
+const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
+  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
+  const updatedDesignObject = { ...designObject };
+
+  if (Array.isArray(designObject[keyActive])) {
+    const isActive = designObject[keyActive].includes(Number(index) + 1);
+    return {
+      ...updatedDesignObject,
+      [key]: isActive ? designObject[key] : defaultValue,
+    };
+  }
+
+  delete updatedDesignObject[key];
+  return updatedDesignObject;
+};
 </script>
 
 <template>
   <div>
     <div
-      class="categories-container p-2 border-custom"
+      class="categories-container  border-custom"
       @click="selectComponent"
       :class="[designObject['LAYOUT_WRAP'] || 'horizontal', ...(designObject['borderWrap']?.length > 0 ? designObject['borderWrap'] : [])]"
       :style="[designObject['background'] && `background: ${designObject['background']}`]"
     >
-      <div v-for="(component, index) in _dataResult" :key="index" :class="[...(designObject['border']?.length > 0 ? designObject['border'] : []), 'border-custom', isEmpty(component) ? 'empty' : 'category']">
+      <div
+        v-for="(component, index) in _dataResult"
+        :key="index"
+        :class="[...(handleActiveItem('border', 'activesBorder', index, [])['border']?.length > 0 ? handleActiveItem('border', 'activesBorder', index, [])['border'] : []), 'border-custom', isEmpty(component) ? 'empty' : 'category']"
+      >
         <template v-if="!isEmpty(component)">
           <nuxt-link :to="`/${component.code}`"
-            :class="index != 0? 'sm:block hidden' : 'font-bold text-20px border-b-2px border-primary-600'"
+          class="sm:block hidden hover:text-primary-600"
-            class="hover:text-primary-600"
+          :class="index == 0 ? 'border-b-1px border-primary-600' : 'text-black-400 font-normal'" 
+            :style="[
+              handleActiveItem('fontSizeTitle', 'activesFontSize', index, designObject.defaultFontSizeTitle)['fontSizeTitle'] &&
+                `font-size: ${handleActiveItem('fontSizeTitle', 'activesFontSize', index, designObject.defaultFontSizeTitle)['fontSizeTitle']}px`,
+              handleActiveItem('fontWeightTitle', 'activesFontWeight', index, designObject.defaultFontWeightTitle)['fontWeightTitle'] &&
+                `font-weight: ${handleActiveItem('fontWeightTitle', 'activesFontWeight', index, designObject.defaultFontWeightTitle)['fontWeightTitle']}`,
+                designObject['color'] && `color: ${designObject['color']}`
+            ]"
           >
             {{ component.title }}
           </nuxt-link>
@@ -80,6 +107,8 @@ const selectComponent = () => {
   align-items: flex-end;
   width: fit-content;
   overflow: hidden;
+  padding: 20px;
+
   &.vertical {
     flex-direction: column;
   }
@@ -89,14 +118,13 @@ const selectComponent = () => {
   .category {
     height: 100%;
 
-    h3 {
+    a {
-      font-weight: 500;
+      font-size: 15px;
-      font-size: 14px;
       margin: 0px !important;
     }
 
     &:first-child {
-      h3 {
+      a {
         font-weight: 600;
         font-size: 17px;
       }
@@ -108,18 +136,14 @@ const selectComponent = () => {
 }
 .borderLeft {
   border-left: 1px solid;
-  padding-left: 16px;
 }
 .borderRight {
   border-right: 1px solid;
-  padding-right: 16px;
 }
 .borderTop {
   border-top: 1px solid;
-  padding-top: 16px;
 }
 .borderBottom {
   border-bottom: 1px solid;
-  padding-bottom: 16px;
 }
 </style>

components/dynamic-page/page-component/templates/collections/layouts/Article.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
-import isEmpty from "lodash/isEmpty";
+import { isEmpty, groupBy } from "lodash";
-
+import { breakpoint } from "~/definitions";
+import { useWindowSize } from "@vueuse/core";
+const { width } = useWindowSize()
 const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
 
+// const store = reactive({
+//   section: usePageSectionStore(),
+// });
+// const { currentScreenMode } = storeToRefs(useCmsPageStore());
+
 const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
@@ -18,7 +25,7 @@ const SETTING_OPTIONS = {
   LAYOUT: "TYPE:Card",
 };
 
-const layoutParse = computed(() => {
+const LAYOUT_PARSE = computed(() => {
   const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
     const parseItem = _layout.split(":");
     return {
@@ -30,7 +37,7 @@ const layoutParse = computed(() => {
 });
 
 const _dataResult = computed(() => {
-  let _components = Array(Number(layoutParse.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
   const result = getInputValue(_props.dataResult, "ARRAY");
   result &&
     result.length > 0 &&
@@ -58,55 +65,89 @@ async function dropData(data: any) {
 const selectComponent = () => {
   emit("selectComponent");
 };
+
+const handleActiveItem = (listKey: string[], listKeyActive: string[], index: number, listDefaultValue: any) => {
+  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
+  const updatedDesignObject = { ...designObject };
+
+  const dataDefault = {
+    fontSizeTitle: "defaultFontSizeTitle",
+    fontWeightTitle: "defaultFontWeightTitle",
+  };
+
+  for (let i = 0; i < listKeyActive.length; i++) {
+    const keyActive = listKeyActive[i];
+    const key = listKey[i];
+    const defaultValue = listDefaultValue[i] || designObject[dataDefault[key]];
+
+    if (Array.isArray(designObject[keyActive])) {
+      const isActive = designObject[keyActive].includes(index + 1);
+      updatedDesignObject[key] = isActive ? designObject[key] : defaultValue;
+    } else {
+      delete updatedDesignObject[key];
+    }
+  }
+
+  return updatedDesignObject;
+};
+
+const mapActivesToItems = (index: number) => {
+  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
+  const output = {};
+
+  designObject.layoutGrid?.forEach((item: any) => {
+    item.actives.forEach((active: any) => {
+      output[active] = { ...item };
+    });
+  });
+
+  return output[index + 1] || {};
+};
 </script>
 
 <template>
-  <div>
   <div
-      class="collection-container p-2 border-custom"
+    class="collection-container border-custom"
-      :class="[layoutParse['LAYOUT_WRAP'] || 'vertical', ...(layoutParse['borderWrap']?.length > 0 ? layoutParse['borderWrap'] : [])]"
+    :class="[LAYOUT_PARSE['LAYOUT_WRAP'] || 'vertical', ...(LAYOUT_PARSE['borderWrap']?.length > 0 ? LAYOUT_PARSE['borderWrap'] : [])]"
     @click="selectComponent"
-      :style="[`grid-template-columns: repeat(${currentScreenMode === 'smartphone' ? 1 : layoutParse['COLUMN']}, minmax(0, 1fr))`, layoutParse['background'] && `background: ${layoutParse['background']}`]"
+    :style="[`grid-template-columns: repeat(${width < breakpoint.sm ? 1 : LAYOUT_PARSE['COLUMN']}, minmax(0, 1fr))`, LAYOUT_PARSE['background'] && `background: ${LAYOUT_PARSE['background']}`]"
   >
     <DynamicComponent
-        class="h-full"
       v-for="(component, index) in _dataResult"
       :key="index"
+      :style="[
+        mapActivesToItems(index)['colSpan'] && `grid-column: span ${mapActivesToItems(index)['colSpan']} / span ${mapActivesToItems(index)['colSpan']}`,
+        mapActivesToItems(index)['colStart'] && `grid-column-start: ${mapActivesToItems(index)['colStart']}`,
+        mapActivesToItems(index)['colEnd'] && `grid-column-end: ${mapActivesToItems(index)['colEnd']}`,
+      ]"
       :settings="{
         template: SETTING_OPTIONS.TEMPLATE,
         layout: SETTING_OPTIONS.LAYOUT,
-          label,
+        label: handleActiveItem(['border', 'HIDE', 'fontSizeTitle', 'fontWeightTitle'], ['activesBorder', 'activesHide', 'activesFontSize', 'activesFontWeight'], index, [[], [], null, null]),
         dataResult: !isEmpty(component) ? { ...component } : null,
       }"
       @drop-data="dropData"
     />
   </div>
-  </div>
 </template>
 
 <style lang="scss" scoped>
 .collection-container {
   display: grid;
-  gap: 10px;
-
   &.border-custom {
     border-color: #e5e5e5 !important;
   }
   &.borderLeft {
     border-left: 1px solid;
-    padding-left: 10px;
   }
   &.borderRight {
     border-right: 1px solid;
-    padding-right: 10px;
   }
   &.borderTop {
     border-top: 1px solid;
-    padding-top: 10px;
   }
   &.borderBottom {
     border-bottom: 1px solid;
-    padding-bottom: 10px;
   }
   &.vertical {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -115,11 +156,7 @@ const selectComponent = () => {
     grid-template-rows: auto;
     grid-auto-flow: column;
   }
-  .empty {
+
-    min-height: 100px;
-    border-radius: 6px;
-    background: #409eff;
-  }
   &.noData {
     border-radius: 6px;
   }

components/dynamic-page/page-component/templates/sections/index.vue

@@ -10,9 +10,9 @@ const _props = defineProps<{
 const definedDynamicComponent: Record<string, any> = {
   'TYPE:Article-LAYOUT:horizontal-DATA:HORIZONTAL': Article_Pagination
 };
-console.log('đã vào')
+
 const getCurrentComponent = computed(() => `${_props.settings.layout}`);
-console.log(getCurrentComponent.value, 'getcomponent')
+
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};

components/dynamic-page/page-component/templates/sections/layouts/Article.vue

@@ -110,9 +110,6 @@ watch(
             />
           </template>
         </template>
-        <template v-else>
-          <div class="empty"><h6 class="px-2 text-center">Nội dung danh sách bài viết của danh mục sẽ ở đây</h6></div>
-        </template>
         <div class="button-page flex">
           <a class="btn-page prev-page cursor-pointer" >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="w-7 h-6 text-primary-600">
@@ -141,25 +138,22 @@ watch(
 .section-container {
   .collection-container {
     display: grid;
-    gap: 10px;
+    /* gap: 10px; */
+    overflow-x: scroll;
     &.border-custom {
       border-color: #e5e5e5 !important;
     }
     &.borderLeft {
       border-left: 1px solid;
-      padding-left: 16px;
     }
     &.borderRight {
       border-right: 1px solid;
-      padding-right: 16px;
     }
     &.borderTop {
       border-top: 1px solid;
-      padding-top: 16px;
     }
     &.borderBottom {
       border-bottom: 1px solid;
-      padding-bottom: 16px;
     }
     &.vertical {
       grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -168,30 +162,8 @@ watch(
       grid-template-rows: auto;
       grid-auto-flow: column;
     }
-    &.borderRight ,
+  }
-  &.borderLeft, 
-  &.borderTop, 
-  &.borderBottom {
 
-    @media (max-width: 640px) {
-        border: 0;
-        padding: 0;
-      }
-  }
-  }
-  .empty {
-    width: 100%;
-    height: 100%;
-    min-height: 50px;
-    background-color: #409eff;
-    display: flex;
-    white-space: normal;
-    justify-content: center;
-    align-items: center;
-    h6 {
-      color: #fff;
-    }
-  }
   .basic-article {
     &.article {
       margin-bottom: 10px;
@@ -229,7 +201,4 @@ watch(
     align-items: center;
   }
 }
-.el-empty {
-  padding: 12px 0;
-}
 </style>

components/dynamic-page/page-section/layouts/Default.vue

@@ -141,7 +141,7 @@ const CLASS_FOR_SECTION = computed(() => {
 </script>
 
 <template>
-    <div class="section_layout grid  gap-[16px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
+    <div class="section_layout grid lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
       <div
         v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
         :key="index"

components/dynamic-page/page/templates/components/headers/TopNavigation.vue

@@ -13,7 +13,7 @@ const html = $('.parent').addClass('xl:(flex items-center justify-center)')
 html.find('>li').addClass('relative group xl:mr-3 hover:text-blue')
 html.find('ul').addClass('hidden w-200px shadow group-hover:(block absolute top-full left-0 bg-white z-50)')
 html.find('>li>a').addClass('block py-4')
-html.find('>li>ul>li>a').addClass('block py-10px px-15px text-black hover:(bg-blue text-white)')
+html.find('>li>ul>li>a').addClass('block py-10px px-15px text-black-500 hover:(bg-blue text-white)')
 
 </script>
 

components/dynamic-page/page/templates/index.vue

@@ -14,7 +14,6 @@ const getCurrentTemplate = computed(() => {
     return _props.settings && _props.settings.template || '';
 });
 
-console.log(getCurrentTemplate.value, 'tempalte')
 
 const GET_PROPS = computed(() => {
     return () => {

pages/bai-viet/[slug].vue

@@ -25,6 +25,17 @@ const store = reactive({
 (async () => {
   try {
     await store.article.getArticleBySlug(route.params.slug);
+
+//   useHead({
+//     title: currentArticle.value?.title.replace(/<\/?[^>]+(>|$)/g, ""),
+// })
+useSeoMeta({
+    title: currentArticle.value?.title.replace(/<\/?[^>]+(>|$)/g, ""),
+    ogTitle: currentArticle.value?.title.replace(/<\/?[^>]+(>|$)/g, ""),
+    description: currentArticle.value?.intro.replace(/<\/?[^>]+(>|$)/g, ""),
+    ogDescription: currentArticle.value?.intro.replace(/<\/?[^>]+(>|$)/g, ""),
+    ogImage: currentArticle.value?.thumbnail,
+})
   } catch (error) {
     console.error("Error fetching data:", error);
   }

uno.config.ts

@@ -20,7 +20,13 @@ export default defineConfig({
         600: "#3c7abc",
       },
       'gray': {
+        500: '#bdbdbd',
         600:' #757575'
+      },
+      black: {
+        Default: '#222',
+        '500': '#222',
+        '400': '#4f4f4f'
       }
       // 'red': '#ff0018',
       // 'blue': '#2d6cf6',
@@ -79,6 +85,10 @@ export default defineConfig({
       fonts: {
         nunito: "Nunito",
         playfair: ['Playfair Display', 'sans-serif'],
+        beVietnam: ['Be Vietnam Pro', 'sans-serif'],
+        arial: "arial",
+        archivo: ["Archivo", 'sans-serif'],
+        merriweather: ["Merriweather", 'serif']
       },
     }),
   ],