ShowEasyFrontEnd/FrontEnd/components/home/HighlightExhibitionsCardMobile.vue

<template>
  <div>
    <nuxt-link
      :to="localePath(`/exhibition/${item.id}`)"
      class="remove-underline"
      v-if="days > 0"
    >
      <v-card
        flat
        class="HiExCard py-3 px-3 d-flex flex-column"
        width="100%"
        height="236"
        v-if="!!item"
      >
        <v-img
          :aspect-ratio="16 / 9"
          width="100%"
          sizes="100%"
          contain
          :src="item.logo"
          class="border-radius-10 mb-1"
        ></v-img>
        <div>
          <v-spacer id="title" class="mb-1 d-flex justify-start">
            <v-clamp autoresize :max-lines="2">{{ item.name }}</v-clamp>
          </v-spacer>
          <div
            class="location"
            v-if="!!item.region || !!item.country || !!item.city"
          >
            {{ item.region.name ? item.region.name + " . " : "" }}
            {{ item.country.name ? item.country.name + " . " : "" }}
            {{ item.city.name ? item.city.name : "" }}
          </div>
          <div>
            <span class="time">
              {{ formatDate(item.startdate) }}
              ~
              {{ formatDate(item.enddate) }}
            </span>
          </div>
        </div>
        <v-spacer class="d-flex justify-end align-end">
          <div
            class="caption grey--text text--lighten-1 pb-0 ps-1 d-flex align-end justify-end"
            v-html="
              $t('in days', {
                days: `<span class=
        'warning--text last-dates text-size-14 padding-6'>${dateCountDown(
          item.startdate
        )}</span>`,
                s: `<span v-if='${days} !== 1'>s</span>`,
              })
            "
          ></div>
        </v-spacer>
      </v-card>
    </nuxt-link>
  </div>
</template>

<script>
  import { formatDate, dateCountDown } from "~/utils/assist";
  import VClamp from "vue-clamp";
  export default {
    props: {
      item: {
        type: Object,
      },
    },
    components: {
      VClamp,
    },
    created() {
      this.days = this.dateCountDown(this.$props.item.startdate);
    },
    data() {
      return {
        days: 1,
      };
    },
    methods: {
      formatDate,
      dateCountDown,
    },
  };
</script>

<style lang="scss" scoped>
  .HiExCard {
    background-color: $Neutrals-100;
    // min-width: 167px;
    // height: 236px;
    border-radius: 10px !important;
  }
  #title {
    font-weight: 400;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.02em;
    color: #000000;
  }
  .location {
    color: #9c9c9c;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.02em;
  }
  .time {
    font-weight: 400;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.02em;
    color: #000000;
  }
</style>