Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import ADSDefault from '@/assets/images/ads.jpg'
|
||||
</script>
|
||||
<template>
|
||||
<div class="shadow">
|
||||
<div class="shadow sticky top-10px">
|
||||
<img :src="ADSDefault" alt="quảng cáo" class=" object-cover">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { enumPageComponentTemplates } from "@/definitions/enum";
|
||||
import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
|
||||
import { getInputValue } from "@/utils/parseSQL";
|
||||
import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
|
||||
|
||||
const props = defineProps<{
|
||||
dataResult?: any;
|
||||
@@ -20,7 +19,6 @@ const LAYOUT_PARSE = computed(() => {
|
||||
};
|
||||
}) || [];
|
||||
const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
|
||||
|
||||
return Object.assign({}, ...parseLayout, designObject);
|
||||
});
|
||||
|
||||
@@ -65,21 +63,37 @@ const drop = (e: any) => {
|
||||
<img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
|
||||
</div>
|
||||
<div class="basic-article_content !py-0" :class="[!parseData && 'no-data']">
|
||||
<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="mb-1 text-truncate-two-lines font-bold line-clamp-2 hover:text-primary-600">
|
||||
<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>
|
||||
<span v-else class="empty-block" style="height: 8px"></span>
|
||||
|
||||
</nuxt-link>
|
||||
<p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 line-clamp-3">
|
||||
<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 ? parseData.intro?.replace(/<[^>]+>/g, "") : parseData.detail?.replace(/<[^>]+>/g, "") }}
|
||||
{{ parseData.intro?.replace(/<[^>]+>/g, "") }}
|
||||
</template>
|
||||
<span v-else class="empty-block" style="height: 5px"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,12 +103,19 @@ const drop = (e: any) => {
|
||||
<style lang="scss" scoped>
|
||||
.basic-article {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
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;
|
||||
@@ -103,12 +124,6 @@ const drop = (e: any) => {
|
||||
}
|
||||
&.reverse {
|
||||
flex-direction: column-reverse;
|
||||
height: 100%;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&.border-custom {
|
||||
@@ -116,39 +131,20 @@ const drop = (e: any) => {
|
||||
}
|
||||
&.borderLeft {
|
||||
border-left: 1px solid;
|
||||
padding-left: 16px;
|
||||
|
||||
}
|
||||
&.borderRight {
|
||||
border-right: 1px solid;
|
||||
padding-right: 16px;
|
||||
}
|
||||
&.borderTop {
|
||||
border-top: 1px solid;
|
||||
padding-top: 16px;
|
||||
}
|
||||
&.borderBottom {
|
||||
border-bottom: 1px solid;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
&.borderRight ,
|
||||
&.borderLeft,
|
||||
&.borderTop,
|
||||
&.borderBottom {
|
||||
|
||||
@media (max-width: 640px) {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
@apply sm:flex-row flex-col;
|
||||
flex-direction: row;
|
||||
.basic-article_thumbnail {
|
||||
width: 40%;
|
||||
@media (max-width: 640px) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
@@ -158,32 +154,27 @@ const drop = (e: any) => {
|
||||
&_thumbnail {
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
border-radius: 2px;
|
||||
aspect-ratio: 16/10;
|
||||
}
|
||||
}
|
||||
|
||||
&_content {
|
||||
padding: 10px 0px;
|
||||
/* padding: 10px 0px; */
|
||||
flex: 1;
|
||||
&.no-data {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
opacity: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
// .empty-block {
|
||||
// background-color: #409eff;
|
||||
// height: 100px;
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
+44
-4
@@ -48,7 +48,6 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
clickElement("figure", "custom-figure", "data-code");
|
||||
@@ -94,12 +93,13 @@ async function copyLink() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div id="breakcrumb" class="flex justify-between items-center my-3">
|
||||
<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-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
|
||||
<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>
|
||||
@@ -131,7 +131,7 @@ async function copyLink() {
|
||||
<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 tracking-widest pb-1 mb-3"></div>
|
||||
<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>
|
||||
|
||||
@@ -152,6 +152,46 @@ async function copyLink() {
|
||||
</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>
|
||||
|
||||
@@ -84,7 +84,7 @@ async function copyLink() {
|
||||
<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' : ''" class="hover:!text-primary-600" :to="{ name: 'categories', params: { categories: category.code ?? '/' } }">{{ category.title }}</nuxt-link>
|
||||
<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>
|
||||
|
||||
+1
-1
@@ -228,7 +228,7 @@ const durationComputed = computed(() => {
|
||||
<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" class="text-64px" />
|
||||
<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>
|
||||
|
||||
|
||||
@@ -47,21 +47,48 @@ const selectComponent = () => {
|
||||
emit("selectComponent");
|
||||
};
|
||||
|
||||
|
||||
const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
|
||||
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
|
||||
const updatedDesignObject = { ...designObject };
|
||||
|
||||
if (Array.isArray(designObject[keyActive])) {
|
||||
const isActive = designObject[keyActive].includes(Number(index) + 1);
|
||||
return {
|
||||
...updatedDesignObject,
|
||||
[key]: isActive ? designObject[key] : defaultValue,
|
||||
};
|
||||
}
|
||||
|
||||
delete updatedDesignObject[key];
|
||||
return updatedDesignObject;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="categories-container p-2 border-custom"
|
||||
class="categories-container border-custom"
|
||||
@click="selectComponent"
|
||||
:class="[designObject['LAYOUT_WRAP'] || 'horizontal', ...(designObject['borderWrap']?.length > 0 ? designObject['borderWrap'] : [])]"
|
||||
:style="[designObject['background'] && `background: ${designObject['background']}`]"
|
||||
>
|
||||
<div v-for="(component, index) in _dataResult" :key="index" :class="[...(designObject['border']?.length > 0 ? designObject['border'] : []), 'border-custom', isEmpty(component) ? 'empty' : 'category']">
|
||||
<div
|
||||
v-for="(component, index) in _dataResult"
|
||||
:key="index"
|
||||
:class="[...(handleActiveItem('border', 'activesBorder', index, [])['border']?.length > 0 ? handleActiveItem('border', 'activesBorder', index, [])['border'] : []), 'border-custom', isEmpty(component) ? 'empty' : 'category']"
|
||||
>
|
||||
<template v-if="!isEmpty(component)">
|
||||
<nuxt-link :to="`/${component.code}`"
|
||||
:class="index != 0? 'sm:block hidden' : 'font-bold text-20px border-b-2px border-primary-600'"
|
||||
class="hover:text-primary-600"
|
||||
class="sm:block hidden hover:text-primary-600"
|
||||
:class="index == 0 ? 'border-b-1px border-primary-600' : 'text-black-400 font-normal'"
|
||||
:style="[
|
||||
handleActiveItem('fontSizeTitle', 'activesFontSize', index, designObject.defaultFontSizeTitle)['fontSizeTitle'] &&
|
||||
`font-size: ${handleActiveItem('fontSizeTitle', 'activesFontSize', index, designObject.defaultFontSizeTitle)['fontSizeTitle']}px`,
|
||||
handleActiveItem('fontWeightTitle', 'activesFontWeight', index, designObject.defaultFontWeightTitle)['fontWeightTitle'] &&
|
||||
`font-weight: ${handleActiveItem('fontWeightTitle', 'activesFontWeight', index, designObject.defaultFontWeightTitle)['fontWeightTitle']}`,
|
||||
designObject['color'] && `color: ${designObject['color']}`
|
||||
]"
|
||||
>
|
||||
{{ component.title }}
|
||||
</nuxt-link>
|
||||
@@ -80,6 +107,8 @@ const selectComponent = () => {
|
||||
align-items: flex-end;
|
||||
width: fit-content;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -89,14 +118,13 @@ const selectComponent = () => {
|
||||
.category {
|
||||
height: 100%;
|
||||
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
a {
|
||||
font-size: 15px;
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
h3 {
|
||||
a {
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
}
|
||||
@@ -108,18 +136,14 @@ const selectComponent = () => {
|
||||
}
|
||||
.borderLeft {
|
||||
border-left: 1px solid;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.borderRight {
|
||||
border-right: 1px solid;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.borderTop {
|
||||
border-top: 1px solid;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.borderBottom {
|
||||
border-bottom: 1px solid;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
|
||||
import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
|
||||
import isEmpty from "lodash/isEmpty";
|
||||
|
||||
import { isEmpty, groupBy } from "lodash";
|
||||
import { breakpoint } from "~/definitions";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
const { width } = useWindowSize()
|
||||
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
|
||||
|
||||
// const store = reactive({
|
||||
// section: usePageSectionStore(),
|
||||
// });
|
||||
// const { currentScreenMode } = storeToRefs(useCmsPageStore());
|
||||
|
||||
const _props = defineProps<{
|
||||
dataResult?: any[];
|
||||
dataQuery?: string;
|
||||
@@ -18,7 +25,7 @@ const SETTING_OPTIONS = {
|
||||
LAYOUT: "TYPE:Card",
|
||||
};
|
||||
|
||||
const layoutParse = computed(() => {
|
||||
const LAYOUT_PARSE = computed(() => {
|
||||
const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
|
||||
const parseItem = _layout.split(":");
|
||||
return {
|
||||
@@ -30,7 +37,7 @@ const layoutParse = computed(() => {
|
||||
});
|
||||
|
||||
const _dataResult = computed(() => {
|
||||
let _components = Array(Number(layoutParse.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
|
||||
let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
|
||||
const result = getInputValue(_props.dataResult, "ARRAY");
|
||||
result &&
|
||||
result.length > 0 &&
|
||||
@@ -58,55 +65,89 @@ async function dropData(data: any) {
|
||||
const selectComponent = () => {
|
||||
emit("selectComponent");
|
||||
};
|
||||
|
||||
const handleActiveItem = (listKey: string[], listKeyActive: string[], index: number, listDefaultValue: any) => {
|
||||
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
|
||||
const updatedDesignObject = { ...designObject };
|
||||
|
||||
const dataDefault = {
|
||||
fontSizeTitle: "defaultFontSizeTitle",
|
||||
fontWeightTitle: "defaultFontWeightTitle",
|
||||
};
|
||||
|
||||
for (let i = 0; i < listKeyActive.length; i++) {
|
||||
const keyActive = listKeyActive[i];
|
||||
const key = listKey[i];
|
||||
const defaultValue = listDefaultValue[i] || designObject[dataDefault[key]];
|
||||
|
||||
if (Array.isArray(designObject[keyActive])) {
|
||||
const isActive = designObject[keyActive].includes(index + 1);
|
||||
updatedDesignObject[key] = isActive ? designObject[key] : defaultValue;
|
||||
} else {
|
||||
delete updatedDesignObject[key];
|
||||
}
|
||||
}
|
||||
|
||||
return updatedDesignObject;
|
||||
};
|
||||
|
||||
const mapActivesToItems = (index: number) => {
|
||||
const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
|
||||
const output = {};
|
||||
|
||||
designObject.layoutGrid?.forEach((item: any) => {
|
||||
item.actives.forEach((active: any) => {
|
||||
output[active] = { ...item };
|
||||
});
|
||||
});
|
||||
|
||||
return output[index + 1] || {};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="collection-container p-2 border-custom"
|
||||
:class="[layoutParse['LAYOUT_WRAP'] || 'vertical', ...(layoutParse['borderWrap']?.length > 0 ? layoutParse['borderWrap'] : [])]"
|
||||
@click="selectComponent"
|
||||
:style="[`grid-template-columns: repeat(${currentScreenMode === 'smartphone' ? 1 : layoutParse['COLUMN']}, minmax(0, 1fr))`, layoutParse['background'] && `background: ${layoutParse['background']}`]"
|
||||
>
|
||||
<DynamicComponent
|
||||
class="h-full"
|
||||
v-for="(component, index) in _dataResult"
|
||||
:key="index"
|
||||
:settings="{
|
||||
template: SETTING_OPTIONS.TEMPLATE,
|
||||
layout: SETTING_OPTIONS.LAYOUT,
|
||||
label,
|
||||
dataResult: !isEmpty(component) ? { ...component } : null,
|
||||
}"
|
||||
@drop-data="dropData"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="collection-container border-custom"
|
||||
:class="[LAYOUT_PARSE['LAYOUT_WRAP'] || 'vertical', ...(LAYOUT_PARSE['borderWrap']?.length > 0 ? LAYOUT_PARSE['borderWrap'] : [])]"
|
||||
@click="selectComponent"
|
||||
:style="[`grid-template-columns: repeat(${width < breakpoint.sm ? 1 : LAYOUT_PARSE['COLUMN']}, minmax(0, 1fr))`, LAYOUT_PARSE['background'] && `background: ${LAYOUT_PARSE['background']}`]"
|
||||
>
|
||||
<DynamicComponent
|
||||
v-for="(component, index) in _dataResult"
|
||||
:key="index"
|
||||
:style="[
|
||||
mapActivesToItems(index)['colSpan'] && `grid-column: span ${mapActivesToItems(index)['colSpan']} / span ${mapActivesToItems(index)['colSpan']}`,
|
||||
mapActivesToItems(index)['colStart'] && `grid-column-start: ${mapActivesToItems(index)['colStart']}`,
|
||||
mapActivesToItems(index)['colEnd'] && `grid-column-end: ${mapActivesToItems(index)['colEnd']}`,
|
||||
]"
|
||||
:settings="{
|
||||
template: SETTING_OPTIONS.TEMPLATE,
|
||||
layout: SETTING_OPTIONS.LAYOUT,
|
||||
label: handleActiveItem(['border', 'HIDE', 'fontSizeTitle', 'fontWeightTitle'], ['activesBorder', 'activesHide', 'activesFontSize', 'activesFontWeight'], index, [[], [], null, null]),
|
||||
dataResult: !isEmpty(component) ? { ...component } : null,
|
||||
}"
|
||||
@drop-data="dropData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.collection-container {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
|
||||
&.border-custom {
|
||||
border-color: #e5e5e5 !important;
|
||||
}
|
||||
&.borderLeft {
|
||||
border-left: 1px solid;
|
||||
padding-left: 10px;
|
||||
}
|
||||
&.borderRight {
|
||||
border-right: 1px solid;
|
||||
padding-right: 10px;
|
||||
}
|
||||
&.borderTop {
|
||||
border-top: 1px solid;
|
||||
padding-top: 10px;
|
||||
}
|
||||
&.borderBottom {
|
||||
border-bottom: 1px solid;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
&.vertical {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
@@ -115,11 +156,7 @@ const selectComponent = () => {
|
||||
grid-template-rows: auto;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.empty {
|
||||
min-height: 100px;
|
||||
border-radius: 6px;
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
&.noData {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@@ -10,9 +10,9 @@ const _props = defineProps<{
|
||||
const definedDynamicComponent: Record<string, any> = {
|
||||
'TYPE:Article-LAYOUT:horizontal-DATA:HORIZONTAL': Article_Pagination
|
||||
};
|
||||
console.log('đã vào')
|
||||
|
||||
const getCurrentComponent = computed(() => `${_props.settings.layout}`);
|
||||
console.log(getCurrentComponent.value, 'getcomponent')
|
||||
|
||||
const GET_PROPS = computed(() => {
|
||||
return () => {
|
||||
let props: any = {};
|
||||
|
||||
@@ -110,9 +110,6 @@ watch(
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="empty"><h6 class="px-2 text-center">Nội dung danh sách bài viết của danh mục sẽ ở đây</h6></div>
|
||||
</template>
|
||||
<div class="button-page flex">
|
||||
<a class="btn-page prev-page cursor-pointer" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" class="w-7 h-6 text-primary-600">
|
||||
@@ -141,25 +138,22 @@ watch(
|
||||
.section-container {
|
||||
.collection-container {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
/* gap: 10px; */
|
||||
overflow-x: scroll;
|
||||
&.border-custom {
|
||||
border-color: #e5e5e5 !important;
|
||||
}
|
||||
&.borderLeft {
|
||||
border-left: 1px solid;
|
||||
padding-left: 16px;
|
||||
}
|
||||
&.borderRight {
|
||||
border-right: 1px solid;
|
||||
padding-right: 16px;
|
||||
}
|
||||
&.borderTop {
|
||||
border-top: 1px solid;
|
||||
padding-top: 16px;
|
||||
}
|
||||
&.borderBottom {
|
||||
border-bottom: 1px solid;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
&.vertical {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
@@ -168,30 +162,8 @@ watch(
|
||||
grid-template-rows: auto;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
&.borderRight ,
|
||||
&.borderLeft,
|
||||
&.borderTop,
|
||||
&.borderBottom {
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 50px;
|
||||
background-color: #409eff;
|
||||
display: flex;
|
||||
white-space: normal;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
h6 {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.basic-article {
|
||||
&.article {
|
||||
margin-bottom: 10px;
|
||||
@@ -229,7 +201,4 @@ watch(
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.el-empty {
|
||||
padding: 12px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -141,7 +141,7 @@ const CLASS_FOR_SECTION = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="section_layout grid gap-[16px] lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
|
||||
<div class="section_layout grid lg:grid-cols-2" :class="[CLASS_FOR_SECTION.section_layout]">
|
||||
<div
|
||||
v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
|
||||
:key="index"
|
||||
|
||||
@@ -13,7 +13,7 @@ const html = $('.parent').addClass('xl:(flex items-center justify-center)')
|
||||
html.find('>li').addClass('relative group xl:mr-3 hover:text-blue')
|
||||
html.find('ul').addClass('hidden w-200px shadow group-hover:(block absolute top-full left-0 bg-white z-50)')
|
||||
html.find('>li>a').addClass('block py-4')
|
||||
html.find('>li>ul>li>a').addClass('block py-10px px-15px text-black hover:(bg-blue text-white)')
|
||||
html.find('>li>ul>li>a').addClass('block py-10px px-15px text-black-500 hover:(bg-blue text-white)')
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@ const getCurrentTemplate = computed(() => {
|
||||
return _props.settings && _props.settings.template || '';
|
||||
});
|
||||
|
||||
console.log(getCurrentTemplate.value, 'tempalte')
|
||||
|
||||
const GET_PROPS = computed(() => {
|
||||
return () => {
|
||||
|
||||
Reference in New Issue
Block a user