a

components/dynamic-page/page-component/templates/advertisings/advertisings/Default.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts"></script>
 <template>
-  <div class="content">
+  <div class="pt-5">
-    <span>Quảng cáo ở đây</span>
+    <div class="content p-3">
+    <span class="text-12px text-[#AFADB5] text-end block">Quảng cáo</span>
+    <img class="block w-full h-full" src="/assets/images/tienphong/main-ads-2.jpg" alt="">
+  </div>
   </div>
 </template>
 <style scoped lang="scss">
 .content {
   font-size: 18px;
   background-color: #eeeeee;
-  height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 </style>

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

@@ -72,6 +72,7 @@ const drop = (e: any) => {
     </div>
   </article> -->
   <article
+  v-if="parseData"
     class="basic-article border-custom"
     :class="LAYOUT_PARSE['article_Class']"
     @click="selectComponent"

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

@@ -13,23 +13,23 @@ onMounted(() => {
 <template>
   <header id="header" class="main-header">
     <div class="main-header-topbar ">
-      <div class="flex items-center">
+      <div class="flex items-center !py-3px">
-        <time class="text-capitalize text-white" :datetime="currentDateTime">{{ currentDateTime }} GMT+7</time>
+        <time class="text-capitalize text-white text-12px" :datetime="currentDateTime">{{ currentDateTime }} GMT+7</time>
         <div class="main-header-topbar-listag">
 
         </div>
         <div class="main-header-topbar-infor flex items-center">
           <div>
-            <div class="text-white">
+            <div class="text-white text-12px">
               <span>HOTLINE: </span>
               <a href="tel:0865015015"> 0865.015.015</a>
               <span> - </span>
               <a href="tel:0977456112">0977.456.112</a>
             </div>
           </div>
-          <div>
+          <div class="flex items-center">
-            <a href=""><Icon class="" name="ic:baseline-facebook" /></a>
+            <a class="flex" href=""><Icon class="text-12px" name="ic:baseline-facebook" /></a>
-            <a href=""><Icon class="" name="ion:logo-youtube" /></a>
+            <a class="flex" href=""><Icon class="" name="ion:logo-youtube" /></a>
           </div>
         </div>
       </div>
@@ -59,10 +59,10 @@ onMounted(() => {
       </div>
     </div>
     <div class="main-header-control">
-      <div class="header-control-container">
+      <div class="header-control-container !py-2">
         <div>
           <div class="header-control_tag">
-            <h5>Xu hướng</h5>
+            <label>Xu hướng</label>
           </div>
           <div class="header-control_article">
             <h4>Thư du học sinh: Hoa Học Trò là “cánh cửa thần kỳ” dẫn tớ đến thế giới rộng lớn hơn</h4>
@@ -72,7 +72,7 @@ onMounted(() => {
               <Icon name="material-symbols-light:search" />
             </div>
             <div>
-              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwdIVSqaMsmZyDbr9mDPk06Nss404fosHjLg&s" width="40" height="40" class="rounded-circle" alt="">
+              <img src="http://picsum.photos/1024/600?random=1" width="40" height="40" class="rounded-circle" alt="">
             </div>
           </div>
         </div>
@@ -162,10 +162,13 @@ onMounted(() => {
     .header-control {
       &_tag {
         position: relative;
-        h5 {
+        height: 30px;
+        label {
           font-size: 12px; 
           text-transform: uppercase;
-          padding: 4px 12px 0 12px; 
+          padding: 0 16px 0 12px;
+          display: flex;
+          align-items: center; 
           height: 100%; 
           margin: 0; 
           border: 1px solid #000; 
@@ -194,9 +197,16 @@ onMounted(() => {
       &_control {
         display: flex;
         align-items: center;
-        gap: 10px;
+        gap: 20px;
         svg {
-          font-size: 30px;
+          font-size: 36px;
+        }
+
+        img {
+          width: 32px;
+          height: 32px;
+          object-fit: cover;
+          border-radius: 999px;
         }
       }
     }