<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2025-12-16 11:10:26
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-01-15 14:29:16
 * @FilePath: /test-ranqi/src/views/Rotate.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <div
      @mouseenter="imgScale = 1.2"
      @mouseleave="imgScale = 1"
      @dblclick="dbclick"
      class="imgcenter-shadow"
    ></div>
    <img
      class="imgcenter"
      :src="center"
      :style="{ transform: `scale(${imgScale})` }"
      alt=""
    />
    <div class="out-box">
      <div
        v-for="item in imgArr"
        :key="item.num"
        @mouseenter="mouseenter"
        @mouseleave="mouseleave"
        class="a"
        :style="{
          background: `url(${item.src}) no-repeat`,
          backgroundSsize: '100% 100%;',
        }"
      ></div>
      <!-- <div class="a"></div> -->
      <!-- 地图 -->
      <div class="b"></div>
      <!-- 两个圆圈 -->
      <div class="c"></div>
      <div class="d"></div>
      <div class="e"></div>
    </div>
  </div>
</template>

<script>
// url(${item.src}) no-repeat
import center from "@/assets/bigwindowImg/rotate/center.png";
import a from "@/assets/bigwindowImg/rotate/a.png";
import b from "@/assets/bigwindowImg/rotate/b.png";
import c from "@/assets/bigwindowImg/rotate/c.png";
import d from "@/assets/bigwindowImg/rotate/d.png";
import e from "@/assets/bigwindowImg/rotate/e.png";
import f from "@/assets/bigwindowImg/rotate/f.png";
import g from "@/assets/bigwindowImg/rotate/g.png";

export default {
  name: "",
  data() {
    return {
      timer: null,
      rotateNum: 0,
      rotateNumb: 0,
      imgScale: 1,
      clickTimer: null,
      imgArr: [
        { src: a, num: 1 },
        { src: b, num: 2 },
        { src: c, num: 3 },
        { src: d, num: 4 },
        { src: e, num: 5 },
        { src: f, num: 6 },
        { src: g, num: 7 },
      ],
      center,
    };
  },
  mounted() {
    this.rotate();
  },
  methods: {
    rotate() {
      this.timer = setInterval(() => {
        this.rotateNum += 0.1;
        const outBox = document.querySelector(".out-box");
        const b = document.querySelector(".b");
        const c = document.querySelector(".c");
        const d = document.querySelector(".d");
        const e = document.querySelector(".e");
        const imgcenterShadow = document.querySelector(".imgcenter-shadow");
        const a = document.querySelectorAll(".a");

        outBox.style.transform = `rotateY(${this.rotateNum}deg)`;
        b.style.transform = ` rotateY(-${this.rotateNum}deg)  translateZ(10px) `;
        c.style.transform = `rotateX(90deg)  translateZ(230px) rotateZ(${this.rotateNum}deg)`;
        d.style.transform = `rotateX(90deg)  translateZ(230px) rotateZ(${this.rotateNum}deg)`;
        e.style.transform = `rotateX(90deg)  translateZ(130px) rotateZ(${this.rotateNum}deg)`;
        const degNum = 360 / this.imgArr.length;
        a.forEach((item, index) => {
          item.style.transform = ` rotateY(${
            degNum * index
          }deg) translateZ(300px) rotateY(-${
            degNum * index + this.rotateNum
          }deg)`;
        });
      }, 10);
    },

    dbclick() {
      console.log("双击");
    },
    mouseenter() {
      clearInterval(this.timer);
    },
    mouseleave() {
      this.rotate();
    },
  },
};
</script>
<style lang="scss" scoped>
// body {
//   // background: url("~@/assets/bigwindowImg/rotate/bg.png") no-repeat;
//   width: 100%;
//   height: 100%;
// }
.container {
  perspective: 1400px;
  transform-style: preserve-3d;

  transform: rotateX(-15deg);
  .qinxie {
  }
}
.imgcenter {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 50%;
  margin-left: -150px;
  top: -220px;
  transform-style: preserve-3d;
  pointer-events: none;
  transition: all 0.1s linear;
}
.imgcenter-shadow {
  position: absolute;

  width: 180px;
  height: 200px;
  background: red;
  left: 50%;
  margin-left: -100px;
  top: -180px;
  z-index: 999;
  opacity: 0;
  cursor: pointer;
}
.out-box {
  position: relative;
  // width: 100px;
  // height: 100px;
  margin: 300px auto;
  // background: red;
  transform-style: preserve-3d;

  // animation: rotateDog .5s linear infinite;
  &:hover {
    // animation-play-state: paused;
  }
  & .a {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: 1px;
    height: 70px;
    width: 50px;
    z-index: 99900;
    background: url("~@/assets/bigwindowImg/rotate/a.png") no-repeat;
    background-size: 100% 100% !important;
    cursor: pointer;
    // transition: all 0.1s linear;

    // background: blue;
    &:hover {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -28px;
      margin-left: -38px;
      height: 100px;
      width: 76px;
    }

    div {
      text-align: center;
    }
  }
  .b {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: -100px;
    transform-style: preserve-3d;

    // background: blue;
    height: 200px;
    width: 200px;
    transform: translateZ(200px) rotateX(-10deg);
    z-index: -1;
    pointer-events: none;
  }

  .c {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -300px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    // border: 1px solid red;
    // border-top-color: black;
    background: url("~@/assets/bigwindowImg/rotate/bottomC.png") center no-repeat;
    background-size: 100% 100%;
    transform: rotateX(90deg) translateZ(250px);
  }
  .d {
    position: absolute;
    left: 50%;
    top: 3px;
    margin-left: -300px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(89, 178, 245, 0.6);
    box-shadow: 0px 3px 1px 2px rgba(89, 178, 245, 0.6); /* 添加阴影效果 */
    // border-top-color: black;
    // background: url("~@/assets/bigwindowImg/rotate/bottomD.png") center no-repeat;
    transform: rotateX(90deg) translateZ(250px);
  }
  .e {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -200px;
    width: 400px;
    height: 400px;
    // border-radius: 50%;
    // border: 1px solid red;
    // border-top-color: black;
    background: url("~@/assets/bigwindowImg/rotate/circleBg.png") center no-repeat;
    background-size: 100% 100%;
    transform: rotateX(90deg) translateZ(250px);
  }
  .a:nth-child(1) {
    transform: translateZ(300px);
  }

  .a:nth-child(2) {
    transform: rotateY(60deg) translateZ(300px);
  }

  .a:nth-child(3) {
    transform: rotateY(120deg) translateZ(300px);
  }

  .a:nth-child(4) {
    transform: rotateY(180deg) translateZ(300px);
  }

  .a:nth-child(5) {
    transform: rotateY(240deg) translateZ(300px);
  }

  .a:nth-child(6) {
    transform: rotateY(300deg) translateZ(300px);
  }
}
@keyframes rotateDog {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(360deg);
  }
}
</style>
