<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2025-12-20 09:20:39
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-01-15 14:29:29
 * @FilePath: /test-ranqi/src/views/Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="ind"

  >
    <img class="img" :src="bg" alt="" />


    <Left />
    <Right />
    <div
      class="center-rotate"
      :style="{
        top: innerWidth > 1920 ? '240px' : innerWidth <= 1600 ? '17%' : '230px',
      }"
    >
      <!-- <div
        class="scale"
        :style="{
          transform:
            innerWidth >= 1920
              ? `scale(1.1)`
              : innerWidth < 1600
              ? `scale(1)`
              : `scale(${3* scaleX},${3 * scaleX})`,
        }"
      >
        <Rotate />
      </div> -->
      <div
        class="scale"
        :style="{
          transform:
            innerWidth >= 1920
              ? `scale(1.5)`
              : innerWidth < 1600
              ? `scale(1.1)`
              : `scale(${1.63 * scaleX},${1.63 * scaleX})`,
        }"
      >
        <Rotate />
      </div>
    </div>
  </div>
</template>

<script>
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
import Rotate from "./components/Rotate.vue";
import bg from "@/assets/bigwindowImg/rotate/bg.png";

export default {
  name: "",
  components: {

    Left,
    Right,
    Rotate,
  },
  data() {
    return {
      bg,
      scaleX: 1,
      innerWidth: 0,
      innerHeight: 0,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.innerWidth = window.innerWidth;
    this.innerHeight = window.innerHeight;
    console.log(window.innerWidth);
    // this.scaleX = window.innerWidth / 2880;
    this.scaleX = window.innerWidth / 1920;
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
// .ind {
//   // width:2880px;
//   width: 1920px;
//   height: 100vh;

//   background: black;
//   position: relative;
//   left: 50%;
//   top: 0px;
//   // margin-left: -1440px;
//   margin-left: -960px;
//   overflow: hidden;
// }
.center-rotate {
  // padding-top: 240px;
  position: absolute;
  width: 40%;
  height: 100%;
  z-index: 999;
  left: 50%;
  top: 20%;
  margin-left: -20%;
}
.scale {
  transform: scale(2.1);
}
.img {
  opacity: 0.5;
  height: 100%;
  position: absolute;
  // margin-left:-920px;

  //  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}
</style>
