ShowEasyFrontEnd/FrontEnd/components/home/FocusExhibitionsCard.vue

<template >
  <div @click="goToExhibition()" class="tw-bg-neutrals-0 tw-h-full tw-cursor-pointer tw-rounded-[10px] tw-px-[6px] tw-py-[8px] md:tw-px-[11px] md:tw-py-[10px]">
    <div
      class="remove-underline md:tw-grid md:tw-grid-cols-[1fr_3fr] tw-gap-[10px] md:tw-auto-row-1 xl:tw-grid-cols-[160px_auto]">
      <div
        class="tw-bg-white tw-rounded-[10px] tw-flex tw-items-center tw-justify-center tw-overflow-hidden tw-min-h-[106px] xl:tw-w-[160px] xl:tw-h-[106px]">
        <img :src="item.Logo" class="tw-h-[20vw] md:tw-h-[13vw] xl:tw-h-[106px]" />
      </div>
      <div class="md:tw-flex md:tw-flex-col md:tw-justify-between">
        <div class="md:tw-flex md:tw-flex-col">
          <h3
            class="t14 tw-line-clamp-2 tw-text-ellipsis tw-overflow-hidden tw-mt-[8px] tw-mb-[4px] md:t16 md:tw-font-medium md:tw-line-clamp-none md:tw-h-full md:tw-mt-0 xl:tw-line-clamp-2">
            {{ item.ExhibitionName }}
          </h3>
          <div class="tw-hidden t14 tw-text-neutrals-600 md:tw-block">
            {{ item.Region.RegionName ? item.Region.RegionName + " . " : "" }}
            {{ item.Country.CountryName ? item.Country.CountryName + " . " : "" }}
            {{ item.City.CityName ? item.City.CityName : "" }}
          </div>
        </div>
        <div class="md:tw-mt-[14px] md:tw-flex md:tw-justify-between md:tw-items-center">
          <div class="time te-text-[#ee9546] t12 tw-mt-[8px] md:t16  md:tw-font-medium md:tw-mt-0">
            {{ formatDate(item.StartDate) }}
            ~
            {{ formatDate(item.EndDate) }}
          </div>
          <div class="tw-mt-[14px] tw-text-right md:tw-mt-0 tw-flex ">
            <span class="t14 tw-text-neutrals-500 tw-mr-[10px] tw-flex">
              <v-img class="tw-flex-none" max-width="14" :src="require(`@/assets/svg/u_users-alt.svg`)"></v-img>
              <span class="t14 tw-text-neutrals-500 tw-ml-[6px] md:tw-ml-[10px]">{{item.VisitorCount}}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </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,
    goToExhibition(){
      this.$router.push(this.localePath(`/exhibition/${this.item.ExhibitionID}`));
    }
  },
};
</script>

<style lang="scss" scoped>

</style>