46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<template>
|
|
<slide-template title="FAQ__title">
|
|
<div
|
|
class="q-pa-md w100 flex justify-center"
|
|
style="max-width: 800px"
|
|
>
|
|
<q-list separator>
|
|
<q-expansion-item
|
|
group="FAQgroup"
|
|
v-for="item in 5"
|
|
:key="item"
|
|
switch-toggle-side
|
|
header-class="text-h5"
|
|
expand-icon="mdi-plus"
|
|
expanded-icon="mdi-close"
|
|
>
|
|
<template #header="{ expanded }">
|
|
<div :class="expanded ? 'text-brand' : ''" class="w100">
|
|
{{ $t('faq__question_' + item) }}
|
|
</div>
|
|
</template>
|
|
<q-card>
|
|
<q-card-section class="text-h6">
|
|
{{ $t('faq__answer_' + item) }}
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-expansion-item>
|
|
</q-list>
|
|
</div>
|
|
</slide-template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SlideTemplate from 'components/SlideTemplate.vue';
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.custom-expansion.q-expansion-item--collapsed :deep(.q-item__section--side .q-icon) {
|
|
transition: transform 0.3s;
|
|
}
|
|
.custom-expansion.q-expansion-item--expanded :deep(.q-item__section--side .q-icon) {
|
|
transform: rotate(180deg);
|
|
}
|
|
</style>
|