thainv-dev: UI

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 { getInputValue } from "@/utils/parseSQL";
+import { DEFAULT_QUERY_DROP, 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>