Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<template>
<div>
<HeaderComponent current-page="services"></HeaderComponent>
<section class="relative">
<h1 class="text-black text-[2rem] mt-[87px] ml-[7%]">
{{ curService.name }}
<FeatureSvg
class="inline absolute -top-[27px] -translate-x-[3px] text-blue gap-x-10"
></FeatureSvg>
</h1>
<div class="flex flex-col-reverse sm:flex-row justify-center mx-[7%] gap-10 mt-[43px]">
<div class="w-full sm:w-[80%] mt-7">
<article
v-for="(category, index) in curService.categories"
:key="index"
class="py-7 pl-8 pr-7 mt-4 first:mt-0 shadow-14x28 text-dark"
>
<h3
@click="toggleCategory(category)"
class="cursor-pointer font-medium text-[1.25rem] hover:text-blue-text leading-[1.813rem] flex justify-between"
>
<span>{{ category.name }}</span>
<UpArrow v-if="category.expanded"></UpArrow>
<DownArrow v-else></DownArrow>
</h3>
<div v-if="category.expanded">
<BreakLineSvg
class="mt-[14px] w-full text-gray-bg"
></BreakLineSvg>
<p class="mt-4 leading-[1.625rem]">
{{ category.content }}
</p>
</div>
</article>
</div>
<div
class="sm:w-[305px] w-full py-5 px-4 text-black shadow-1x28 rounded-[11px] h-max"
>
<h2 class="font-gilroy text-[2rem] leading-[2.375rem] text-center">
Our services
</h2>
<nav class="mt-8">
<ul>
<li
v-for="(service, index) in services"
:key="index"
class="px-4 py-[10px] mt-[11px] first:mt-0 leading-[1.32rem] rounded hover:bg-blue hover:text-white transition-colors"
:class="service === curService ? 'bg-blue text-white' : ''"
@click="selectService(service)"
>
<button>
<img
class="inline mr-[10px] w-5 h-5"
:src="`/img/services/${service.image}`"
alt=""
/>
{{ service.name }}
</button>
</li>
</ul>
</nav>
</div>
</div>
</section>
<footer class="text-blue-line mt-[70px] mb-[21px] text-smleading-4 text-center">
Terms of Service
<span class="text-black font-gilroy font-normal">and</span> Privacy
Policy.
</footer>
</div>
</template>
<script>
import HeaderComponent from "../components/HeaderComponent.vue";
import FeatureSvg from "../components/svg/FeatureSvg.vue";
import DownArrow from "../components/svg/DownArrow.vue";
import UpArrow from "../components/svg/UpArrow.vue";
import BreakLineSvg from "../components/svg/BreakLineSvg.vue";
import ServicesMixin from "../components/mixins/ServicesMixin.vue";
export default {
name: "ServicePage",
data() {
return {
curService: {},
};
},
mounted() {
if (this.$route.query.service) {
this.services.forEach((service) => {
if (service.service === this.$route.query.service) {
this.curService = service;
this.$set(service.categories[parseInt(this.$route.query.category)], "expanded", true);
}
});
}
},
methods: {
toggleCategory(category) {
if (category.expanded) {
this.$set(category, "expanded", false);
} else {
this.$set(category, "expanded", true);
}
},
selectService(service){
this.curService = service;
}
},
components: { HeaderComponent, FeatureSvg, UpArrow, DownArrow, BreakLineSvg },
mixins: [ServicesMixin],
};
</script>