<template>
  <div>
    <div class="gallerp">
      <div
        class="title"
        ref="mTab"
        id="bgTest"
        :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
      >
        GALLERY
      </div>
      <div class="gallerp-bg">
        <img src="@/assets/img/home/gallerp-bg.png" alt="" />
      </div>
      <div class="gallerp-bottom-boder">
        <img src="@/assets/img/home/gallerp-bottom-boder.png" alt="" />
      </div>
      <div class="content">
        <div class="gallery-title">GALLERY</div>
        <div class="gallery-boder">
          <img src="@/assets/img/home/gallery-boder.png" alt="" />
        </div>
        <div class="slogan">
          <div class="slogan-title">CEBG WORK IN-PROCESS WORK SHOW.</div>
          <div class="slogan-text">
            We are honoured to create CEBG Metaworld.
          </div>
        </div>
        <div class="gallery-banner">
          <div v-for="(item, index) in imageList" :key="index">
            <img class="gallery-img" :src="item.imgSrc" alt="" />
          </div>
        </div>
        <div class="btn">
          <div class="go-to-btn"></div>
        </div>
        <!-- <swiper
          :modules="modules"
          :loop="true"
          :slides-per-view="3.5"
          :space-between="15"
          :autoplay="{ delay: 10000, disableOnInteraction: false }"
        >
          <swiper-slide v-for="(item, index) in imageList" :key="index">
            <div class="hero-container">
              <div class="mask">
                <div class="background-tripple-corners-rectange">
                  <img
                    src="@/assets/img/home/gallery-botom-boder.png"
                    alt=""
                  />
                </div>
                <div class="video-btn">
                  <img src="@/assets/img/home/video-btn.png" alt="" />
                </div>
              </div>
              <img class="gallery-img" :src="item.imgSrc" alt="" />
            </div>
          </swiper-slide>
        </swiper> -->
      </div>
    </div>
    <div class="gameplay-bottom">
      <div
        class="gameplay-bottom-title"
        :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
      >
        GAMEPLAY
      </div>
      <div class="gameplay-bottom-bg">
        <img src="@/assets/img/home/gallerp-bottom-bg.jpg" alt="" />
      </div>
      <div class="content">
        <div class="title">GAMEPLAY</div>
        <div class="boder">
          <img src="@/assets/img/home/gameplay-bottom-boder.png" alt="" />
        </div>
        <div class="sloagn">
          CEBG is proud to work with so many DAOs and guilds to embrac
        </div>
        <DameplaySwiperCard></DameplaySwiperCard>
      </div>
      <div class="gameplay-bottom-viodboder">
        <img src="@/assets/img/home/viod-boder.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from "vue";
import DameplaySwiperCard from "./DameplaySwiperCard.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
// 引入swiper样式（按需导入）
import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
import "swiper/css/navigation"; // 轮播图两边的左右箭头
import "swiper/css/scrollbar"; // 轮播图的滚动条
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper";

const modules = [Autoplay, Pagination, Navigation, Scrollbar];
const imageList = reactive([
  { imgSrc: require("@/assets/img/home/game/001.png") },
  { imgSrc: require("@/assets/img/home/game/002.png") },
  { imgSrc: require("@/assets/img/home/game/003.png") },
  { imgSrc: require("@/assets/img/home/game/004.png") },
  { imgSrc: require("@/assets/img/home/game/005.png") },
  { imgSrc: require("@/assets/img/home/game/006.png") },
]);
const Y1 = ref(0);
const ratio = ref(0.2); //视差偏移率

const positionY1 = ref(0); //背景Y轴偏移量

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; //原始高度-滚动距离*视差系数
  // console.log(mTab.value, "mTab");
  console.log(positionY1.value + "-------------------3");
}
</script>

