<template>
  <div>
    <div class="what-cebg">
      <div
        class="cebg-game"
        id="bgTest"
        :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
      >
        CEBG GAME
      </div>
      <div
        class="gameplay-name"
        :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
      >
        GAMEPLAY
      </div>
      <div class="content">
        <div class="content-left">
          <img src="" alt="" />
        </div>
        <div class="what-content">
          <div class="monster">
            <img src="@/assets/img/home/monster.png" alt="" />
          </div>
          <div class="content-right">
            <div class="title">
              <img src="@/assets/img/home/what-title.png" alt="" />
            </div>
            <div class="what-cebg-img">
              <img src="@/assets/img/home/what-boder.png" alt="" />
            </div>
            <div class="slogan">
              CEBG stands for Crypto Elite's: BATTLEGROUNDS,the first
              blockchain-based game consisting of Moba,and Battleroyal. It's
              funded by more than 7 institutional investors.CEBG stands for
              Crypto Elite's: BATLEGROUNDS,the first blockchain-based game
              consisting of Moba,and Battleroyal. It's funded by more than 7
              institutional investors.
            </div>
          </div>
        </div>

        <div class="gameplay">
          <div class="gameplay-content">
            <div class="gameplay-right">
              <div class="title">GAMEPLAY</div>
              <div class="gameplay-img">
                <img src="@/assets/img/home/gameplay.png" alt="" />
              </div>
              <div class="pve">
                <div
                  :class="isPveTab == true ? 'pve-left-active' : 'pve-left'"
                  @click="handTabActive(true)"
                >
                  <div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
                    <!-- PVP -->
                  </div>
                </div>
                <div
                  :class="isPveTab == false ? 'pve-right-active' : 'pve-right'"
                  @click="handTabActive(false)"
                >
                  <div
                    :class="isPveTab == false ? 'in-rect-active' : 'in-rect'"
                  >
                    <!-- PVE -->
                  </div>
                </div>
              </div>
              <div class="pve-content">
                <div class="slogan">
                  Each battle contains 40 players by matching through the ELO
                  value 2 types of PVP modes: <br />
                  Matchmaking: no restrictions, players can earn a certain
                  amount of Gold and in-game rewards <br />
                  Qualifying: Matching by the monthly rank, and the top players
                  to share the amount of CEBG token
                </div>
              </div>
            </div>
            <div class="gameplay-left">
              <div class="pve-img">
                <img
                  v-if="isPveTab"
                  src="@/assets/img/home/pve-img.jpg"
                  alt=""
                />
                <img v-else src="@/assets/img/home/pve-img.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="what-bg">
        <img src="@/assets/img/home/what-bg.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const Y1 = ref(0);
const ratio = ref(0.2); //视差偏移率
const isPveTab = ref(false);
const positionY1 = ref(0); //背景Y轴偏移量

