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

<script setup lang="ts">
const emit = defineEmits(["dropData", "selectComponent"]);
const { categoryTree } = storeToRefs(useCategoryStore());
const { currentArticle } = storeToRefs(useArticleStore());
if (categoryTree.value) {
  await useCategoryStore().fetchBySiteId();
}
const _props = defineProps<{
  dataResult?: any[];
}>();
const SETTING_OPTIONS = {
  BREADCRUMB_MAX_ELEMENT: 3,
};
const currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId);
function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
  for (const category of categories) {
    const currentPath = [...path, { title: category.title, code: category.code }];
    if (category.id === targetId) {
      return currentPath;
    }
    if (category.children) {
      const result: any = findElementPathById(category.children, targetId, currentPath);
      if (result) {
        return result;
      }
    }
  }
  return null;
}

console.log(currentArticle.value, "currentArticle");
</script>
<template>
  <div class="overflow-hidden w-full max-w-1385px mx-auto px-30px image">
    <div class="">
      <div class="category flex justify-between flex-wrap items-center mb-10px">
        <ul class="flex gap-32px">
          <li v-for="(category, index) in currentCategoryTree" :key="index" class="first:text-#000 text-#929292 last:after:content-[''] relative after:absolute after:content-['/'] after:text-20px after:right--20px">
            <nuxt-link class="font-raleway text-18px font-500 leading-180% uppercase" :to="`/${category.code}`">{{ category.title }}</nuxt-link>
          </li>
        </ul>

        <div v-if="currentArticle.topics" class="pl-20px relative bg-primary inline-block">
          <nuxt-link class="h-30px block py-4px px-16px border-1 border-#000 bg-white text-12px leading-180% font-raleway font-400" :to="`/topic/${currentArticle.topics[0].code}`">{{ currentArticle.topics[0].title }}</nuxt-link>
        </div>
      </div>
        <h2 class="font-gelasio text-44px font-bold leading-130%" v-if="currentArticle.title" v-html="currentArticle.title"></h2>
      <!-- <div class="grid grid-cols-12 gap-20px">
      <div class="col-span-3"></div>
      </div> -->

      <div class="author flex gap-12px my-20px" v-if="currentArticle.authors">
        <ul class="flex">
          <li :style="{ 'z-index': index + 1 }" class="relative ml--12px first:ml-0" v-for="(author, index) in currentArticle.authors" :key="index">
            <nuxt-link :to="`/tac-gia/${author.code}`">
              <img :src="author.thumbnail || `http://picsum.photos/1024/600?random=1`" alt="" class="w-64px p-1px border-1px border-white h-64px object-cover rounded-full" />
            </nuxt-link>
          </li>
        </ul>
        <div>
          <div class="mt-10px">
            <nuxt-link class="font-raleway text-#000" v-for="(author, index) in currentArticle.authors" :key="index" :to="`/tac-gia/${author.code}`">{{ author.title + (index < currentArticle.authors.length - 1 ? ", " : "") }}</nuxt-link>
          </div>
          <div class="text-12px">Xuất bản vào {{ formatDate(currentArticle.publishedOn, "DD/MM/YYYY | hh:mm") }}</div>
        </div>
      </div>
      <div v-html="currentArticle.detail"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$max-width: 1276px;

.breadcrumb {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  &__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;
      }
    }
  }

  &__time {
    color: #9f9f9f;
    font-size: 14px;
    margin-bottom: 8px;
  }
}

.empty {
  border-radius: 6px;
  background: #409eff;
  width: 40px;
  min-height: 20px;
}
.content {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  padding: 20px;
  border-radius: 8px;
  background: #eeeeee;
  overflow: hidden;
  margin-bottom: 20px;
}

.title {
  white-space: normal;
}

.intro {
  white-space: normal;
  padding-bottom: 10px;
  display: block;
}

.detail {
  white-space: normal;
}

.btn-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  @media (min-width: 768px) {
    flex-direction: row;
  }
  .class-default,
  .button--back,
  .button--bookmark {
    border-radius: 8px;
    border-width: 1px;
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid rgb(229, 231, 235);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    &:hover {
      background-color: #e6f4ff;
      color: #3c7abc;
    }

    &.copy-link {
      border-radius: 999px;
    }
  }
}

.breadcrumb,
.btn-wrap {
  max-width: $max-width;
  margin: auto;
}

.center-y {
  display: flex;
  gap: 1rem;
  align-items: center;
}
</style>