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.
116 lines
2.7 KiB
116 lines
2.7 KiB
<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>
|