52 lines
1.0 KiB
Vue
52 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div class="campaign">
|
||
|
|
<a
|
||
|
|
:href="campaign.url"
|
||
|
|
target="_blank"
|
||
|
|
class="campaign-link"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
v-if="campaign.banner"
|
||
|
|
:src="getBanner(campaign)"
|
||
|
|
class="campaign-banner"
|
||
|
|
>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
campaign: {
|
||
|
|
type: Object,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log(props.campaign?.banner);
|
||
|
|
|
||
|
|
function getBanner(campaign) {
|
||
|
|
if (campaign.banner.entity.type === 'network' || !campaign.banner.entity.parent) {
|
||
|
|
return `/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network') {
|
||
|
|
return `/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.campaign {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.campaign-banner {
|
||
|
|
max-height: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|