psychological-competence-h5/src/views/cognitiveTask/speedCognitive/formal.vue

<template>
  <div class="app-container">
    <Header />
    <div class="main-container">
      <van-nav-bar :title="subjectInfo.name" left-arrow @click-left="goBack" />

      <div class="main-outline">
        <template v-if="!testFlag">
          <div class="main-text-div">
            <div id="left_top" class="flex-row">
              <div class="setting"></div>
              <div class="text" style="color: #57acbb">操作提示：</div>
            </div>
            <div class="left-desc-80" style="margin-top: 0.5rem">
              {{
                practiceFlag
                  ? "请先练习测试，练习完成后，即将正式测试。"
                  : "请开始正式测试！"
              }}
            </div>
          </div>
          <div class="btnArea">
            <van-button
              block
              class="start"
              round
              type="primary"
              @click="startTestFn()"
            >
              {{ practiceFlag ? "练习测试" : "正式测试" }}
            </van-button>
          </div>
        </template>
        <div v-if="running" class="activeTask txt-center">
          <!--   练习阶段不显示游戏进度   -->
          <!--          <MainProgress v-show="!practiceFlag" :cur-percentage="percentage" />-->
          <div v-if="!practiceFlag" class="progress-content">
            <van-progress
              :percentage="(currentIndex / gradeList.length) * 100"
              color="#f2826a"
              pivot-text="任务进度"
            />
          </div>
          <div class="glass-speed-task" @click="userClickToStop">
            <!--    倒计时    -->
            <p v-show="countDownShow" class="countdownStr">
              {{ countDownStr }}
            </p>
            <!--    十字图标    -->
            <img
              v-show="showWhiteFlag"
              class="crossImg"
              src="../../../assets/congnitiveAblitity/whiteFlag-new.png"
            />
            <!--     飞机   -->
            <SvgIcon
              v-show="planeAndCoveringVisible"
              ref="planeRef"
              :class="planeClass"
              color="#ffbb00"
              h="38"
              name="aircraft"
              w="38"
            />
            <!--    遮挡物    -->
            <div v-show="planeAndCoveringVisible" :class="coveringClass">
              <div class="white-line"></div>
            </div>
          </div>
        </div>
        <div>
          <!--          <button v-show="quitFlag" @click="endTest">退出</button>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header/index.vue";
import { dateFormat } from "@/utils/utils";

