dlearn-front/pages/frequently-questions/index.vue

<template>
  <div class="flexBox overflow-x-hidden">
    <div class="relative flexBox round">
      <img
        src="/public/images/questions.jpg"
        alt=""
        class="relative ask object-cover mt-[7.4vw]"
      />
      <h1 class="absolute text-white mt-[10vw] thin text-[2.706vw] font-bold">
        سؤالات متداول
      </h1>
      <svg
        class="absolute w-[1.719vw] h-[6.979vw] left-[38vw] mt-[30vw]"
        viewBox="0 0 33 134"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M33 -2.88495e-06C20.6662 5.8727 4.22709 37.5761 1.23394 60.1708C-2.00567 84.6276 0.711141 98.6363 14.4574 127.343C12.5088 126.917 10.9951 126.517 9.45562 126.27C7.77956 126.001 6.0776 125.741 4.39053 125.763C3.8651 125.77 3.00726 126.661 2.93201 127.228C2.86018 127.77 3.47837 128.766 4.0187 128.963C8.69395 130.663 13.4077 132.265 18.1381 133.815C19.7168 134.333 20.886 133.766 21.3134 132.069C22.8841 125.831 24.5361 119.612 25.9711 113.344C26.3096 111.867 25.9206 110.228 25.8514 108.229C21.7095 109.79 22.1803 113.239 21.07 115.695C19.8962 118.292 19.1895 121.093 18.0745 124.412C12.6278 116.45 9.19096 108.418 7.02976 99.9164C-0.909448 68.685 5.63275 40.0232 23.373 13.4706C25.6829 10.0144 28.3993 6.82148 30.8833 3.47536C31.5548 2.57061 32.0643 1.55003 33 -2.88495e-06Z"
          fill="white"
        />
      </svg>
    </div>
  </div>
  <div
    class="text-[#878787] mt-[10vw] mb-[10vw] flex flex-col mx-auto justify-center w-[80vw]"
  >
    <div v-for="(item, index) in data" :key="item.id">
      <button
        class="rounded-t-[1.302vw] !px-[3vw] !pt-[1.1vw] mt-[0.5vw] accordion flex justify-between items-center"
      >
        <div class="flexBox gap-[2vw]">
          <p class="text-[1.901vw] font-bold">
            {{ index < 9 ? "0" + (index + 1) : index + 1 }}
          </p>
          <h2 class="text-[0.938vw] font-semibold thin">
            {{ item.title }}
          </h2>
        </div>
        <svg
          class="h-[2.604vw] w-[2.604vw] transition"
          viewBox="0 0 50 51"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <rect y="0.5" width="50" height="50" rx="25" fill="#E5E5E5" />
          <path
            id="center"
            d="M17.6665 25.5H32.3332"
            stroke="#878787"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            id="around"
            d="M25 32.8334V18.1667"
            stroke="#878787"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <div class="text-[#878787] content !bg-[#E0FEFF] rounded-b-[1.302vw]">
        <p class="px-[4vw] pb-[3vw]">
          {{ item.description }}
        </p>
      </div>
      <div class="border-b py-[0.2vw]"></div>
    </div>
  </div>
</template>


<script setup>
const { data } = await useFetch("/api/faq");
onMounted(() => {
  
  var acc = document.getElementsByClassName("accordion");
  
  var i;
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function () {
        this.classList.toggle("active");
  
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + 50 + "px";
        }
      });
    }
})

</script>


<style scoped>
.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active {
  background-color: #e0feff;
}
.active svg {
  transform: rotate(45deg);
  transition: 0.2s;
}
.active svg path {
  stroke: #e0feff;
}
.active rect {
  fill: #0d3f40;
}
.active p {
  color: #0d3f40;
}
.active h2 {
  color: #383e43;
}
/*.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
  }*/

.content {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.ask {
  filter: brightness(50%);
  border-radius: 0 0 200% 200% / 80%;
}
</style>