Skip to content

Commit b5f7945

Browse files
Linky-jsLinky-js
authored
Merge pull request #4 from Linky-js/arsen
added projects page
2 parents 61e36e4 + 6891089 commit b5f7945

File tree

7 files changed

+478
-246
lines changed

7 files changed

+478
-246
lines changed

‎components/FrontProject.vue

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<script setup>
2+
import { ref } from "vue";
3+
import Breadcrumbs from "~/components/UI/Breadcrumbs.vue";
4+
import ProjectItems from "~/components/ProjectItems.vue";
5+
6+
const breadcrumbs = ref([
7+
{
8+
id: 1,
9+
name: "Главная",
10+
url: "/",
11+
},
12+
{
13+
id: 2,
14+
name: "Проекты",
15+
url: "/projects",
16+
},
17+
]);
18+
const title = ref("Проекты");
19+
const tabs = ref([
20+
{
21+
id: 1,
22+
name: "Все проекты",
23+
},
24+
{
25+
id: 2,
26+
name: "Выставки",
27+
},
28+
{
29+
id: 3,
30+
name: "Дизайн",
31+
},
32+
{
33+
id: 4,
34+
name: "Контент",
35+
},
36+
{
37+
id: 5,
38+
name: "Застройка",
39+
},
40+
{
41+
id: 6,
42+
name: "Логотип",
43+
},
44+
]);
45+
const tabActive = ref(0);
46+
</script>
47+
48+
<template>
49+
<section class="front-project">
50+
<div class="container">
51+
<Breadcrumbs
52+
class="front-project__breadcrumbs"
53+
:breadcrumbs="breadcrumbs"
54+
/>
55+
<h1 class="front-project__title">{{ title }}</h1>
56+
<div class="front-project__inner">
57+
<div class="front-project__tabs">
58+
<div
59+
class="front-project__tab"
60+
v-for="(tab, index) in tabs"
61+
:key="tab.id"
62+
>
63+
<div
64+
class="front-project__tab-btn"
65+
@click="tabActive = index"
66+
:class="[
67+
{
68+
active: index === tabActive,
69+
},
70+
]"
71+
>
72+
{{ tab.name }}
73+
74+
<div
75+
class="front-project__tab-line"
76+
></div>
77+
</div>
78+
</div>
79+
</div>
80+
<ProjectItems/>
81+
</div>
82+
</div>
83+
</section>
84+
</template>
85+
86+
<style lang="scss" scoped>
87+
.front-project {
88+
margin-top: -550px;
89+
90+
&__breadcrumbs {
91+
margin-bottom: 5px;
92+
}
93+
94+
&__title {
95+
font-family: "Onest";
96+
font-weight: 700;
97+
font-size: 48px;
98+
line-height: 120%;
99+
letter-spacing: -0.05em;
100+
text-transform: uppercase;
101+
color: #ffffff;
102+
margin-bottom: 53px;
103+
}
104+
105+
&__tabs {
106+
display: flex;
107+
gap: 24px;
108+
margin-bottom: 68px;
109+
}
110+
111+
&__tab-btn {
112+
font-family: "Onest";
113+
font-weight: 500;
114+
font-size: 14px;
115+
line-height: calc(18 / 14 * 100%);
116+
color: #645e8f;
117+
position: relative;
118+
119+
&.active {
120+
color: #ffffff;
121+
.front-project__tab-line{
122+
width: 100%;
123+
}
124+
}
125+
}
126+
&__tab-line {
127+
position: absolute;
128+
display: block;
129+
bottom: -6px;
130+
height: 3px;
131+
background-color: #645e8f;
132+
width: 0%;
133+
transition: all .3s linear;
134+
}
135+
}
136+
</style>