export default {
  name: "speedCognitive",
  components: { Header },
  data() {
    return {
      subjectInfo: "", //认知任务详情
      buttonName: "练习测试", // 正式测试  // 重新练习
      taskId: "", // 认知任务id

      testFlag: false, // 主逻辑显示标识
      // 是否是练习模式的标识，默认为 true
      practiceFlag: true,

      isPracticeEnd: true, // 是否完成练习

      //x轴坐标
      x: 0,
      //y轴坐标
      y: 80,
      // startPosition: 130,
      myBall: {},
      start: {},
      stopmove: {},
      //运动速度
      speed: 1,
      testState: false,

      oldSecond: 0, //定义时，分，秒，毫秒并初始化为0；
      oldMillSecond: 0,
      newSecond: 0,
      newMillSecond: 0, //秒
      //时间差
      second: 0,
      millSecond: 0,
      //时间差值
      time: 0,
      //游戏难度
      grade: 0,
      nextFlag: false,
      quitFlag: false,
      repeatFlag: false,

      //三个不同长度的长方形是否显示
      firstFlag: false,
      secondFlag: false,
      thirdFlag: false,

      //从上往下还是从下往上
      upToDown: false,
      downToUp: false,
      //倒计时
      countDownTime: 6, //开始前的倒计时
      countDownStr: "开始测试",
      countDownShow: true,
      //白色加号和测试物体是否显示
      showWhiteFlag: false,
      showDuckEgg: false,
      imgIndex: 0,
      userCanClick: false,
      recordedData: [
        // {
        //   imgIndex: "",
        //   speed: 0,
        //   length: 0,
        //   error: "NULL",
        //   level: grade === 100 ? '' : grade + 1,
        //   onceStartTime: dateFormat("YY-mm-dd HH:MM:SS", new Date(this.onceStartTime)),
        //   onceEndTime: dateFormat("YY-mm-dd HH:MM:SS", new Date()),
        //   responseTime: (performance.now() - this.responseStartTime).toFixed(5),
        //   hasResponse: this.hasResponse,
        // }
      ],
      // 每个试次记录的数据
      record: null,
      userId: "",
      dex: 0,
      taskStartTime: 0, // 任务开始时间
      taskEndTime: 0, // 任务结束时间
      onceStartTime: 0,
      hasResponse: 0, // 用户是否反应标识 0 表示已反应，1 表示未反应
      responseStartTime: 0,
      tryStartTime: 0,
      // 飞机的移动方向，up 表示向上移动，down 表示向下移动
      direction: "down",
      // 飞机每次移动的间隔，单位毫秒
      interval: 20,
      // 游戏面板的宽度，单位像素
      with: 1248,
      // 游戏面板的高度，单位像素
      height: 2073,
      // 游戏是否开始
      running: false,
      // 游戏的当前试次
      currentIndex: 0,
      // 控制飞机和遮挡物显隐的标识
      planeAndCoveringVisible: false,
      // 飞机在垂直方向上的移动距离
      dy: 0,
      // 控制飞机移动的定时器
      moveTimer: null,
      // 控制倒计时的定时器
      myInterval: null,
      // 游戏最大等级
      maxLevel: 9,

      // 游戏等级权重
      gradeList: []
    };
  },
  computed: {
    /**
     * 计算游戏进度
     * @returns {number}
     */
    percentage() {
      return this.currentIndex / this.maxIndex;
    },
    /**
     * 飞机的类名
     * @returns {string}
     */
    planeClass() {
      return this.direction === "up" ? "plane-up" : "plane-down";
    },

    /**
     * 遮挡物的类名
     * @returns {string}
     */
    coveringClass() {
      if (this.grade > 6) {
        return this.direction === "down"
          ? "covering-long-down"
          : "covering-long-up";
      } else if (this.grade > 3) {
        return this.direction === "down"
          ? "covering-middle-down"
          : "covering-middle-up";
      } else {
        return this.direction === "down"
          ? "covering-short-down"
          : "covering-short-up";
      }
    },

    /**
     * 遮挡物的长度
     * @returns {number}
     */
    coveringLength() {
      if (this.grade > 6) {
        return 450;
      } else if (this.grade > 3) {
        return 330;
      } else {
        return 420;
      }
    },

    /**
     * 飞机的移动速度
     * @returns {number}
     */
    planeSpeed() {
      if ([3, 6, 9].includes(this.grade)) {
        return this.pxToRem(8);
      } else if ([2, 5, 8].includes(this.grade)) {
        return this.pxToRem(4);
      } else {
        return this.pxToRem(2);
      }
    },
    /**
     * 飞机从起始点移动到遮挡物边缘所需时长，单位毫秒
     * @returns {number}
     */
    duration() {
      console.log(this.planeSpeed, "飞机移动速度");
      if (this.grade > 6) {
        // 232 表示长遮挡物上边缘距离飞机起始点的长度，单位像素
        return (this.pxToRem(632) / this.planeSpeed) * this.interval;
      } else if (this.grade > 3) {
        // 282 表示短遮挡物上边缘距离飞机起始点的长度，单位像素
        return (this.pxToRem(682) / this.planeSpeed) * this.interval;
      } else {
        // 332 表示较短遮挡物上边缘距离飞机起始点的长度，单位像素
        return (this.pxToRem(732) / this.planeSpeed) * this.interval;
      }
    },
    /**
     * 飞机的起始位置
     * @returns {number}
     */
    startPosition() {
      if (this.direction === "down") {
        return this.pxToRem(-198);
      } else {
        return this.pxToRem(this.height);
      }
    },
    /**
     * 飞机从遮挡物上边缘到白线位置实际所需时间
     * @returns {number}
     */
    actualArrivalTime() {
      console.log(
        this.pxToRem(this.coveringLength),
        "this.pxToRem(this.coveringLength)"
      );
      console.log(this.planeSpeed, "this.planeSpeed");
      console.log(this.interval, "this.interval");
      console.log(
        (this.pxToRem(this.coveringLength) / this.planeSpeed) * this.interval,
        "this.pxToRem(this.coveringLength) / this.planeSpeed * this.interval"
      );
      return (
        (this.pxToRem(this.coveringLength) / this.planeSpeed) * this.interval
      );
    },

    /**
     * 游戏的最大试次
     *  练习阶段 6 次，测试阶段 36 次
     * @returns {number}
     */
    maxIndex() {
      if (this.practiceFlag) {
        return 6;
      } else {
        return this.gradeList.length;
      }
    }
  },
  created() {
    this.taskId = this.$route.query.taskId;
    console.log(this.$route, "this.$route");
    this.gradeList = this.gradeList.sort(() => Math.random() - 0.5);
    this.init(this.taskId);
    console.log(this.taskId, "this.taskId");
    // 初始化动态参数
    this.getParam();
  },
  mounted() {
    console.log("this.maxIndex: ", this.maxIndex);
    console.log("this.gradeList: ", this.gradeList);
    // this.getParam();
    document.addEventListener("keydown", this.onKeydown);
  },
  methods: {
    getParam() {
      this.$http.get(
        `/taskParam/getByTaskId?taskId=${this.taskId}`,
        {},
        msg => {
          console.log(msg, "msg");
          msg.data.forEach(item => {
            if (item.code === "SC_Try_Count") {
              let tryCount = Number(item.value);
              for (let i = 0; i < tryCount; i++) {
                this.gradeList = this.gradeList.concat([
                  1,
                  2,
                  3,
                  4,
                  5,
                  6,
                  7,
                  8,
                  9
                ]);
                console.log(
                  this.gradeList,
                  "this.gradeListthis.gradeListthis.gradeListthis.gradeList"
                );
              }
            }
          });
        }
      );
    },

    initRecord() {
      return {
        imgIndex: "",
        speed: 0,
        length: 0,
        error: "NULL",
        level: 0,
        onceStartTime: 0,
        onceEndTime: 0,
        responseTime: 0,
        hasResponse: 0,
        responseStartTime: 0, // 响应开始时间戳
        isValidResponse: 0 // 是否为有效响应
      };
    },
    /**
     * px to rem, 1 rem = 192px
     */
    pxToRem(px) {
      return px / 192;
    },
    onKeydown(e) {
      let key = e.keyCode;
      if (key === 122) {
        e.preventDefault();
        // screenfull.toggle()
      }
      if (32 === key) {
        this.userClickToStop();
      }
    },
    init() {
      //       this.testPlanId = this.$route.query.testPlanId || ''
      this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
      this.subjectInfo = JSON.parse(sessionStorage.getItem("subjectInfo"));
      // this.subjectInfo = JSON.parse(oSessionStorage.getItem("subjectInfo"))
      // this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f")
    },

    startTestFn() {
      // 显示游戏面板
      this.running = true;
      // 进入全屏
      this.screen();
      // 开始倒计时
      this.countDownTime = 6;
      this.countDownStr = "马上开始！";
      // 显示倒计时
      this.countDownShow = true;
      this.countDown();

      // 重置游戏的当前试次
      this.currentIndex = 0;

      // 清空游戏试次记录
      this.recordedData = [];

      // 记录游戏开始时间
      this.taskStartTime = dateFormat("YY-mm-dd HH:MM:SS", new Date());
    },
    //点击停止物体运动,并用来判断成绩
    userClickToStop() {
      this.record.hasResponse = 1; // 标记用户做出了反应
      console.log("进入stop方法， this.userCanClick: ", this.userCanClick);
      if (this.userCanClick) {
        // 按键锁，上锁
        this.userCanClick = false;

        // 记录当前试次的结束时间
        this.record.onceEndTime = dateFormat("YY-mm-dd HH:MM:SS", new Date());
        // 是否为有效响应
        this.record.isValidResponse = 1;
        // 记录响应时间
        this.record.responseTime = (
          performance.now() - this.tryStartTime
        ).toFixed(2);
        // 计算响应误差 = 实际应到达时间 - 响应时间，并取绝对值
        this.record.error = Math.abs(
          this.actualArrivalTime - this.record.responseTime
        ).toFixed(2);
        console.log(
          this.actualArrivalTime,
          "实际应到达时间",
          this.record.responseTime,
          "响应时间"
        );
        // 向数组中发送数据
        this.recordedData.push(this.record);

        // 停止控制飞机移动的定时器
        clearInterval(this.moveTimer);

        // 隐藏飞机和遮挡物
        this.planeAndCoveringVisible = false;

        // 试次数量加一
        this.currentIndex++;

        // 进入下一个试次
        this.nextOnce();
      } else {
        // 无效响应
        this.record.isValidResponse = 0;
      }
    },
    screen() {
      // screenfull.toggle()
    },
    screenExit() {
      // screenfull.exit()
    },
    countDown() {
      // 测试时间倒计时
      this.myInterval = setInterval(() => {
        this.countDownTime--;
        this.countDownStr = this.countDownTime;
        if (this.countDownTime === 0) {
          // 隐藏倒计时
          this.countDownShow = false;
          // 清除定时器
          clearInterval(this.myInterval);

          // 恢复倒计时次数
          this.countDownTime = 6;
          // 开始试次
          this.nextOnce();
        }
      }, 1000);
    },

    nextOnce() {
      console.log(this.currentIndex, "nextONce");
      // 试次数量大于或等于最大试次（36）时，游戏结束
      if (this.currentIndex >= this.maxIndex) {
        console.log("游戏结束");
        // 记录游戏结束时间
        this.taskEndTime = dateFormat("YY-mm-dd HH:MM:SS", new Date());
        this.screen();

        // 如果是正式测试，则提交数据
        if (this.practiceFlag) {
          // 将练习模式标识设置成 false
          this.practiceFlag = false;
          // 隐藏游戏界面
          this.running = false;
        } else {
          // 如果是正式测试，则提交数据
          this.sendData();
          // 将练习模式标识设置成 false
          this.practiceFlag = true;
          // 隐藏游戏界面
          this.running = false;
        }
        return;
      }

      // 初始化试次记录数据
      this.record = this.initRecord();

      // 每 4 个 试次，升一个等级（重构之前的方式）
      // if (this.currentIndex % 4 === 0) {
      //   this.grade++
      // }

      // 难度等级要穿插着来，不要顺序呈现
      // this.grade = Math.floor(Math.random() * this.maxLevel)
      this.grade = this.gradeList[this.currentIndex];
      // this.grade = 7

      // 每 3 个试次换一次方向
      if (this.currentIndex % 3 === 0) {
        this.direction = this.direction === "down" ? "up" : "down";
      }

      // 记录数据
      this.record.imgIndex = this.currentIndex + 1;
      this.record.speed = Math.ceil(this.planeSpeed * 192); // rem to px
      this.record.length = this.coveringLength;
      this.record.level = this.grade;
      this.record.onceStartTime = dateFormat("YY-mm-dd HH:MM:SS", new Date());

      console.log("this.record: ", this.record);

      // 显示十字图标
      this.showWhiteFlag = true;

      // 飞机显示之前的空屏 2 秒
      setTimeout(() => {
        // 2s 之后隐藏十字图标
        this.showWhiteFlag = false;

        // 设置飞机移动的起始点
        this.dy =
          this.direction === "down"
            ? this.pxToRem(-198)
            : this.pxToRem(this.height);
        // this.dy = this.direction === 'down' ? -1 : 10.8
        console.log(this.dy, "飞机起始点");
        console.log(this.pxToRem(this.height), "飞机起始点上");
        console.log(this.pxToRem(-198), "飞机起始点下");

        // 显示飞机和遮挡物
        this.planeAndCoveringVisible = true;

        this.moveTimer = setInterval(() => {
          console.log(
            "this.grade: ",
            this.grade,
            "   this.planeSpeed: ",
            this.planeSpeed
          );
          // 移动飞机
          if (this.direction === "down") {
            this.dy += this.planeSpeed;
            if (this.dy <= this.pxToRem(this.height)) {
              this.$refs.planeRef.$el.style.top = this.dy + "rem";
            } else {
              // 记录当前试次的结束时间
              this.record.onceEndTime = dateFormat(
                "YY-mm-dd HH:MM:SS",
                new Date()
              );
              this.record.error = (
                ((this.pxToRem(this.height + this.coveringLength) /
                  this.planeSpeed) *
                  this.interval) /
                2
              ).toFixed(2);
              // 向记录数组中添加数据
              this.recordedData.push(this.record);
              // 关闭按键锁
              this.userCanClick = false;

              // 飞机移动出游戏边界时，停止控制飞机移动的定时器
              clearInterval(this.moveTimer);
              // 隐藏飞机和遮挡物
              this.planeAndCoveringVisible = false;
              // 试次数量加一
              this.currentIndex++;
              // 进入下一个试次
              this.nextOnce();
            }
          }
          if (this.direction === "up") {
            this.dy -= this.planeSpeed;
            if (this.dy >= 0) {
              this.$refs.planeRef.$el.style.top = this.dy + "rem";
            } else {
              // 记录当前试次的结束时间
              this.record.onceEndTime = dateFormat(
                "YY-mm-dd HH:MM:SS",
                new Date()
              );
              this.record.error = (
                ((this.pxToRem(this.height + this.coveringLength) /
                  this.planeSpeed) *
                  this.interval) /
                2
              ).toFixed(2);
              // 向记录数组中添加数据
              this.recordedData.push(this.record);
              // 关闭按键锁
              this.userCanClick = false;

              // 飞机移动出游戏边界时，停止控制飞机移动的定时器
              clearInterval(this.moveTimer);
              // 隐藏飞机和遮挡物
              this.planeAndCoveringVisible = false;
              // 试次数量加一
              this.currentIndex++;
              // 进入下一个试次
              this.nextOnce();
            }
          }
        }, this.interval);

        // 飞机移动到遮挡物边缘时，开启按键锁
        console.log(this.duration, "到遮挡物所需要的时间");
        this.sleep(this.duration).then(() => {
          console.log("飞机进入了遮挡物,可以触发点击事件");
          // 记录当前试次的响应开始时间，用于计算响应时间
          this.record.responseStartTime = Date.now();
          this.tryStartTime = performance.now();
          // 打开按键锁
          this.userCanClick = true;
        });
      }, 2000);
    },
    sendData() {
      console.log("发送数据");

      let result = {
        userId: this.userId,
        results: this.recordedData,
        testPlanId: this.$route.query.testPlanId || "",
        taskStartTime: this.taskStartTime,
        taskEndTime: this.taskEndTime
      };
      console.log(result);
      // 退出全屏
      // this.screenExit()
      // this.$http.post(
      //     "cognize/RDT",
      //     {
      //       userId: this.userId,
      //       totalEarned: this.totalEarn,
      //       rawData: this.userData,
      //       testPlanId: this.$route.query.testPlanId || "",
      //       totalAerated: this.totalAerated,
      //       taskStartTime: dateFormat("YY-mm-dd HH:MM:SS", new Date(this.taskStartTime)),
      //       taskEndTime: dateFormat("YY-mm-dd HH:MM:SS", new Date(this.taskEndTime)),
      //     },
      //     (response) => {
      //       // this.showResult = true;
      //       //   this.drawLine1();
      //       //   this.drawLine2();
      //       if (response && response.code == "200") {
      //         //跳转新测试结果页面
      //         this.goTestResult(response.data);
      //       } else {
      //         this.$toast.fail("获取数据失败！服务器异常");
      //       }
      //     }
      // );
      this.$http.post(`/cognize/speedCognitive`, result, response => {
        console.log("结果", response);
        if (response.code === "200") {
          // this.$message({
          //   message: "测试结束！",
          //   type: "success"
          // })

          sessionStorage.setItem("testResult", JSON.stringify(response.data));
          this.goTestResult(response.data);
          // this.$router.push({
          //     name: "testResultNew",
          //     params: {
          //         title: '时间知觉能力测试',
          //         come: 1, //1-来自测试列表，2-来自测试计划，3-来自测试记录列表
          //     },
          // });
        } else {
          this.$message({
            message: "测试失败！服务器异常",
            type: "error"
          });
          this.$router.push({ name: "CognitiveAbility" });
        }
      });
    },
    sleep(time) {
      return new Promise(resolve => setTimeout(resolve, time));
    }
  },
  beforeDestroy() {
    // 清除控制飞机移动的定时器
    clearInterval(this.moveTimer);
    // 清除控制倒计时的定时器
    clearInterval(this.myInterval);
    document.removeEventListener("keydown", this.onKeydown);
  }
};
</script>
<style lang="scss" scoped>
.progress-content {
  position: absolute;
  width: 100%;
  height: 20px;
  left: 0;
  top: 60px;
  box-sizing: border-box;
  padding: 4px 10px;
}

