109 lines
2.7 KiB
Vue
109 lines
2.7 KiB
Vue
<template>
|
||
<div class="team">
|
||
<div class="team__header">
|
||
<h2 class="h2 team__title">Наша команда</h2>
|
||
<div class="team__description">
|
||
На IT волне команда профессионалов неутомимо трудится, чтобы дарить
|
||
слушателям самые свежие и актуальные новости из мира технологий,
|
||
отвечать на их вопросы и обсуждать горячие темы на IT радио.
|
||
</div>
|
||
</div>
|
||
<template v-if="showLoader">
|
||
<div class="loader">
|
||
<div class="spinner" />
|
||
Загрузка данных
|
||
</div>
|
||
</template>
|
||
<Swiper
|
||
v-else
|
||
:slides-per-view="4"
|
||
:space-between="20"
|
||
:modules="modules"
|
||
:pagination="{
|
||
el: '.team__progress',
|
||
clickable: true,
|
||
type: 'progressbar',
|
||
}"
|
||
:breakpoints="{
|
||
0: {
|
||
slidesPerView: 1,
|
||
},
|
||
450: {
|
||
slidesPerView: 1.5,
|
||
},
|
||
768: {
|
||
slidesPerView: 2.5,
|
||
},
|
||
1020: {
|
||
slidesPerView: 3,
|
||
},
|
||
1280: {
|
||
slidesPerView: 4,
|
||
},
|
||
}"
|
||
class="team__slider"
|
||
>
|
||
<SwiperSlide
|
||
class="team__item"
|
||
v-for="employee in team"
|
||
:key="employee.id"
|
||
>
|
||
<div class="team__cover">
|
||
<img :src="`${selfUrl + employee.img_person}`" alt="user" />
|
||
</div>
|
||
<div class="team__name">
|
||
{{ employee.name }} {{ employee.last_name }}
|
||
<span>{{ employee.position }}</span>
|
||
</div>
|
||
</SwiperSlide>
|
||
</Swiper>
|
||
<div class="team__tools">
|
||
<div class="team__progress" ref="progressBar">
|
||
<span></span>
|
||
</div>
|
||
<router-link :to="{ name: 'about' }" class="m--link">
|
||
Больше о нас
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import 'swiper/css';
|
||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||
import { Pagination, Scrollbar } from 'swiper/modules';
|
||
import { app } from '@/services';
|
||
import { selfUrl } from '@/settings';
|
||
|
||
export default {
|
||
name: 'team',
|
||
components: { Swiper, SwiperSlide },
|
||
data() {
|
||
return {
|
||
selfUrl,
|
||
team: [],
|
||
showLoader: false,
|
||
modules: [Scrollbar, Pagination],
|
||
};
|
||
},
|
||
created() {
|
||
this.getTeams();
|
||
},
|
||
methods: {
|
||
getTeams() {
|
||
this.showLoader = true;
|
||
app
|
||
.getTeams()
|
||
.then((data) => {
|
||
this.showLoader = false;
|
||
this.team = data;
|
||
})
|
||
.catch((err) => {
|
||
this.showLoader = false;
|
||
console.log(err);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|