43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<template>
|
|
<div class="flex md:flex-row flex-col text-black">
|
|
<div class="flex flex-col justify-between cursor-pointer w-[40%]" style="min-width: 40%;">
|
|
<div
|
|
v-for="(el, index) in props.tabs"
|
|
:key="index"
|
|
class="w-full text-left border-b border-gray-400 md:text-[18px] md:last:border-b-0 md:h-full flex items-center"
|
|
style="padding: 32px 24px;"
|
|
@click="
|
|
showContent(index);
|
|
useRipple($event, true);
|
|
"
|
|
>
|
|
{{ el.header }}
|
|
</div>
|
|
</div>
|
|
<div v-show="tabs[indexItem]" class="md:flex-1 h-auto" style="padding: 20px">
|
|
<div class="flex flex-col items-start h-full justify-center p-6">
|
|
<!-- Your image -->
|
|
<h1 class="font-bold text-2xl md:text-[32px]">
|
|
{{ tabs[indexItem].content.title }}
|
|
</h1>
|
|
<p class="text-[16px] md:text-[18px]">
|
|
{{ tabs[indexItem].content.info }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const indexItem = ref(0);
|
|
|
|
function showContent(index) {
|
|
indexItem.value = index;
|
|
}
|
|
|
|
const props = defineProps({
|
|
tabs: Object,
|
|
});
|
|
</script>
|