minhnt/NSG_PORTAL_V2
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2

Browse Source
This commit is contained in:
MoreStrive
2024-07-05 09:48:47 +07:00
parent 76d4628100 7bf902041e
commit 815ce88d95
21 changed files with 486 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/articles/cards/Audio.vue
+4 -5
View File
@@ -67,15 +67,14 @@ const parseData = computed(() => {
<div class="card-audio__type-category">
<div class="card-audio__type" v-if="type">{{ type }}</div>
<nuxt-link v-if="parseData" to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
<nuxt-link to="#" 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>
<h2 v-if="parseData" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
<nuxt-link :to="`/bai-viet/${parseData.code}`" v-html="parseData.title"></nuxt-link>
<h2 :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
<nuxt-link :to="`/bai-viet/${parseData?.code}`"><span v-html="parseData?.title"></span> </nuxt-link>
</h2>
<span v-else class="empty-block" style="height: 8px"></span>
</div>
</article>
<div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
components/dynamic-page/page-component/templates/articles/cards/MissBackground.vue
+106
View File
@@ -0,0 +1,106 @@
<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="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop" :style="LAYOUT_PARSE['article']">
<div class="article_miss">
<template v-if="parseData">
<div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
<div class="article_miss_content">
<h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
</h3>
</div>
</template>
<div v-else class="empty-box"></div>
</div>
<div v-html="LAYOUT_PARSE.styleClasses"></div>
</article>
</template>
<style lang="scss" scoped>
.article_miss {
height: 100%;
position: relative;
.article_miss_thumb {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
border-radius: 12px;
cursor: pointer;
height: 100%;
}
.article_miss_content {
position: absolute;
z-index: 2;
bottom: -30px;
background-color: rgba(255, 93, 2, 0.7);
backdrop-filter: blur(2px);
width: 80%;
left: 10%;
padding: 16px 10px;
border-radius: 8px;
h3 {
font-size: 16px;
font-weight: 700;
line-height: 130%;
text-align: center;
// margin-bottom: 12px;
margin-bottom: 0;
}
}
.empty-box {
background-color: #409eff;
min-height: 60px;
height: 100%;
i {
font-size: 60px;
}
}
}
</style>
components/dynamic-page/page-component/templates/articles/cards/index.ts
+2 -1
View File
@@ -1,4 +1,5 @@
export { default as Article_Card_Default } from './Card.vue'
export { default as Article_Card_Audio } from './Audio.vue'
export { default as Article_Card_Video } from './Video.vue'
export { default as Article_Card_Video_Hightlight } from './VideoBackground.vue'
export { default as Article_Card_Video_Hightlight } from './VideoBackground.vue'
export { default as Article_Card_Miss_Hightlight } from './MissBackground.vue'
components/dynamic-page/page-component/templates/articles/cards/index.vue
+2 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
import { Article_Card_Default, Article_Card_Audio, Article_Card_Video, Article_Card_Video_Hightlight } from "./index";
import { Article_Card_Default, Article_Card_Audio, Article_Card_Video, Article_Card_Video_Hightlight,Article_Card_Miss_Hightlight } from "./index";
const _props = defineProps<{
settings: any;
@@ -13,6 +13,7 @@ const definedDynamicComponent: Record<string, any> = {
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_AUDIO"]]: Article_Card_Audio,
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_VIDEO"]]: Article_Card_Video,
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_VIDEO_HIGHLIGHT"]]: Article_Card_Video_Hightlight,
[enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_MISS_HIGHLIGHT"]]: Article_Card_Miss_Hightlight,
};
const getCurrentComponent = computed(() => {