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

<script setup lang="ts">
const { categoryTree } = storeToRefs(useCategoryStore());
const { currentArticle } = storeToRefs(useArticleStore());
if (categoryTree.value) {
  await useCategoryStore().fetchBySiteId();
}

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;
}
</script>
<template>
  <div class="video-container">
    <ul class="flex gap-32px lg:ml-80px md:ml-40px sm:ml-20px">
      <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 class="video-content" v-html="currentArticle.detail"></div>
  </div>
</template>
<style scoped lang="scss">
.video-container {
  width: 100%;
  max-width: 1080px;
  margin: auto;

  .category-list {
    display: flex;
    gap: 32px;
    margin-bottom: 26px;
    list-style: none;
    padding: 0;
    margin: 0 0 0 80px;

    .category-item {
      color: #929292;
      position: relative;
      font-size: 18px;

      & > span {
        font-size: 18px;
        font-weight: 500;
        line-height: 180%;
        text-transform: uppercase;
      }

      &::after {
        position: absolute;
        content: "/";
        font-size: 20px;
        right: -20px;
      }

      &:first-child {
        color: #000;
      }

      &:last-child {
        &::after {
          content: "";
        }
      }
    }
  }

  .video-content {
    width: 100%;
    // max-width: 1080px;
    margin: 26px 0 26px 0px;
    // background-color: #eee;
    // height: 500px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>