<style lang="scss" scoped>
.gallerp {
  // height: 800px;
  // background: rgba(82, 206, 252, 1);
  position: relative;
  // padding-bottom: 736px;
  .gallerp-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .gallerp-bottom-boder {
    position: absolute;
    bottom: 0;
  }
  .title {
    position: absolute;
    right: 0%;
    top: -342px;
    text-align: center;
    font-size: 190px;
    font-family: "Big John";
    color: #e09162;
    line-height: 30px;
    opacity: 0.3;
    z-index: 1;
  }
  .content {
    width: 1440px;
    margin: 0 auto;
    padding-top: 157px;
    padding-bottom: 310px;
    position: relative;

    z-index: 3;
    .gallery-title {
      width: 573px;
      height: 60px;
      margin: 0 auto;
      text-align: center;
      font-size: 76px;
      font-family: "Big John";

      color: #0f0e0e;
    }
    .gallery-boder {
      margin-top: 59px;
      width: 607px;
      margin: 59px auto;
      margin-bottom: 71px;
    }
    .btn{
      padding-top: 30px;
    }
    .btn {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    // .go-to-btn {
    //   margin-top: 30px;
    //   width: 196px;
    //   height: 62px;
    //   position: relative;
    //   margin-right: 30px;
    //   color: #263641;
    //   cursor: pointer;
    //   background-image: url("@/assets/img/home/go-to-btn.png");
    //   background-position: center;
    //   background-repeat: no-repeat;
    //   background-size: cover;
    //   overflow: hidden;
    //   transition: background-image 0.3s;
    // }
    // .go-to-btn:hover {
    //   // background-image: none;
    // }
    // .go-to-btn::after {
    //   position: absolute;
    //   left: 0;
    //   right: 0;
    //   top: 0;
    //   bottom: 0;
    //   opacity: 1;
    //   // transition: 0.5s;
    //   background: url("@/assets/img/home/go-to-btn-active.png") no-repeat;
    //   background-size: 100% 100%;
    //   transform: scaleX(1, 1);
    //   z-index: -1;
    //   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    //   transition: all 0.3s ease-in-out;
    // }
    // .go-to-btn:hover:after {
    //   opacity: 1;
    //   clip-path: polygon(
    //     calc(50% + 0px) calc(50% + 150px),
    //     calc(50% + 150px) calc(50% + 0px),
    //     calc(50% + 0px) calc(50% - 150px),
    //     calc(50% - 150px) calc(50% - 0px)
    //   );
    //   transition: all 0.3s ease-in-out;
    //   transform: scaleX(1, 1);
    // }
    .go-to-btn {
    // padding-top: 30px;
      width: 196px;
      height: 62px;
      position: relative;
      margin-right: 30px;
      color: #263641;
      cursor: pointer;
      background-image: url("@/assets/img/home/go-to-btn.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // border: 1px solid #333;
      // overflow: hidden;
      transition: background-image 0.3s;
    }
    .pve-right-active:hover {
      // background-image: none;
    }
    .go-to-btn::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: url("@/assets/img/home/go-to-btn-active.png") no-repeat;
      background-size: 100% 100%;
      transform: scaleX(1, 1);
      opacity: 1;
      // z-index: -1;
      clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
      transition: all 0.3s ease-in;
    }
    .go-to-btn:hover:after {
      opacity: 1;
      clip-path: polygon(
        calc(50% + 0px) calc(50% + 150px),
        calc(50% + 150px) calc(50% + 0px),
        calc(50% + 0px) calc(50% - 150px),
        calc(50% - 150px) calc(50% - 0px)
      );
      transition: all 0.3s ease-in;
      transform: scaleX(1, 1);
    }
    .slogan {
      font-size: 18px;
      font-family: Arial;
      font-weight: bold;
      color: #afdff0;
      line-height: 32px;
      width: 556px;
      margin: 0 auto;
      text-align: center;
      // margin-bottom: 113px;
      height: 50px;
      .slogan-title {
        font-size: 22px;
        font-family: Arial;
        font-weight: bold;
        color: #fff;
        line-height: 32px;
      }
      .slogan-text {
        font-size: 18px;
        font-family: Arial;
        font-weight: bold;
        color: #fff;
        line-height: 32px;
      }
    }
  }
  .gallery-banner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 100px;
    // padding-bottom: 310px;
    .gallery-img {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 50px;
      cursor: pointer;
      border-radius: 15px;
      width: 453px;
      height: 288px;
      flex: 0 0 33.33333333%;
      justify-content: center;
      overflow: hidden;
      object-fit: cover;
      transition: 0.2s;
    }
    .gallery-img:hover {
      transform: scale(1.05);
    }

    // position: absolute;
    // right: 0;
    // bottom: 373px;
    // .hero-container {
    //   position: relative;
    // }

    // .mask {
    //   position: absolute;
    //   cursor: pointer;
    //   left: 0;
    //   top: 0;
    //   width: 100%;
    //   height: 100%;
    //   opacity: 0;
    //   background: rgba(34, 35, 36, 0.3);
    //   // clip-path: polygon(100px 0, calc(100% - 100px) 0);

    //   .background-tripple-corners-rectange {
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     width: 90%;
    //     height: 100%;
    //     padding-top: 10px;
    //     padding-left: 10px;
    //     opacity: 0;
    //     background: rgba(34, 35, 36, 0.3);

    //     img {
    //       max-width: 96%;
    //       height: auto;
    //     }
    //   }
    //   .video-btn {
    //     margin-top: 90px;
    //     margin-left: 180px;
    //   }
    // }

    // .mask:hover {
    //   opacity: 1;
    // }
    // .background-tripple-corners-rectange {
    //   position: absolute;
    //   opacity: 0;
    // }
    // .background-tripple-corners-rectange:hover {
    //   position: absolute;
    //   opacity: 1;
    //   width: 100%;
    //   height: 100%;
    // }
  }
}
.gameplay-bottom {
  // background: linear-gradient(to bottom, #161f27, #334d62, #689fcb);
  position: relative;
  padding-bottom: 400px;
  .gameplay-bottom-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .gameplay-bottom-viodboder {
    position: absolute;
    bottom: 0;
    width: 100%;
    // height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .gameplay-bottom-title {
    position: absolute;
    left: 0%;
    top: -960px;
    // padding-top: 40px;
    text-align: center;
    font-size: 190px;
    font-family: "Big John";

    color: #13293a;
    line-height: 30px;
    opacity: 0.3;
    z-index: -1;
    // transform: translate(-50%, -50%);
    // transform: translateZ(-3px);
  }

  .content {
    width: 1440px;
    margin: 0 auto;
    text-align: center;
    // padding-bottom: 900px;
    .title {
      width: 691px;
      // height: 95px;
      margin: 0 auto;
      padding-top: 60px;
      font-size: 108px;
      font-family: "Big John";

      color: #e6f8ff;
    }
    .boder {
      width: 608px;
      height: 10px;
      margin: 0 auto;
      // margin-top: 46px;
      margin-bottom: 146px;
    }
    .sloagn {
      text-align: center;
      font-size: 18px;
      font-family: Arial;

      color: #e6f8ff;
      line-height: 32px;
      margin-bottom: 71px;
    }
  }
}
</style>