const handTabActive = (isTab) => {
  isPveTab.value = isTab;
};
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>
.what-cebg {
  // background: rgba(38, 54, 67, 1);
  // background:url('@/assets/img/home/what-bg.jpg') no-repeat;
  position: relative;
  .what-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: 0;
      color: transparent;
    }
  }
  .cebg-game {
    font-size: 180px;
    font-family: "Big John";
    font-weight: 400;
    color: #16252d;
    opacity: 0.5;
    position: absolute;
    text-transform: uppercase;
    top: -85px;
    right: 0;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .gameplay-name {
    position: absolute;
    text-transform: uppercase;
    top: 500px;
    left: 0;
    z-index: 1;
    font-size: 180px;
    font-family: "BigJohn";
    color: #3e7ea6;
    line-height: 30px;
    opacity: 0.4;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .content {
    width: 1440px;
    padding-top: 62px;
    padding-bottom: 168px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    .what-content {
      display: flex;
      .monster {
        position: absolute;
        top: 20px;
        left: -210px;
        z-index: 2;
        width: 521px;
        height: 482px;
        img {
          width: 521px;
          height: 482px;
        }
      }
      .content-right {
        z-index: 2;
        width: 792px;
        margin: 0 auto;
        padding-bottom: 202px;
        .title {
          width: 100%;
          font-size: 90px;
          font-family: "JCuYuan";
          font-style: italic;
          color: #e6f8ff;
          // white-space: ;
          img {
            width: 100%;
          }
        }
        .slogan {
          width: 683px;
          margin: 0 auto;
          text-align: center;
          font-size: 16px;
          font-family: Arial;
          font-weight: bold;
          color: #ffffff;
        }
        .what-cebg-img {
          width: 100%;
          padding-top: 23px;
          padding-bottom: 63px;
          img {
            max-width: 100%;
            height: auto;
            object-fit: cover;
          }
        }
      }
    }

    .gameplay {
      z-index: 2;
      display: flex;
      flex-direction: column;
      position: relative;
      .title {
        // width: 544px;
        font-size: 44px;
        font-family: "Big John";
        font-weight: 400;
        color: #010001;
        padding-bottom: 111px;
      }
      .gameplay-img {
        width: 721px;
        height: 71px;
        left: -80px;
        top: 70px;
        position: absolute;
        padding-bottom: 40px;
        img {
          width: 721px;
          height: 71px;
        }
      }
      .pve {
        display: flex;
        margin-left: 92px;
        // justify-content: flex-end;
        .pve-left {
          // margin-top: 30px;
          width: 196px;
          height: 62px;
          position: relative;
          margin-right: 30px;
          color: #263641;
          cursor: pointer;
          background-image: url("@/assets/img/home/pve-btn.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          // border: 1px solid #333;
          // overflow: hidden;
          transition: background-image 0.3s;
        }
        .pve-left:hover {
          // background-image: none;
        }
        .pve-left::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: url("@/assets/img/home/pve-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.25s ease-in;
        }
        .pve-left: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.25s ease-in;
          transform: scaleX(1,1);
        }
        .pve-left-active {
          margin-top: 30px;
          width: 196px;
          height: 62px;
          margin-right: 30px;
          position: relative;
          cursor: pointer;
          background-image: url("@/assets/img/home/pve-btn-active.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          overflow: hidden;
          transition: background-image 1s ease-in-out;
        }
        .pve-left-active::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: url("@/assets/img/home/pve-btn.png") no-repeat;
          background-size:100% 100%;
          opacity: 0;
          transform: scaleX(1.1);
          clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        
          transition: transform 0.25s ease-in-out;
        }
        .pve-left-active:hover::after {
          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)
          );
          opacity: 1;
          transform: scaleX(1,1);
          transition: all 0.25s ease-in;
        }
        .pve-right {
          // margin-top: 30px;
          width: 196px;
          height: 62px;
          position: relative;
          background-image: url("@/assets/img/home/pvp-btn.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          // border: 1px solid #333;
          // overflow: hidden;
          transition: background-image 1s;
        }
        .pve-right::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: url("@/assets/img/home/pvp-btn-active.png") no-repeat;
          background-size:100% 100%;
          opacity: 1;
          transform: scaleX(1,1);
          clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
          transition: all 0.3s ease-in;
        }
        .pve-right:hover:after {
          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)
          );
          opacity: 1;
          transition: all 0.25s ease-in;
          transform: scaleX(1,1);
        }
        // .pve-right-active {
        //   // margin-top: 30px;
        //   width: 196px;
        //   height: 62px;
        //   position: relative;
        //   background-image: url("@/assets/img/home/pvp-btn.png") ;
        //   background-position: center;
        //   background-repeat: no-repeat;
        //   background-size: cover;
        //   transition: background-image 1s;
        // }

        // .pve-right-active::after {
        //   content: "";
        //   position: absolute;
        //   left: 0;
        //   right: 0;
        //   top: 0;
        //   bottom: 0;
        //   background: url("@/assets/img/home/pvp-btn-active.png")no-repeat;
        //   background-size:100% 100%;
        //   transform: scaleX(1,1);
        //   opacity: 1;
        //   clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        //   // transform-origin: center;
        //   transition: transform 0.3s ease-in;
        // }
        // .pve-right-active: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: transform 0.3s ease-in;
        //   transform: scaleX(1,1);
        // }
      }
      .pve-right-active {
          // margin-top: 30px;
          width: 196px;
          height: 62px;
          position: relative;
          margin-right: 30px;
          color: #263641;
          cursor: pointer;
          background-image: url("@/assets/img/home/pvp-btn.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          // border: 1px solid #333;
          // overflow: hidden;
          transition: background-image 0.3s;
        }
        .pve-right-active:hover {
          // background-image: none;
        }
        .pve-right-active::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: url("@/assets/img/home/pvp-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;
        }
        .pve-right-active: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);
        }
      .gameplay-content {
        display: flex;
        // background: #59a2d0;
        .gameplay-left {
          .pve-img {
            width: 710px;
            height: 400px;
          }
        }
        .gameplay-right {
          width: 767px;
          height: 333px;

          .slogan {
            width: 636px;
            height: 164px;
            margin: 0 auto;
            margin-top: 38px;
            font-size: 18px;
            line-height: 30px;
            font-family: Arial;
            font-weight: bold;
            color: #1d2931;
          }
        }
      }
    }
  }
}
</style>