‎components/ProjectItems.vue

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
<script setup>
2+
import { ref } from "vue";
3+
import ArrowLink from "./UI/ArrowLink.vue";
4+
import picture1 from "~/assets/img/project-1.png";
5+
import picture2 from "~/assets/img/project-2.png";
6+
import picture3 from "~/assets/img/project-3.png";
7+
import picture4 from "~/assets/img/project-4.png";
8+
9+
const projects = ref([
10+
{
11+
id: 1,
12+
title: "Международный фестиваль театров",
13+
img: picture1,
14+
link: "/",
15+
tags: [
16+
{
17+
id: 1,
18+
title: "выставки",
19+
link: "/",
20+
},
21+
{
22+
id: 2,
23+
title: "музеи",
24+
link: "/",
25+
},
26+
{
27+
id: 3,
28+
title: "дизайн",
29+
link: "/",
30+
},
31+
],
32+
},
33+
{
34+
id: 2,
35+
title: "Интерактивная программа «Вслед за Владимиром»",
36+
img: picture3,
37+
link: "/",
38+
tags: [
39+
{
40+
id: 1,
41+
title: "выставки",
42+
link: "/",
43+
},
44+
{
45+
id: 2,
46+
title: "музеи",
47+
link: "/",
48+
},
49+
],
50+
},
51+
{
52+
id: 3,
53+
title: "Разработка бренда для ЖК «Лесart»",
54+
img: picture2,
55+
link: "/",
56+
tags: [
57+
{
58+
id: 1,
59+
title: "бренд",
60+
link: "/",
61+
},
62+
{
63+
id: 2,
64+
title: "дизайн",
65+
link: "/",
66+
},
67+
],
68+
},
69+
{
70+
id: 4,
71+
title: "Visual Identity for residential complex",
72+
img: picture4,
73+
link: "/",
74+
tags: [
75+
{
76+
id: 1,
77+
title: "айдентика",
78+
link: "/",
79+
},
80+
{
81+
id: 2,
82+
title: "бренд",
83+
link: "/",
84+
},
85+
{
86+
id: 3,
87+
title: "дизайн",
88+
link: "/",
89+
},
90+
],
91+
},
92+
]);
93+
const link = ref({
94+
title: "больше проектов",
95+
link: "/",
96+
});
97+
</script>
98+
99+
<template>
100+
<div>
101+
<div class="projects__items">
102+
<div
103+
class="projects__item"
104+
v-for="(project, index) in projects"
105+
:key="project.id"
106+
>
107+
<NuxtLink class="projects__item-wrapper" :to="project.link">
108+
<img
109+
class="projects__item-img"
110+
:src="project.img"
111+
:alt="project.title"
112+
/>
113+
<ArrowLink
114+
:color="(index + 1) % 2 === 1 ? '#ffffff' : '#333333'"
115+
:borderColor="(index + 1) % 2 === 1 ? '#ffffff66' : '#00000033'"
116+
/>
117+
</NuxtLink>
118+
<div class="projects__item-info">
119+
<h4 class="projects__item-title">
120+
{{ project.title }}
121+
</h4>
122+
<ul class="projects__item-list">
123+
<li
124+
class="projects__item-point"
125+
v-for="tag in project.tags"
126+
:key="tag.id"
127+
>
128+
<NuxtLink class="projects__item-link" :to="tag.link">{{
129+
tag.title
130+
}}</NuxtLink>
131+
</li>
132+
</ul>
133+
</div>
134+
</div>
135+
</div>
136+
<NuxtLink class="projects__link" :to="link.link">
137+
{{ link.title }}
138+
<ArrowLink color="#262626" />
139+
</NuxtLink>
140+
</div>
141+
</template>
142+
143+
<style lang="scss" scoped>
144+
.projects {
145+
&__items {
146+
display: flex;
147+
flex-direction: column;
148+
gap: 56px 30px;
149+
flex-wrap: wrap;
150+
height: 1116px;
151+
}
152+
153+
&__item {
154+
max-width: 570px;
155+
width: 100%;
156+
&:nth-child(3) {
157+
margin-top: 112px;
158+
}
159+
}
160+
161+
&__item-wrapper {
162+
position: relative;
163+
padding-bottom: calc(418 / 570 * 100%);
164+
display: block;
165+
overflow: hidden;
166+
margin-bottom: 14px;
167+
168+
&:hover {
169+
img {
170+
scale: 1.25;
171+
}
172+
173+
.arrow-link {
174+
rotate: -45deg;
175+
}
176+
}
177+
178+
.arrow-link {
179+
position: absolute;
180+
top: 0;
181+
right: 0;
182+
}
183+
}
184+
185+
&__item-img {
186+
position: absolute;
187+
top: 0;
188+
left: 0;
189+
width: 100%;
190+
height: 100%;
191+
transition: all 0.4s ease-in;
192+
}
193+
194+
&__item-title {
195+
font-family: "Onest";
196+
font-weight: 600;
197+
font-size: 16px;
198+
line-height: calc(20 / 16 * 100%);
199+
color: #333333;
200+
margin-bottom: 3px;
201+
}
202+
203+
&__item-list {
204+
display: flex;
205+
flex-wrap: wrap;
206+
gap: 16px;
207+
}
208+
209+
&__item-point {
210+
position: relative;
211+
212+
&::after {
213+
position: absolute;
214+
content: "|";
215+
color: #b0b0b0;
216+
right: -8px;
217+
}
218+
219+
&:last-child {
220+
&::after {
221+
display: none;
222+
}
223+
}
224+
}
225+
226+
&__item-link {
227+
font-family: "Onest";
228+
font-weight: 400;
229+
font-size: 13px;
230+
line-height: calc(17 / 13 * 100%);
231+
color: #b0b0b0;
232+
}
233+
234+
&__link {
235+
display: flex;
236+
align-items: center;
237+
gap: 16px;
238+
max-width: 194px;
239+
margin-left: auto;
240+
font-family: "Onest";
241+
font-weight: 500;
242+
font-size: 14px;
243+
line-height: calc(18 / 14 * 100%);
244+
color: #333333;
245+
.arrow-link {
246+
rotate: 0deg;
247+
}
248+
249+
&:hover {
250+
.arrow-link {
251+
rotate: -45deg;
252+
}
253+
}
254+
}
255+
}
256+
</style>

0 commit comments

Comments
 (0)