fixed faq bugs
This commit is contained in:
HAM!DREZA
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flexBox overflow-x-hidden !max-w-[100vw]">
|
||||
<div class="flexBox overflow-x-hidden">
|
||||
<div class="relative flexBox round">
|
||||
<img
|
||||
src="/public/images/questions.jpg"
|
||||
@@ -22,17 +22,22 @@
|
||||
</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="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 ">01</p>
|
||||
<h2 class="text-[0.938vw] font-semibold thin">
|
||||
آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
|
||||
</h2>
|
||||
</div>
|
||||
<svg
|
||||
<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"
|
||||
@@ -40,7 +45,7 @@
|
||||
>
|
||||
<rect y="0.5" width="50" height="50" rx="25" fill="#E5E5E5" />
|
||||
<path
|
||||
id="center"
|
||||
id="center"
|
||||
d="M17.6665 25.5H32.3332"
|
||||
stroke="#878787"
|
||||
stroke-width="2.5"
|
||||
@@ -48,7 +53,7 @@
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
id="around"
|
||||
id="around"
|
||||
d="M25 32.8334V18.1667"
|
||||
stroke="#878787"
|
||||
stroke-width="2.5"
|
||||
@@ -56,150 +61,87 @@
|
||||
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>
|
||||
</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>
|
||||
|
||||
<button class="accordion">متن تست 3</button>
|
||||
<div class="content">
|
||||
<p>لوریپسوم...</p>
|
||||
</div> -->
|
||||
|
||||
|
||||
</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";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
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 {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.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%;
|
||||
border-radius: 0 0 200% 200% / 80%;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user