From f22a16d42a2e9e377d833c22c3cfc5e71d06df7d Mon Sep 17 00:00:00 2001
From: nguyen van thai <nguyenvanthailtv@gmail.com>
Date: Mon, 3 Jun 2024 12:27:58 +0700
Subject: [PATCH] thainv-dev: Fix UI

---
 assets/styles/style.scss                      | 20 ++++-
 .../templates/articles/individuals/Card.vue   |  2 +-
 .../templates/categories/BasicCategories.vue  |  2 +-
 .../templates/other/breadcrumb/Default.vue    | 87 +++----------------
 .../other/copyLinks/ArticleButton.vue         | 47 ++++------
 .../templates/other/details/emagazine.vue     |  6 +-
 .../templates/other/details/infographics.vue  | 33 ++-----
 pages/bai-viet/[slug].vue                     | 12 ++-
 uno.config.ts                                 |  4 +-
 9 files changed, 70 insertions(+), 143 deletions(-)

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index 468c8a7..21174f1 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -2,8 +2,26 @@
     > .section-container {
         > .layout_define {
             > .section_layout {
-                @apply gap-x-10 #{!important}
+                @apply gap-x-10 #{!important};
             }
         }
     }
+}
+
+figure {
+    margin: auto !important;
+}
+
+div[layout="ARTICLE_DETAIL_EMAGAZINE"] {
+    & p,& figure.align-center-image, & #sub, & #title, & #intro {
+        @apply lg:max-w-640px mx-auto;
+    }
+
+    @at-root .section_layout{
+
+        & div[layout="BREADCRUM_DEFAULT"] {
+            @apply lg:max-w-640px mx-auto;
+        }
+    }
+
 }
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/articles/individuals/Card.vue b/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
index 3750238..68e349c 100644
--- a/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
+++ b/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
@@ -56,7 +56,7 @@ const drop = (e: any) => {
             <div>
                 <template v-if="parseData">
                     <nuxt-link :to="`/bai-viet/${parseData.slug}`">
-                        <h3 v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 line-clamp-2 text-base font-700 hover:text-primary-100 transition-all duration-300">
+                        <h3 v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 line-clamp-2 text-base font-700 hover:text-primary-600 transition-all duration-300">
                             {{ parseData.title?.replace(/<[^>]+>/g, '') }}
                         </h3>
                     </nuxt-link>
diff --git a/components/dynamic-page/page-component/templates/categories/BasicCategories.vue b/components/dynamic-page/page-component/templates/categories/BasicCategories.vue
index 75991dd..963b9d9 100644
--- a/components/dynamic-page/page-component/templates/categories/BasicCategories.vue
+++ b/components/dynamic-page/page-component/templates/categories/BasicCategories.vue
@@ -26,7 +26,7 @@ const _dataResult = computed(() => {
     <div class="flex gap-4 items-end">
       <template v-for="(component, index) in _dataResult">
         <nuxt-link v-if="component" :key="index" :to="`/${component.code}`" class=" py-1 font-400 text-[16px] first:font-600 first:text-[20px] sm:block hidden first:block">
-          <h3 class="m-0 leading-none hover:text-primary-100 transition-all duration-300">{{ component.title }}</h3>
+          <h3 class="m-0 leading-none hover:text-primary-600 transition-all duration-300">{{ component.title }}</h3>
         </nuxt-link>
       </template>
     </div>
diff --git a/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue b/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
index f364b3d..21f2315 100644
--- a/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
+++ b/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
@@ -11,91 +11,26 @@ const SETTING_OPTIONS = {
 }
 </script>
 <template>
-  <div class="breadcrumb">
-    <ul class="breadcrumb__list">
-      <li class="breadcrumb__list__item">
-          <p class="breadcrumb__list__item__title">
-            <nuxt-link to="/">Trang chủ</nuxt-link>
-          </p>
+  <div class="flex justify-between items-center">
+    <ul class="flex gap-6 items-center text-md">
+      <li class="first:text-primary-600 font-semibold">
+          <nuxt-link to="/">Trang chủ</nuxt-link>
       </li>
     </ul>
 
-    <div class="button">
-      <div class="button__increase">
-        <svg class="ri-font-size" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"></path></svg>
-        <svg  class="ri-add-line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
+    <div class="flex gap-1">
+      <div class="w-8 h-8 bg-slate-100 rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
+        <svg class="text-16px absolute top-50% left-40% translate-y--50% translate-x--45%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"></path></svg>
+        <svg  class="absolute right-1 top-1 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
       </div>
-      <div class="button__decrease">
-        <svg class="ri-font-size" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"></path></svg>
-        <svg class="ri-subtract-line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>
+      <div class="w-8 h-8 bg-slate-100 rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
+        <svg class="text-16px absolute top-50% left-40% translate-y--50% translate-x--45%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"></path></svg>
+        <svg class="absolute right-1 top-1 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>
       </div>
     </div>
   </div>
 </template>
 <style lang="scss" scoped>
-.breadcrumb {
-  display: flex;
-  justify-content: space-between;
-
-  &__list {
-    padding: 0px;
-    display: flex;
-    overflow-x: auto;
-    gap: 1.5rem;
-    align-items: center;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-
-    &__item {
-      display: inline-block;
-      position: relative;
-      &:first-child {
-        color: blue;
-      }
-
-      &:not(:first-child):before {
-        content: "";
-        width: 7px;
-        height: 7px;
-        border-top: 1px solid #bdbdbd;
-        border-right: 1px solid #bdbdbd;
-        transform: rotate(45deg);
-        position: absolute;
-        left: -18px;
-        top: 8px;
-      }
-    }
-  }
-
-  .button {
-    display: flex;
-    gap: 4px;
-
-    &__increase, &__decrease {
-      width: 32px;
-      height: 32px;
-      background-color: rgb(243, 244, 246);
-      border-radius: 50px;
-      position: relative;
-
-      & .ri-font-size {
-        font-size: 17px;
-        position: absolute;
-        top: 50%;
-        left: 40%;
-        transform: translateY(-50%) translateX(-45%);
-      }
-
-      & .ri-add-line, & .ri-subtract-line {
-        position: absolute;
-        right: 4px;
-        top: 4px;
-        width: 12px;
-      }
-    }
-
-  }
-}
 .empty {
   border-radius: 6px;
   background: #409eff;
diff --git a/components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue b/components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue
index fe16097..683a151 100644
--- a/components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue
+++ b/components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue
@@ -1,48 +1,31 @@
+<script setup lang="ts">
+const isBookmark = ref(false)
+const onClickBookmark = () => {
+  isBookmark.value = !isBookmark.value
+}
+</script>
 <template>
-  <div class="btn-wrap">
-    <div class="center-y">
-      <p title="Quay trở lại" class="class-default">
+  <div class="py-5 flex flex-wrap justify-between items-center">
+    <div class="flex gap-4 items-center">
+      <button title="Quay trở lại" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer">
         <Icon name="fa6-solid:arrow-left" />
-      </p>
-      <button class="defaultClasses">
-        <Icon name="fa6-regular:bookmark" />
+      </button>
+      <button @click="onClickBookmark()" class="w-8 h-8 rounded-full bg-white hover:bg-primary-100 hover:text-primary-600">
+        <Icon v-if="isBookmark === false" name="fa6-regular:bookmark" />
+        <Icon v-if="isBookmark === true" name="fa6-solid:bookmark" class="text-primary-600" />
       </button>
     </div>
 
-    <div class="center-y">
-      <button title="Copy link" class="class-default text-2xl">
+    <div class="flex gap-4 items-center">
+      <button title="Copy link" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer text-2xl">
         <Icon name="bi:link-45deg" />
       </button>
     </div>
   </div>
 </template>
 <style scoped lang="scss">
-.btn-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
 
-  @media (min-width: 768px) {
-    flex-direction: row;
-  }
-  .class-default {
-    display: grid;
-    place-items: center;
-    border-radius: 9999px;
-    border-width: 1px;
-    width: 3rem;
-    height: 3rem;
-    background-color: #ffffff;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    &:hover {
-      color: #2563eb;
-    }
-  }
-}
 .center-y {
   display: flex;
-  gap: 1rem;
-  align-items: center;
 }
 </style>
diff --git a/components/dynamic-page/page-component/templates/other/details/emagazine.vue b/components/dynamic-page/page-component/templates/other/details/emagazine.vue
index a1aa0d6..06965fa 100644
--- a/components/dynamic-page/page-component/templates/other/details/emagazine.vue
+++ b/components/dynamic-page/page-component/templates/other/details/emagazine.vue
@@ -6,9 +6,9 @@ const { currentArticle } = storeToRefs(useArticleStore());
 </script>
 <template>
     <div class="content" v-if="currentArticle">
-        <h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60 pb-1"></h1>
-        <h3 class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
-        <div v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
+        <h1 id="sub" v-html="currentArticle?.sub" class="text-xl font-bold opacity-60 pb-1"></h1>
+        <h3 id="title" class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
+        <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
         <div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
                         class="[&_img]:mx-auto">
                     </div>
diff --git a/components/dynamic-page/page-component/templates/other/details/infographics.vue b/components/dynamic-page/page-component/templates/other/details/infographics.vue
index 7abb8c3..ca2c73f 100644
--- a/components/dynamic-page/page-component/templates/other/details/infographics.vue
+++ b/components/dynamic-page/page-component/templates/other/details/infographics.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
+import { useArticleStore } from '~/stores/articles';
 const emit = defineEmits(['dropData', 'selectComponent'])
+const { currentArticle } = storeToRefs(useArticleStore());
 
 const _props = defineProps<{
   dataResult?: any[]
@@ -9,34 +10,18 @@ const _props = defineProps<{
 
 </script>
 <template>
-    <div class="content">
-        <h3 class="title">Tiêu đề bài viết ở đây</h3>
-        <div class="author">Tác giả - Thời gian tạo</div>
-        <span class="intro">intro bài viết ở đây</span>
-        <div class="detail">Nội dung bài viết ở đây <br>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+    <div class="content" v-if="currentArticle">
+        <h3 class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
+        <!-- <div class="author">Tác giả - Thời gian tạo</div> -->
+        <div v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
+        <div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
+                        class="[&_img]:mx-auto">
+                    </div>
     </div>
 </template>
 
 <style scoped lang="scss">
     .content {
-        font-size: 14px;
-        height: 200px;
-        padding: 8px;
         overflow: hidden;
     }
-
-    .title, .author, .intro {
-        white-space: normal;
-    }
-
-    span {
-        white-space: normal;
-        padding-bottom: 10px;
-        display: block;
-    }
-    .detail {
-        white-space: normal;
-    }
-
 </style>
\ No newline at end of file
diff --git a/pages/bai-viet/[slug].vue b/pages/bai-viet/[slug].vue
index 3b213ce..e4148a7 100644
--- a/pages/bai-viet/[slug].vue
+++ b/pages/bai-viet/[slug].vue
@@ -37,7 +37,7 @@ const loadPage = async (contentType: string | number) => {
 
 watch(currentArticle, async () => {
   let isContentType : string = '';
-  console.log(currentArticle.value.contentType, 'type')
+  console.log(currentArticle.value, 'type')
   switch (currentArticle.value?.contentType) {
     case 1:
         isContentType = 'trang-doi-song'
@@ -55,14 +55,18 @@ watch(currentArticle, async () => {
         break;
 
     case 5:
-        if (currentArticle.value?.layoutType === 3) {
+        if (currentArticle.value?.layoutType === 4) {
           isContentType = 'trang-chi-tiet-emagazine' 
           break;
         }
-        else {
-          isContentType = 'trang-chi-tiet-emagazine'
+        if (currentArticle.value?.layoutType === 3) {
+          isContentType = 'trang-chi-tiet-infographics' 
           break;
         }
+        // else {
+        //   isContentType = 'trang-chi-tiet-emagazine'
+        //   break;
+        // }
     default:
         isContentType = 'trang-chi-tiet-emagazine'
         break;
diff --git a/uno.config.ts b/uno.config.ts
index 77cfba6..b21fc4c 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -15,7 +15,9 @@ export default defineConfig({
   theme: {
     colors: {
       'primary': {
-        100: "#3c7abc",
+        100: '#e6f4ff',
+        500: "#2563eb",
+        600: "#3c7abc",
       },
       // 'red': '#ff0018',
       // 'blue': '#2d6cf6',