You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
2.9 KiB
135 lines
2.9 KiB
<template>
|
|
<div class="faq tw-z-[9999]">
|
|
<div
|
|
v-show="index <= 2 || seeMore"
|
|
class="tw-mb-[16px] md:tw-mb-[20px] tw-head-body tw-font-normal"
|
|
v-for="(item, index) in faq"
|
|
:key="index"
|
|
>
|
|
<faqItem :item="item"></faqItem>
|
|
</div>
|
|
<button
|
|
v-show="length !== undefined && length > 3"
|
|
:class="[
|
|
'seeMore tw-transition tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3 xl:hover:tw-bg-transparent xl:tw-border-none',
|
|
seeMore ? 'open' : '',
|
|
]"
|
|
@click="opendFaq"
|
|
>
|
|
{{ $t(seeMoreText) }}
|
|
</button>
|
|
<faqModal :faq="faq" class="tw-z-[9999]"></faqModal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import faqModal from "@/components/service/contentModal/faqModal.vue";
|
|
import faqItem from "@/components/service/content/faqItem.vue";
|
|
export default {
|
|
props: {
|
|
faq: {
|
|
type: Array,
|
|
},
|
|
},
|
|
components: {
|
|
faqModal,
|
|
faqItem,
|
|
},
|
|
data() {
|
|
return {
|
|
seeMore: false,
|
|
window: {
|
|
width: 0,
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
if (process.browser) {
|
|
window.addEventListener("resize", this.handleResize);
|
|
}
|
|
this.handleResize();
|
|
},
|
|
computed: {
|
|
seeMoreText() {
|
|
if (this.seeMore == false) {
|
|
return "See more";
|
|
} else {
|
|
return "See less";
|
|
}
|
|
},
|
|
length() {
|
|
if (this.faq) {
|
|
return this.faq.length;
|
|
} else {
|
|
return undefined;
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
handleResize() {
|
|
if (process.browser) {
|
|
this.window.width = window.innerWidth;
|
|
}
|
|
},
|
|
opendFaq() {
|
|
if (this.window.width >= 1366) {
|
|
this.seeMore = !this.seeMore;
|
|
} else {
|
|
this.$modal.show("faq");
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.seeMore {
|
|
&-hide {
|
|
position: relative;
|
|
max-height: 295px;
|
|
overflow: hidden;
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background: url("~/assets/img/gradient_white.png") repeat-x left bottom;
|
|
width: 100%;
|
|
height: 130px;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
transition: bottom 0.5s;
|
|
}
|
|
}
|
|
&-show {
|
|
position: relative;
|
|
max-height: 100%;
|
|
overflow: initial;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
@media screen and (min-width: 1366px) {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
&::after {
|
|
content: "";
|
|
display: inline-block;
|
|
position: relative;
|
|
background-image: url("~/assets/svg/arrow-down-primary.svg");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
width: 9px;
|
|
height: 6px;
|
|
margin-left: 16px;
|
|
transition: all 0.2s linear;
|
|
}
|
|
&.open {
|
|
&::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|