98 lines
2.3 KiB
Vue
98 lines
2.3 KiB
Vue
<script setup>
|
|
import moment from 'moment-timezone';
|
|
import Modal from '../blocks/Modal.vue';
|
|
import { mainStore } from '../../stores/MainStore.vue';
|
|
|
|
|
|
const MainStore = mainStore();
|
|
|
|
defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
index: {
|
|
type: Number,
|
|
require: true
|
|
},
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="item.promo_type === 'Ja'" class="events p-5 m-2 max-w-lg art-text" :class="item.promo_type">
|
|
<a :href="item.target_link">
|
|
<h2 class="text-lg pb-2">
|
|
{{ item.title }}
|
|
</h2>
|
|
</a>
|
|
<div class="p-5 font-bold underline">
|
|
<a :href="item.target_link">{{ item.organization.name }}</a>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="item.promo_type === ''" class="events p-5 m-2 max-w-lg" :class="item.promo_type">
|
|
<a href="#!"
|
|
@click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
|
|
>
|
|
<h2 class="text-2xl pb-2 underline ad-headline">
|
|
{{ item.title }}
|
|
</h2>
|
|
</a>
|
|
<div class="p-5">
|
|
{{ item.short_text }}
|
|
</div>
|
|
</div>
|
|
<div v-else class="events p-5 m-2 max-w-lg" :class="item.promo_type">
|
|
<a :href="item.target_link">
|
|
<h2 class="text-2xl pb-2 underline ad-headline">
|
|
{{ item.title }}
|
|
</h2>
|
|
</a>
|
|
<div class="p-5">
|
|
{{ item.short_text }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.events {
|
|
border: .1em solid #666;
|
|
border-radius: 25px;
|
|
min-width: 325px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.Ja, .Su, .An, .Su {
|
|
background-color: hsla(202, 100%, 37%, 0.1);
|
|
}
|
|
|
|
.Sp, .Ma, .Ar {
|
|
background-color: hsla(160, 100%, 37%, .1);
|
|
}
|
|
|
|
.Jo, .Re, .Fo, .Ev {
|
|
background-color: hsla(0, 100%, 59%, 0.1);
|
|
}
|
|
|
|
|
|
@media (min-width: 800px) and (max-width:1023px) {
|
|
.events {
|
|
min-width: 300px;
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) and (max-width: 1249) {
|
|
.events {
|
|
min-width: 300px;
|
|
max-width: 400px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1250px) {
|
|
.events {
|
|
min-width: 325px;
|
|
max-width: 475px;
|
|
}
|
|
}
|
|
</style> |