psychological-competence/src/views/CognitiveAbilityTask/ETBexperiment_new.vue

<template>
  <div>
    <!--<div v-if="testFlag" class="desc_wrap">-->
    <!--<div-->
    <!--style="-->
    <!--width: 70%;-->
    <!--height: 100%;-->
    <!--background: rgb(248, 248, 248);-->
    <!--opacity: 1;-->
    <!--border-radius: 12px;-->
    <!--margin: 0 auto;-->
    <!--"-->
    <!--&gt;-->
    <!--<div class="left_part"

>-->
    <!--<div id="left_top">-->
    <!--<div>-->
    <!--<div id="setting">-->
    <!--<img src="../../assets/9551.png" alt="" />-->
    <!--</div>-->
    <!--<div id="text">-->
    <!--<span>操作提示：</span>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div style="margin: 100px auto; width: 80%; text-align: left">-->
    <!--<p> 请你注视眼前屏幕，注视点“+”过后，你将陆续看到一些表情图片，请你想象在看到他人对你做出这种表情时，他有着什么样的情绪。请尽快和尽可能准确的作出判断，并按下相应按键。【按键为：开心、害怕、生气、厌恶、悲伤以及惊讶】。</p>-->
    <!--&lt;!&ndash; <p>{{subjectInfo.description}}</p> &ndash;&gt;-->
    <!--</div>-->
    <!--</div>-->
    <!--<div-->
    <!--class="right_part"-->
    <!--:style="{background:'url(' + require('../../assets/page28.png') + ')','background-size': '100% 100%',}"-->
    <!--&gt;-->
    <!--<div id="title">-->
    <!--<span>任务一</span>-->
    <!--</div>-->
    <!--<div style="position: absolute; bottom: 30px; right: 38%">-->
    <!--<el-button type="primary" class="start" @click="startTiming()">开始测试</el-button>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->

    <div v-if="!testFlag" class="activeTask">
      <MainProgress v-if="testMode && testMode !== '0'" :cur-percentage="(cumulation + 1) / 72" />
      <div class="taskHead">
        <div class="scale" @click.stop="screen">
          <img src="@/assets/small-big.png" alt="" />
        </div>
      </div>

      <div style="width: 50%; margin-left: 10%; margin-top: 24px; z-index: 10">
        <p v-if="testMode == 0" style='margin-top:50px'>&nbsp;</p>
      </div>

      <p v-if="timingShow" class="timingBox">{{ countDownStr }}</p>

      <div
        v-if="crossShow && !expressionShow && !buttonShow"
        style="text-align: center"
      >
        <img
          src="../../assets/congnitiveAblitity/whiteFlag-new.png"
          alt=""
          style="width: 50px; height: 50px; margin-top: 20%"
        />
      </div>
      <div class="shape_glass">
        <img
          v-if="expressionShow && !crossShow"
          class="active-img addImg"
          :src="examImgUrl"
          alt=""
        />
      </div>

      <!-- <div
        v-if="buttonShow && !crossShow && !expressionShow"
        class="btn-content"
      >
        <el-button class="butt" @click="userClick('happy')">开心</el-button>
        <el-button class="butt" @click="userClick('fear')">害怕</el-button>
        <el-button class="butt" @click="userClick('angry')">生气</el-button>
        <el-button class="butt" @click="userClick('disgust')">厌恶</el-button>
        <el-button class="butt" @click="userClick('sad')">悲伤</el-button>
        <el-button class="butt" @click="userClick('surprise')">惊讶</el-button>
      </div> -->
      <div v-if="buttonShow && !crossShow" class="btn-content">
        <el-button
          v-for="item in emoList"
          :key="item.val"
          class="butt"
          :class="{
            active: item.val == resultData[cumulation].emoType && showGuider,
          }"
          @click="userClick(item.val)"
        >
          {{ item.name }}
        </el-button>
      </div>
      <div class="guider" v-show="showGuider">
        <div class="txt">
          <p class="explain">
            观察图片中人物的面部表情，想象人物有着怎样的情绪。点击下方按钮，选择对应的情绪
          </p>
          <!-- <div class="next_step">知道啦</div> -->
        </div>
        <!-- <div class="guider_img">
        <img src="../../assets/congnitiveAblitity/ETBnew/m09-happy-04.jpg" alt="">
      </div>

      <div class="btn-content guider_btn">
        <el-button class="butt" @click="userClick('happy')">开心</el-button>
        <el-button class="butt" @click="userClick('fear')">害怕</el-button>
        <el-button class="butt" @click="userClick('angry')">生气</el-button>
        <el-button class="butt" @click="userClick('disgust')">厌恶</el-button>
        <el-button class="butt" @click="userClick('sad')">悲伤</el-button>
        <el-button class="butt" @click="userClick('surprise')">惊讶</el-button>
      </div> -->
      </div>
    </div>

    <go-back />
  </div>
