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

<script setup lang="ts">
import { useArticleStore } from '~/stores/articles';
import { breakpoint } from '~/definitions';
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
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 ? `${32 + 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 mb-3" :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 mb-3" :style="{'font-size': `${16 + Number(step)}px`}"></div>
        <div id="article-detail" :class="'text-[16px] tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>

    </div>
</template>

<style scoped lang="scss">
    .content {
        overflow: hidden;
    }
</style>