nguyen van thai
595 lines
27 KiB
Vue
595 lines
27 KiB
Vue
<script setup lang="ts">
|
|
import Poll from "~/components/article/immerse/Poll.vue";
|
|
import Quiz from "~/components/article/immerse/Quiz.vue";
|
|
import Survey from "~/components/article/immerse/Survey.vue";
|
|
import Document from "~/components/article/immerse/Document.vue";
|
|
import Attachment from "@/components/article/immerse/Attachment.vue";
|
|
import Tag from "@/components/article/immerse/Tag.vue";
|
|
// import articlerelation from "@/components/article/immerse/ArticleRelation.vue";
|
|
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
|
|
import { getInputValue } from "@/utils/parseSQL";
|
|
import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
|
|
import type { PageSection } from "@/server/models/dynamic-page/index";
|
|
import { formatDate } from '@/utils/filters'
|
|
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
|
|
|
|
|
|
const { categoryTree } = storeToRefs(useCategoryStore());
|
|
const { currentArticle } = storeToRefs(useArticleStore())
|
|
if(categoryTree.value) {
|
|
await useCategoryStore().fetchBySiteId()
|
|
}
|
|
const props = defineProps<{
|
|
layout?: string;
|
|
content?: any;
|
|
settings: any;
|
|
section: PageSection;
|
|
}>();
|
|
|
|
const defineTypeRecusive = {
|
|
COMPONENT: "component",
|
|
SECTION: "section",
|
|
};
|
|
|
|
const SETTING_OPTIONS = computed(() => {
|
|
let _setting_options = {};
|
|
switch (props.layout) {
|
|
case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]]["DEFAULT"]:
|
|
_setting_options = {
|
|
MAX_ELEMENT: 2,
|
|
};
|
|
break;
|
|
default:
|
|
_setting_options = {
|
|
MAX_ELEMENT: 1,
|
|
};
|
|
break;
|
|
}
|
|
return _setting_options;
|
|
});
|
|
|
|
const designObject = computed(() => {
|
|
// không truyền lable là chữ lên sẽ lỗi
|
|
return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
|
|
});
|
|
|
|
const CLASS_FOR_SECTION = computed(() => {
|
|
let _classForSection = {};
|
|
switch (props.layout) {
|
|
case enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]}`]["DEFAULT"]:
|
|
_classForSection = {
|
|
section_layout: "section_layout two_col_layout tow_row_layout",
|
|
section_layout_value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]}`]["DEFAULT"],
|
|
};
|
|
break;
|
|
default:
|
|
_classForSection = {
|
|
section_layout: "section_layout basic_column",
|
|
};
|
|
break;
|
|
}
|
|
return _classForSection;
|
|
});
|
|
|
|
|
|
const LAYOUT_PARSE = computed(() => {
|
|
return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
|
|
});
|
|
|
|
const mapActivesToItems = (index: number) => {
|
|
if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
|
|
return LAYOUT_PARSE.value.listCss[index] || {};
|
|
}
|
|
return {};
|
|
};
|
|
|
|
const currentCategoryTree = ref<any []>([]);
|
|
if(currentArticle.value?.categoryId) {
|
|
currentCategoryTree.value = 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="section_layout border-custom four_col_layout" :style="LAYOUT_PARSE['div.section_layout']">
|
|
<div class="left">
|
|
<div>
|
|
<div class="audio">
|
|
<div class="play">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M24 12C24 18.6562 18.6094 24 12 24C5.34375 24 0 18.6562 0 12C0 5.39062 5.34375 0 12 0C18.6094 0 24 5.39062 24 12ZM8.25 7.875V16.125C8.25 16.5469 8.4375 16.9219 8.8125 17.1094C9.14062 17.3438 9.60938 17.2969 9.9375 17.1094L16.6875 12.9844C17.0156 12.7969 17.25 12.4219 17.25 12C17.25 11.625 17.0156 11.25 16.6875 11.0625L9.9375 6.9375C9.60938 6.70312 9.14062 6.70312 8.8125 6.9375C8.4375 7.125 8.25 7.5 8.25 7.875Z"
|
|
fill="#8E8E8E"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="time">
|
|
<span>20:42</span>
|
|
</div>
|
|
<div class="timeline">
|
|
<input type="range" name="" id="" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<div class="actions">
|
|
<span class="copy">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M12 3V0H8.5C7.65625 0 7 0.6875 7 1.5V10.5C7 11.3438 7.65625 12 8.5 12H14.5C15.3125 12 16 11.3438 16 10.5V4H13C12.4375 4 12 3.5625 12 3ZM13 0V3H16L13 0ZM6 11V4H1.5C0.65625 4 0 4.6875 0 5.5V14.5C0 15.3438 0.65625 16 1.5 16H7.5C8.3125 16 9 15.3438 9 14.5V13H8C6.875 13 6 12.125 6 11Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="facebook">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M15.75 8C15.75 3.71875 12.2812 0.25 8 0.25C3.71875 0.25 0.25 3.71875 0.25 8C0.25 11.875 3.0625 15.0938 6.78125 15.6562V10.25H4.8125V8H6.78125V6.3125C6.78125 4.375 7.9375 3.28125 9.6875 3.28125C10.5625 3.28125 11.4375 3.4375 11.4375 3.4375V5.34375H10.4688C9.5 5.34375 9.1875 5.9375 9.1875 6.5625V8H11.3438L11 10.25H9.1875V15.6562C12.9062 15.0938 15.75 11.875 15.75 8Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="envelope">
|
|
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M8 9C7.46875 9 6.9375 8.84375 6.5 8.5L0 3.4375V10.5C0 11.3438 0.65625 12 1.5 12H14.5C15.3125 12 16 11.3438 16 10.5V3.4375L9.46875 8.5C9.03125 8.84375 8.5 9 8 9ZM0.5 2.5625L7.125 7.71875C7.625 8.09375 8.34375 8.09375 8.84375 7.71875L15.4688 2.5625C15.7812 2.3125 16 1.90625 16 1.5C16 0.6875 15.3125 0 14.5 0H1.5C0.65625 0 0 0.6875 0 1.5C0 1.90625 0.1875 2.3125 0.5 2.5625Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="print">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M14 6H2C0.875 6 0 6.90625 0 8V11C0 11.5625 0.4375 12 1 12H2V15C2 15.5625 2.4375 16 3 16H13C13.5312 16 14 15.5625 14 15V12H15C15.5312 12 16 11.5625 16 11V8C16 6.90625 15.0938 6 14 6ZM12 14H4V11H12V14ZM13.5 9.25C13.0625 9.25 12.75 8.9375 12.75 8.5C12.75 8.09375 13.0625 7.75 13.5 7.75C13.9062 7.75 14.25 8.09375 14.25 8.5C14.25 8.9375 13.9062 9.25 13.5 9.25ZM4 2H11.1562L12 2.84375V5H14V2.4375C14 2.15625 13.875 1.90625 13.6875 1.71875L12.2812 0.3125C12.0938 0.125 11.8438 0 11.5625 0H3C2.4375 0 2 0.46875 2 1V5H4V2Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="fontSize">
|
|
<span>
|
|
<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M1.05469 12C0.971354 12 0.90625 11.9609 0.859375 11.8828C0.8125 11.7995 0.789062 11.7057 0.789062 11.6016C0.789062 11.4818 0.809896 11.4062 0.851562 11.375C0.888021 11.3438 0.960938 11.3229 1.07031 11.3125C1.20052 11.2969 1.34115 11.2891 1.49219 11.2891C1.64844 11.2839 1.79427 11.2448 1.92969 11.1719C2.07031 11.0938 2.18229 10.9401 2.26562 10.7109L5.84375 0.742188H7.09375L10.5703 10.7109C10.6536 10.9401 10.763 11.0938 10.8984 11.1719C11.0339 11.2448 11.1771 11.2839 11.3281 11.2891C11.4844 11.2891 11.625 11.2969 11.75 11.3125C11.8594 11.3229 11.9323 11.3438 11.9688 11.375C12.0104 11.4062 12.0312 11.4818 12.0312 11.6016C12.0312 11.6589 12.0078 11.7396 11.9609 11.8438C11.9193 11.9479 11.8542 12 11.7656 12H7.85156C7.76302 12 7.69531 11.9479 7.64844 11.8438C7.60677 11.7396 7.58594 11.6589 7.58594 11.6016C7.58594 11.4297 7.67188 11.3333 7.84375 11.3125C8.16146 11.2969 8.41927 11.2839 8.61719 11.2734C8.8151 11.263 8.91406 11.1979 8.91406 11.0781C8.91406 11.0417 8.90625 11.0052 8.89062 10.9688L7.94531 8.14062H4.19531L3.24219 10.9688C3.23177 10.9948 3.22656 11.026 3.22656 11.0625C3.22656 11.1927 3.33594 11.263 3.55469 11.2734C3.77865 11.2786 4.04948 11.2917 4.36719 11.3125C4.53906 11.3333 4.625 11.4297 4.625 11.6016C4.625 11.6589 4.60156 11.7396 4.55469 11.8438C4.51302 11.9479 4.44792 12 4.35938 12H1.05469ZM6.14844 2.72656L4.4375 7.46875H7.72656L6.14844 2.72656Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path d="M1 13.8984H11.7344V14.7266H1V13.8984Z" fill="black" />
|
|
</svg>
|
|
</span>
|
|
<span>
|
|
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M1.08203 17C0.957031 17 0.859375 16.9414 0.789062 16.8242C0.71875 16.6992 0.683594 16.5586 0.683594 16.4023C0.683594 16.2227 0.714844 16.1094 0.777344 16.0625C0.832031 16.0156 0.941406 15.9844 1.10547 15.9688C1.30078 15.9453 1.51172 15.9336 1.73828 15.9336C1.97266 15.9258 2.19141 15.8672 2.39453 15.7578C2.60547 15.6406 2.77344 15.4102 2.89844 15.0664L8.26562 0.113281H10.1406L15.3555 15.0664C15.4805 15.4102 15.6445 15.6406 15.8477 15.7578C16.0508 15.8672 16.2656 15.9258 16.4922 15.9336C16.7266 15.9336 16.9375 15.9453 17.125 15.9688C17.2891 15.9844 17.3984 16.0156 17.4531 16.0625C17.5156 16.1094 17.5469 16.2227 17.5469 16.4023C17.5469 16.4883 17.5117 16.6094 17.4414 16.7656C17.3789 16.9219 17.2812 17 17.1484 17H11.2773C11.1445 17 11.043 16.9219 10.9727 16.7656C10.9102 16.6094 10.8789 16.4883 10.8789 16.4023C10.8789 16.1445 11.0078 16 11.2656 15.9688C11.7422 15.9453 12.1289 15.9258 12.4258 15.9102C12.7227 15.8945 12.8711 15.7969 12.8711 15.6172C12.8711 15.5625 12.8594 15.5078 12.8359 15.4531L11.418 11.2109H5.79297L4.36328 15.4531C4.34766 15.4922 4.33984 15.5391 4.33984 15.5938C4.33984 15.7891 4.50391 15.8945 4.83203 15.9102C5.16797 15.918 5.57422 15.9375 6.05078 15.9688C6.30859 16 6.4375 16.1445 6.4375 16.4023C6.4375 16.4883 6.40234 16.6094 6.33203 16.7656C6.26953 16.9219 6.17188 17 6.03906 17H1.08203ZM8.72266 3.08984L6.15625 10.2031H11.0898L8.72266 3.08984Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span>
|
|
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M1.10938 23C0.942708 23 0.8125 22.9219 0.71875 22.7656C0.625 22.599 0.578125 22.4115 0.578125 22.2031C0.578125 21.9635 0.619792 21.8125 0.703125 21.75C0.776042 21.6875 0.921875 21.6458 1.14062 21.625C1.40104 21.5938 1.68229 21.5781 1.98438 21.5781C2.29688 21.5677 2.58854 21.4896 2.85938 21.3438C3.14062 21.1875 3.36458 20.8802 3.53125 20.4219L10.6875 0.484375H13.1875L20.1406 20.4219C20.3073 20.8802 20.526 21.1875 20.7969 21.3438C21.0677 21.4896 21.3542 21.5677 21.6562 21.5781C21.9688 21.5781 22.25 21.5938 22.5 21.625C22.7188 21.6458 22.8646 21.6875 22.9375 21.75C23.0208 21.8125 23.0625 21.9635 23.0625 22.2031C23.0625 22.3177 23.0156 22.4792 22.9219 22.6875C22.8385 22.8958 22.7083 23 22.5312 23H14.7031C14.526 23 14.3906 22.8958 14.2969 22.6875C14.2135 22.4792 14.1719 22.3177 14.1719 22.2031C14.1719 21.8594 14.3438 21.6667 14.6875 21.625C15.3229 21.5938 15.8385 21.5677 16.2344 21.5469C16.6302 21.526 16.8281 21.3958 16.8281 21.1562C16.8281 21.0833 16.8125 21.0104 16.7812 20.9375L14.8906 15.2812H7.39062L5.48438 20.9375C5.46354 20.9896 5.45312 21.0521 5.45312 21.125C5.45312 21.3854 5.67188 21.526 6.10938 21.5469C6.55729 21.5573 7.09896 21.5833 7.73438 21.625C8.07812 21.6667 8.25 21.8594 8.25 22.2031C8.25 22.3177 8.20312 22.4792 8.10938 22.6875C8.02604 22.8958 7.89583 23 7.71875 23H1.10938ZM11.2969 4.45312L7.875 13.9375H14.4531L11.2969 4.45312Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tags" v-if="currentArticle && currentArticle?.tags">
|
|
<span>
|
|
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M1.875 0.75H7.69531C8.35938 0.75 8.98438 1.02344 9.45312 1.49219L16.3281 8.36719C17.3047 9.34375 17.3047 10.9453 16.3281 11.9219L11.1328 17.1172C10.1562 18.0938 8.55469 18.0938 7.57812 17.1172L0.703125 10.2422C0.234375 9.77344 0 9.14844 0 8.48438V2.625C0 1.60938 0.820312 0.75 1.875 0.75ZM4.375 6.375C5.03906 6.375 5.625 5.82812 5.625 5.125C5.625 4.46094 5.03906 3.875 4.375 3.875C3.67188 3.875 3.125 4.46094 3.125 5.125C3.125 5.82812 3.67188 6.375 4.375 6.375Z"
|
|
fill="#ED1C24"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
|
|
<ul >
|
|
<li v-for="(tag, index) in currentArticle?.tags">
|
|
<nuxt-link class="font-raleway font-500" :to="`/tag/${tag.code}`">{{ tag.title }}</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section_child" :class="['border-custom']" :style="mapActivesToItems(0)['div.section_child']" @dragover.prevent @drop.stop.prevent="dropPlacementInSection($event, 0, props.content ? props?.content[0].data : '')">
|
|
<template v-if="props.content">
|
|
<RecusiveSection :type="props?.content[0].type" :id="props?.content[0].data" :section="props.section" />
|
|
</template>
|
|
<template v-else>
|
|
<RecusiveSection :type="''" :id="''" :section="props.section" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content detail-default">
|
|
<div class="content__top">
|
|
<div class="flex justify-between flex-wrap items-center mb-10px">
|
|
<ul class="flex gap-32px" v-if="currentCategoryTree?.length">
|
|
<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].slug}`">{{ 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="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>
|
|
|
|
<figure v-if="currentArticle?.thumbnail">
|
|
<img :src="currentArticle?.thumbnail" class="w-full " alt="">
|
|
</figure>
|
|
</div>
|
|
<div class="content__bottom" >
|
|
<div class="content__bottom__left">
|
|
<div class="content__bottom__left__control">
|
|
<div class="content__bottom__left__control__sticky [&_span:hover]:text-primary">
|
|
<span class="flex justify-center ">
|
|
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M20 10.5C20 16.0469 15.5078 20.5 10 20.5C4.45312 20.5 0 16.0469 0 10.5C0 4.99219 4.45312 0.5 10 0.5C15.5078 0.5 20 4.99219 20 10.5ZM6.875 7.0625V13.9375C6.875 14.2891 7.03125 14.6016 7.34375 14.7578C7.61719 14.9531 8.00781 14.9141 8.28125 14.7578L13.9062 11.3203C14.1797 11.1641 14.375 10.8516 14.375 10.5C14.375 10.1875 14.1797 9.875 13.9062 9.71875L8.28125 6.28125C8.00781 6.08594 7.61719 6.08594 7.34375 6.28125C7.03125 6.4375 6.875 6.75 6.875 7.0625Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="flex justify-center">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M12 3V0H8.5C7.65625 0 7 0.6875 7 1.5V10.5C7 11.3438 7.65625 12 8.5 12H14.5C15.3125 12 16 11.3438 16 10.5V4H13C12.4375 4 12 3.5625 12 3ZM13 0V3H16L13 0ZM6 11V4H1.5C0.65625 4 0 4.6875 0 5.5V14.5C0 15.3438 0.65625 16 1.5 16H7.5C8.3125 16 9 15.3438 9 14.5V13H8C6.875 13 6 12.125 6 11Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="flex justify-center">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M15.75 8C15.75 3.71875 12.2812 0.25 8 0.25C3.71875 0.25 0.25 3.71875 0.25 8C0.25 11.875 3.0625 15.0938 6.78125 15.6562V10.25H4.8125V8H6.78125V6.3125C6.78125 4.375 7.9375 3.28125 9.6875 3.28125C10.5625 3.28125 11.4375 3.4375 11.4375 3.4375V5.34375H10.4688C9.5 5.34375 9.1875 5.9375 9.1875 6.5625V8H11.3438L11 10.25H9.1875V15.6562C12.9062 15.0938 15.75 11.875 15.75 8Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="flex justify-center">
|
|
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M8 9C7.46875 9 6.9375 8.84375 6.5 8.5L0 3.4375V10.5C0 11.3438 0.65625 12 1.5 12H14.5C15.3125 12 16 11.3438 16 10.5V3.4375L9.46875 8.5C9.03125 8.84375 8.5 9 8 9ZM0.5 2.5625L7.125 7.71875C7.625 8.09375 8.34375 8.09375 8.84375 7.71875L15.4688 2.5625C15.7812 2.3125 16 1.90625 16 1.5C16 0.6875 15.3125 0 14.5 0H1.5C0.65625 0 0 0.6875 0 1.5C0 1.90625 0.1875 2.3125 0.5 2.5625Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="flex justify-center">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M14 6H2C0.875 6 0 6.90625 0 8V11C0 11.5625 0.4375 12 1 12H2V15C2 15.5625 2.4375 16 3 16H13C13.5312 16 14 15.5625 14 15V12H15C15.5312 12 16 11.5625 16 11V8C16 6.90625 15.0938 6 14 6ZM12 14H4V11H12V14ZM13.5 9.25C13.0625 9.25 12.75 8.9375 12.75 8.5C12.75 8.09375 13.0625 7.75 13.5 7.75C13.9062 7.75 14.25 8.09375 14.25 8.5C14.25 8.9375 13.9062 9.25 13.5 9.25ZM4 2H11.1562L12 2.84375V5H14V2.4375C14 2.15625 13.875 1.90625 13.6875 1.71875L12.2812 0.3125C12.0938 0.125 11.8438 0 11.5625 0H3C2.4375 0 2 0.46875 2 1V5H4V2Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="my-10px" v-if="currentArticle?.intro" v-html="currentArticle.intro">
|
|
</p>
|
|
|
|
<!-- <div v-html="currentArticle.detail" class="[&_p_>_span]:!font-raleway [&_p]:mb-10px"></div> -->
|
|
<component :is="{ template: currentArticle?.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
|
|
</div>
|
|
</div>
|
|
<div class="content__bottom__right">
|
|
<div class="section_child" :class="['border-custom']" :style="mapActivesToItems(1)['div.section_child']">
|
|
<template v-if="props.content">
|
|
<RecusiveSection :type="props?.content[1].type" :id="props?.content[1].data" :section="props.section" />
|
|
</template>
|
|
<template v-else>
|
|
<RecusiveSection :type="''" :id="''" :section="props.section" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
$control-width: 80px;
|
|
|
|
.border-pri {
|
|
&.section_layout {
|
|
gap: 5px;
|
|
}
|
|
}
|
|
.section_layout {
|
|
display: flex;
|
|
.left {
|
|
width: 305px;
|
|
.tags {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 24px 0 20px 0;
|
|
border-top: 1px solid #ededed;
|
|
border-bottom: 1px solid #ededed;
|
|
|
|
& > ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
& > li {
|
|
list-style: none;
|
|
|
|
& > a {
|
|
display: block;
|
|
font-size: 12px;
|
|
line-height: 180%;
|
|
padding: 0 10px;
|
|
background-color: #f5efef;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.buttons {
|
|
margin: 20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.actions,
|
|
.fontSize {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
.audio {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 28px;
|
|
padding: 2px 12px 2px 2px;
|
|
border-radius: 999px;
|
|
background-color: #eee;
|
|
align-items: center;
|
|
.play {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.time {
|
|
line-height: 180%;
|
|
font-size: 12px;
|
|
color: #000;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.timeline {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
input[type="range"] {
|
|
width: 100%;
|
|
height: 4px;
|
|
color: #4a4a4a;
|
|
--thumb-height: 1.125em;
|
|
--track-height: 0.125em;
|
|
--track-color: rgba(0, 0, 0, 0.2);
|
|
--brightness-hover: 180%;
|
|
--brightness-down: 80%;
|
|
--clip-edges: 0.125em;
|
|
}
|
|
/* === range commons === */
|
|
input[type="range"] {
|
|
position: relative;
|
|
background: #fff0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
input[type="range"]:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
input[type="range"]:disabled {
|
|
filter: grayscale(1);
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* === WebKit specific styles === */
|
|
input[type="range"],
|
|
input[type="range"]::-webkit-slider-runnable-track,
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
transition: all ease 100ms;
|
|
height: var(--thumb-height);
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-runnable-track,
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
position: relative;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
|
|
--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
|
|
--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
|
|
--clip-further: calc(100% + 1px);
|
|
--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
|
|
|
|
width: var(--thumb-width, var(--thumb-height));
|
|
background: linear-gradient(#e50e0e 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
|
|
background-color: #e50e0e;
|
|
box-shadow: var(--box-fill);
|
|
border-radius: var(--thumb-width, var(--thumb-height));
|
|
|
|
filter: brightness(100%);
|
|
clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));
|
|
}
|
|
|
|
input[type="range"]:hover::-webkit-slider-thumb {
|
|
filter: brightness(var(--brightness-hover));
|
|
cursor: grab;
|
|
}
|
|
|
|
input[type="range"]:active::-webkit-slider-thumb {
|
|
filter: brightness(var(--brightness-down));
|
|
cursor: grabbing;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
|
background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
|
|
}
|
|
|
|
input[type="range"]:disabled::-webkit-slider-thumb {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* === Firefox specific styles === */
|
|
// input[type="range"],
|
|
// input[type="range"]::-moz-range-track,
|
|
// input[type="range"]::-moz-range-thumb {
|
|
// appearance: none;
|
|
// transition: all ease 100ms;
|
|
// height: var(--thumb-height);
|
|
// }
|
|
|
|
// input[type="range"]::-moz-range-track,
|
|
// input[type="range"]::-moz-range-thumb,
|
|
// input[type="range"]::-moz-range-progress {
|
|
// background: #fff0;
|
|
// }
|
|
|
|
// input[type="range"]::-moz-range-thumb {
|
|
// background: currentColor;
|
|
// border: 0;
|
|
// width: var(--thumb-width, var(--thumb-height));
|
|
// border-radius: var(--thumb-width, var(--thumb-height));
|
|
// cursor: grab;
|
|
// }
|
|
|
|
// input[type="range"]:active::-moz-range-thumb {
|
|
// cursor: grabbing;
|
|
// }
|
|
|
|
// input[type="range"]::-moz-range-track {
|
|
// width: 100%;
|
|
// background: var(--track-color);
|
|
// }
|
|
|
|
// input[type="range"]::-moz-range-progress {
|
|
// appearance: none;
|
|
// background: currentColor;
|
|
// transition-delay: 30ms;
|
|
// }
|
|
|
|
// input[type="range"]::-moz-range-track,
|
|
// input[type="range"]::-moz-range-progress {
|
|
// height: calc(var(--track-height) + 1px);
|
|
// border-radius: var(--track-height);
|
|
// }
|
|
|
|
// input[type="range"]::-moz-range-thumb,
|
|
// input[type="range"]::-moz-range-progress {
|
|
// filter: brightness(100%);
|
|
// }
|
|
|
|
// input[type="range"]:hover::-moz-range-thumb,
|
|
// input[type="range"]:hover::-moz-range-progress {
|
|
// filter: brightness(var(--brightness-hover));
|
|
// }
|
|
|
|
// input[type="range"]:active::-moz-range-thumb,
|
|
// input[type="range"]:active::-moz-range-progress {
|
|
// filter: brightness(var(--brightness-down));
|
|
// }
|
|
|
|
// input[type="range"]:disabled::-moz-range-thumb {
|
|
// cursor: not-allowed;
|
|
// }
|
|
}
|
|
|
|
.content {
|
|
margin-left: $control-width;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
&__top {
|
|
width: 100%;
|
|
}
|
|
|
|
&__bottom {
|
|
width: 100%;
|
|
min-height: 300px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&__left {
|
|
flex: 1;
|
|
max-width: 660px;
|
|
display: block;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
&__control {
|
|
width: $control-width;
|
|
position: absolute;
|
|
height: 100%;
|
|
left: -$control-width;
|
|
|
|
&__sticky {
|
|
position: sticky;
|
|
top: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
|
|
& > span {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__right {
|
|
width: 300px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|