</template>

<script>
import { oSessionStorage, preloader } from "@/utils/utils";
import screenfull from "screenfull";
import MainProgress from "@/components/MainProgress/index.vue";
import GoBack from "@/components/goBack/index.vue";
export default {
  name: "ETBexperiment_new",
  components: {GoBack, MainProgress},
  data() {
    return {
      testMode: null, //是引导模式还是正式测试模式
      buttonShowTime: 2000, //按钮出现的时间
      cycles: 71, //循环的次数
      showGuider: false, //显示灰色背景当作引导

      testFlag: true, //显示提示页面与测试页面控制开关
      timingShow: true, //倒计时5秒提示开始
      timingFlag: null, //倒计时名称
      timingNum: 5, //倒计时5秒
      countDownStr: "测试马上开始！",
      crossShow: false, //显示注视点
      expressionShow: false, //显示表情图片
      buttonShow: false, //显示选择按钮
      timingOne: null,
      timingTwo: null,
      timingThree: null,
      flag: null, //反应时间计时器名
      commonTime: 0, //计时器获取反应时间
      cumulation: 0, //累加器
      examImgUrl: "", //展示图片
      arrList: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10"], //取样数组
      randomArr: [], //从十个人中随机获取3个人
      resultData: [
        // {
        //     index:"",//序号
        //     emoType:"",// 情绪类型
        //     emoAmp:"",// 整数0，1，2...
        //     userSelectEmoType:"",//用户选择的情绪类型
        //     responseTime:"",//反应时（ms）
        //     correct:"",//用户反映正确性 True, False
        //     imgUrl:"", //图片地址
        // }
      ],
      emoList: [
        { name: "开心", val: "happy" },
        { name: "害怕", val: "fear" },
        { name: "生气", val: "angry" },
        { name: "厌恶", val: "disgust" },
        { name: "悲伤", val: "sad" },
        { name: "惊讶", val: "surprise" },
      ],

      baseUrlPort: ''
    };
  },
  // 页面初始化函数
  created() {
    this.subjectInfo = JSON.parse(oSessionStorage.getItem("subjectInfo"));
    this.userId = sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f");
    this.taskId = this.$route.query.taskId;
    this.testMode = this.$route.query.testMode;
  },
  mounted() {
    this.baseUrlPort = window.location.origin
    // this.imgListSerialize();
    //进入页面即初始化开始测试
    console.log(this.testMode);
    //  this.startTiming();

    if (this.testMode == "0") {
      //进入引导模式
      this.buttonShowTime = 20000000;
      this.cycles = 6;
      this.startTiming();
    } else {
      //进入正式测试模式
      this.buttonShowTime = 2000;
      this.cycles = 71;
      this.startTiming();
    }
    //判断是引导模式还是正式测试模式
  },
  methods: {
    screen() {
      // 如果不允许进入全屏，发出不允许提示
      // if (!screenfull.isEnabled) {
      //   this.$message("您的浏览器不能全屏");
      //   return false;
      // }
      screenfull.toggle();
    },
    screenOpen() {
      screenfull.request();
    },
    screenExit() {
      screenfull.exit();
    },
    startTiming() {
      this.screen();

      if (
        sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == "" ||
        sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f") == null
      ) {
        this.$message.error("请先登录！");
        return;
      }
      //关闭提示内容窗口
      this.testFlag = false;
      console.log(this.timingNum);
      this.timingFlag = setInterval(() => {
        if (this.timingNum == 0) {
          this.countDownStr = "开始";

          setTimeout(() => {
            //关闭倒计时提示页面
            this.timingShow = false;

            this.timingFlag = clearInterval(this.timingFlag);
            //练习开始
            // this.isPractice();
            this.startTest();
          }, 1000);

          this.timingFlag = clearInterval(this.timingFlag);
        } else {
          this.countDownStr = this.timingNum;
          this.timingNum--;
        }
      }, 1000);
    },
    format(percentage) {
      return percentage === 100 ? "任务已完成" : "任务进度";
    },
    startTime() {
      //初始化设置计时器为0
      this.commonTime = 0;

      this.flag = setInterval(() => {
        this.commonTime++;
      }, 10);
    },
    endTime() {
      this.flag = clearInterval(this.flag);
    },
    randomList() {
      // 从十个人中随机获取三个不同的人
      this.randomArr = [];

      for (let k = 0; k < 3; k++) {
        let id = Math.floor(Math.random() * 10);

        if (k < 10) {
          if (this.randomArr.indexOf(this.arrList[id]) === -1) {
            this.randomArr.push(this.arrList[id]);
          } else {
            k = k - 1;
            continue;
          }
        } else {
          this.randomArr.push(this.arrList[id]);
        }
      }
    },
    async shuffle(arr) {
      for (let i = 1; i < arr.length; i++) {
        const random = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[random]] = [arr[random], arr[i]];
      }
      return arr;
    },
    async initImgList(rank) {
      //动态初始化图片序列数组
      //随机挑选3个人
      await this.randomList();
      //根据情绪等级初始化数组
      this.randomArr.map((item) => {
        //开心
        this.resultData.push({
          emoType: "happy", // 情绪类型
          emoAmp: rank, // 整数0，1，2...
          userSelectEmoType: "", //用户选择的情绪类型
          responseTime: "", //反应时（ms）
          correct: "", //用户反映正确性 True, False
          imgUrl: `${this.baseUrlPort}/static/assets/ETBnew/${ (Number(item) > 5 ? 'm' : 'f') + item}-happy-${rank > 8 ? rank + 1 : '0' + (rank + 1)}.jpg`, //图片地址
        });
        //害怕
        this.resultData.push({
          emoType: "fear", // 情绪类型
          emoAmp: rank, // 整数0，1，2...
          userSelectEmoType: "", //用户选择的情绪类型
          responseTime: "", //反应时（ms）
          correct: "", //用户反映正确性 True, False
          imgUrl: `${this.baseUrlPort}/static/assets/ETBnew/${ (Number(item) > 5 ? 'm' : 'f') + item}-fear-${rank > 8 ? rank + 1 : '0' + (rank + 1)}.jpg`,
        });
        //生气
        this.resultData.push({
          emoType: "angry", // 情绪类型
          emoAmp: rank, // 整数0，1，2...
          userSelectEmoType: "", //用户选择的情绪类型
          responseTime: "", //反应时（ms）
          correct: "", //用户反映正确性 True, False
          imgUrl: `${this.baseUrlPort}/static/assets/ETBnew/${ (Number(item) > 5 ? 'm' : 'f') + item}-angry-${rank > 8 ? rank + 1 : '0' + (rank + 1)}.jpg`,
        });
        //厌恶
        this.resultData.push({
          emoType: "disgust", // 情绪类型
          emoAmp: rank, // 整数0，1，2...
          userSelectEmoType: "", //用户选择的情绪类型
          responseTime: "", //反应时（ms）
          correct: "", //用户反映正确性 True, False
          imgUrl: `${this.baseUrlPort}/static/assets/ETBnew/${ (Number(item) > 5 ? 'm' : 'f') + item}-disgust-${rank > 8 ? rank + 1 : '0' + (rank + 1)}.jpg`,
        });
        // 悲伤
        this.resultData.push({
          emoType: "sad", // 情绪类型
          emoAmp: rank, // 整数0，1，2...
          userSelectEmoType: "", //用户选择的情绪类型
          responseTime: "", //反应时（ms）
          correct: "", //用户反映正确性 True, False
          imgUrl: `${this.baseUrlPort}/static/assets/ETBnew/${ (Number(item) > 5 ? 'm' : 'f') + item}-sad-${rank > 8 ? rank + 1 : '0' + (rank + 1)}.jpg`,
        });
        // 惊讶
        this.resultData.push({
          emoType: "surprise", // 情绪类型
          emoAmp: rank, // 整数0，1，2...
          userSelectEmoType: "", //用户选择的情绪类型
          responseTime: "", //反应时（ms）
          correct: "", //用户反映正确性 True, False
          imgUrl: `${this.baseUrlPort}/static/assets/ETBnew/${ (Number(item) > 5 ? 'm' : 'f') + item}-surprise-${rank > 8 ? rank + 1 : '0' + (rank + 1)}.jpg`,
        });
      });
    },
    async imgListSerialize() {
      // 按情绪等级图片数组序列化
      await this.initImgList(0);
      await this.initImgList(1);
      await this.initImgList(2);
      await this.initImgList(3);
      //打乱数组序列
      await this.shuffle(this.resultData);
      this.resultData.map((item, i) => {
        return (item.index = i);
      });
      // 图片预加载
      preloader(this.resultData, () => {
        //图片赋值开始测试
        this.changeImg(this.cumulation);
        this.showCross();
      });
      console.log(this.resultData, "图片数组序列222");
    },
    changeImg(num) {
      // 切换图片
      this.examImgUrl = this.resultData[num].imgUrl;
    },
    showCross() {
      //显示十字光标
      this.crossShow = true;
      this.expressionShow = false;
      this.buttonShow = false;

      this.timingOne = setTimeout(() => {
        this.showImg();
      }, 750);
    },
    showImg() {
      //显示图片
      this.crossShow = false;
      this.expressionShow = true;
      if (this.testMode == 0) {
        this.buttonShow = true;
      } else {
        this.buttonShow = false;
      }

      this.timingTwo = setTimeout(() => {
        this.showBtn();
      }, 500);
    },
    showBtn() {
      //开始计时
      this.startTime();
      //显示选择按钮
      this.crossShow = false;
      if (this.testMode == 0) {
        this.expressionShow = true;
      } else {
        this.expressionShow = false;
      }

      this.buttonShow = true;

      this.timingThree = setTimeout(() => {
        console.log("123");
        //关闭按钮显示
        this.buttonShow = false;
        //关闭计时器
        this.endTime();

        this.resultData[this.cumulation].userSelectEmoType = "NO"; //用户选择的情绪类型
        this.resultData[this.cumulation].responseTime = "NULL"; //反应时（ms）
        this.resultData[this.cumulation].correct = "False"; //用户反映正确性 True, False

        if (this.cumulation >= this.cycles) {
          //调用接口，跳转页面
          this.submitData();
        } else {
          // 累加器自增
          this.cumulation++;
          //换展示图片
          this.changeImg(this.cumulation);
          // 继续下一组数据
          this.showCross();
        }
      }, this.buttonShowTime);
    },
    userClick(param) {
      if (
        this.showGuider &&
        this.resultData[this.cumulation].emoType != param
      ) {
        this.$message.error("点击错误，请点击闪烁的正确选项");
        return;
      }
      //如果两秒内用户点击了选项按钮
      this.timingThree = clearTimeout(this.timingThree);
      //关闭计时器
      this.endTime();

      this.resultData[this.cumulation].userSelectEmoType = param; //用户选择的情绪类型
      this.resultData[this.cumulation].responseTime = this.commonTime * 10; //反应时（ms）
      this.resultData[this.cumulation].correct =
        param == this.resultData[this.cumulation].emoType ? "True" : "False"; //用户反映正确性 True, False

      if (this.cumulation >= this.cycles) {
        //调用接口，跳转页面
        if (this.testMode == 0) {
          this.$message.success("引导结束");
          this.$router.go(-1);
        } else {
          this.submitData();
        }
      } else {
        // 累加器自增
        this.cumulation++;
        //换展示图片
        this.changeImg(this.cumulation);
        // 继续下一组数据
        this.showCross();
      }
    },
    submitData() {
      let correctNum = [],
        happy1 = [],
        happy2 = [],
        happy3 = [],
        happy4 = [],
        fear1 = [],
        fear2 = [],
        fear3 = [],
        fear4 = [],
        angry1 = [],
        angry2 = [],
        angry3 = [],
        angry4 = [],
        disgust1 = [],
        disgust2 = [],
        disgust3 = [],
        disgust4 = [],
        sad1 = [],
        sad2 = [],
        sad3 = [],
        sad4 = [],
        surprise1 = [],
        surprise2 = [],
        surprise3 = [],
        surprise4 = [];

      this.resultData.map((item, i) => {
        if (item.correct == "True") correctNum.push(item);
      });
      console.log(correctNum, "正确个数");
      correctNum.map((item) => {
        if (item.emoType == "happy" && item.emoAmp == 0) happy1.push(item);
        if (item.emoType == "happy" && item.emoAmp == 1) happy2.push(item);
        if (item.emoType == "happy" && item.emoAmp == 2) happy3.push(item);
        if (item.emoType == "happy" && item.emoAmp == 3) happy4.push(item);
        if (item.emoType == "fear" && item.emoAmp == 0) fear1.push(item);
        if (item.emoType == "fear" && item.emoAmp == 1) fear2.push(item);
        if (item.emoType == "fear" && item.emoAmp == 2) fear3.push(item);
        if (item.emoType == "fear" && item.emoAmp == 3) fear4.push(item);
        if (item.emoType == "angry" && item.emoAmp == 0) angry1.push(item);
        if (item.emoType == "angry" && item.emoAmp == 1) angry2.push(item);
        if (item.emoType == "angry" && item.emoAmp == 2) angry3.push(item);
        if (item.emoType == "angry" && item.emoAmp == 3) angry4.push(item);
        if (item.emoType == "disgust" && item.emoAmp == 0) disgust1.push(item);
        if (item.emoType == "disgust" && item.emoAmp == 1) disgust2.push(item);
        if (item.emoType == "disgust" && item.emoAmp == 2) disgust3.push(item);
        if (item.emoType == "disgust" && item.emoAmp == 3) disgust4.push(item);
        if (item.emoType == "sad" && item.emoAmp == 0) sad1.push(item);
        if (item.emoType == "sad" && item.emoAmp == 1) sad2.push(item);
        if (item.emoType == "sad" && item.emoAmp == 2) sad3.push(item);
        if (item.emoType == "sad" && item.emoAmp == 3) sad4.push(item);
        if (item.emoType == "surprise" && item.emoAmp == 0)
          surprise1.push(item);
        if (item.emoType == "surprise" && item.emoAmp == 1)
          surprise2.push(item);
        if (item.emoType == "surprise" && item.emoAmp == 2)
          surprise3.push(item);
        if (item.emoType == "surprise" && item.emoAmp == 3)
          surprise4.push(item);
      });

      this.$http.post(
        `/cognize/ETB01`,
        {
          userId: this.userId,
          testPlanId: this.$route.query.testPlanId || "",
          data: this.resultData,
          result: {
            totalResult: ((correctNum.length / 72) * 100).toFixed(2) + "%",
            happy: {
              level1: ((happy1.length / 3) * 100).toFixed(2) + "%",
              level2: ((happy2.length / 3) * 100).toFixed(2) + "%",
              level3: ((happy3.length / 3) * 100).toFixed(2) + "%",
              level4: ((happy4.length / 3) * 100).toFixed(2) + "%",
            },
            fear: {
              level1: ((fear1.length / 3) * 100).toFixed(2) + "%",
              level2: ((fear2.length / 3) * 100).toFixed(2) + "%",
              level3: ((fear3.length / 3) * 100).toFixed(2) + "%",
              level4: ((fear4.length / 3) * 100).toFixed(2) + "%",
            },
            angry: {
              level1: ((angry1.length / 3) * 100).toFixed(2) + "%",
              level2: ((angry2.length / 3) * 100).toFixed(2) + "%",
              level3: ((angry3.length / 3) * 100).toFixed(2) + "%",
              level4: ((angry4.length / 3) * 100).toFixed(2) + "%",
            },
            disgust: {
              level1: ((disgust1.length / 3) * 100).toFixed(2) + "%",
              level2: ((disgust2.length / 3) * 100).toFixed(2) + "%",
              level3: ((disgust3.length / 3) * 100).toFixed(2) + "%",
              level4: ((disgust4.length / 3) * 100).toFixed(2) + "%",
            },
            sad: {
              level1: ((sad1.length / 3) * 100).toFixed(2) + "%",
              level2: ((sad2.length / 3) * 100).toFixed(2) + "%",
              level3: ((sad3.length / 3) * 100).toFixed(2) + "%",
              level4: ((sad4.length / 3) * 100).toFixed(2) + "%",
            },
            surprise: {
              level1: ((surprise1.length / 3) * 100).toFixed(2) + "%",
              level2: ((surprise2.length / 3) * 100).toFixed(2) + "%",
              level3: ((surprise3.length / 3) * 100).toFixed(2) + "%",
              level4: ((surprise4.length / 3) * 100).toFixed(2) + "%",
            },
          },
        },
        (response) => {
          if (response && response.code == "200") {
            //跳转新测试结果页面
            this.goTestResult(response.data);
          } else {
            this.$message.error("接口数据出错");
          }
        }
      );

      this.screenExit();
      this.$message({
        message: "测试结束！",
        type: "success",
      });
    },
    startTest() {
      if (this.testMode == 0) {
        this.showGuider = true;
      }
      this.imgListSerialize();
    },
  },
  destroyed() {
    clearInterval(this.timingFlag);
    clearInterval(this.flag);
    clearTimeout(this.timingOne);
    clearTimeout(this.timingTwo);
    clearTimeout(this.timingThree);
  },
};
</script>

