dev-audioprocessing/pages/setting/faq.vue

112 lines
4.6 KiB
Vue
Executable File

<template>
<div>
<div class="row justify-content-center m-0 p-0">
<div class="col-12 col-sm-8 m-0 p-0">
<div class="row">
<div class="col-12">
<div class="me-4">
<h4 class="fw-bold text-center me-3 pt-5">{{ t("FAQ") }}</h4>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{{ t("What are Active Noise Cancelling Headphones?") }}
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{ t("Active Noise Canceling (ANC) is a technology that suppresses unwanted noise using coumter sound. Make sure check the description of your headphomes to find out if they are equipped with ANC function. Make sure that the function is activated.") }} </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
{{ t("Question") }} 01
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{ t("Question") }} 01
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
{{ t("Question") }} 02
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{ t("") }}This is the third item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
{{ t("Question") }} 03
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{ t("Question") }}This is the Question 03.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseThree">
{{ t("Question") }}Question 04
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{ t("Question") }}This is the Question 04.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'Subscription',
setup(){
const { t } = useI18n()
const localePath = useLocalePath()
return {t,localePath}
},
}
</script>
<style scoped>
.accordion-item {
border: none;
}
.accordion-button{
padding-left: 0;
padding-right: 0;
}
.accordion-button:not(.collapsed) {
color: black;
box-shadow: none;
}
.accordion-button:focus {
z-index: 3;
border:none;
outline: 0;
box-shadow: none;
}
.accordion-button:not(.collapsed) {
background-color: white;
box-shadow: none;
}
</style>