You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
2.4 KiB
69 lines
2.4 KiB
<template>
|
|
<div class="tw-bg-neutrals-0 tw-rounded-[10px] tw-px-[6px] tw-py-[8px] md:tw-px-[11px] md:tw-py-[10px]">
|
|
<nuxt-link :to="localePath(`/exhibition/${item.id}`)"
|
|
class="remove-underline md:tw-grid md:tw-grid-cols-[1fr_3fr] md:tw-gap-[20px] 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-h-[32px] 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 xl:tw-h-[42px]">
|
|
{{ item.name }}
|
|
</h3>
|
|
<div class="tw-hidden t14 tw-text-neutrals-600 md:tw-block">
|
|
{{ item.region.name ? item.region.name + " . " : "" }}
|
|
{{ item.country.name ? item.country.name + " . " : "" }}
|
|
{{ item.city.name ? item.city.name : "" }}
|
|
</div>
|
|
</div>
|
|
<div class="md:tw-mt-[14px] md:tw-flex md:tw-justify-between md:tw-items-center">
|
|
<div class="time t12 tw-mt-[8px] md:t16 md:tw-font-medium md:tw-mt-0">
|
|
{{ formatDate(item.startdate) }}
|
|
~
|
|
{{ formatDate(item.enddate) }}
|
|
</div>
|
|
<div v-if="days !== 0" class="tw-mt-[14px] tw-text-right md:tw-mt-0">
|
|
<span class="t14 tw-text-neutrals-500 tw-mr-[10px]">{{ $t('Coming soon in') }}</span>
|
|
<span class="t20 tw-font-medium tw-text-error-default md:t24 ">{{ days
|
|
}}<span class="t14 tw-text-neutrals-500 tw-ml-[6px] md:tw-ml-[10px]">{{
|
|
$t("day")
|
|
}}</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
</style>
|