<style scoped>
.butt {
  width: 100px;
  text-align: center;
  border: 1px solid rgb(87, 172, 187);
  opacity: 1;
  border-radius: 10px;
}
.bgAdd {
  width: 150px;
  height: 400px;
  background: url("../../assets/congnitiveAblitity/whiteFlag-new.png") no-repeat
    center;
  position: absolute;
  top: 25%;
  left: 50%;
  margin-left: -75px;
}
.activeTask {
  width: 100%;
  height: 100%;
  background: url("../../assets/congnitiveAblitity/rememberAbilityTask.png")
    no-repeat center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.timingBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 70px;
  text-align: center;
  line-height: 100px;
  margin: 0 auto;
  z-index: 10;
}
/* .active-img {
  position: absolute;
  width: 450px;
  height: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
} */
.btn-content {
  position: absolute;
  width: 60%;
  left: 50%;
  bottom: 10%;
  transform: translate(-50%, 0);
  text-align: center;
  z-index: 1000;
}

.scaleName {
  margin-top: 70px;
  background-size: cover;
}

.scaleButton {
  margin-top: 20px;
  margin-bottom: 20px;
  background-size: cover;
  background: rgb(87, 172, 187);
  border: 2px solid rgb(255, 255, 255);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 39px;
  color: #ffffff;
}

.steering {
  width: 50%;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}

.steering .left {
  width: 60px;
  height: 60px;
  background: url(../../assets/left.png) no-repeat center;
}

.steering .right {
  width: 60px;
  height: 60px;
  background: url(../../assets/right.png) no-repeat center;
  margin-left: 15px;
}
.guider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.75);
}

.addImg {
  width: 50%;
  height: auto;
  z-index: 1000;
}
.shape_glass {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: auto;
  margin: 5vh auto 0;
}
.active {
  position: relative;
}

.active:after {
  background-color: #2ea598;
}

/* 设置动画后颜色 */
.active:before {
  background-color: rgba(0, 168, 253, 0.2);
}

/* 设置动画 */
.active:before,
.active:after {
  content: "";
  width: 80px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -20px;
  border-radius: 10%;
  animation: warn 1.5s ease-out 0s infinite;
}

@keyframes warn {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
.txt {
  width: 300px;
  font-weight: PingFang-SC-Medium;
  margin: 0 auto;
  font-size: 16px;
  color: #ffffff;
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translateX(-50%);
  z-index: 1000;
}

.explain {
  padding: 6px 8px;
  border: 2px solid #0abdc4;
  border-radius: 5px;
}
</style>