.

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

@@ -1,67 +1,93 @@
 <script setup lang="ts">
-// const store = {
-//   page: useCmsPageStore(),
-// };
-// import Comment from "@/components/cms/page-component/templates/others/comments/Default.vue";
+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>
-  video
-  <!-- <div class="container overflow-hidden">
-    <div class="video row">
-      <div
-        class="video__left"
-        :class="
-          store.page.classifyScreenByWidth({
-            computer: 'col-8 px-0',
-            tablet: 'col-8 px-0',
-            smartphone: 'col-12',
-          })
-        "
-      >
-        <video controls="controls" width="100%" height="100%" data-file-id="149" data-resource="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" data-title="Download.mp4">
-          <source src="" type="video/mp4" />
-        </video>
-      </div>
+  <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__right bg-body-tertiary"
-        :class="
-          store.page.classifyScreenByWidth({
-            computer: 'col-4 ps-4 pt-2',
-            tablet: 'col-4 ps-4 pt-2',
-            smartphone: 'col-12 pt-2',
-          })
-        "
-      >
-        <h1
-          class=""
-          :class="
-            store.page.classifyScreenByWidth({
-              computer: 'fs-1',
-              tablet: 'fs-2',
-              smartphone: 'fs-3',
-            })
-          "
-        >
-          Tiêu đề video
-        </h1>
-        <p class="line-clamp-3 fs-5 fw-light" :class="store.page.classifyScreenByWidth({})">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <h5 class="text-end fs-4 opacity-75">Tác giả</h5>
-
-        <p><b class="text-primary fw-semibold">Danh mục</b> <span class="ms-2 opacity-25 fw-semibold">Ngày đăng video</span></p>
-        <Comment />
-      </div>
-    </div>
-  </div> -->
+    <div class="video-content" v-html="currentArticle.detail"></div>
+  </div>
 </template>
 <style scoped lang="scss">
-.line-clamp-3 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+.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>