thainv-dev: fix ui

components/dynamic-page/page-component/templates/other/ads/default.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
+import ADSDefault from '@/assets/images/ads.jpg'
 </script>
 <template>
-    <div class="content">
+    <div class="shadow">
-        <span>Quảng cáo ở đây</span>
+        <img :src="ADSDefault" alt="quảng cáo" class=" object-cover">
     </div>
 </template>
 <style scoped lang="scss">
     .content {
-        font-size: 18px;
-        background-color: rgb(245, 245, 245);
-        height: 200px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
     }
 </style>

components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue

@@ -25,14 +25,14 @@ function decrease() {
       </li>
     </ul>
 
-    <div class="flex gap-1">
+    <div class="flex gap-1.5">
-      <div @click="increase()" class="w-8 h-8 bg-slate-100 rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
+      <div @click="increase()" class="w-10 h-10 border-1px border-solid shadow 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 top-50% left-50% translate-y--50% translate-x--55%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"></path><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>
+        <svg  class="absolute right-1.5 top-2 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
       </div>
-      <div @click="decrease()" class="w-8 h-8 bg-slate-100 rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
+      <div @click="decrease()" class="w-10 h-10 border-1px border-solid shadow 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 top-50% left-50% translate-y--50% translate-x--55%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"></path><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>
+        <svg class="absolute right-1.5 top-2 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>

components/dynamic-page/page-component/templates/other/details/default.vue

@@ -7,11 +7,16 @@ import { useDynamicPageStore } from "~/stores/dynamic-page";
 const { currentArticle } = storeToRefs(useArticleStore());
 const { step } = storeToRefs(useDynamicPageStore());
 
+
+// onBeforeMount(async () => {
+//     await useArticleStore().getArticleCondition({ids: [1, 2, 3]})
+// })
 </script>
 <template>
     <div class="content" v-if="currentArticle">
         <h1 id="sub" v-html="currentArticle?.sub"  class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
         <h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${36 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
+        <p id="published-on" class="text-gray-600" :style="{ 'font-size': `${14 + Number(step)}px` }">{{ 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" :style="{'font-size': `${16 + Number(step)}px`}"></div>
         <div id="article-detail" :class="'tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
     </div>

components/dynamic-page/page-component/templates/other/details/emagazine.vue

@@ -13,6 +13,8 @@ const { step } = storeToRefs(useDynamicPageStore());
     <div class="content" v-if="currentArticle">
         <h1 id="sub" v-html="currentArticle?.sub"  class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
         <h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${36 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
+        <p id="published-on" class="text-gray-600" :style="{ 'font-size': `${14 + Number(step)}px` }">{{ 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" :style="{'font-size': `${16 + Number(step)}px`}"></div>
         <div id="article-detail" :class="' tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
     </div>

components/dynamic-page/page-component/templates/other/details/infographics.vue

@@ -8,12 +8,12 @@ import { useDynamicPageStore } from "~/stores/dynamic-page";
 const { currentArticle } = storeToRefs(useArticleStore());
 const { step } = storeToRefs(useDynamicPageStore());
 
-
 </script>
 <template>
     <div class="content" v-if="currentArticle">
         <h1 id="sub" v-html="currentArticle?.sub"  class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
         <h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${36 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
+        <p id="published-on" class="text-gray-600" :style="{ 'font-size': `${14 + Number(step)}px` }">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
 
         <!-- <div class="author">Tác giả - Thời gian tạo</div> -->
         <div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1" :style="{'font-size': `${16 + Number(step)}px`}"></div>

server/api/articles/[...].ts

@@ -5,5 +5,5 @@ const router = createRouter()
 
 router.get('/get-by-id/:id', defineEventHandler(DynamicArticleCtrl.getArticleById))
 router.get('/get-by-slug/:slug', defineEventHandler(DynamicArticleCtrl.getArticleBySlug))
-
+router.post('/condition', defineEventHandler(DynamicArticleCtrl.listArticleCondition))
 export default useBase('/api/articles', router.handler)

server/models/articles/index.ts

@@ -1,3 +1,4 @@
+import { H3Event } from 'h3';
 interface Base {
     createdBy?: string | number
     createdOn?: string
@@ -88,3 +89,24 @@ export const getArticleBySlug = async (event : any) => {
         handleError(error);
     }
 }
+
+export const listArticleCondition = async (event: H3Event) => {
+    try {
+        const payload = await readBody<any>(event)
+        const { apiUrl } = useRuntimeConfig().public
+        const { items }: any = await $fetch(`${apiUrl}/cms/article/condition`, {
+            method: "POST",
+            headers: {
+                Site: 1
+            },
+            body: {
+                payload
+            }
+        })
+        // log(event)
+
+        return items
+    } catch (error) {
+        handleError(error);
+    }
+}

stores/articles.ts

@@ -1,5 +1,9 @@
+interface ArticleCondition {
+    ids?: number[]
+}
 export const useArticleStore = defineStore("article", () => {
     const currentArticle = ref<any>({});
+    const currentArticles = ref<any[]>([])
 
     const getArticleById = async (id: string | number) => {
         try {
@@ -18,10 +22,23 @@ export const useArticleStore = defineStore("article", () => {
         } catch (error: any) {}
     }
 
+    const getArticleCondition = async (condition: ArticleCondition) => {
+        try {
+            const { data: articles } = await useFetch(`/api/articles/condition`, {
+                method: 'POST',
+                body: condition
+            })
+            console.log(articles, 'data')
+        } catch (error: any) {
+            
+        }
+    }
+
     return {
         currentArticle,
         getArticleById,
-        getArticleBySlug
+        getArticleBySlug,
+        getArticleCondition
     }
 });
 

uno.config.ts

@@ -19,6 +19,9 @@ export default defineConfig({
         500: "#2563eb",
         600: "#3c7abc",
       },
+      'gray': {
+        600:' #757575'
+      }
       // 'red': '#ff0018',
       // 'blue': '#2d6cf6',
       // 'brown-700': '#99553D',