src/components/FAQ.vue - master - itp_practice/itp_frontend

src/components/FAQ.vue
94 строки2 KB
Soupik
improve ui
28 май 2025, 17:27
28 май 2025, 17:278804fe1
<template>
  <section class="faq bg-bg-dark py-24" id="faq">
    <div class="container">
      <h2 class="section-title text-4xl text-center mb-10">{{ title }}</h2>
      <div class="faq__list max-w-3xl mx-auto mb-10">
        <div
            v-for="(item, index) in faqItems"
            :key="index"
            class="accordion mb-4 rounded-lg overflow-hidden bg-bg-card"
            :class="{ 'active': activeIndex === index }"
        >
          <div
              class="accordion__header p-5 flex justify-between items-center cursor-pointer transition-all duration-300 hover:bg-white hover:bg-opacity-5"
              @click="toggleAccordion(index)"
          >
            <span>{{ item.question }}</span>
            <div class="accordion__icon text-2xl transition-all duration-300">{{ activeIndex === index ? '×' : '+' }}</div>
          </div>
          <div
              class="accordion__content px-5 max-h-0 overflow-hidden transition-all duration-300"
              :style="activeIndex === index ? { maxHeight: '1000px', padding: '0 20px 20px' } : { maxHeight: '0', padding: '0 20px' }"
          >
            <div v-html="item.answer"></div>
          </div>
        </div>
      </div>
      <div class="faq__more text-center">
        <a :href="moreLink" class="btn btn--outline">{{ moreText }}</a>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: 'FAQ'
  },
  faqItems: {
    type: Array,
    required: true,
    default: () => []
  },
  moreText: {
    type: String,
    default: 'Смотреть все вопросы'
  },
  moreLink: {
    type: String,
    default: '/faq'
  }
});

const activeIndex = ref(null);

const toggleAccordion = (index) => {
  activeIndex.value = activeIndex.value === index ? null : index;
};
</script>

<style scoped>
.accordion__content {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.accordion__icon {
  transition: transform 0.3s ease;
}

.accordion.active .accordion__icon {
  transform: rotate(45deg);
}

/* Style for HTML content inside answers */
.accordion__content :deep(p) {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.accordion__content :deep(p:last-child) {
  margin-bottom: 0;
}

.accordion__content :deep(em) {
  display: block;
  margin-top: 1rem;
  font-style: italic;
  opacity: 0.8;
}
</style>