ShowEasyFrontEnd/FrontEnd/components/home/AdBanner.vue

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