.btnArea {
  width: 75%;
  margin: 60px auto 0;
}

.setting {
  background: url("../../../assets/9551.png");
  background-size: 100% 100%;
  margin-right: 5px;
  width: 20px;
  height: 20px;
}

.el-progress-bar__inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #ff3c3c !important;
  text-align: right;
  border-radius: 100px;
  line-height: 1;
  white-space: nowrap;
  transition: width 0.6s ease;
  background-image: linear-gradient(to right, #ffd650, #ff8431) !important;
}

.activeTask {
  background: url(../../../assets/congnitiveAblitity/speed-bg.png) no-repeat
    center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .glass-speed-task {
    width: 94%; // 1248px;
    height: 400px; // 864px;
    background: rgba(255, 255, 255, 0.39);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
}

.countdownStr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  width: 60%;
  height: 0.3646rem;
  line-height: 0.3646rem;
  text-align: center;
}

.crossImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.2646rem;
  height: 1.2646rem;
}

.covering-short-down {
  opacity: 1;
  border-radius: 8px;
  width: 1rem; // 50px;
  height: 4rem; // 180px;
  background-color: #40aaff;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -0.5208rem); // -100px
  z-index: 2;

  .white-line {
    width: 100%; // 50px;
    height: 0.0604rem; // 2px;
    background-color: white;
    position: absolute;
    top: 2.208rem; // 100px;
    left: 0;
    z-index: 2;
  }
}

