44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
<section class="relative z-50 ml-4">
|
|
<div v-for="({ question, answer }, index) in questions" :key="index" class="mb-16">
|
|
<button
|
|
type="button"
|
|
@click="toggleFAQ(index)"
|
|
class="flex gap-12 mb-5 items-baseline font-bold"
|
|
>
|
|
<UiParagraph as="span" size="600">
|
|
{{ question }}
|
|
</UiParagraph>
|
|
<img
|
|
src="/assets/icon/arrow.svg"
|
|
alt="question"
|
|
class="duration-500"
|
|
:class="activeIndex === index ? 'rotate-90' : 'rotate-0'"
|
|
/>
|
|
</button>
|
|
<Transition name="slide">
|
|
<div v-show="activeIndex === index">
|
|
<UiParagraph size="300">
|
|
{{ answer }}
|
|
</UiParagraph>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import UiParagraph from '~/components/Typography/UiParagraph.vue'
|
|
import questions from './_data/question-answer.json'
|
|
|
|
const activeIndex = ref<null | number>(null)
|
|
|
|
const toggleFAQ = (index: number) => {
|
|
activeIndex.value = activeIndex.value === index ? null : index
|
|
}
|
|
|
|
useHead({
|
|
title: 'Вопрос - ответ | Vino Galante',
|
|
})
|
|
</script>
|