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

<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;
  component?: any;
}>();

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 :id="`cpn_${props.component.id}`" class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']"  :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" :style="LAYOUT_PARSE['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" v-if="LAYOUT_PARSE.styles"  style="display: none"></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>