<template>
  <div>
    <div class="hero-swiper">
      <div class="centent">
        <div class="centent-left">
          <HeroSwiper></HeroSwiper>
          <div
            class="hero-title"
            id="heroTest"
            :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
          >
            HERO
          </div>
          <div class="hero-bg">
            <img src="../assets/img/home/weapon-bg.png" alt="" />
          </div>
        </div>
        <div class="centent-right"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeroSwiper from "../components/HeroSwiper.vue";
import { ref, onMounted } from "vue";

const Y1 = ref(0);
const ratio = ref(0.2); //视差偏移率
const positionY1 = ref(0); //背景Y轴偏移量
onMounted(() => {
  window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
  let heroTest = document.getElementById("heroTest");
  Y1.value = heroTest.offsetTop * ratio.value;
});

function handleScroll() {
  const scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
  // console.log(mTab.value, "mTab");
  console.log(positionY1.value + "-------------------3");
}
</script>

<style lang="scss" scoped>
.hero-swiper {
  // background: #c1ebff;
  position: relative;
  .centent {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .centent-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .centent-top-right,
      .centent-top-left {
        width: 646px;
        height: 16px;
        img {
          max-width: 100%;
          height: auto;
        }
      }
      .centent-top-start {
        width: 27px;
        height: 27px;
        img {
          max-width: 100%;
          height: auto;
        }
      }
      .centent-top-hero {
        font-size: 28px;
        font-family: "JCuYuan";

        color: #141414;
        line-height: 32px;
      }
      // .centent-top-right {
      // }
    }
    .centent-left {
      .hero-title {
        position: absolute;
        left: -250px;
        top: -250px;
        font-size: 360px;
        font-family: "BigJohn";

        color: #579ec9;
        line-height: 30px;
        opacity: 0.26;
      }
      .hero-bg {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        color: transparent;
        img {
          position: absolute;
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          z-index: -1;
          color: transparent;
        }
      }

      .hero-container {
        display: flex;
        justify-content: center;
      }
    }
    .content-right {
    }
  }
}
</style>