.covering-short-up {
  opacity: 1;
  border-radius: 8px;
  width: 1rem; // 50px;
  height: 4rem; // 180px;
  background-color: #40aaff;
  position: absolute;
  top: 35%;
  left: 50%;
  //transform-origin: 0.1302rem 0.5208rem; // 25px 100px;
  transform: translate(-50%, -0.5208rem) rotate(180deg);
  z-index: 2;

  .white-line {
    width: 100%; // 50px;
    height: 0.0604rem; // 2px;
    background-color: white;
    position: absolute;
    top: 2.208rem; // 100px;
    left: 0;
    z-index: 2;
  }
}

.covering-middle-down {
  opacity: 1;
  border-radius: 12px;
  width: 1rem; // 50px;
  height: 4.5rem; // 230px;
  background-color: #40aaff;
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -0.78125rem); // -150px
  z-index: 2;

  .white-line {
    width: 100%; // 50px;
    height: 0.06rem; // 2px;
    background-color: white;
    position: absolute;
    top: 2.69125rem; // 150px;
    left: 0;
    z-index: 2;
  }
}

.covering-middle-up {
  opacity: 1;
  border-radius: 12px;
  width: 1rem; // 50px;
  height: 4.5rem; // 230px;
  background-color: #40aaff;
  position: absolute;
  top: 35%;
  left: 50%;
  //transform-origin: 0.1302rem 0.78125rem; // 25px 150px;
  transform: translate(-50%, -0.78125rem) rotate(180deg);
  z-index: 2;

  .white-line {
    width: 100%; // 50px;
    height: 0.06rem; // 2px;
    background-color: white;
    position: absolute;
    top: 1.88125rem; // 150px;
    left: 0;
    z-index: 2;
  }
}

