Fix

assets/styles/style.scss

@@ -194,3 +194,16 @@ div[layout="ARTICLE_PAGE"] {
         }
     }
 } 
+
+.emagazine, .infographic, .image {
+    p {
+        @apply w-full max-w-660px mx-auto text-18px font-raleway leading-180%;
+    }
+
+    figure {
+        @apply w-full;
+    }
+    img {
+        @apply mx-auto;
+    }
+}

components/dynamic-page/page-component/templates/articles/cards/Audio.vue

@@ -72,7 +72,7 @@ const parseData = computed(() => {
       </span>
       <div class="card-audio__type-category" > 
         <div class="card-audio__type" v-if="type">{{ type }}</div>
-        <nuxt-link v-if="parseData.category" to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
+        <nuxt-link v-if="parseData?.category" to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
           parseData?.category?.title
         }}</nuxt-link>
       </div>

components/dynamic-page/page-component/templates/articles/details/Emagazine.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const emit = defineEmits(["dropData", "selectComponent"]);
+const _props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+}>();
+const { currentArticle } = storeToRefs(useArticleStore())
+console.log(currentArticle.value, 'currentArticle')
+</script>
+<template>
+  <div  class="overflow-hidden emagazine">
+  <!-- bổ sung sau -->
+    <!-- <img :src="currentArticle.thumbnail" alt="" class="w-full object-cover">
+
+    <div class="px-44px pb-30px my-30px max-w-660px mx-auto border-b-1px border-#000">
+    
+    </div> -->
+
+    <div v-html="currentArticle.detail"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.content {
+  width: auto;
+}
+</style>

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

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { enumPageComponentTemplates } from "@/definitions/enum";
-import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
+import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
-import { isEmpty } from "@/utils/lodash";
+const emit = defineEmits(["dropData", "selectComponent"]);
-import { getInputValue } from "@/utils/parseSQL";
 
 const _props = defineProps<{
   dataResult?: any;
   dataType?: any;
   dataQuery?: any;
   layout?: string;
-  label?: any;
+  label?: string;
 }>();
 const SETTING_OPTIONS = {
   BREADCRUMB_MAX_ELEMENT: 3,
@@ -18,6 +17,9 @@ const LAYOUT_PARSE = computed(() => {
   const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
   return Object.assign({}, designObject);
 });
+const selectComponent = () => {
+  emit("selectComponent");
+};
 
 const parseData = computed(() => {
   if (!_props.dataResult) return;
@@ -25,20 +27,29 @@ const parseData = computed(() => {
   return result;
 });
 
-const articleStore = useArticleStore();
+const drop = (e: any) => {
-const currentArticle = computed(() => articleStore.currentArticleGeneral);
+  if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
+    const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
+    const { dataType, dataResult } = JSON.parse(data);
+    const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
+    emit("dropData", {
+      dataType,
+      dataResult,
+      dataQuery: dataQuery,
+    });
+  }
+};
 </script>
 <template>
-  <div class="overflow-hidden">
+  <div @click="selectComponent" class="overflow-hidden" @dragover.prevent @drop.stop.prevent="drop">
     <div class="breadcrumb" v-if="!LAYOUT_PARSE['HideBreadcrumb']">
       <ul class="breadcrumb__list">
         <li
           class="breadcrumb__list__item"
           v-for="(item, index) in _props.dataResult && _props.dataResult?.length > 0 ? _props.dataResult : Array(SETTING_OPTIONS.BREADCRUMB_MAX_ELEMENT).fill(null)"
           :key="index"
-          :class="isEmpty(item) && 'empty'"
         >
-          <p v-if="!isEmpty(item)" class="breadcrumb__list__item__title">
+          <p class="breadcrumb__list__item__title">
             {{ item?.title }}
           </p>
         </li>

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

@@ -1,55 +1,76 @@
 <script setup lang="ts">
-import { isEmpty } from "@/utils/lodash";
+const emit = defineEmits(["dropData", "selectComponent"]);
-
+const { categoryTree } = storeToRefs(useCategoryStore());
+const { currentArticle } = storeToRefs(useArticleStore());
+if (categoryTree.value) {
+  await useCategoryStore().fetchBySiteId();
+}
 const _props = defineProps<{
-  dataResult?: any;
+  dataResult?: any[];
 }>();
 const SETTING_OPTIONS = {
   BREADCRUMB_MAX_ELEMENT: 3,
 };
+const currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId);
+function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
+  for (const category of categories) {
+    const currentPath = [...path, { title: category.title, code: category.code }];
+    if (category.id === targetId) {
+      return currentPath;
+    }
+    if (category.children) {
+      const result: any = findElementPathById(category.children, targetId, currentPath);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+
+console.log(currentArticle.value, "currentArticle");
 </script>
 <template>
-  <div class="overflow-hidden">
+  <div class="overflow-hidden w-full max-w-1385px mx-auto px-30px image">
-    <div class="breadcrumb">
+    <div class="">
-      <ul class="breadcrumb__list">
+      <div class="category flex justify-between flex-wrap items-center mb-10px">
-        <li
+        <ul class="flex gap-32px">
-          class="breadcrumb__list__item"
+          <li v-for="(category, index) in currentCategoryTree" :key="index" class="first:text-#000 text-#929292 last:after:content-[''] relative after:absolute after:content-['/'] after:text-20px after:right--20px">
-          v-for="(item, index) in _props.dataResult && _props.dataResult?.length > 0 ? _props.dataResult : Array(SETTING_OPTIONS.BREADCRUMB_MAX_ELEMENT).fill(null)"
+            <nuxt-link class="font-raleway text-18px font-500 leading-180% uppercase" :to="`${category.code}`">{{ category.title }}</nuxt-link>
-          :key="index"
-          :class="isEmpty(item) && 'empty'"
-        >
-          <p v-if="!isEmpty(item)" class="breadcrumb__list__item__title">
-            {{ item?.title }}
-          </p>
           </li>
         </ul>
 
-      <p class="breakcrumb__time">Ngày tạo image</p>
+        <div v-if="currentArticle.topics" class="pl-20px relative bg-primary inline-block">
+          <nuxt-link class="h-30px block py-4px px-16px border-1 border-#000 bg-white text-12px leading-180% font-raleway font-400" :to="`/topic/${currentArticle.topics[0].code}`">{{ currentArticle.topics[0].title }}</nuxt-link>
         </div>
-
-    <div class="content">Nội dung bài viết sẽ ở đây</div>
-
-    <div class="btn-wrap w-100 max-w">
-      <div class="center-y">
-        <p title="Quay trở lại" class="button--back">
-          <Icon name="fa6-solid:arrow-left" />
-        </p>
-        <button class="button--bookmark">
-          <Icon name="fa6-regular:bookmark" />
-        </button>
       </div>
+        <h2 class="font-gelasio text-44px font-bold leading-130%" v-if="currentArticle.title" v-html="currentArticle.title"></h2>
+      <!-- <div class="grid grid-cols-12 gap-20px">
+      <div class="col-span-3"></div>
+      </div> -->
 
-      <div class="center-y">
+      <div class="author flex gap-12px my-20px" v-if="currentArticle.authors">
-        <button title="Copy link" class="button--back copy-link">
+        <ul class="flex">
-          <Icon name="mdi:link-variant" />
+          <li :style="{ 'z-index': index + 1 }" class="relative ml--12px first:ml-0" v-for="(author, index) in currentArticle.authors" :key="index">
-        </button>
+            <nuxt-link :to="`tac-gia/${author.code}`">
+              <img :src="author.thumbnail || `http://picsum.photos/1024/600?random=1`" alt="" class="w-64px p-1px border-1px border-white h-64px object-cover rounded-full" />
+            </nuxt-link>
+          </li>
+        </ul>
+        <div>
+          <div class="mt-10px">
+            <nuxt-link class="font-raleway text-#000" v-for="(author, index) in currentArticle.authors" :key="index" :to="`/tac-gia/${author.code}`">{{ author.title + (index < currentArticle.authors.length - 1 ? ", " : "") }}</nuxt-link>
           </div>
+          <div class="text-12px">Xuất bản vào {{ formatDate(currentArticle.publishedOn, "DD/MM/YYYY | hh:mm") }}</div>
+        </div>
+      </div>
+      <div v-html="currentArticle.detail"></div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-$max-width: 680px;
+$max-width: 1276px;
 
 .breadcrumb {
   display: flex;

components/dynamic-page/page-component/templates/articles/details/Infographic.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const emit = defineEmits(["dropData", "selectComponent"]);
+const _props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+}>();
+const { currentArticle } = storeToRefs(useArticleStore())
+console.log(currentArticle.value, 'currentArticle')
+</script>
+<template>
+  <div  class="overflow-hidden infographic">
+  <!-- bổ sung sau -->
+    <!-- <img :src="currentArticle.thumbnail" alt="" class="w-full object-cover">
+
+    <div class="px-44px pb-30px my-30px max-w-660px mx-auto border-b-1px border-#000">
+    
+    </div> -->
+
+    <div v-html="currentArticle.detail"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+.center-y {
+  width: auto;
+}
+</style>

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

@@ -1,93 +1,254 @@
 <script setup lang="ts">
+import { useArticleStore } from "~/stores/articles";
+import Poll from "~/components/article/immerse/Poll.vue";
+import Quiz from "~/components/article/immerse/Quiz.vue";
+import Survey from "~/components/article/immerse/Survey.vue";
+import Document from "~/components/article/immerse/Document.vue";
+import Attachment from "@/components/article/immerse/Attachment.vue";
+import Tag from "@/components/article/immerse/Tag.vue";
+const { currentArticle } = storeToRefs(useArticleStore());
+import { useDynamicPageStore } from "~/stores/dynamic-page";
+import { useCategoryStore } from "~/stores/category";
 
+const store = reactive({
+  dynamicPage: useDynamicPageStore(),
+  article: useArticleStore(),
+  category: useCategoryStore(),
+});
+
+const { categoryTree } = storeToRefs(store.category);
+
+await store.category.fetchBySiteId();
+const currentCategoryTree = (store.category.currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId));
+function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
+  for (const category of categories) {
+    const currentPath = [...path, { title: category.title, code: category.code }];
+    if (category.id === targetId) {
+      return currentPath;
+    }
+    if (category.children) {
+      const result: any = findElementPathById(category.children, targetId, currentPath);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+
+onMounted(async () => {
+  clickElement("figure", "custom-figure", "data-code");
+  clickElement("author", "author", "data-code");
+
+  let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
+  let breadcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
+  if (detailEmagazine && breadcrumb) {
+    breadcrumb.classList.add("lg:max-w-640px", "mx-auto");
+  }
+});
+
+function clickElement(type: string, selector: string, attribute: string) {
+  const elements = document.querySelectorAll(selector);
+  elements.forEach((element) => {
+    element.addEventListener("click", (event) => {
+      event.preventDefault();
+      const url = `${window.location.protocol}//${window.location.host}/${type}/${element.getAttribute(attribute)}`;
+
+      const a = document.createElement("a");
+      a.href = url;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    });
+  });
+}
+
+const isBookmark = ref(false);
+const onClickBookmark = () => {
+  isBookmark.value = !isBookmark.value;
+};
+async function copyLink() {
+  try {
+    const url = window.location.href;
+    await navigator.clipboard.writeText(url);
+    alert("copy link thành công");
+  } catch (error) {
+    alert(error);
+  }
+}
+
+const getSrc = (htmlString: string) => {
+  const srcRegex = /src="([^"]+)"/;
+  return htmlString?.match(srcRegex);
+};
+
+const isMoreControl = ref(false);
+const isPlayed = ref(true);
+const isVolume = ref(true);
+const speedList = ref<{ [key: number]: string }>({
+  1: "0.5x",
+  2: "0.75x",
+  3: "1.0x",
+  4: "1.25x",
+  5: "1.50x",
+});
+const speedIndexDefault = ref(3);
+const speedDefault = ref(speedList.value[speedIndexDefault.value]);
+const volume = ref(1.0);
+const audioPlayer = ref<HTMLAudioElement | null>(null);
+const currentTime = ref(0);
+const duration = ref(0);
+
+function setUpVolums() {
+  isVolume.value = !isVolume.value;
+  if (audioPlayer.value) {
+    if (isVolume.value) {
+      audioPlayer.value.volume = 1;
+    } else {
+      audioPlayer.value.volume = 0;
+    }
+  }
+}
+
+const updateVolume = (num?: number) => {
+  if (audioPlayer.value) {
+    if(num) {
+      volume.value += num
+    }
+    // console.log('1231321')
+    audioPlayer.value.volume = volume.value;
+  }
+};
+
+function chanageSpeed() {
+  if (speedIndexDefault.value < 5) {
+    speedIndexDefault.value += 1;
+    if (audioPlayer.value) {
+      audioPlayer.value.playbackRate += 0.25;
+    }
+    speedDefault.value = speedList.value[speedIndexDefault.value];
+  } else {
+    if (audioPlayer.value) {
+      audioPlayer.value.playbackRate = 0.5;
+    }
+    speedIndexDefault.value = 1;
+    speedDefault.value = speedList.value[1];
+  }
+}
+
+function togglePlayer() {
+  isPlayed.value = !isPlayed.value;
+  if (audioPlayer.value) {
+    if (isPlayed.value) {
+      audioPlayer.value.pause();
+    } else {
+      audioPlayer.value.play();
+    }
+  }
+}
+
+function replayAndForward(time: number) {
+  if (audioPlayer.value) {
+    if (audioPlayer.value.currentTime == audioPlayer.value.duration) {
+      isPlayed.value = true;
+    } else {
+      audioPlayer.value.currentTime = audioPlayer.value.currentTime + time;
+    }
+  }
+}
+
+const seekToTime = () => {
+  if (audioPlayer.value) {
+    audioPlayer.value.currentTime = currentTime.value;
+  }
+};
+
+const updateCurrentTime = () => {
+  if (audioPlayer.value) {
+    currentTime.value = audioPlayer.value.currentTime;
+  }
+};
+
+const updateDuration = () => {
+  if (audioPlayer.value) {
+    duration.value = audioPlayer.value.duration;
+  }
+};
+
+const currrentTimeComputed = computed(() => {
+  return utils.formattedTime(currentTime.value);
+});
+
+const durationComputed = computed(() => {
+  return utils.formattedTime(duration.value);
+});
 </script>
 <template>
-  <div
+  <div class="lg:p-40px md:p-30px p-5 border-1px border-solid border-black/10 rounded-8px">
-    class="podcast__wrapper overflow-hidden"
+    <div class="flex md:flex-row flex-col md:gap-6 gap-2 justify-between mb-10px">
-  >
+      <p class="text-#9f9f9f text-14px mb-2 md:hidden block text-center">
-    <div
+        {{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}
-      class="podcast"
-    >
-      <p
-        class="podcast__content__time"
-      >
-        Ngày tạo podcast
       </p>
-      <figure><img src="http://picsum.photos/1024/600?random=1'" alt="Ảnh podcast" title="Ảnh podcast" /></figure>
+      <figure class="!w-auto"><img class="w-150px h-150px rounded-8px shadow-md cursor-pointer" :src="currentArticle?.thumbnail" alt="Ảnh podcast" title="Ảnh podcast" /></figure>
-      <div
+      <div class="flex-1 text-#222 m-0 md:text-left text-center">
-        class="podcast__content"
+        <p class="text-#9f9f9f text-14px mb-2 md:block hidden">
-      >
+          {{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}
-        <p
-          class="podcast__content__time"
-        >
-          Ngày tạo podcast
-        </p>
-        <h1 class="podcast__content__title">Tiêu đề podcast</h1>
-        <p
-          class="podcast__content__text"
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
+        <h1 class="text-24px md:mb-4 mb-2 font-bold" v-html="currentArticle?.title"></h1>
+        <p class="hidden md:line-clamp-3" v-html="currentArticle?.intro"></p>
       </div>
 
-      <ul
+      <ul class="items-start gap-2 m-0 p-0 md:flex hidden">
-        class="buttons"
+        <li class="w-9 h-9 bg-white border-1 border-solid border-[rgb(229, 231, 235)] cursor-pointer shadow-md rounded-50px relative hover:bg-primary-100 hover:text-primary-600">
-      >
+          <Icon class="text-18px absolute top-50% left-50% translate-x--50% translate-y--50%" name="mdi:bookmark-outline" />
-        <li><Icon name="mdi:bookmark-outline" /></li>
+        </li>
-        <li><Icon name="material-symbols:mode-comment-outline" /></li>
+        <li class="w-9 h-9 bg-white border-1 border-solid border-[rgb(229, 231, 235)] cursor-pointer shadow-md rounded-50px relative hover:bg-primary-100 hover:text-primary-600">
+          <Icon class="text-18px absolute top-50% left-50% translate-x--50% translate-y--50%" name="material-symbols:mode-comment-outline" />
+        </li>
       </ul>
     </div>
-
+    <audio :src="getSrc(currentArticle?.detail)?.[1]" preload="auto" ref="audioPlayer" @timeupdate="updateCurrentTime" @loadedmetadata="updateDuration" />
-    <div class="playlist">
+    <div class="p-2">
-      <div class="playlist__time">
+      <input class="w-full accent-primary-600 cursor-pointer" type="range" v-model="currentTime" @input="seekToTime" :max="duration" />
-        <span>5:00</span>
+      <div class="flex justify-between">
-        <span>10:00</span>
+        <span>{{ currrentTimeComputed }}</span>
+        <span>{{ durationComputed }}</span>
       </div>
-      <div class="playlist__buttons">
+      <div class="flex justify-between items-center">
-        <div class="playlist__buttons__left">
+        <div class="md:w-150px text-left">
-          <div
+          <div class="text-28px text-primary-600 md:hidden block">
-            class="button__prev"
-          >
             <Icon name="material-symbols:skip-previous" />
           </div>
-          <div
+          <div class="md:inline-flex hidden items-center gap-2 ml--10px h9 text-primary-600 rounded-8px text-28px cursor-pointer hover:bg-primary-100">
-            class="sound"
+            <Icon @click="updateVolume(-0.1)" name="material-symbols:volume-mute"></Icon>
-          >
+            <input v-if="isVolume" class="accent-primary-600 h-1 w-12 lg:w-20 cursor-pointer" type="range" v-model="volume" @input="updateVolume()" min="0.1" max="1" step="0.1" />
-            <Icon name="material-symbols:volume-mute"></Icon>
+            <Icon @click="updateVolume(0.1)" name="material-symbols:volume-up"></Icon>
-            <div></div>
-            <Icon name="material-symbols:volume-up"></Icon>
           </div>
         </div>
 
-        <div class="play">
+        <div class="flex items-center justify-center gap-4 flex-1 text-28px text-primary-600">
-          <Icon name="fluent:skip-back-10-48-filled" />
+          <Icon @click="replayAndForward(-10)" name="fluent:skip-back-10-48-filled" />
-          <Icon name="material-symbols:play-arrow" class="button" />
+          <button @click="togglePlayer" class="bg-transparent">
-          <Icon name="fluent:skip-forward-10-48-filled" />
+            <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>
+
+          <Icon @click="replayAndForward(10)" name="fluent:skip-forward-10-48-filled" />
         </div>
 
-        <div class="playlist__buttons__right">
+        <div class="md:w-150px text-right">
-          <div
+          <div class="text-28px text-primary-600 md:hidden block">
-            class="button__next"
-          >
             <Icon name="material-symbols:skip-next" />
           </div>
-          <div
+          <div class="text-14px text-primary-600 md:block hidden cursor-pointer" @click="chanageSpeed">
-            class="speed"
+            <span class="font-300">Tốc độ phát: </span>
-          >
+            <strong class="font-bold text-20px ml-1">{{ speedDefault }}</strong>
-            <span>Tốc độ phát: </span>
-            <strong>1x</strong>
           </div>
         </div>
       </div>
     </div>
 
-    <p
+    <p class="md:hidden block" v-html="currentArticle?.intro"></p>
-      class="podcast__content__text"
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
   </div>
 </template>
 <style lang="scss">

components/dynamic-page/page-component/templates/articles/details/Video.vue

@@ -1,11 +1,22 @@
 <script setup lang="ts">
-import Comment from "@/components/dynamic-page/page-component/templates/others/comments/Default.vue";
+// const store = {
+//   page: useCmsPageStore(),
+// };
+// import Comment from "@/components/cms/page-component/templates/others/comments/Default.vue";
 </script>
 <template>
-  <div class="container overflow-hidden">
+  video
+  <!-- <div class="container overflow-hidden">
     <div class="video row">
       <div
         class="video__left"
+        :class="
+          store.page.classifyScreenByWidth({
+            computer: 'col-8 px-0',
+            tablet: 'col-8 px-0',
+            smartphone: 'col-12',
+          })
+        "
       >
         <video controls="controls" width="100%" height="100%" data-file-id="149" data-resource="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" data-title="Download.mp4">
           <source src="" type="video/mp4" />
@@ -14,13 +25,27 @@ import Comment from "@/components/dynamic-page/page-component/templates/others/c
 
       <div
         class="video__right bg-body-tertiary"
+        :class="
+          store.page.classifyScreenByWidth({
+            computer: 'col-4 ps-4 pt-2',
+            tablet: 'col-4 ps-4 pt-2',
+            smartphone: 'col-12 pt-2',
+          })
+        "
       >
         <h1
           class=""
+          :class="
+            store.page.classifyScreenByWidth({
+              computer: 'fs-1',
+              tablet: 'fs-2',
+              smartphone: 'fs-3',
+            })
+          "
         >
           Tiêu đề video
         </h1>
-        <p class="line-clamp-3 fs-5 fw-light">
+        <p class="line-clamp-3 fs-5 fw-light" :class="store.page.classifyScreenByWidth({})">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
           consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
@@ -30,7 +55,7 @@ import Comment from "@/components/dynamic-page/page-component/templates/others/c
         <Comment />
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 <style scoped lang="scss">
 .line-clamp-3 {

components/dynamic-page/page-component/templates/articles/details/index.ts

@@ -4,3 +4,5 @@ export { default as Article_Detail_General } from './General.vue'
 export { default as Article_Detail_Podcast } from './Podcast.vue'
 export { default as Article_Detail_Video } from './Video.vue'
 export { default as Article_Detail_Image } from './Image.vue'
+export { default as Article_Detail_Emagazine } from './Emagazine.vue'
+export { default as Article_Detail_Infographic } from './Infographic.vue'

components/dynamic-page/page-component/templates/articles/details/index.vue

@@ -2,7 +2,7 @@
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
 
 // import { Article_Card, Article_Detail_Video, Article_Detail_Podcast, Article_Detail_General, Article_Detail_Image } from "./index";
-import { Article_Detail_General, Article_Detail_Podcast, Article_Detail_Video, Article_Detail_Image } from "./index";
+import { Article_Detail_General, Article_Detail_Podcast, Article_Detail_Video, Article_Detail_Image, Article_Detail_Emagazine, Article_Detail_Infographic } from "./index";
 const _props = defineProps<{
   settings: any;
   component?: any;
@@ -13,6 +13,8 @@ const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_PODCAST"]]: Article_Detail_Podcast,
   [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_VIDEO"]]: Article_Detail_Video,
   [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_IMAGE"]]: Article_Detail_Image,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_EMAGAZINE"]]: Article_Detail_Emagazine,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_INFOGRAPHIC"]]: Article_Detail_Infographic,
 };
 
 const getCurrentComponent = computed(() => `${_props.settings.layout}`);

components/dynamic-page/page-component/templates/sections/articles/Default.vue

@@ -5,7 +5,9 @@ import { enumPageComponentTemplates } from "@/definitions/enum";
 const router = useRouter();
 const route = useRoute();
 import { useScroll } from '@vueuse/core';
-
+const store = reactive({ 
+  component: useDynamicPageStore(), 
+});
 const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;

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

@@ -55,18 +55,18 @@ const LAYOUT_PARSE = computed(() => {
         &.full-size-page {
             width: 100%;
         }
-        .full-size-layout {
+        // .full-size-layout {
-            padding-left: 20px;
+        //     padding-left: 20px;
-            padding-right: 20px;
+        //     padding-right: 20px;
-        }
+        // }
     }
 
     .layout_container {
         padding-top: 20px;
 
         &.center-layout {
-            max-width: 1385px;
+            max-width: 1440px;
-            padding: 0 12px;
+            padding: 0 27.5px;
             margin: auto;
         }
     }

components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue

@@ -6,8 +6,9 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
 <template>
   <footer id="footer" class="main-footer mt-20">
     <div class="main-footer-container">
-      <div class="footer-centertab">
+      <div class="footer-centertab grid lg:grid-cols-6">
-        <div>
+        <div class="col-span-1 lg:block hidden"></div>
+        <div class="col-span-5">
           <div class="footer-navigation-container md:block hidden">
             <div>
               <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT']" />
@@ -86,8 +87,9 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
       </div>
     </div>
     <div class="footer-bottomtab">
-      <div>
+      <div class="lg:grid-cols-6 grid">
-        <div>
+        <div class="lg:block hidden"></div>
+        <div class="col-span-5">
           <div class="flex justify-between items-end">
             <div class="flex-1 flex md:justify-start justify-center">
               <div>
@@ -125,16 +127,17 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
 .main-footer {
   .main-footer-container {
     background: #2b2b2b;
-    padding: 54px 15px 20px 15px;
+    padding: 54px 0 32px 0;
   }
 
   .footer-centertab {
     margin: 0 auto;
-    max-width: 1385px;
+    max-width: 1440px;
+    padding: 0 27.5px;
     > div {
-      max-width: 1145px;
+      // max-width: 1145px;
-      margin-left: auto;
+      // margin-left: auto;
-      padding: 0 33px;
+      // padding: 0 33px;
     }
 
     .footer-navigation-container {
@@ -262,18 +265,19 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
 
   .footer-bottomtab {
     width: 100%;
-    padding: 5px 15px;
+    // padding: 5px 15px;
     > div {
       margin: 0 auto;
-      max-width: 1385px;
+      max-width: 1440px;
+      padding: 0 27.5px;
 
       > div {
-        max-width: 1145px;
+        // max-width: 1145px;
-        margin-left: auto;
+        // margin-left: auto;
-        padding: 0 33px;
+        // padding: 0 33px;
       }
     }
-    padding: 0 33px;
+    // padding: 0 33px;
     padding-bottom: 80px;
     padding-top: 24px;
     .footer-bottomtab-relations {

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

@@ -52,15 +52,15 @@ const showMenuMobile = ref(false)
       </div>
     </div>
     <div class="main-ads lg:block hidden">
-      <div class="main-ads-container">
+      <div class="main-ads-container py-20px  border-y-1px border-#000">
         <div class="main-ads-content">
           <img src="~/assets/images/tienphong/main-ads.png" alt="" />
         </div>
       </div>
     </div>
     <div class="main-header-control lg:block hidden">
-      <div class="header-control-container !py-2">
+      <div class="header-control-container">
-        <div>
+        <div class="border-b-1px border-#000 py-2">
           <div class="header-control_tag">
             <label>Xu hướng</label>
           </div>
@@ -155,9 +155,9 @@ const showMenuMobile = ref(false)
   .main-header-centerbar {
     padding: 20px 0px;
     > div {
-      max-width: 1385px;
+      max-width: 1440px;
       margin: 0 auto;
-      padding: 0px 20px;
+      padding: 0px 27.5px;
     }
     .main-header-control {
       flex: 1;
@@ -173,11 +173,11 @@ const showMenuMobile = ref(false)
     }
   }
   .main-ads {
-    max-width: 1385px;
+    max-width: 1440px;
     margin: 0px auto;
-    padding: 20px 20px;
+    padding: 0px 27.5px;
-    border-top: 1px solid #000000;
+    // border-top: 1px solid #000000;
-    border-bottom: 1px solid #000000;
+    // border-bottom: 1px solid #000000;
 
     .main-ads-content {
       width: 100%;
@@ -194,10 +194,10 @@ const showMenuMobile = ref(false)
   }
   .main-header-control {
     .header-control-container {
-      max-width: 1385px;
+      max-width: 1440px;
       margin: 0px auto 10px auto;
-      padding: 10px 20px;
+      padding: 0 27.5px;
-      border-bottom: 1px solid #000000;
+      // border-bottom: 1px solid #000000;
       > div {
         display: flex;
         align-items: center;

pages/bai-viet/[slug].vue

@@ -19,34 +19,34 @@ import { useDynamicPageStore } from '~/stores/dynamic-page';
 import { useArticleStore } from '~/stores/articles';
 
 const loadPage = async () => {
-const article = await store.article.getArticleBySlug(route.params.slug);
+const article = await store.article.getArticleBySlug(String(route.params.slug));
-  let isContentType = 'trang-chi-tiet';
+  let isContentType 
-  // switch (article.value?.contentType) {
+  switch (article.value?.contentType) {
-  //   case 1:
+    case 1:
-  //     isContentType = 'trang-chi-tiet-bai-viet-general';
+      isContentType = 'trang-chi-tiet';
-  //     break;
+      break;
-  //   case 2:
+    case 2:
-  //     isContentType = 'trang-chi-tiet-bai-viet-image';
+      isContentType = 'trang-image';
-  //     break;
+      break;
-  //   case 3:
+    case 3:
-  //     isContentType = 'trang-chi-tiet-podcast';
+      isContentType = 'trang-chi-tiet';
-  //     break;
+      break;
-  //   case 4:
+    case 4:
-  //     isContentType = 'trang-chi-tiet-bai-viet-video';
+      isContentType = 'trang-chi-tiet';
-  //     break;
+      break;
-  //   case 5:
+    case 5:
-  //     if (article.value?.layoutType === 4) {
+      if (article.value?.layoutType === 4) {
-  //       isContentType = 'trang-chi-tiet-bai-viet-emagazine';
+        isContentType = 'trang-emagazine';
-  //       break;
+        break;
-  //     }
+      }
-  //     if (article.value?.layoutType === 3) {
+      if (article.value?.layoutType === 3) {
-  //       isContentType = 'trang-chi-tiet-bai-viet-infographics';
+        isContentType = 'trang-inforgraphic';
-  //       break;
+        break;
-  //     }
+      }
-  //   default:
+    default:
-  //     isContentType = 'trang-chi-tiet-bai-viet-general';
+      isContentType = 'trang-chi-tiet';
-  //     break;
+      break;
-  // }
+  }
   const dynamicPage = await store.dynamicPage.fetchPageByCode(isContentType);
 
   return {

uno.config.ts

@@ -42,7 +42,9 @@ export default defineConfig({
       "after:no-content": "after:content-['']",
       "before:no-content": "before:content-['']",
       'container-xxl': 'px-[8px] mx-auto w-full sm:w-620px md:w-760px lg:w-980px xl:w-1100px 2xl:w-1200px',
-      'container-long': 'px-2 mx-auto w-full sm:w-620px md:w-760px lg:w-980px xl:w-1100px 2xl:w-1200px'
+      'container-long': 'px-2 mx-auto w-full sm:w-620px md:w-760px lg:w-980px xl:w-1100px 2xl:w-1200px',
+      // Size tiền phong
+      'container-tp': "px-30px mx-auto w-full max-w-1385px"
     },
   ],
   rules: [