86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
defineProps({
|
|
faq: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const open = ref(false);
|
|
|
|
const toggle = () => {
|
|
open.value = !open.value;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card-faq">
|
|
<div class="question-box" @click="toggle">
|
|
<h3 class="question">{{ faq.question }}</h3>
|
|
<i v-if="!open" class="fa-solid fa-chevron-down icon-indicator"></i>
|
|
<i v-else class="fa-solid fa-chevron-up icon-indicator"></i>
|
|
</div>
|
|
<div v-if="open">
|
|
<p
|
|
v-if="faq.answer"
|
|
class="answer" v-html="faq.answer"></p>
|
|
<ol>
|
|
<li class="step" v-for="step in faq.steps" v-html="step"></li>
|
|
</ol>
|
|
<p
|
|
class="asnwer"
|
|
v-if="faq.notes"
|
|
>
|
|
{{ faq.notes }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card-faq {
|
|
width: 100%;
|
|
padding: 12px 20px;
|
|
background-color: white;
|
|
/* background-color: rgb(184, 236, 234); */
|
|
margin-bottom: 15px;
|
|
filter: drop-shadow(0px 4px 4px rgba(0, 255, 255,0.3));
|
|
border-radius: 13px;
|
|
}
|
|
.question-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card-faq:hover {
|
|
background-color: aqua;
|
|
}
|
|
|
|
.icon-indicator {
|
|
font-size: 20px;
|
|
color: #FBBA33;
|
|
}
|
|
.question {
|
|
font-size: 1.3rem;
|
|
font-weight: 500;
|
|
color: #323030;
|
|
}
|
|
|
|
.answer {
|
|
margin-top: 1rem;
|
|
font-size: 1.1rem;
|
|
font-weight: normal;
|
|
color: #323030;
|
|
}
|
|
.step {
|
|
margin-top: 0.5rem;
|
|
font-size: 1.1rem;
|
|
font-weight: normal;
|
|
color: #323030;
|
|
}
|
|
</style> |