Skip to content

Commit 1d4ff6f

Browse files
Arsen-agaArsen-aga
committed
added contacts page
1 parent 966bbd7 commit 1d4ff6f

File tree

4 files changed

+191
-21
lines changed

4 files changed

+191
-21
lines changed

‎assets/img/map.png

208 KB
Loading

‎components/FrontContacts.vue

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<script setup>
2+
import { ref } from "vue";
3+
import Breadcrumbs from "~/components/UI/Breadcrumbs.vue";
4+
import map from "~/assets/img/map.png";
5+
import CallBackBtn from "./UI/CallBackBtn.vue";
6+
7+
const breadcrumbs = ref([
8+
{
9+
id: 1,
10+
name: "Главная",
11+
url: "/",
12+
},
13+
{
14+
id: 2,
15+
name: "Контакты",
16+
url: "/contacts",
17+
},
18+
]);
19+
const title = ref("Контакты");
20+
const subtitle = ref("Звоните, пишите<br> или приезжайте в гости");
21+
const address = ref("Москва, Россия, ул. Красина, 27");
22+
const whatsapp = ref(["+7 495 255 78 77", "https://web.whatsapp.com/"]);
23+
const phone = ref("+7 495 255 78 77");
24+
const mail = ref("hello@pergament.ru");
25+
const socials = ref([
26+
{
27+
title: "behance",
28+
link: "/",
29+
},
30+
{
31+
title: "vk group",
32+
link: "/",
33+
},
34+
]);
35+
</script>
36+
37+
<template>
38+
<section class="front-contacts">
39+
<div class="container">
40+
<Breadcrumbs :breadcrumbs="breadcrumbs" />
41+
<h1 class="front-contacts__title">{{ title }}</h1>
42+
<p class="front-contacts__subtitle" v-html="subtitle"></p>
43+
<img class="front-contacts__map" :src="map" alt="" />
44+
<div class="front-contacts__items">
45+
<div class="front-contacts__item">
46+
<h4 class="front-contacts__item-title">офис</h4>
47+
<div class="front-contacts__item-bottom">
48+
<p class="front-contacts__item-text">{{ address }}</p>
49+
</div>
50+
</div>
51+
<div class="front-contacts__item">
52+
<h4 class="front-contacts__item-title">whatsapp</h4>
53+
<div class="front-contacts__item-bottom">
54+
<NuxtLink
55+
class="front-contacts__item-text"
56+
:to="`tel:${whatsapp[1]}`"
57+
>{{ whatsapp[0] }}</NuxtLink
58+
>
59+
</div>
60+
</div>
61+
<div class="front-contacts__item">
62+
<h4 class="front-contacts__item-title">связаться с нами</h4>
63+
<div class="front-contacts__item-bottom">
64+
<NuxtLink class="front-contacts__item-text" :to="`mail:${mail}`">{{
65+
mail
66+
}}</NuxtLink>
67+
<NuxtLink class="front-contacts__item-text" :to="`tel:${phone}`">{{
68+
phone
69+
}}</NuxtLink>
70+
</div>
71+
</div>
72+
<div class="front-contacts__item">
73+
<h4 class="front-contacts__item-title">соцсети</h4>
74+
<div class="front-contacts__item-bottom">
75+
<NuxtLink
76+
class="front-contacts__item-text front-contacts__item-soc"
77+
v-for="soc in socials"
78+
:key="soc.title"
79+
:to="soc.link"
80+
>{{ soc.title }}</NuxtLink
81+
>
82+
</div>
83+
</div>
84+
</div>
85+
<div class="front-contacts__bottom">
86+
<p class="front-contacts__bottom-text">присоединиться к команде</p>
87+
<CallBackBtn class="front-contacts__bottom-btn" color="light"
88+
>Отправить резюме</CallBackBtn
89+
>
90+
</div>
91+
</div>
92+
</section>
93+
</template>
94+
95+
<style lang="scss" scoped>
96+
.front-contacts {
97+
margin-top: -600px;
98+
margin-bottom: 100px;
99+
100+
&__breadcrumbs {
101+
margin-bottom: 5px;
102+
}
103+
104+
&__title {
105+
font-family: "Onest";
106+
font-weight: 700;
107+
font-size: 48px;
108+
line-height: 120%;
109+
letter-spacing: -0.05em;
110+
text-transform: uppercase;
111+
color: #ffffff;
112+
margin-bottom: 72px;
113+
}
114+
115+
&__map {
116+
height: 389px;
117+
margin-bottom: 56px;
118+
}
119+
120+
&__items {
121+
display: grid;
122+
grid-template-columns: repeat(2, 1fr);
123+
gap: 50px 72px;
124+
max-width: 924px;
125+
margin-bottom: 50px;
126+
}
127+
128+
&__item {
129+
padding-bottom: 15px;
130+
border-bottom: 1px solid #000000;
131+
}
132+
133+
&__bottom-text,
134+
&__item-title {
135+
font-family: "Onest";
136+
font-weight: 400;
137+
font-size: 16px;
138+
line-height: calc(20 / 16 * 100%);
139+
color: #8f8f8f;
140+
margin-bottom: 10px;
141+
}
142+
143+
&__item-bottom{
144+
display: grid;
145+
gap: 10px;
146+
}
147+
148+
&__item-text {
149+
font-family: "Onest";
150+
font-weight: 600;
151+
font-size: 22px;
152+
line-height: calc(28/22*100%);
153+
color: #333333;
154+
}
155+
156+
&__item-soc{
157+
text-decoration: underline;
158+
text-underline-offset: 3px;
159+
}
160+
161+
}
162+
163+
</style>

