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, getInputValue } from "@/utils/parseSQL";

const props = defineProps<{
  dataResult?: any;
  dataType?: any;
  dataQuery?: any;
  layout?: string;
  label?: any;
}>();

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 = "Default";
      // 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 class="flex justify-center">
        <template v-if="['Image', 'Default', 'Infographics', 'Emagazine'].includes(type)">
          <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>
        <template v-if="['Postcard', 'Video'].includes(type)">
          <svg width="28" height="18" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5 2.25V15.75C18.5 17.0156 17.4688 18 16.25 18H2.75C1.48438 18 0.5 17.0156 0.5 15.75V2.25C0.5 1.03125 1.48438 0 2.75 0H16.25C17.4688 0 18.5 1.03125 18.5 2.25ZM27.5 3V15.0469C27.5 16.2188 26.0938 16.9219 25.1094 16.2656L20 12.7031V5.34375L25.1094 1.78125C26.0938 1.125 27.5 1.82812 27.5 3Z" 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.category" to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
          parseData?.category?.title
        }}</nuxt-link>
      </div>
      
        <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>
    </div>
  </article>
  <div v-if="LAYOUT_PARSE.styleClasses" 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>