cebg-website/src/components/about/LatestNews.vue

<template>
  <div class="latest-news">
    <div class="latest-news-bg">
      <img src="@/assets/img/about/latest-news-bg.png" alt="" />
    </div>
    <div class="title">LATEST NEWS</div>
    <div
      class="news-title"
      ref="mTab"
      id="bgTest"
      :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
    >
      NEWS
    </div>
    <div class="swiper-content">
      <swiper
        :effect="'coverflow'"
        :grabCursor="false"
        :centeredSlides="true"
        slidesPerView="3"
        :spaceBetween="50"
        :coverflowEffect="{
          rotate: 0,
          stretch: 10,
          depth: 100,
          modifier: 3,
          slideShadows: true,
          scale: 0.98,
        }"
        :pagination="{
          clickable: true,
        }"
        :modules="modules"
        :loop="true"
        :autoplay="{ delay: 3500, disableOnInteraction: false }"
        class="mySwiper"
        ref="myRef"
      >
        <swiper-slide v-for="(item, index) in imageList" :key="index"
          ><img :src="item.imgSrc" />
        </swiper-slide>
      </swiper>
      <!-- <div class="swiper-btn-prev" @click="handSlidePrev">
        <img src="@/assets/img/home/game-swiper-card/next.png" alt="" />
      </div>
      <div class="swiper-btn-next" @click="handSlideNext">
        <img src="@/assets/img/home/game-swiper-card/prev.png" alt="" />
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from "vue";
import {
  EffectCoverflow,
  Thumbs,
  FreeMode,
  Autoplay,
  Navigation,
  Pagination,
} from "swiper";
import { Swiper, SwiperSlide,  } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/free-mode";
import "swiper/css/effect-coverflow";
const Y1 = ref(0);
const ratio = ref(0.2); //视差偏移率
const positionY1 = ref(0); //背景Y轴偏移量
const box = ref(null);
const myRef = ref(null);
const modules = [Pagination, Autoplay];
const imageList = reactive([
  {
    imgSrc: new URL(
      "@/assets/img/home/game-swiper-card/01.png",
      import.meta.url
    ).href,
  },
  {
    imgSrc: new URL(
      "@/assets/img/home/game-swiper-card/02.png",
      import.meta.url
    ).href,
  },
  {
    imgSrc: new URL(
      "@/assets/img/home/game-swiper-card/03.png",
      import.meta.url
    ).href,
  },
  {
    imgSrc: new URL(
      "@/assets/img/home/game-swiper-card/04.png",
      import.meta.url
    ).href,
  },
  {
    imgSrc: new URL(
      "@/assets/img/home/game-swiper-card/05.png",
      import.meta.url
    ).href,
  },
]);

const handSlidePrev = () => {
  myRef.value?.$el.swiper.slidePrev();
};
const handSlideNext = () => {
  myRef.value?.$el.swiper.slideNext();
};
onMounted(() => {
  window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
  let bgTest = document.getElementById("bgTest");
  Y1.value = bgTest.offsetTop * ratio.value;
});
function handleScroll() {
  const scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
}
</script>

<style lang="scss" scoped>
.latest-news {
  position: relative;
  //   height: 800px;
  .title {
    position: absolute;
    width: 187px;
    left: 238px;
    top: 139px;
    font-size: 48px;
    font-family: "Big John";
    font-weight: 400;
    color: #000000;
    line-height: 50px;
  }
  .news-title {
    position: absolute;
    left: 56px;
    top: -870px;
    font-size: 200px;
    font-family: "Big John";
    font-weight: 400;
    color: #eeeeee;
    // opacity: 0.3;
    z-index: -1;
  }
  .latest-news-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.swiper {
  width: 100%;
  // padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 360px;
}

.swiper-slide img {
  display: block;
  width: 100%;
}
.swiper-content {
  position: relative;
}
.mySwiper {
  position: relative;
  :deep(.swiper-pagination) {
    position: absolute;
    bottom: 10px;
    left: -640px;
  }
  img {
  }
}

:deep(.swiper-pagination .swiper-pagination-bullet) {
  width: 30px;
  height: 30px;
  /*图片路径*/
  background: url("@/assets/img/home/game-swiper-card/bullet.png") no-repeat
    left center;
}
/*显示当前活动块的图片*/
:deep(.swiper-pagination .swiper-pagination-bullet-active) {
  width: 30px;
  height: 30px;
  /*图片路径*/
  background: url("@/assets/img/home/game-swiper-card/bullet-active.png")
    no-repeat right center;
  background-size: contain;
}
:deep(.swiper-pagination-bullet) {
  opacity: 1;
}
:deep(.swiper-slide-next) {
  margin-top: 100px;
  position: relative;
}
:deep(.swiper-slide-prev) {
  opacity: 0;
  position: relative;
}
.swiper-content {
  padding-top: 136px;
  padding-bottom: 300px;
}
</style>