NSG_PORTAL_V2/components/dynamic-page/page-component/templates/articles/details/Infographic.vue

<script setup lang="ts">
const emit = defineEmits(["dropData", "selectComponent"]);
const _props = defineProps<{
  dataResult?: any;
  dataType?: any;
  dataQuery?: any;
  layout?: string;
  label?: string;
}>();
const { currentArticle } = storeToRefs(useArticleStore())
console.log(currentArticle.value, 'currentArticle')
</script>
<template>
  <div  class="overflow-hidden infographic">
  <!-- bổ sung sau -->
    <!-- <img :src="currentArticle.thumbnail" alt="" class="w-full object-cover">

    <div class="px-44px pb-30px my-30px max-w-660px mx-auto border-b-1px border-#000">
    
    </div> -->
    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
    <div v-html="currentArticle.detail"></div>
  </div>
</template>

<style scoped lang="scss">
.breadcrumb {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  &__list {
    margin: 0;
    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;

      &__title {
        margin: 0;
        font-size: 18px;
        color: #000;
        font-weight: 500;
        text-transform: uppercase;
        line-height: 180%;
      }
      // &:first-child {
      //   color: blue;
      // }

      &:not(:first-child):before {
        content: "\\";
        position: absolute;
        left: -18px;
      }
    }
  }

  .article-card-default__topic {
    position: relative;
    // background-color: #151411;
    display: inline-block;

    h5 {
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      // color: #fff;
      padding: 0 12px;
      height: 100%;
      margin: 0;
      border: 1px solid #000;
      line-height: 180%;
      font-weight: 300;
    }

    &::after {
      position: absolute;
      content: "";
      display: block;
      width: 12px;
      height: 100%;
      background-color: #ed1c24;
      left: -12px;
      top: 0;
    }
  }
}
.center-y {
  width: auto;
}
</style>