antd vue Carousel自适应浏览器

<template>
  <section class="part1">
    <a-carousel dotPosition="right">
      <!-- img初始像素是1920*1018px -->
      <img src="@/assets/images/Home/bg_1.png" :style="bannerWH" />
      <img src="@/assets/images/Home/bg_1.png" :style="bannerWH" />
      <img src="@/assets/images/Home/bg_1.png" :style="bannerWH" />
    </a-carousel>
  </section>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      screenWidth: null, // 屏幕宽度
      bannerWH: null, // banner宽度
  };
  mounted() {
    this.screenWidth = document.body.clientWidth;
    this.bannerWH = `width: 100%; height: ${(((this.screenWidth / 1920) * 1018) / 100).toFixed(2)}rem`;
    window.onresize = () => {
      this.screenWidth = document.body.clientWidth;
      this.bannerWH = `width: 100%; height: ${(((this.screenWidth / 1920) * 1018) / 100).toFixed(2)}rem`;
    };
  },
}
</script>

<style lang="scss" scoped>

/* 第1部分 */
.part1 {
    position: relative;

    width: 100%;
    height: auto; // 自适应高度

    font-family: PingFang SC;

    /deep/ .ant-carousel .slick-vertical .slick-slide {
      border: none;
    }

    /deep/ .ant-carousel .slick-dots li.slick-active button {
      background: #2ffffb;
    }
}
</style>