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.
109 lines
2.5 KiB
109 lines
2.5 KiB
<template>
|
|
<div class="block">
|
|
<v-container class="main-container">
|
|
<v-row class="mx-0 mb-7 mt-4 d-flex justify-space-between pr-3">
|
|
<v-card flat class="primary--text text-h4">
|
|
{{ title }}
|
|
</v-card>
|
|
<div class="d-flex flex-row mr-5">
|
|
<v-card
|
|
flat
|
|
class="arrow mr-10"
|
|
v-if="arrow"
|
|
v-show="carousel != 0"
|
|
@click="leftArrowClick"
|
|
>
|
|
<v-img
|
|
max-width="20"
|
|
max-height="20"
|
|
contain
|
|
:src="require('@/assets/svg/left-arrow.svg')"
|
|
></v-img>
|
|
</v-card>
|
|
<v-card
|
|
flat
|
|
v-if="arrow"
|
|
@click="rightArrowClick"
|
|
:class="
|
|
carousel == carouselPagesNum - 1 ? 'disable-arrow' : 'arrow'
|
|
"
|
|
>
|
|
<v-img
|
|
max-width="20"
|
|
max-height="20"
|
|
contain
|
|
:src="
|
|
carousel == carouselPagesNum - 1
|
|
? require('@/assets/svg/disable-right-arrow.svg')
|
|
: require('@/assets/svg/right-arrow.svg')
|
|
"
|
|
></v-img>
|
|
</v-card>
|
|
</div>
|
|
</v-row>
|
|
<v-row class="mx-0">
|
|
<slot></slot>
|
|
</v-row>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
},
|
|
arrow: {
|
|
type: Boolean,
|
|
},
|
|
carousel: {
|
|
type: Number,
|
|
},
|
|
carouselPagesNum: {
|
|
type: Number,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
width: undefined,
|
|
};
|
|
},
|
|
created() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
},
|
|
methods: {
|
|
onResize() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
},
|
|
rightArrowClick() {
|
|
this.$emit("rightArrowOnClick", this.title);
|
|
},
|
|
leftArrowClick() {
|
|
this.$emit("leftArrowOnClick", this.title);
|
|
},
|
|
},
|
|
computed: {
|
|
windowWidth() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
return this.width;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
window.addEventListener("resize", this.onResize);
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("resize", this.onResize);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|