NSG_PORTAL_V2/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue

<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 designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
  return Object.assign({}, designObject);
});

const parseData = computed(() => {
  if (!props.dataResult) return;
  const result = getInputValue(props.dataResult, "OBJECT");
  return result;
});
</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="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>
    </div>

    <div v-html="LAYOUT_PARSE.styleClasses"></div>
  </article>
</template>

<style lang="scss" scoped>
    .article_video {
        .article_video_thumb {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            z-index: 0;
            padding: 120px 85px 60px 85px;
            border-radius: 2px;
            margin: 10px;
            cursor: pointer;
            &::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.4);
                z-index: 1;
                top: 0px;
                left: 0px;
            }
            .article_video_content {
                position: relative;
                z-index: 2;

                h3 {
                    font-size: 44px;
                    font-weight: 700;
                    line-height: 57.2px;
                    text-align: left;
                    margin-bottom: 12px;
                }

                p {
                    font-size: 14px;
                    font-weight: 400;
                }

                i {
                    font-size: 80px;
                    color: #ed1c24;
                }
            }
        }
        .empty-box {
            background-color: #409eff;
            margin: 10px;
            min-height: 60px;
            i {
                font-size: 60px;
            }
        }
    }
</style>