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.
104 lines
2.4 KiB
104 lines
2.4 KiB
<template>
|
|
<div class="serviceList">
|
|
<ul class="service_dropdown tw-w-full">
|
|
<li class="tw-mb-[27px]">
|
|
<div :class="[
|
|
'tw-grid tw-grid-cols-[30px_224px] tw-items-center tw-gap-[10px] ',
|
|
'newdrawer_arrow',
|
|
|
|
show ? 'show' : 'hide',
|
|
]" @click="showCategory(serviceIndex)">
|
|
<img v-if="serviceListIcon !== undefined" :src="require(`@/assets/svg/${serviceListIcon}.svg`)" alt=""
|
|
class="tw-mx-auto" />
|
|
<div v-else></div>
|
|
<div :class="[
|
|
'tw-head-body tw-text-neutrals-800',
|
|
show == true ? 'tw-text-primary-1' : '',
|
|
]">
|
|
{{ servicecategory.CategoryName }}
|
|
</div>
|
|
</div>
|
|
<template v-for="(title, index) in servicecategory.SubCategoryList">
|
|
<ul class="tw-pl-[40px] tw-mt-[16px]" v-if="show"
|
|
:key="index">
|
|
<nuxt-link :to="localePath('/service?subcategory=' + title.CategoryID)">
|
|
<li class="tw-head-body tw-mb-[15px] tw-text-neutral-800">
|
|
{{ title.CategoryName }}
|
|
</li>
|
|
</nuxt-link>
|
|
</ul>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
activeIndex: "",
|
|
};
|
|
},
|
|
props: {
|
|
servicecategory: {
|
|
type: Object,
|
|
},
|
|
serviceListIcon: {
|
|
type: String,
|
|
},
|
|
serviceActiveIndex: "",
|
|
serviceIndex: "",
|
|
},
|
|
watch: {
|
|
serviceActiveIndex: {
|
|
handler: function () {
|
|
if (this.serviceActiveIndex == true) {
|
|
this.show = true;
|
|
} else {
|
|
this.show = false;
|
|
}
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
showCategory(data) {
|
|
this.activeIndex = data;
|
|
this.$emit("activeIndex", this.activeIndex);
|
|
this.show = !this.show;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.newdrawer_arrow {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 0;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
background-image: url("~/assets/svg/newdrawer_arrow.svg");
|
|
background-size: 100%;
|
|
background-position: right center;
|
|
background-repeat: no-repeat;
|
|
width: 10px;
|
|
height: 6px;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
&.show {
|
|
&::after {
|
|
background-image: url("~/assets/svg/newDrawer_uparrow.svg");
|
|
}
|
|
}
|
|
}
|
|
</style>
|