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.
54 lines
1.7 KiB
54 lines
1.7 KiB
<template>
|
|
<v-row>
|
|
<v-col class="hidden-sm-and-down" cols="12">
|
|
<v-carousel height="182" v-model="model" :show-arrows="false" cycle hide-delimiters class="abc">
|
|
<v-carousel-item v-for="(item, index) in items" :key="index">
|
|
<!--a :href="item.url" target="_top"><v-img class="border-radius-20" width="364" height="182" :src="item.image" ></v-img></a-->
|
|
<v-img class="border-radius-20" width="364" height="182" :src="item.image"></v-img>
|
|
</v-carousel-item>
|
|
</v-carousel>
|
|
</v-col>
|
|
<v-col class="pt-1 hidden-sm-and-down" align="center" cols="12">
|
|
<span v-for="(item, index) in items" :key="index">
|
|
<unicon name="circle" width="8" height="8" :fill="model == index ? '#EE9546' : '#F7EDE4'"
|
|
icon-style="monochrome" class="mr-3" @click="model = index"></unicon>
|
|
</span>
|
|
</v-col>
|
|
<v-col class="hidden-md-and-up">
|
|
<v-slide-group center-active>
|
|
<v-slide-item v-for="(ad, index) in items" :key="index">
|
|
<v-card class="mx-4 rounded-xl" :height="$vuetify.breakpoint.sm ? 150 : 120"
|
|
:width="$vuetify.breakpoint.sm ? 300 : 240">
|
|
<v-img :height="$vuetify.breakpoint.sm ? 150 : 120" :width="$vuetify.breakpoint.sm ? 300 : 240"
|
|
:src="ad.image" class="rounded-xl"></v-img>
|
|
</v-card>
|
|
</v-slide-item>
|
|
</v-slide-group>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ExhibitionAD",
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
model: 0,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep() {
|
|
.v-slide-group__content {
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
</style>
|