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

<script setup lang="ts">
const type = ref("");
import { enumPageComponentTemplates } from "@/definitions/enum";
import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
import { 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");
  switch (result?.contentType) {
    case 1:
      type.value = "";
      // type.value = "Image";
      break;
    case 2:
      type.value = "Image";
      break;

    case 3:
      type.value = "Postcard";
      break;

    case 4:
      type.value = "Video";
      break;

    case 5:
      if (result?.layoutType === 4) {
        type.value = "Emagazine";
        break;
      }
      if (result?.layoutType === 3) {
        type.value = "Infographics";
        break;
      }
  }
  return result;
});
</script>
<template>
  <article class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
    <img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" />
    <div class="card-audio__content">
      <span>
        <template v-if="type === 'Image'">
          <svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M25.25 0.5H7.25C5.98438 0.5 5 1.53125 5 2.75V14.75C5 16.0156 5.98438 17 7.25 17H25.25C26.4688 17 27.5 16.0156 27.5 14.75V2.75C27.5 1.53125 26.4688 0.5 25.25 0.5ZM10.9531 3.5C11.75 3.5 12.4531 4.20312 12.4531 5C12.4531 5.84375 11.7969 6.5 10.9531 6.5C10.1094 6.5 9.45312 5.84375 9.45312 5C9.45312 4.20312 10.1562 3.5 10.9531 3.5ZM23.6562 13.625C23.5156 13.8594 23.2344 14 23 14H9.5C9.17188 14 8.9375 13.8594 8.79688 13.625C8.70312 13.3438 8.70312 13.0625 8.89062 12.8281L12.1719 8.32812C12.3125 8.14062 12.5 8 12.7812 8C13.0156 8 13.2031 8.14062 13.3438 8.32812L14.4219 9.78125L17.375 5.375C17.4688 5.14062 17.7031 5 17.9844 5C18.2188 5 18.4531 5.14062 18.5938 5.375L23.6094 12.875C23.75 13.0625 23.75 13.3906 23.6562 13.625ZM21.875 19.25H6.125C4.25 19.25 2.75 17.75 2.75 15.875V4.625C2.75 4.01562 2.23438 3.5 1.625 3.5C0.96875 3.5 0.5 4.01562 0.5 4.625V15.875C0.5 19.0156 2.98438 21.5 6.125 21.5H21.875C22.4844 21.5 23 21.0312 23 20.375C23 19.7656 22.4844 19.25 21.875 19.25Z"
              fill="white"
            />
          </svg>
        </template>
      </span>

      <div class="card-audio__type-category">
        <div class="card-audio__type" v-if="type">{{ type }}</div>
        <nuxt-link v-if="parseData" 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>
      <nuxt-link>
        <h2 v-html="parseData.title" v-if="parseData" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']"></h2>
        <span v-else class="empty-block" style="height: 8px"></span>
      </nuxt-link>
    </div>
  </article>
  <div v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
</template>

<style lang="scss">
.card-audio {
  position: relative;
  width: 100%;
  padding-bottom: calc((16 / 9) * 100%);
  overflow: hidden;

  img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .card-audio__content {
    position: absolute;
    width: 100%;
    max-height: 100%;
    bottom: 0;
    padding: 20px 30px;
    z-index: 3;
    text-align: center;
    h2 {
      color: #fff;
      margin: 12px 0 20px 0;
      font-size: 24px;
      font-weight: 700;
      line-height: 130%;

      &:hover {
        color: #9e1e0f;
      }
    }
  }

  .card-audio__type-category {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-top: 12px;

    .card-audio__type,
    .card-audio__category {
      padding: 0 10px;
      font-size: 12px;
      line-height: 180%;
      text-transform: uppercase;
    }

    .card-audio__type {
      background-color: #ed1c24;
      color: #fff;
    }

    .card-audio__category {
      background-color: #fff;
      color: #000;
    }
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 2;
  }
  .empty-block {
    background-color: #409eff;
    height: 100px;
    display: block;
  }
}
</style>