.covering-long-down {
  opacity: 1;
  border-radius: 12px;
  width: 1rem; // 50px;
  height: 4.5rem; // 280px;
  background-color: #40aaff;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -1.0416rem); // -200px
  z-index: 2;

  .white-line {
    width: 100%; // 50px;
    height: 0.06rem; // 2px;
    background-color: white;
    position: absolute;
    top: 2.4416rem; // 200px;
    left: 0;
    z-index: 2;
  }
}

.covering-long-up {
  opacity: 1;
  border-radius: 12px;
  width: 1rem; // 50px;
  height: 4.5rem;
  background-color: #40aaff;
  position: absolute;
  top: 40%;
  left: 50%;
  //transform-origin: 0.1302rem 1.0417rem;// 25px 200px;
  transform: translate(-50%, -1.0416rem) rotate(180deg);
  z-index: 2;

  .white-line {
    width: 100%; // 50px;
    height: 0.06rem; // 2px;
    background-color: white;
    position: absolute;
    top: 2.4416rem; // 200px;
    left: 0;
    z-index: 2;
  }
}

.plane-down {
  background: transparent !important;
  position: absolute;
  width: -0.2604rem; // -50px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  z-index: 1;
}

.plane-up {
  background: transparent !important;
  position: absolute;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

#shelterRec1 {
  opacity: 1;
  /* border-radius: 12px; */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 50px;
  height: 100px;
  background-color: #40aaff;
  position: absolute;
  margin-top: 200px;
  /* top: 50%;
		  margin-top:-100px; */
  left: 50%;
  margin-left: -25px;
  /* margin-left:25px; */
  z-index: 2;
}