‎pages/contacts.vue

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
<script setup></script>
1+
<script setup>
2+
import FrontContacts from "~/components/FrontContacts.vue";
3+
import Sidebar from "~/components/Sidebar.vue";
4+
</script>
25
<template>
3-
<div></div>
4-
</template>
6+
<div class="container-big">
7+
<div class="section__main">
8+
<Sidebar class="sidebar" />
9+
<div>
10+
<FrontContacts/>
11+
</div>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<style lang="scss" scoped>
17+
</style>

‎pages/services.vue

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,33 @@
11
<script setup>
2-
import CallbackBlock from '~/components/CallBackBlock.vue';
3-
import FrontServices from '~/components/FrontServices.vue';
4-
import ServicesAll from '~/components/ServicesAll.vue';
5-
import Sidebar from '~/components/Sidebar.vue';
2+
import CallbackBlock from "~/components/CallBackBlock.vue";
3+
import FrontServices from "~/components/FrontServices.vue";
4+
import ServicesAll from "~/components/ServicesAll.vue";
5+
import Sidebar from "~/components/Sidebar.vue";
66
77
// Функция для изменения фона
8-
const setBodyBackground = (size = '100% 559px') => {
9-
document.body.style.backgroundSize = size;
8+
const setBodyBackground = (size = "100% 559px") => {
9+
document.body.style.backgroundSize = size;
1010
};
1111
1212
onMounted(() => {
13-
setBodyBackground('100% 350px')
13+
setBodyBackground("100% 350px");
1414
});
1515
1616
onBeforeUnmount(() => {
17-
setBodyBackground();
17+
setBodyBackground();
1818
});
19-
2019
</script>
2120
<template>
2221
<div class="container-big">
2322
<div class="section__main">
2423
<Sidebar class="sidebar" />
2524
<div>
26-
<FrontServices/>
27-
<ServicesAll/>
28-
<CallbackBlock link="/"/>
25+
<FrontServices />
26+
<ServicesAll />
27+
<CallbackBlock link="/" />
2928
</div>
3029
</div>
3130
</div>
3231
</template>
3332

34-
<style lang="scss" scoped>
35-
body{
36-
background-size: 100% 350px;
37-
}
38-
</style>
39-
33+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)