<template>
  <div class="boutique">
    <el-carousel class="slider" autoplay arrow="nerver">
      <el-carousel-item>
        <div class="img-container">
          <!-- <img src="@/assets/imgs/boutique/1.jpg" width="100%" /> -->
          <m-smgz></m-smgz>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="bottom-carousel">
      <m-swiper></m-swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "Boutique",
  components: {
    mSmgz: () => import('./topic/smgz.vue'),
    mSwiper: () => import('./swiper.vue')
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-carousel__container {
  width: 100%;
  height: 100%;
}
.slider {
  height: 100vh;
  width: 100%;
}
.img-container{
  width: 100%;
  height: 100%;
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.bottom-carousel {
  width: 300px;
  height: 150px;
  position: absolute;
  right: 46px;
  bottom: 20px;
  z-index: 9;
  > div {
    width: 100%;
    height: 100%;
  }
}
</style>>