#myBall {
  position: absolute;
  margin-top: -50px;
  left: 50%;
  margin-left: -10px;
  z-index: 1;
  transform: rotate(180deg);
  background: transparent !important;
}

#shelterRec2 {
  opacity: 1;
  /* border-radius: 12px; */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 50px;
  height: 150px;
  background-color: #40aaff;
  position: absolute;
  margin-top: 150px;
  left: 50%;
  margin-left: -25px;
  z-index: 2;
}

#shelterRec3 {
  opacity: 1;
  /* border-radius: 12px; */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 50px;
  height: 200px;
  background-color: #40aaff;
  position: absolute;
  margin-top: 100px;
  left: 50%;
  margin-left: -25px;
  z-index: 2;
}

#targetRec {
  opacity: 1;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  /* border-radius: 12px; */
  width: 50px;
  height: 30px;
  background-color: #40aaff;
  position: absolute;
  margin-top: 300px;
  left: 50%;
  margin-left: -25px;
  z-index: 2;
}

#whiteLine {
  width: 50px;
  height: 20px;
  background-color: white;
  position: absolute;
  margin-top: 298px;
  left: 50%;
  margin-left: -25px;
  z-index: 2;
}

#BshelterRec1 {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #40aaff;
  width: 50px;
  height: 100px;
  /* background-color: black; */
  position: absolute;
  margin-top: 240px;
  left: 50%;
  margin-left: -25px;
  z-index: 2;
}

