ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionAD.vue

<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>