61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<template>
|
|
<section
|
|
:id="id"
|
|
class="flex p-8 md:p-12 mb-8 rounded-3xl h-69">
|
|
<div v-if="shapes.shape_1" class="h-38 w-1/4 flex items-start justify-center">
|
|
<img
|
|
:src="`/img/${shapes.shape_1}`"
|
|
alt="hero background shape right"
|
|
class="h-full w-full object-contain" >
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center justify-center gap-4 md:gap-8 w-full">
|
|
<h2
|
|
class="font-semibold italic"
|
|
:class="{
|
|
'text-consumo-dark': textColor === 'consumo',
|
|
'text-iguales-dark': textColor === 'iguales',
|
|
'text-aula-dark': textColor === 'aula',
|
|
'text-certifica-dark': textColor === 'certifica',
|
|
'text-foro-dark': textColor === 'foro',
|
|
'text-ods-dark': textColor === 'ods',
|
|
}" v-html="content">
|
|
</h2>
|
|
</div>
|
|
|
|
<div v-if="shapes.shape_2" class="h-38 w-1/4 mt-auto">
|
|
<img
|
|
:src="`/img/${shapes.shape_2}`"
|
|
alt="hero background shape right"
|
|
class="h-full w-full object-contain" >
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
textColor: {
|
|
type: String,
|
|
default: "consumo",
|
|
},
|
|
shapes: {
|
|
type: Object,
|
|
default: () => ({
|
|
shape_1: "",
|
|
shape_2: "",
|
|
}),
|
|
},
|
|
},
|
|
|
|
};
|
|
</script> |