#BmyBall {
  background: transparent !important;
  position: absolute;
  margin-top: 420px;
  left: 50%;
  margin-left: -10px;
  z-index: 1;
}

#BshelterRec2 {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #40aaff;
  width: 50px;
  height: 150px;
  /* background-color: black; */
  position: absolute;
  margin-top: 240px;
  left: 50%;
  margin-left: -25px;
  z-index: 2;
}

#BshelterRec3 {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #40aaff;
  width: 50px;
  height: 200px;
  /* background-color: black; */
  position: absolute;
  margin-top: 240px;
  left: 50%;
  margin-left: -25px;
  z-index: 2;
}

#BtargetRec {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

  background-color: #40aaff;
  width: 50px;
  height: 30px;
  /* background-color: black; */
  position: absolute;
  margin-top: 208px;
  left: 50%;
  margin-left: -25px;
  z-index: 2;
}

#BwhiteLine {
  width: 50px;
  height: 2px;
  background-color: white;
  position: absolute;
  margin-top: 238px;
  left: 50%;
  margin-left: -25px;
  z-index: 2;
}

.glass {
  width: 932px;
  height: 593px;
  background: rgba(255, 255, 255, 0.39);
  border: 3px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  margin: 5vh auto;
  position: relative;
  overflow: hidden;
}

/* .el-bg-inner-running .el-progress-bar__inner{
    background-color:unset !important;
    background-image:linear-gradient(to right,#FF3C3C,#6855ff) !important
} */
/*#targetRec2{*/
/*  width: 20px;*/
/*  height: 200px;*/
/*  background-color: black;*/
/*  position: absolute;*/
/*  margin-top: 100px;*/
/*  margin-left: 600px;*/
/*}*/
/*#targetRec3{*/
/*  width: 20px;*/
/*  height: 200px;*/
/*  background-color: black;*/
/*  position: absolute;*/
/*  margin-top: 100px;*/
/*  margin-left: 600px;*/
/*}*/

.testMainDivMove {
  margin: 0 auto;
  margin-top: 10px;
  background: black;
  background-size: cover;
  /* text-align:center; */
  width: 500px;
  height: 300px;
  /* object-fit:fill; */
}
</style>