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

deploy

Browse Source
This commit is contained in:
MoreStrive
2024-07-02 16:03:24 +07:00
parent 4bf217c207
commit ee5c6f40f1
5 changed files with 72 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dynamic-page/page-component/templates/articles/cards/Video.vue
+9 -16
View File
@@ -74,7 +74,7 @@ const parseData = computed(() => {
class="article_video_thumb"
:style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
>
<i class="ri-play-circle-line"></i>
<Icon name="ri:play-circle-line" />
</div>
<div class="article_video_content">
<div>
@@ -85,20 +85,9 @@ const parseData = computed(() => {
</div>
</div>
</template>
<div v-else>
<div class="empty-box">
<div class="d-flex justify-content-center align-items-center flex-column empty-block" style="background-color: #409eff;">
<i class="ri-play-circle-line text-white"></i>
</div>
<div class="empty-block">
<div style="height: 8px"></div>
<div style="height: 8px"></div>
</div>
</div>
</div>
</div>
<div v-html="LAYOUT_PARSE.styleClasses"></div>
<div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
</article>
</template>
@@ -107,6 +96,7 @@ const parseData = computed(() => {
.article_video_container {
display: flex;
align-items: center;
.article_video_thumb {
background-size: cover;
background-repeat: no-repeat;
@@ -116,8 +106,10 @@ const parseData = computed(() => {
width: 250px;
height: 140px;
border-radius: 2px;
margin: 10px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
&::after {
content: '';
position: absolute;
@@ -128,17 +120,18 @@ const parseData = computed(() => {
top: 0px;
left: 0px;
}
i {
svg {
font-size: 40px;
color: white;
position: relative;
z-index: 2;
}
}
.article_video_content {
position: relative;
z-index: 2;
margin: 10px 0px;
padding: 10px;
> div {
background: #ffffff;
}
components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
+33 -74
View File
@@ -1,6 +1,7 @@
<script lang="ts" setup>
import { enumPageComponentTemplates } from "@/definitions/enum";
import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
import { getResource } from "@/utils/resourceHandler";
const props = defineProps<{
dataResult?: any;
@@ -20,6 +21,13 @@ const parseData = computed(() => {
const result = getInputValue(props.dataResult, "OBJECT");
return result;
});
const playVideo = ref<boolean>(false)
onMounted(() => {
getResource(JSON.parse(props.dataResult).detail)
console.log()
})
</script>
<template>
@@ -28,78 +36,37 @@ const parseData = computed(() => {
:class="LAYOUT_PARSE['article_Class']"
: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 class="article_video">
<template v-if="parseData">
<div
class="article_video_thumb"
:style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
>
<div></div>
<div class="article_video_content">
<span><i class="ri-play-circle-line"></i></span>
<h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
</h3>
<p class="mb-0 line-clamp text-white" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
{{ parseData.intro?.replace(/<[^>]+>/g, "") }}
</p>
</div>
</div>
</template>
<div v-else class="empty-box">
<div class="d-flex justify-content-center align-items-center flex-column">
<i class="ri-play-circle-line text-white"></i>
</div>
</div>
<template v-if="parseData">
<div
v-if="!playVideo"
class="article_video_thumb h-full"
:style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
>
<div></div>
<div class="article_video_content">
<span><Icon name="ri:play-circle-line" class="text-white" /></span>
<h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
{{ parseData.title?.replace(/<[^>]+>/g, "") }}
</h3>
<p class="mb-0 line-clamp text-white" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
{{ parseData.intro?.replace(/<[^>]+>/g, "") }}
</p>
</div>
</div>
<video src=""></video>
</template>
</div>
<div v-html="LAYOUT_PARSE.styleClasses"></div>
<div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
</article>
</template>
<style lang="scss" scoped>
.article_video {
.article_video_thumb {
@apply min-h-465px;
.article_video_thumb {
@apply flex flex-col justify-end min-h-465px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@@ -107,7 +74,7 @@ const parseData = computed(() => {
z-index: 0;
padding: 120px 85px 60px 85px;
border-radius: 2px;
margin: 10px;
overflow: hidden;
cursor: pointer;
&::after {
content: '';
@@ -136,19 +103,11 @@ const parseData = computed(() => {
font-weight: 400;
}
i {
svg {
font-size: 80px;
color: #ed1c24;
}
}
}
.empty-box {
background-color: #409eff;
margin: 10px;
min-height: 60px;
i {
font-size: 60px;
}
}
}
</style>