feat: new layout
This commit is contained in:
MoreStrive
@@ -0,0 +1,178 @@
|
||||
<script setup lang="ts">
|
||||
const type = ref("");
|
||||
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||||
import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
|
||||
import { getInputValue } from "@/utils/parseSQL";
|
||||
|
||||
const props = defineProps<{
|
||||
dataResult?: any;
|
||||
dataType?: any;
|
||||
dataQuery?: any;
|
||||
layout?: string;
|
||||
label?: string;
|
||||
}>();
|
||||
|
||||
const LAYOUT_PARSE = computed(() => {
|
||||
const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
|
||||
return Object.assign({}, designObject);
|
||||
});
|
||||
|
||||
const emit = defineEmits(["selectComponent", "dropData"]);
|
||||
|
||||
const selectComponent = () => {
|
||||
emit("selectComponent");
|
||||
};
|
||||
|
||||
const parseData = computed(() => {
|
||||
if (!props.dataResult) return;
|
||||
const result = getInputValue(props.dataResult, "OBJECT");
|
||||
switch (result?.contentType) {
|
||||
case 1:
|
||||
type.value = "";
|
||||
// type.value = "Image";
|
||||
break;
|
||||
case 2:
|
||||
type.value = "Image";
|
||||
break;
|
||||
|
||||
case 3:
|
||||
type.value = "Postcard";
|
||||
break;
|
||||
|
||||
case 4:
|
||||
type.value = "Video";
|
||||
break;
|
||||
|
||||
case 5:
|
||||
if (result?.layoutType === 4) {
|
||||
type.value = "Emagazine";
|
||||
break;
|
||||
}
|
||||
if (result?.layoutType === 3) {
|
||||
type.value = "Infographics";
|
||||
break;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
const drop = (e: any) => {
|
||||
if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
|
||||
const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
|
||||
const { dataType, dataResult } = JSON.parse(data);
|
||||
const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
|
||||
emit("dropData", {
|
||||
dataType,
|
||||
dataResult,
|
||||
dataQuery: dataQuery,
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<article class="card-audio" :class="LAYOUT_PARSE['article_Class']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop" :style="LAYOUT_PARSE['article']">
|
||||
<img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" />
|
||||
<div class="card-audio__content">
|
||||
<span>
|
||||
<template v-if="type === 'Image'">
|
||||
<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M25.25 0.5H7.25C5.98438 0.5 5 1.53125 5 2.75V14.75C5 16.0156 5.98438 17 7.25 17H25.25C26.4688 17 27.5 16.0156 27.5 14.75V2.75C27.5 1.53125 26.4688 0.5 25.25 0.5ZM10.9531 3.5C11.75 3.5 12.4531 4.20312 12.4531 5C12.4531 5.84375 11.7969 6.5 10.9531 6.5C10.1094 6.5 9.45312 5.84375 9.45312 5C9.45312 4.20312 10.1562 3.5 10.9531 3.5ZM23.6562 13.625C23.5156 13.8594 23.2344 14 23 14H9.5C9.17188 14 8.9375 13.8594 8.79688 13.625C8.70312 13.3438 8.70312 13.0625 8.89062 12.8281L12.1719 8.32812C12.3125 8.14062 12.5 8 12.7812 8C13.0156 8 13.2031 8.14062 13.3438 8.32812L14.4219 9.78125L17.375 5.375C17.4688 5.14062 17.7031 5 17.9844 5C18.2188 5 18.4531 5.14062 18.5938 5.375L23.6094 12.875C23.75 13.0625 23.75 13.3906 23.6562 13.625ZM21.875 19.25H6.125C4.25 19.25 2.75 17.75 2.75 15.875V4.625C2.75 4.01562 2.23438 3.5 1.625 3.5C0.96875 3.5 0.5 4.01562 0.5 4.625V15.875C0.5 19.0156 2.98438 21.5 6.125 21.5H21.875C22.4844 21.5 23 21.0312 23 20.375C23 19.7656 22.4844 19.25 21.875 19.25Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</span>
|
||||
|
||||
<div class="card-audio__type-category">
|
||||
<div class="card-audio__type" v-if="type">{{ type }}</div>
|
||||
<nuxt-link v-if="parseData" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
|
||||
parseData?.category?.title
|
||||
}}</nuxt-link>
|
||||
<span v-else class="empty-block" style="height: 8px; width: 30px"></span>
|
||||
</div>
|
||||
<nuxt-link>
|
||||
<h2 v-html="parseData.title" v-if="parseData" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']"></h2>
|
||||
<span v-else class="empty-block" style="height: 8px"></span>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div v-html="LAYOUT_PARSE.styleClasses"></div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.card-audio {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%; //tỷ lệ 9 /16;;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card-audio__content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
bottom: 0;
|
||||
padding: 20px 30px;
|
||||
z-index: 3;
|
||||
text-align: center;
|
||||
h2 {
|
||||
color: #fff;
|
||||
margin: 12px 0 20px 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 130%;
|
||||
|
||||
&:hover {
|
||||
color: #9e1e0f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-audio__type-category {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
justify-content: center;
|
||||
margin-top: 12px;
|
||||
|
||||
.card-audio__type,
|
||||
.card-audio__category {
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
line-height: 180%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.card-audio__type {
|
||||
background-color: #ed1c24;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-audio__category {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
z-index: 2;
|
||||
}
|
||||
.empty-block {
|
||||
background-color: #409eff;
|
||||
height: 100px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,286 @@
|
||||
<script lang="ts" setup>
|
||||
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||||
import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
|
||||
import { getInputValue } from "@/utils/parseSQL";
|
||||
import { formatDate } from "@/utils/filters";
|
||||
|
||||
const props = defineProps<{
|
||||
dataResult?: any;
|
||||
dataType?: any;
|
||||
dataQuery?: any;
|
||||
layout?: string;
|
||||
label?: string;
|
||||
}>();
|
||||
|
||||
const LAYOUT_PARSE = computed(() => {
|
||||
const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
|
||||
return Object.assign({}, designObject);
|
||||
});
|
||||
|
||||
const emit = defineEmits(["selectComponent", "dropData"]);
|
||||
|
||||
const selectComponent = () => {
|
||||
emit("selectComponent");
|
||||
};
|
||||
|
||||
const parseData = computed(() => {
|
||||
if (!props.dataResult) return;
|
||||
const result = getInputValue(props.dataResult, "OBJECT");
|
||||
return result;
|
||||
});
|
||||
|
||||
const drop = (e: any) => {
|
||||
if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
|
||||
const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
|
||||
const { dataType, dataResult } = JSON.parse(data);
|
||||
const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
|
||||
emit("dropData", {
|
||||
dataType,
|
||||
dataResult,
|
||||
dataQuery: dataQuery,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <article class="article-card-default">
|
||||
<div class="article-card-default__content">
|
||||
<template v-if="currentArticle.tags && currentArticle?.tags.length > 0">
|
||||
<nuxt-link class="article-card-default__tag" :to="`/${currentArticle?.tags[0].code}`">
|
||||
<h5>{{ currentArticle?.tags[0].title }}</h5>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
|
||||
<nuxt-link class="article-card-default__title" :to="`/bai-viet/${currentArticle.code}`">
|
||||
<h2 v-html="currentArticle.title"></h2>
|
||||
<p v-html="currentArticle.intro"></p>
|
||||
</nuxt-link>
|
||||
|
||||
<div class="article-card-default__bottom">
|
||||
<span>{{ formatDate(String(currentArticle.createdOn), "DD/MM/YYYY | HH:mm") }}</span> /
|
||||
<nuxt-link :to="`/${currentArticle.category?.code}`"> {{ currentArticle.category?.title }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-card-default__thumbnail">
|
||||
<figure>
|
||||
<nuxt-link :to="`bai-viet${currentArticle.code}`">
|
||||
<img :src="currentArticle?.thumbnail ? currentArticle?.thumbnail : 'http://picsum.photos/1024/600?random=1'" :alt="currentArticle?.title" />
|
||||
</nuxt-link>
|
||||
</figure>
|
||||
</div>
|
||||
</article> -->
|
||||
<article
|
||||
class="basic-article border-custom"
|
||||
:class="LAYOUT_PARSE['article_Class']"
|
||||
@click="selectComponent"
|
||||
@dragover.prevent
|
||||
@drop.stop.prevent="drop"
|
||||
:style="LAYOUT_PARSE['article']"
|
||||
>
|
||||
<div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
|
||||
<template v-if="parseData">
|
||||
<img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
|
||||
</template>
|
||||
<span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
|
||||
</div>
|
||||
<div class="basic-article_content" :class="[!parseData && 'no-data']">
|
||||
<template v-if="parseData?.topics && parseData?.topics.length > 0">
|
||||
<nuxt-link class="article-card-default__topic" :to="`/${parseData?.topics[0].code}`" :style="LAYOUT_PARSE['topic']">
|
||||
<h5>{{ parseData?.topics[0].title }}</h5>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
|
||||
<template v-if="parseData">
|
||||
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
|
||||
</template>
|
||||
<span v-else class="empty-block" style="height: 8px"></span>
|
||||
</h3>
|
||||
<div class="article-card-default__bottom" v-if="LAYOUT_PARSE.layout === 'row'">
|
||||
<span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
|
||||
formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
|
||||
}}</span>
|
||||
<nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
|
||||
</div>
|
||||
<p class="mb-0 line-clamp" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
|
||||
<template v-if="parseData">
|
||||
{{ parseData.intro?.replace(/<[^>]+>/g, "") }}
|
||||
</template>
|
||||
<span v-else class="empty-block" style="height: 5px"></span>
|
||||
</p>
|
||||
<div class="article-card-default__bottom" v-if="LAYOUT_PARSE?.layout !== 'row'" :style="LAYOUT_PARSE['metadata']">
|
||||
<span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
|
||||
formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
|
||||
}}</span>
|
||||
<nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div v-html="LAYOUT_PARSE.styleClasses"></div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-card-default {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
|
||||
.article-card-default__title {
|
||||
color: #000;
|
||||
h2 {
|
||||
display: inline-block;
|
||||
/* margin: 12px 0 20px 0; */
|
||||
font-size: 24px;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 130%;
|
||||
|
||||
&:hover {
|
||||
color: #9e1e0f;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__thumbnail {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.article-card-default__topic {
|
||||
position: relative;
|
||||
/* margin: 0 0 12px 12px; */
|
||||
|
||||
// background-color: #151411;
|
||||
display: inline-block;
|
||||
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.article-card-default__bottom {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
/* margin-top: 10px; */
|
||||
a {
|
||||
color: #ed1c24;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.basic-article {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
background-size: cover;
|
||||
flex-direction: column;
|
||||
&.no-data {
|
||||
gap: 5px !important;
|
||||
padding: 0;
|
||||
}
|
||||
.line-clamp {
|
||||
display: -webkit-box;
|
||||
/* -webkit-line-clamp: 3; */
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.basic-article_thumbnail {
|
||||
width: 100%;
|
||||
}
|
||||
&.border-custom {
|
||||
border-color: #e5e5e5 !important;
|
||||
}
|
||||
/* &.horizontal {
|
||||
flex-direction: row;
|
||||
.basic-article_thumbnail {
|
||||
width: 40%;
|
||||
}
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
} */
|
||||
|
||||
&_thumbnail {
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
aspect-ratio: 16/10;
|
||||
}
|
||||
}
|
||||
|
||||
&_content {
|
||||
/* padding: 10px 0px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
&.no-data {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
/* margin-top: 10px; */
|
||||
opacity: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
background-color: #409eff;
|
||||
height: 100px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as Article_Card_Default } from './Card.vue'
|
||||
export { default as Article_Card_Audio } from './Audio.vue'
|
||||
@@ -0,0 +1,39 @@
|
||||
<script lang="ts" setup>
|
||||
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
|
||||
import { Article_Card_Default, Article_Card_Audio } from "./index";
|
||||
|
||||
const _props = defineProps<{
|
||||
settings: any;
|
||||
component?: any;
|
||||
content?: any;
|
||||
}>();
|
||||
|
||||
const definedDynamicComponent: Record<string, any> = {
|
||||
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_DEFAULT"]]: Article_Card_Default,
|
||||
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_AUDIO"]]: Article_Card_Audio,
|
||||
};
|
||||
|
||||
const getCurrentComponent = computed(() => {
|
||||
console.log(_props.settings.layout, enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_DEFAULT"]);
|
||||
return _props.settings.layout;
|
||||
});
|
||||
|
||||
const GET_PROPS = computed(() => {
|
||||
return () => {
|
||||
let props: any = {};
|
||||
if (_props.settings) {
|
||||
for (const [key, value] of Object.entries(_props.settings)) {
|
||||
props = {
|
||||
...props,
|
||||
[key]: value,
|
||||
};
|
||||
}
|
||||
return props;
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
|
||||
</template>
|
||||
@@ -0,0 +1,242 @@
|
||||
<script setup lang="ts">
|
||||
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||||
import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
|
||||
import { isEmpty } from "lodash";
|
||||
const emit = defineEmits(["dropData", "selectComponent"]);
|
||||
import { getInputValue } from "@/utils/parseSQL";
|
||||
|
||||
const _props = defineProps<{
|
||||
dataResult?: any;
|
||||
dataType?: any;
|
||||
dataQuery?: any;
|
||||
layout?: string;
|
||||
label?: string;
|
||||
}>();
|
||||
const SETTING_OPTIONS = {
|
||||
BREADCRUMB_MAX_ELEMENT: 3,
|
||||
};
|
||||
const LAYOUT_PARSE = computed(() => {
|
||||
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
|
||||
return Object.assign({}, designObject);
|
||||
});
|
||||
const selectComponent = () => {
|
||||
emit("selectComponent");
|
||||
};
|
||||
|
||||
const parseData = computed(() => {
|
||||
if (!_props.dataResult) return;
|
||||
const result = getInputValue(_props.dataResult, "OBJECT");
|
||||
return result;
|
||||
});
|
||||
|
||||
const drop = (e: any) => {
|
||||
if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
|
||||
const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
|
||||
const { dataType, dataResult } = JSON.parse(data);
|
||||
const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
|
||||
emit("dropData", {
|
||||
dataType,
|
||||
dataResult,
|
||||
dataQuery: dataQuery,
|
||||
});
|
||||
}
|
||||
};
|
||||
const articleStore = useArticleStore();
|
||||
console.log(articleStore.currentArticleGeneral, "cas");
|
||||
const currentArticle = computed(() => articleStore.currentArticleGeneral);
|
||||
</script>
|
||||
<template>
|
||||
<div @click="selectComponent" class="overflow-hidden" @dragover.prevent @drop.stop.prevent="drop">
|
||||
<div class="breadcrumb" v-if="!LAYOUT_PARSE['HideBreadcrumb']">
|
||||
<ul class="breadcrumb__list">
|
||||
<li
|
||||
class="breadcrumb__list__item"
|
||||
v-for="(item, index) in _props.dataResult && _props.dataResult?.length > 0 ? _props.dataResult : Array(SETTING_OPTIONS.BREADCRUMB_MAX_ELEMENT).fill(null)"
|
||||
:key="index"
|
||||
:class="isEmpty(item) && 'empty'"
|
||||
>
|
||||
<p v-if="!isEmpty(item)" class="breadcrumb__list__item__title">
|
||||
{{ item?.title }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<nuxt-link class="article-card-default__topic" :to="`#`">
|
||||
<h5>Topic</h5>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
<div class="content">Nội dung bài viết sẽ ở đây</div>
|
||||
<!-- <div class="btn-wrap" v-if="!LAYOUT_PARSE['HideCopylink']">
|
||||
<div class="center-y">
|
||||
<p title="Quay trở lại" class="button--back">
|
||||
<Icon name="fa6-solid:arrow-left" />
|
||||
</p>
|
||||
<button class="button--bookmark">
|
||||
<Icon name="fa6-regular:bookmark" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="center-y">
|
||||
<button title="Copy link" class="button--back">
|
||||
<Icon name="mdi:link-variant" />
|
||||
</button>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
// border-radius: 9999px;
|
||||
// border-width: 1px;
|
||||
// width: 3rem;
|
||||
// height: 3rem;
|
||||
// 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;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .button--bookmark {
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// border-radius: 200px;
|
||||
// background-color: white;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// border: none;
|
||||
// &:hover {
|
||||
// background-color: #e6f4ff;
|
||||
// color: #3c7abc;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.center-y {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
import { isEmpty } from "lodash";
|
||||
const emit = defineEmits(["dropData", "selectComponent"]);
|
||||
|
||||
const _props = defineProps<{
|
||||
dataResult?: any[];
|
||||
}>();
|
||||
const SETTING_OPTIONS = {
|
||||
BREADCRUMB_MAX_ELEMENT: 3,
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="overflow-hidden">
|
||||
<div class="breadcrumb">
|
||||
<ul class="breadcrumb__list">
|
||||
<li
|
||||
class="breadcrumb__list__item"
|
||||
v-for="(item, index) in _props.dataResult && _props.dataResult?.length > 0 ? _props.dataResult : Array(SETTING_OPTIONS.BREADCRUMB_MAX_ELEMENT).fill(null)"
|
||||
:key="index"
|
||||
:class="isEmpty(item) && 'empty'"
|
||||
>
|
||||
<p v-if="!isEmpty(item)" class="breadcrumb__list__item__title">
|
||||
{{ item?.title }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="breakcrumb__time">Ngày tạo image</p>
|
||||
</div>
|
||||
|
||||
<div class="content">Nội dung bài viết sẽ ở đây</div>
|
||||
|
||||
<div class="btn-wrap w-100 max-w">
|
||||
<div class="center-y">
|
||||
<p title="Quay trở lại" class="button--back">
|
||||
<Icon name="fa6-solid:arrow-left" />
|
||||
</p>
|
||||
<button class="button--bookmark">
|
||||
<Icon name="fa6-regular:bookmark" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="center-y">
|
||||
<button title="Copy link" class="button--back copy-link">
|
||||
<Icon name="mdi:link-variant" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$max-width: 680px;
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,318 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="podcast__wrapper overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="podcast"
|
||||
>
|
||||
<p
|
||||
class="podcast__content__time"
|
||||
>
|
||||
Ngày tạo podcast
|
||||
</p>
|
||||
<figure><img src="http://picsum.photos/1024/600?random=1'" alt="Ảnh podcast" title="Ảnh podcast" /></figure>
|
||||
<div
|
||||
class="podcast__content"
|
||||
>
|
||||
<p
|
||||
class="podcast__content__time"
|
||||
>
|
||||
Ngày tạo podcast
|
||||
</p>
|
||||
<h1 class="podcast__content__title">Tiêu đề podcast</h1>
|
||||
<p
|
||||
class="podcast__content__text"
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
class="buttons"
|
||||
>
|
||||
<li><Icon name="mdi:bookmark-outline" /></li>
|
||||
<li><Icon name="material-symbols:mode-comment-outline" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="playlist">
|
||||
<div class="playlist__time">
|
||||
<span>5:00</span>
|
||||
<span>10:00</span>
|
||||
</div>
|
||||
<div class="playlist__buttons">
|
||||
<div class="playlist__buttons__left">
|
||||
<div
|
||||
class="button__prev"
|
||||
>
|
||||
<Icon name="material-symbols:skip-previous" />
|
||||
</div>
|
||||
<div
|
||||
class="sound"
|
||||
>
|
||||
<Icon name="material-symbols:volume-mute"></Icon>
|
||||
<div></div>
|
||||
<Icon name="material-symbols:volume-up"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="play">
|
||||
<Icon name="fluent:skip-back-10-48-filled" />
|
||||
<Icon name="material-symbols:play-arrow" class="button" />
|
||||
<Icon name="fluent:skip-forward-10-48-filled" />
|
||||
</div>
|
||||
|
||||
<div class="playlist__buttons__right">
|
||||
<div
|
||||
class="button__next"
|
||||
>
|
||||
<Icon name="material-symbols:skip-next" />
|
||||
</div>
|
||||
<div
|
||||
class="speed"
|
||||
>
|
||||
<span>Tốc độ phát: </span>
|
||||
<strong>1x</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="podcast__content__text"
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
:root {
|
||||
--podcast-wrapper-padding: 40;
|
||||
}
|
||||
|
||||
.podcast-padding-tablet {
|
||||
--podcast-wrapper-padding: 30;
|
||||
}
|
||||
|
||||
.podcast-padding-smartphone {
|
||||
--podcast-wrapper-padding: 20;
|
||||
}
|
||||
|
||||
.podcast__wrapper {
|
||||
padding: calc(var(--podcast-wrapper-padding) * 1px);
|
||||
border: 1px solid #eeeeee;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
|
||||
.podcast {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > figure > img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__content__text {
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
color: #222222;
|
||||
margin: 0;
|
||||
|
||||
&__time {
|
||||
color: #9f9f9f;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
text-align: center;
|
||||
&__time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .buttons {
|
||||
display: flex;
|
||||
align-self: start;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& li {
|
||||
list-style: none;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: white;
|
||||
border: 1px solid rgb(229, 231, 235);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
border-radius: 50px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f4ff;
|
||||
color: #3c7abc;
|
||||
}
|
||||
|
||||
& svg {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateY(-50%) translateX(-55%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
|
||||
& .buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playlist {
|
||||
padding: 8px;
|
||||
|
||||
&__time {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 12px;
|
||||
position: relative;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
background-color: #e6f4ff;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 50%;
|
||||
background-color: #3c7abc;
|
||||
z-index: 2;
|
||||
}
|
||||
& span {
|
||||
font-size: 16px;
|
||||
color: #3c7abc;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& .button__prev,
|
||||
& .button__next {
|
||||
font-size: 28px;
|
||||
color: #3c7abc;
|
||||
}
|
||||
& .sound {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: -10px;
|
||||
padding: 0 10px;
|
||||
height: 36px;
|
||||
color: #3c7abc;
|
||||
border-radius: 8px;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #e6f4ff;
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
background-color: #dcf0ff;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
height: 2px;
|
||||
width: 50%;
|
||||
background-color: #3c7abc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .play {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
|
||||
& svg {
|
||||
font-size: 28px;
|
||||
color: #3c7abc;
|
||||
|
||||
&.button {
|
||||
font-size: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .speed {
|
||||
font-size: 14px;
|
||||
color: #3c7abc;
|
||||
|
||||
& span {
|
||||
font-weight: 200;
|
||||
}
|
||||
& strong {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import Comment from "@/components/dynamic-page/page-component/templates/others/comments/Default.vue";
|
||||
</script>
|
||||
<template>
|
||||
<div class="container overflow-hidden">
|
||||
<div class="video row">
|
||||
<div
|
||||
class="video__left"
|
||||
>
|
||||
<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__right bg-body-tertiary"
|
||||
>
|
||||
<h1
|
||||
class=""
|
||||
>
|
||||
Tiêu đề video
|
||||
</h1>
|
||||
<p class="line-clamp-3 fs-5 fw-light">
|
||||
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>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.line-clamp-3 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,6 @@
|
||||
// export { default as Article_Card } from './cards/Card.vue'
|
||||
|
||||
export { default as Article_Detail_General } from './General.vue'
|
||||
export { default as Article_Detail_Podcast } from './Podcast.vue'
|
||||
export { default as Article_Detail_Video } from './Video.vue'
|
||||
export { default as Article_Detail_Image } from './Image.vue'
|
||||
@@ -0,0 +1,37 @@
|
||||
<script lang="ts" setup>
|
||||
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
|
||||
|
||||
// import { Article_Card, Article_Detail_Video, Article_Detail_Podcast, Article_Detail_General, Article_Detail_Image } from "./index";
|
||||
import { Article_Detail_General, Article_Detail_Podcast, Article_Detail_Video, Article_Detail_Image } from "./index";
|
||||
const _props = defineProps<{
|
||||
settings: any;
|
||||
component?: any;
|
||||
content?: any;
|
||||
}>();
|
||||
const definedDynamicComponent: Record<string, any> = {
|
||||
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_GENERAL"]]: Article_Detail_General,
|
||||
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_PODCAST"]]: Article_Detail_Podcast,
|
||||
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_VIDEO"]]: Article_Detail_Video,
|
||||
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]["DETAIL_IMAGE"]]: Article_Detail_Image,
|
||||
};
|
||||
|
||||
const getCurrentComponent = computed(() => `${_props.settings.layout}`);
|
||||
const GET_PROPS = computed(() => {
|
||||
return () => {
|
||||
let props: any = {};
|
||||
if (_props.settings) {
|
||||
for (const [key, value] of Object.entries(_props.settings)) {
|
||||
props = {
|
||||
...props,
|
||||
[key]: value,
|
||||
};
|
||||
}
|
||||
return props;
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
|
||||
</template>
|
||||
@@ -1,5 +1,2 @@
|
||||
export { default as Article_Card } from './layouts/Card.vue'
|
||||
export { default as Article_Detail_General } from './layouts/details/General.vue'
|
||||
export { default as Article_Detail_Podcast } from './layouts/details/Podcast.vue'
|
||||
export { default as Article_Detail_Video } from './layouts/details/Video.vue'
|
||||
export { default as Article_Detail_Image } from './layouts/details/Image.vue'
|
||||
export { default as Article_Card } from './cards/index.vue'
|
||||
export { default as Article_Detail } from './details/index.vue'
|
||||
|
||||
@@ -1,26 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||||
import {
|
||||
Article_Card,
|
||||
Article_Detail_General,
|
||||
Article_Detail_Podcast,
|
||||
Article_Detail_Video,
|
||||
Article_Detail_Image
|
||||
} from "./index";
|
||||
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
|
||||
import { Article_Card, Article_Detail } from "./index";
|
||||
|
||||
|
||||
const _props = defineProps<{
|
||||
settings: any;
|
||||
component?: any;
|
||||
content?: any;
|
||||
}>();
|
||||
|
||||
const definedDynamicComponent: Record<string, any> = {
|
||||
'TYPE:Detail-LAYOUT:default': Article_Detail_General,
|
||||
'TYPE:Detail-LAYOUT:image': Article_Detail_Image,
|
||||
'TYPE:Detail-LAYOUT:video': Article_Detail_Video,
|
||||
'TYPE:Detail-LAYOUT:podcast': Article_Detail_Podcast,
|
||||
'TYPE:Card': Article_Card
|
||||
[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]: Article_Card,
|
||||
[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]: Article_Detail,
|
||||
};
|
||||
|
||||
const getCurrentComponent = computed(() => `${_props.settings.layout}`);
|
||||
const getCurrentComponent = computed(() => _props.settings.template);
|
||||
|
||||
const GET_PROPS = computed(() => {
|
||||
return () => {
|
||||
let props: any = {};
|
||||
@@ -38,5 +32,5 @@ const GET_PROPS = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="definedDynamicComponent[getCurrentComponent]" v-bind="GET_PROPS()" class="h-full"/>
|
||||
<component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
|
||||
</template>
|
||||
|
||||
@@ -1,180 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||||
import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
|
||||
|
||||
const props = defineProps<{
|
||||
dataResult?: any;
|
||||
dataType?: any;
|
||||
dataQuery?: any;
|
||||
layout?: string;
|
||||
label?: string;
|
||||
}>();
|
||||
|
||||
const LAYOUT_PARSE = computed(() => {
|
||||
const parseLayout =
|
||||
props.layout?.split("-")?.map((_layout: any) => {
|
||||
const parseItem = _layout.split(":");
|
||||
return {
|
||||
[parseItem[0]]: parseItem[0] === "HIDE" ? parseItem[1].split(",") : parseItem[1],
|
||||
};
|
||||
}) || [];
|
||||
const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
|
||||
return Object.assign({}, ...parseLayout, designObject);
|
||||
});
|
||||
|
||||
const emit = defineEmits(["selectComponent", "dropData"]);
|
||||
|
||||
const selectComponent = () => {
|
||||
emit("selectComponent");
|
||||
};
|
||||
|
||||
const parseData = computed(() => {
|
||||
if (!props.dataResult) return;
|
||||
const result = getInputValue(props.dataResult, "OBJECT");
|
||||
return result;
|
||||
});
|
||||
|
||||
const drop = (e: any) => {
|
||||
if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
|
||||
const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
|
||||
const { dataType, dataResult } = JSON.parse(data);
|
||||
const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
|
||||
emit("dropData", {
|
||||
dataType,
|
||||
dataResult,
|
||||
dataQuery: dataQuery,
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="basic-article border-custom"
|
||||
@click="selectComponent"
|
||||
@dragover.prevent
|
||||
@drop.stop.prevent="drop"
|
||||
:class="[LAYOUT_PARSE['LAYOUT'] || 'horizontal', !parseData && 'no-data', LAYOUT_PARSE['REVERSE'] ? 'reverse' : '', ...(LAYOUT_PARSE['border']?.length > 0 ? LAYOUT_PARSE['border'] : [])]"
|
||||
:style="[LAYOUT_PARSE['background'] && `background: ${LAYOUT_PARSE['background']}`]"
|
||||
>
|
||||
<div v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('thumbnail')" class="basic-article_thumbnail" :style="[LAYOUT_PARSE['LAYOUT'] === 'horizontal' && LAYOUT_PARSE['WidthImg'] && `width: ${LAYOUT_PARSE['WidthImg']}%`]">
|
||||
<template v-if="parseData">
|
||||
<nuxt-link :to="`bai-viet/${parseData?.slug}`">
|
||||
<img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
|
||||
</nuxt-link>
|
||||
</template>
|
||||
</div>
|
||||
<div class="basic-article_content" :class="[!parseData && 'no-data']">
|
||||
<div>
|
||||
<nuxt-link :to="`bai-viet/${parseData?.slug}`"
|
||||
v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')"
|
||||
class="line-clamp hover:text-primary-600"
|
||||
:style="[
|
||||
LAYOUT_PARSE['fontSizeTitle'] && `font-size: ${LAYOUT_PARSE['fontSizeTitle']}px`,
|
||||
LAYOUT_PARSE['fontWeightTitle'] && `font-weight: ${LAYOUT_PARSE['fontWeightTitle']}`,
|
||||
LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
|
||||
LAYOUT_PARSE['lineClampTitle'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampTitle']}`
|
||||
]"
|
||||
>
|
||||
<template v-if="parseData">
|
||||
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
|
||||
</template>
|
||||
|
||||
</nuxt-link>
|
||||
<p
|
||||
v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')"
|
||||
class="mb-0 line-clamp font-arial"
|
||||
:style="[
|
||||
LAYOUT_PARSE['fontSizeIntro'] && `font-size: ${LAYOUT_PARSE['fontSizeIntro']}px`,
|
||||
LAYOUT_PARSE['fontWeightIntro'] && `font-weight: ${LAYOUT_PARSE['fontWeightIntro']}`,
|
||||
LAYOUT_PARSE['color'] && `color: ${LAYOUT_PARSE['color']}`,
|
||||
LAYOUT_PARSE['lineClampIntro'] && `-webkit-line-clamp: ${LAYOUT_PARSE['lineClampIntro']}`
|
||||
]"
|
||||
>
|
||||
<template v-if="parseData">
|
||||
{{ parseData.intro?.replace(/<[^>]+>/g, "") }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.basic-article {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
&.no-data {
|
||||
gap: 5px !important;
|
||||
}
|
||||
.line-clamp {
|
||||
display: -webkit-box;
|
||||
/* -webkit-line-clamp: 3; */
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
.basic-article_thumbnail {
|
||||
width: 100%;
|
||||
}
|
||||
&.reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
&.border-custom {
|
||||
border-color: #e5e5e5 !important;
|
||||
}
|
||||
&.borderLeft {
|
||||
border-left: 1px solid;
|
||||
}
|
||||
&.borderRight {
|
||||
border-right: 1px solid;
|
||||
}
|
||||
&.borderTop {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
&.borderBottom {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
&.horizontal {
|
||||
flex-direction: row;
|
||||
.basic-article_thumbnail {
|
||||
width: 40%;
|
||||
}
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
&_thumbnail {
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
aspect-ratio: 16/10;
|
||||
}
|
||||
}
|
||||
|
||||
&_content {
|
||||
/* padding: 10px 0px; */
|
||||
flex: 1;
|
||||
&.no-data {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
opacity: 85%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
-214
@@ -1,214 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useArticleStore } from "~/stores/articles";
|
||||
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";
|
||||
const { currentArticle } = storeToRefs(useArticleStore());
|
||||
import { useDynamicPageStore } from "~/stores/dynamic-page";
|
||||
import { useCategoryStore } from "~/stores/category";
|
||||
|
||||
const store = reactive({
|
||||
dynamicPage: useDynamicPageStore(),
|
||||
article: useArticleStore(),
|
||||
category: useCategoryStore(),
|
||||
});
|
||||
|
||||
const { categoryTree } = storeToRefs(store.category);
|
||||
|
||||
|
||||
|
||||
function increase() {
|
||||
const step = ref(Number(getComputedStyle(document.documentElement).getPropertyValue("--step").trim()));
|
||||
step.value += 2;
|
||||
document.documentElement.style.setProperty("--step", step.value.toString());
|
||||
}
|
||||
|
||||
function decrease() {
|
||||
const step = ref(Number(getComputedStyle(document.documentElement).getPropertyValue("--step").trim()));
|
||||
step.value -= 2;
|
||||
document.documentElement.style.setProperty("--step", step.value.toString());
|
||||
}
|
||||
await store.category.fetchBySiteId();
|
||||
const currentCategoryTree = (store.category.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;
|
||||
}
|
||||
onMounted(async () => {
|
||||
|
||||
clickElement("figure", "custom-figure", "data-code");
|
||||
clickElement("author", "author", "data-code");
|
||||
|
||||
let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
|
||||
let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
|
||||
if (detailEmagazine && breakcrumb) {
|
||||
breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty("--step", '0');
|
||||
});
|
||||
|
||||
function clickElement(type: string, selector: string, attribute: string) {
|
||||
const elements = document.querySelectorAll(selector);
|
||||
elements.forEach((element) => {
|
||||
element.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
const url = `${window.location.protocol}//${window.location.host}/${type}/${element.getAttribute(attribute)}`;
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const isBookmark = ref(false)
|
||||
const onClickBookmark = () => {
|
||||
isBookmark.value = !isBookmark.value
|
||||
}
|
||||
async function copyLink() {
|
||||
try {
|
||||
const url = window.location.href
|
||||
await navigator.clipboard.writeText(url)
|
||||
alert('copy link thành công')
|
||||
|
||||
} catch (error) {
|
||||
alert(error)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div id="breakcrumb" class="flex justify-between items-center my-3 font-arial">
|
||||
<ul class="flex gap-6 items-center text-md">
|
||||
<template v-for="(category, index) in currentCategoryTree" :key="index">
|
||||
<li class="first:text-primary-600 hover:text-primary-600 font-medium relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
|
||||
<nuxt-link :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<div @click="increase()" class="w-10 h-10 border-1px border-solid shadow rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
|
||||
<svg class="absolute top-50% left-50% translate-y--50% translate-x--55%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
|
||||
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||
<path
|
||||
d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg class="absolute right-1.5 top-2 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
|
||||
</div>
|
||||
<div @click="decrease()" class="w-10 h-10 border-1px border-solid shadow rounded-full relative cursor-pointer hover:bg-primary-100 hover:text-primary-600">
|
||||
<svg class="absolute top-50% left-50% translate-y--50% translate-x--55%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
|
||||
<path fill="none" d="M0 0h24v24H0z"></path>
|
||||
<path
|
||||
d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg class="absolute right-1.5 top-2 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content" v-if="currentArticle">
|
||||
<h1 id="sub" v-html="currentArticle?.sub" class="font-bold opacity-60 pb-1"></h1>
|
||||
<h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
|
||||
<p id="published-on" class="text-gray-600 mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
|
||||
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold pb-1 mb-3"></div>
|
||||
<component :is="{ template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
|
||||
</div>
|
||||
|
||||
<div class="py-5 flex flex-wrap justify-between items-center">
|
||||
<div class="flex gap-4 items-center">
|
||||
<nuxt-link :to="{ name: 'categories', params: { categories: `${currentCategoryTree[currentCategoryTree.length - 1]?.code}` } }" title="Quay trở lại" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer">
|
||||
<Icon name="fa6-solid:arrow-left" />
|
||||
</nuxt-link>
|
||||
<button @click="onClickBookmark()" class="w-8 h-8 rounded-full bg-white hover:bg-primary-100 hover:text-primary-600">
|
||||
<Icon v-show="isBookmark === false" name="fa6-regular:bookmark" />
|
||||
<Icon v-show="isBookmark === true" name="fa6-solid:bookmark" class="text-primary-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 items-center">
|
||||
<button @click="copyLink()" title="Copy link" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer text-2xl">
|
||||
<Icon name="bi:link-45deg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex gap-2 items-start mb-2 text-15px" v-if="currentArticle?.topics">
|
||||
<div>
|
||||
<Icon name="material-symbols:trending-up" class="w-5 h-5"/>
|
||||
</div>
|
||||
<span>Chủ đề: </span>
|
||||
<ul>
|
||||
<li v-for="(topic, index) in currentArticle?.topics" :key="index" class="mb-1">
|
||||
<nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link>
|
||||
<!-- <nuxt-link :to="`topic/${topic.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ topic.title }}</nuxt-link> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 items-start mb-2 text-15px" v-if="currentArticle?.events">
|
||||
<div>
|
||||
<Icon name="ic:baseline-event" class="w-5 h-5"/>
|
||||
</div>
|
||||
<span>Sự kiện: </span>
|
||||
<ul>
|
||||
<li v-for="(event, index) in currentArticle?.events" :key="index" class="mb-1">
|
||||
<nuxt-link to="#" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link>
|
||||
<!-- <nuxt-link :to="`event/${event.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ event.title }}</nuxt-link> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 items-start mb-2 text-15px" v-if="currentArticle?.tags">
|
||||
<div>
|
||||
<Icon name="mdi:tag" class="w-5 h-5"/>
|
||||
</div>
|
||||
<span>Tags: </span>
|
||||
<ul class="flex gap-6 flex-wrap">
|
||||
<li v-for="(tag, index) in currentArticle?.tags" :key="index" class="mb-1 font-normal text-black-500 relative after:absolute after:content-['/'] after:right--4 last:after:content-[''] after:text-[#eee]">
|
||||
<nuxt-link to="#" class="hover:text-primary-600">{{ tag.title }}</nuxt-link>
|
||||
<!-- <nuxt-link :to="`topic/${tag.slug}`" class="text-primary-600 font-bold font-merriweather hover:underline">{{ tag.title }}</nuxt-link> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:root {
|
||||
--step: 1;
|
||||
}
|
||||
#sub,
|
||||
#intro,
|
||||
#intro + div {
|
||||
font-size: calc(16px + var(--step) * 1px);
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: calc(28px + var(--step) * 1px);
|
||||
}
|
||||
|
||||
#published-on {
|
||||
font-size: calc(14px + var(--step) * 1px);
|
||||
}
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useArticleStore } from "~/stores/articles";
|
||||
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";
|
||||
const { currentArticle } = storeToRefs(useArticleStore());
|
||||
import { useDynamicPageStore } from "~/stores/dynamic-page";
|
||||
import { useCategoryStore } from "~/stores/category";
|
||||
|
||||
const store = reactive({
|
||||
dynamicPage: useDynamicPageStore(),
|
||||
article: useArticleStore(),
|
||||
category: useCategoryStore(),
|
||||
});
|
||||
|
||||
const { categoryTree } = storeToRefs(store.category);
|
||||
|
||||
await store.category.fetchBySiteId();
|
||||
const currentCategoryTree = (store.category.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;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
clickElement("figure", "custom-figure", "data-code");
|
||||
clickElement("author", "author", "data-code");
|
||||
|
||||
let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
|
||||
let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
|
||||
if (detailEmagazine && breakcrumb) {
|
||||
breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
|
||||
}
|
||||
});
|
||||
|
||||
function clickElement(type: string, selector: string, attribute: string) {
|
||||
const elements = document.querySelectorAll(selector);
|
||||
elements.forEach((element) => {
|
||||
element.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
const url = `${window.location.protocol}//${window.location.host}/${type}/${element.getAttribute(attribute)}`;
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const isBookmark = ref(false);
|
||||
const onClickBookmark = () => {
|
||||
isBookmark.value = !isBookmark.value;
|
||||
};
|
||||
async function copyLink() {
|
||||
try {
|
||||
const url = window.location.href;
|
||||
await navigator.clipboard.writeText(url);
|
||||
alert("copy link thành công");
|
||||
} catch (error) {
|
||||
alert(error);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="content" v-if="currentArticle">
|
||||
<div id="breakcrumb" class="flex justify-between items-center my-3">
|
||||
<ul class="flex gap-6 items-center text-md">
|
||||
<template v-for="(category, index) in currentCategoryTree" :key="index">
|
||||
<li class="font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
|
||||
<nuxt-link :class="index !== 0 ? '!text-black-500' : ''" class="hover:!text-primary-600" :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
<span id="published-on" class="text-gray-600 mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</span>
|
||||
</div>
|
||||
<h1 id="sub" v-html="currentArticle?.sub" class="font-bold opacity-60 pb-1"></h1>
|
||||
<h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
|
||||
|
||||
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1 mb-3"></div>
|
||||
<component :is="{ template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag } }" />
|
||||
|
||||
<div id="navigation__bottom" class="py-5 flex flex-wrap justify-between items-center">
|
||||
<div class="flex gap-4 items-center">
|
||||
<nuxt-link
|
||||
:to="{ name: 'categories', params: { categories: `${currentCategoryTree[currentCategoryTree.length - 1]?.code}` } }"
|
||||
title="Quay trở lại"
|
||||
class="w-10 h-10 rounded-8px flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer"
|
||||
>
|
||||
<Icon name="fa6-solid:arrow-left" />
|
||||
</nuxt-link>
|
||||
<button @click="onClickBookmark()" class="w-10 h-10 rounded-8px border-1px bg-white hover:bg-primary-100 hover:text-primary-600">
|
||||
<Icon v-show="isBookmark === false" name="fa6-regular:bookmark" />
|
||||
<Icon v-show="isBookmark === true" name="fa6-solid:bookmark" class="text-primary-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 items-center">
|
||||
<button @click="copyLink()" title="Copy link" class="w-10 h-10 rounded-8px flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer text-2xl">
|
||||
<Icon name="bi:link-45deg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#sub,
|
||||
#intro,
|
||||
#intro + div {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
#published-on {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
-478
@@ -1,478 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useArticleStore } from "~/stores/articles";
|
||||
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";
|
||||
const { currentArticle } = storeToRefs(useArticleStore());
|
||||
import { useDynamicPageStore } from "~/stores/dynamic-page";
|
||||
import { useCategoryStore } from "~/stores/category";
|
||||
|
||||
const store = reactive({
|
||||
dynamicPage: useDynamicPageStore(),
|
||||
article: useArticleStore(),
|
||||
category: useCategoryStore(),
|
||||
});
|
||||
|
||||
const { categoryTree } = storeToRefs(store.category);
|
||||
|
||||
await store.category.fetchBySiteId();
|
||||
const currentCategoryTree = (store.category.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;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
clickElement("figure", "custom-figure", "data-code");
|
||||
clickElement("author", "author", "data-code");
|
||||
|
||||
let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
|
||||
let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
|
||||
if (detailEmagazine && breakcrumb) {
|
||||
breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
|
||||
}
|
||||
});
|
||||
|
||||
function clickElement(type: string, selector: string, attribute: string) {
|
||||
const elements = document.querySelectorAll(selector);
|
||||
elements.forEach((element) => {
|
||||
element.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
const url = `${window.location.protocol}//${window.location.host}/${type}/${element.getAttribute(attribute)}`;
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const isBookmark = ref(false);
|
||||
const onClickBookmark = () => {
|
||||
isBookmark.value = !isBookmark.value;
|
||||
};
|
||||
async function copyLink() {
|
||||
try {
|
||||
const url = window.location.href;
|
||||
await navigator.clipboard.writeText(url);
|
||||
alert("copy link thành công");
|
||||
} catch (error) {
|
||||
alert(error);
|
||||
}
|
||||
}
|
||||
|
||||
const getSrc = (htmlString: string) => {
|
||||
const srcRegex = /src="([^"]+)"/;
|
||||
return htmlString?.match(srcRegex);
|
||||
};
|
||||
|
||||
const isMoreControl = ref(false);
|
||||
const isPlayed = ref(true);
|
||||
const isVolume = ref(true);
|
||||
const speedList = ref<{ [key: number]: string }>({
|
||||
1: "0.5x",
|
||||
2: "0.75x",
|
||||
3: "1.0x",
|
||||
4: "1.25x",
|
||||
5: "1.50x",
|
||||
});
|
||||
const speedIndexDefault = ref(3);
|
||||
const speedDefault = ref(speedList.value[speedIndexDefault.value]);
|
||||
const volume = ref(1.0);
|
||||
const audioPlayer = ref<HTMLAudioElement | null>(null);
|
||||
const currentTime = ref(0);
|
||||
const duration = ref(0);
|
||||
|
||||
function setUpVolums() {
|
||||
isVolume.value = !isVolume.value;
|
||||
if (audioPlayer.value) {
|
||||
if (isVolume.value) {
|
||||
audioPlayer.value.volume = 1;
|
||||
} else {
|
||||
audioPlayer.value.volume = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const updateVolume = (num?: number) => {
|
||||
if (audioPlayer.value) {
|
||||
if(num) {
|
||||
volume.value += num
|
||||
}
|
||||
audioPlayer.value.volume = volume.value;
|
||||
}
|
||||
};
|
||||
|
||||
function chanageSpeed() {
|
||||
if (speedIndexDefault.value < 5) {
|
||||
speedIndexDefault.value += 1;
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.playbackRate += 0.25;
|
||||
}
|
||||
speedDefault.value = speedList.value[speedIndexDefault.value];
|
||||
} else {
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.playbackRate = 0.5;
|
||||
}
|
||||
speedIndexDefault.value = 1;
|
||||
speedDefault.value = speedList.value[1];
|
||||
}
|
||||
}
|
||||
|
||||
function togglePlayer() {
|
||||
isPlayed.value = !isPlayed.value;
|
||||
if (audioPlayer.value) {
|
||||
if (isPlayed.value) {
|
||||
audioPlayer.value.pause();
|
||||
} else {
|
||||
audioPlayer.value.play();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function replayAndForward(time: number) {
|
||||
if (audioPlayer.value) {
|
||||
if (audioPlayer.value.currentTime == audioPlayer.value.duration) {
|
||||
isPlayed.value = true;
|
||||
} else {
|
||||
audioPlayer.value.currentTime = audioPlayer.value.currentTime + time;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const seekToTime = () => {
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.currentTime = currentTime.value;
|
||||
}
|
||||
};
|
||||
|
||||
const updateCurrentTime = () => {
|
||||
if (audioPlayer.value) {
|
||||
currentTime.value = audioPlayer.value.currentTime;
|
||||
}
|
||||
};
|
||||
|
||||
const updateDuration = () => {
|
||||
if (audioPlayer.value) {
|
||||
duration.value = audioPlayer.value.duration;
|
||||
}
|
||||
};
|
||||
|
||||
const currrentTimeComputed = computed(() => {
|
||||
return utils.formattedTime(currentTime.value);
|
||||
});
|
||||
|
||||
const durationComputed = computed(() => {
|
||||
return utils.formattedTime(duration.value);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="lg:p-40px md:p-30px p-5 border-1px border-solid border-black/10 rounded-8px">
|
||||
<div class="flex md:flex-row flex-col md:gap-6 gap-2 justify-between mb-10px">
|
||||
<p class="text-#9f9f9f text-14px mb-2 md:hidden block text-center">
|
||||
{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}
|
||||
</p>
|
||||
<figure class="!w-auto"><img class="w-150px h-150px rounded-8px shadow-md cursor-pointer" :src="currentArticle?.thumbnail" alt="Ảnh podcast" title="Ảnh podcast" /></figure>
|
||||
<div class="flex-1 text-#222 m-0 md:text-left text-center">
|
||||
<p class="text-#9f9f9f text-14px mb-2 md:block hidden">
|
||||
{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}
|
||||
</p>
|
||||
<h1 class="text-24px md:mb-4 mb-2 font-bold" v-html="currentArticle?.title"></h1>
|
||||
<p class="hidden md:line-clamp-3" v-html="currentArticle?.intro"></p>
|
||||
</div>
|
||||
|
||||
<ul class="items-start gap-2 m-0 p-0 md:flex hidden">
|
||||
<li class="w-9 h-9 bg-white border-1 border-solid border-[rgb(229, 231, 235)] cursor-pointer shadow-md rounded-50px relative hover:bg-primary-100 hover:text-primary-600">
|
||||
<Icon class="text-18px absolute top-50% left-50% translate-x--50% translate-y--50%" name="mdi:bookmark-outline" />
|
||||
</li>
|
||||
<li class="w-9 h-9 bg-white border-1 border-solid border-[rgb(229, 231, 235)] cursor-pointer shadow-md rounded-50px relative hover:bg-primary-100 hover:text-primary-600">
|
||||
<Icon class="text-18px absolute top-50% left-50% translate-x--50% translate-y--50%" name="material-symbols:mode-comment-outline" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<audio :src="getSrc(currentArticle?.detail)?.[1]" preload="auto" ref="audioPlayer" @timeupdate="updateCurrentTime" @loadedmetadata="updateDuration" />
|
||||
<div class="p-2">
|
||||
<input class="w-full accent-primary-600 cursor-pointer" type="range" v-model="currentTime" @input="seekToTime" :max="duration" />
|
||||
<div class="flex justify-between">
|
||||
<span>{{ currrentTimeComputed }}</span>
|
||||
<span>{{ durationComputed }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="md:w-150px text-left">
|
||||
<div class="text-28px text-primary-600 md:hidden block">
|
||||
<Icon name="material-symbols:skip-previous" />
|
||||
</div>
|
||||
<div class="md:inline-flex hidden items-center gap-2 ml--10px h9 text-primary-600 rounded-8px text-28px cursor-pointer hover:bg-primary-100">
|
||||
<Icon @click="updateVolume(-0.1)" name="material-symbols:volume-mute"></Icon>
|
||||
<input v-if="isVolume" class="accent-primary-600 h-1 w-12 lg:w-20 cursor-pointer" type="range" v-model="volume" @input="updateVolume" min="0.1" max="1" step="0.1" />
|
||||
<Icon @click="updateVolume(0.1)" name="material-symbols:volume-up"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center gap-4 flex-1 text-28px text-primary-600">
|
||||
<Icon @click="replayAndForward(-10)" name="fluent:skip-back-10-48-filled" />
|
||||
<button @click="togglePlayer" class="bg-transparent">
|
||||
<Icon v-if="isPlayed" name="material-symbols:play-arrow-rounded" class="text-64px" />
|
||||
<Icon v-if="!isPlayed" name="material-symbols:pause" class="text-64px" />
|
||||
</button>
|
||||
|
||||
<Icon @click="replayAndForward(10)" name="fluent:skip-forward-10-48-filled" />
|
||||
</div>
|
||||
|
||||
<div class="md:w-150px text-right">
|
||||
<div class="text-28px text-primary-600 md:hidden block">
|
||||
<Icon name="material-symbols:skip-next" />
|
||||
</div>
|
||||
<div class="text-14px text-primary-600 md:block hidden cursor-pointer" @click="chanageSpeed">
|
||||
<span class="font-300">Tốc độ phát: </span>
|
||||
<strong class="font-bold text-20px ml-1">{{ speedDefault }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="md:hidden block" v-html="currentArticle?.intro"></p>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
:root {
|
||||
--podcast-wrapper-padding: 40;
|
||||
}
|
||||
|
||||
.podcast-padding-tablet {
|
||||
--podcast-wrapper-padding: 30;
|
||||
}
|
||||
|
||||
.podcast-padding-smartphone {
|
||||
--podcast-wrapper-padding: 20;
|
||||
}
|
||||
|
||||
.podcast__wrapper {
|
||||
padding: calc(var(--podcast-wrapper-padding) * 1px);
|
||||
border: 1px solid #eeeeee;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
|
||||
.podcast {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > figure > img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__content__text {
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
color: #222222;
|
||||
margin: 0;
|
||||
|
||||
&__time {
|
||||
color: #9f9f9f;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
text-align: center;
|
||||
&__time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .buttons {
|
||||
display: flex;
|
||||
align-self: start;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& li {
|
||||
list-style: none;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: white;
|
||||
border: 1px solid rgb(229, 231, 235);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
border-radius: 50px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f4ff;
|
||||
color: #3c7abc;
|
||||
}
|
||||
|
||||
& svg {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateY(-50%) translateX(-55%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
|
||||
& .buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playlist {
|
||||
padding: 8px;
|
||||
|
||||
&__time {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 12px;
|
||||
position: relative;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
background-color: #e6f4ff;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 50%;
|
||||
background-color: #3c7abc;
|
||||
z-index: 2;
|
||||
}
|
||||
& span {
|
||||
font-size: 16px;
|
||||
color: #3c7abc;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& .button__prev,
|
||||
& .button__next {
|
||||
font-size: 28px;
|
||||
color: #3c7abc;
|
||||
}
|
||||
& .sound {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: -10px;
|
||||
padding: 0 10px;
|
||||
height: 36px;
|
||||
color: #3c7abc;
|
||||
border-radius: 8px;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #e6f4ff;
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
background-color: #dcf0ff;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
height: 2px;
|
||||
width: 50%;
|
||||
background-color: #3c7abc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .play {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
|
||||
& svg {
|
||||
font-size: 28px;
|
||||
color: #3c7abc;
|
||||
|
||||
&.button {
|
||||
font-size: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .speed {
|
||||
font-size: 14px;
|
||||
color: #3c7abc;
|
||||
|
||||
& span {
|
||||
font-weight: 200;
|
||||
}
|
||||
& strong {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import Comment from "@/components/dynamic-page/page-component/templates/other/comments/default.vue";
|
||||
import { useArticleStore } from "~/stores/articles";
|
||||
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";
|
||||
const { currentArticle } = storeToRefs(useArticleStore());
|
||||
import { useDynamicPageStore } from "~/stores/dynamic-page";
|
||||
import { useCategoryStore } from "~/stores/category";
|
||||
|
||||
const store = reactive({
|
||||
dynamicPage: useDynamicPageStore(),
|
||||
article: useArticleStore(),
|
||||
category: useCategoryStore(),
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3">
|
||||
<div class="md:col-span-2">
|
||||
<div id="article-detail" class="flex-1 [&_iframe]:w-full [&_iframe]:max-w-full [&_iframe]:max-h-52 md:[&_iframe]:max-h-full [&_video]:max-w-full [&_video]:w-full">
|
||||
<div v-html="currentArticle?.detail" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 pt-2 bg-[rgb(248,249,250)]">
|
||||
<h1 class="text-2rem text-#495057 font-700" v-html="currentArticle.title"></h1>
|
||||
<p class="line-clamp-3 font-400" v-html="currentArticle.intro"></p>
|
||||
<h5 class="text-end font-600 opacity-75">Tác giả</h5>
|
||||
|
||||
<p><b class="text-primary-600 fw-bold">Danh mục</b> <span class="ms-2 opacity-25 fw-semibold">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</span></p>
|
||||
<Comment />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.line-clamp-3 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user