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

<template>
  <div class="flexBox overflow-x-hidden !max-w-[100vw]">
    <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]">


    <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 ">01</p>
            <h2 class="text-[0.938vw] font-semibold thin">
                آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
              </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 overflow-x-hidden !max-w-[100vw] !bg-[#E0FEFF] rounded-b-[1.302vw]">
 <p class="px-[4vw] pb-[3vw]">
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
 </p>
</div>
<div class="border-b py-[0.2vw]"></div>
    

<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 ">01</p>
        <h2 class="text-[0.938vw] font-semibold thin">
            آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
          </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 overflow-x-hidden !max-w-[100vw] !bg-[#E0FEFF] rounded-b-[1.302vw]">
<p class="px-[4vw] pb-[3vw]">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
</p>
</div>
<div class="border-b py-[0.2vw]"></div>




    <!-- <button class="accordion ">متن تست 2</button>
    <div class="content">
      <p>لوریپسوم...</p>
    </div>
    
    <button class="accordion">متن تست 3</button>
    <div class="content">
      <p>لوریپسوم...</p>
    </div>  -->


</div>
    

  
</template>


<script setup>
if (process.client) {
    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 {
max-width: 100vw !important;
    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 {
    max-width: 100vw !important;
    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>