LogoCard.vue 1.33 KiB
<template>
<v-card
:max-width="maxWidth || 400"
:min-height="minHeight || 245"
:class="!logoCardUrl ? 'ma-4 hvr-no-grow' : 'hvr-grow ma-4'"
class="card-style"
v-on:click="navigateTo"
>
<div v-if="logoSource" class="mx-auto mt-4 pb-2">
<v-img
:src="logoSource"
class="mx-auto ma-1"
:width="logoMaxWidth || 125"
/>
</div>
<h4 class="subhead mt-2 px-2 w-100">{{ logoCardText }}</h4>
<v-card-actions v-if="!logoCardUrl">
<span class="mx-auto">Coming Soon</span>
</v-card-actions>
</v-card>
</template>
<script>
export default {
name: "LogoCard",
props: {
maxWidth: String,
minHeight: String,
logoSource: String,
logoMaxWidth: Number,
logoCardText: String,
logoCardLink: String,
logoCardUrl: String,
logoCardExternalUrl: String,
logoCardUrlExternalTarget: String,
},
methods: {
navigateTo() {
if (this.logoCardUrl) {
this.$router.push({ path: this.logoCardUrl });
} else if (this.logoCardExternalUrl) {
window.open(
this.logoCardExternalUrl,
this.logoCardExternalUrlTarget || ""
);
}
},
},
};
</script>
<style lang="scss" scoped>
.hvr-no-grow {
display: inline-block;
vertical-align: middle;
cursor: not-allowed;
}
.card-style {
max-width: 400px;
}
</style>