87 lines
2.9 KiB
Vue
87 lines
2.9 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col gap-4 rounded-3xl"
|
|
:class="{
|
|
'border-4 border-white min-h-20.3': color === 'transparent' || color === 'number',
|
|
'shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out min-h-21.8 min-w-80 max-w-80': color !== 'transparent',
|
|
'bg-consumo-base hover:bg-linear-to-t hover:from-consumo-base hover:to-consumo-extra-light': color === 'consumo',
|
|
'bg-iguales-base hover:bg-linear-to-t hover:from-iguales-base hover:to-iguales-extra-light': color === 'iguales',
|
|
'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
|
|
'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
|
|
'bg-foro-base hover:bg-linear-to-t hover:from-foro-base hover:to-foro-extra-light': color === 'foro',
|
|
'bg-ods-base hover:bg-linear-to-t hover:from-ods-base hover:to-ods-extra-light': color === 'ods',
|
|
}"
|
|
>
|
|
<NuxtLink v-if="link" :to="`/${langcode}/${link}`" class="p-8">
|
|
<div class="h-10.2 w-full">
|
|
<img
|
|
v-if="image"
|
|
:src="`/img/${image.src}`"
|
|
:alt="image.alt"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
<!-- <img v-else src="" alt="imagen-error"> -->
|
|
<!-- TODO: Add a fallback image -->
|
|
</div>
|
|
<div class="flex flex-col gap-4 items-center">
|
|
<p class="text-5.5 font-semibold uppercase">{{ title }}</p>
|
|
<p class="text-center text-base" v-html="description"></p>
|
|
</div>
|
|
</NuxtLink>
|
|
<div v-if="!link" class="flex flex-col gap-4 p-8 items-center w-full">
|
|
<div v-if="image" class="h-25 w-25">
|
|
<img
|
|
:src="`/img/${image.src}`"
|
|
:alt="image.alt"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
<!-- <img v-else src="" alt="imagen-error"> -->
|
|
<!-- TODO: Add a fallback image -->
|
|
</div>
|
|
<div v-if="number" class="h-15 w-15">
|
|
<h3 class="w-full h-full rounded-full border font-bold flex items-center justify-center">
|
|
{{ number }}</h3>
|
|
</div>
|
|
<div class="flex flex-col gap-4 items-center text-center">
|
|
<p class="text-5.5 font-semibold uppercase">{{ title }}</p>
|
|
<p class="text-center text-base" v-html="description"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
color: {
|
|
type: String,
|
|
default: "consumo",
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
image: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
number: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
link: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
},
|
|
computed: {
|
|
langcode() {
|
|
return this.$store.getters.langcode;
|
|
},
|
|
},
|
|
}
|
|
</script> |