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.
118 lines
3.4 KiB
118 lines
3.4 KiB
<template>
|
|
<div :class="
|
|
$vuetify.breakpoint.mdAndUp
|
|
? 'my-ad-banner mt-15 mb-15'
|
|
: $vuetify.breakpoint.smOnly
|
|
? 'mt-10'
|
|
: 'mt-7'
|
|
">
|
|
<div class="computer hidden-sm-and-down">
|
|
<v-container class="main-container py-0">
|
|
<v-carousel v-model="carousel" hide-delimiters height="180" class="exhibition-swiper">
|
|
<v-carousel-item v-for="p in Math.ceil(parseFloat(item.length / 3))" :key="p">
|
|
<v-row>
|
|
<v-col cols="4" v-for="i in p < Math.ceil(parseFloat(item.length / 3)) ||
|
|
item.length % 3 == 0
|
|
? 3
|
|
: item.length % 3" :key="i">
|
|
<!--a :href="item[i - 1 + (p - 1) * 3].url"
|
|
>
|
|
|
|
</a-->
|
|
<lazyImg :src="item[i - 1 + (p - 1) * 3].image" :customClass="'rounded-lg mx-auto'"></lazyImg>
|
|
<!-- <v-img
|
|
max-width="360"
|
|
max-height="180"
|
|
:src="item[i - 1 + (p - 1) * 3].image"
|
|
class="rounded-lg mx-auto"
|
|
></v-img> -->
|
|
</v-col>
|
|
</v-row>
|
|
</v-carousel-item>
|
|
</v-carousel>
|
|
</v-container>
|
|
</div>
|
|
<div class="tablet d-none d-sm-flex d-md-none">
|
|
<v-container class="main-container py-0 pe-0">
|
|
<v-sheet max-width="3000">
|
|
<v-slide-group v-model="slide" center-active class="ps-2">
|
|
<v-slide-item v-for="(ad, index) in item" :key="index">
|
|
<v-card class="mx-4 rounded-xl" height="150" width="300">
|
|
<v-img width="300" height="150" :src="ad.image" class="rounded-xl"></v-img>
|
|
</v-card>
|
|
</v-slide-item>
|
|
</v-slide-group>
|
|
</v-sheet>
|
|
</v-container>
|
|
</div>
|
|
<!-- <div class="tablet d-none d-sm-flex d-md-none">
|
|
<v-sheet max-width="3000">
|
|
<v-slide-group mobile-break-point="820" class="pa-4 ms-6" center-active >
|
|
<v-slide-item v-for="(ad, index) in item" :key="index">
|
|
<div>
|
|
<v-img
|
|
max-width="300"
|
|
contain
|
|
:src="ad.image"
|
|
class="rounded-lg me-7"
|
|
></v-img>
|
|
</div>
|
|
</v-slide-item>
|
|
</v-slide-group>
|
|
</v-sheet>
|
|
</div> -->
|
|
<div class="phone hidden-sm-and-up">
|
|
<v-container class="main-container pa-0">
|
|
<v-sheet max-width="3000">
|
|
<v-slide-group v-model="slide" center-active class="ps-2">
|
|
<v-slide-item v-for="(ad, index) in item" :key="index">
|
|
<v-card class="mx-5 rounded-xl" height="120" width="240">
|
|
<v-img width="240" height="120" :src="ad.image" class="rounded-xl"></v-img>
|
|
</v-card>
|
|
</v-slide-item>
|
|
</v-slide-group>
|
|
</v-sheet>
|
|
</v-container>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import lazyImg from "@/components/img/img.vue";
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Array,
|
|
},
|
|
},
|
|
components: {
|
|
lazyImg,
|
|
},
|
|
data() {
|
|
return {
|
|
carousel: 0,
|
|
carouselPagesNum: 2,
|
|
slide: null,
|
|
};
|
|
},
|
|
created() {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep() {
|
|
.exhibition-swiper {
|
|
padding: 0 53px;
|
|
|
|
.v-window__prev {
|
|
left: auto;
|
|
right: 100%;
|
|
}
|
|
|
|
.v-window__next {
|
|
right: auto;
|
|
left: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|