Vent-App/pages/home/detail/fanlocalAnimate/fanlocalAnimate.vue

<template>
  <view style="width: 100%; height: 100%">
    <div class="pageback">
    <div class="ventilate" id="topPic">
      <!-- 进风箭头 -->
      <div :class="nowfengji == '2'?'arrow1':nowfengji == '1'?'arrow1-fan1':''" id="arrow1"></div>
      <div :class="nowfengji == '2'?'arrow2':nowfengji == '1'?'arrow2-fan1':''" id="arrow2"></div>
      <div :class="nowfengji == '2'?'arrow3':nowfengji == '1'?'arrow3-fan1':''" id="arrow3"></div>
      <div :class="nowfengji == '2'?'arrow4':nowfengji == '1'?'arrow4-fan1':''" id="arrow4"></div>
      <div :class="nowfengji == '2'?'arrow5':nowfengji == '1'?'arrow5-fan1':''" id="arrow5"></div>
      <div :class="nowfengji == '2'?'arrow6':nowfengji == '1'?'arrow6-fan1':''" id="arrow6"></div>
      <div :class="nowfengji == '2'?'arrow7':nowfengji == '1'?'arrow7-fan1':''" id="arrow7"></div>
      <div :class="nowfengji == '2'?'arrow8':nowfengji == '1'?'arrow8-fan1':''" id="arrow8"></div>
      <div :class="nowfengji == '2'?'arrow9':nowfengji == '1'?'arrow9-fan1':''" id="arrow9"></div>
      <div :class="nowfengji == '2'?'arrow10':nowfengji == '1'?'arrow10-fan1':''" id="arrow10"></div>
      <!-- 回风箭头 -->
      <div class="arrow101" id="arrow101" v-show="nowfengji != ''"></div>
      <div class="arrow102" id="arrow102" v-show="nowfengji != ''"></div>
      <div class="arrow103" id="arrow103" v-show="nowfengji != ''"></div>
      <div class="arrow104" id="arrow104" v-show="nowfengji != ''"></div>
      <div class="arrow105" id="arrow105" v-show="nowfengji != ''"></div>
      <div class="arrow106" id="arrow106" v-show="nowfengji != ''"></div>
      <!-- <div class="arrow107" id="arrow107"></div>
      <div class="arrow108" id="arrow108"></div>-->
      <!-- 回风 -->
      <div class="arrow201" id="arrow201"></div>
      <div class="arrow202" id="arrow202"></div>
      <div class="arrow203" id="arrow203"></div>
      <div class="arrow204" id="arrow204"></div>
      <div class="arrow205" id="arrow205"></div>
      <div
        style="color:#fff;font-size:14px;position:absolute;top:12%;left:80%;width:auto;height:60px"
        @click="fanclick(1)"
      >
        <span>主风机</span>
      </div>
      <div
        style="color:#fff;font-size:14px;position:absolute;top:16%;left:80%;width:auto;height:60px"
        @click="fanclick(2)"
      >
        <span>备用风机</span>
      </div>
      <!-- 风扇动画展示 -->
      <div class="box2" style="top: 12.8%;right: 29%;" @click="fanclick(1)">
        <div id="box2">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="box" style="top: 15.5%;right: 29%;" @click="fanclick(2)">
        <div id="box1">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fengliangUp: "", // 风量上限
      fengliangDown: "", // 风量下限
      controTypeName: "变频器频率",
      // 界面风机动画

      // 控制类型 1 变频器频率 2 需风量
      controlType: "1",
      loading: "", // 数据加载
      yMax1: 100,
      yMax2: 10,
      yMax3: 1000,
      textColor: "#000",
      option1: {},
      readData: {},
      nowfengji: "1"
    };
  },
  props: {
    mainFanText: {
      type: String,
      default: "主风机",
    },
    subFanText: {
      type: String,
      default: "备风机",
    },
  },
  methods: {
	  
	      setnowfengji(val) {
	        if (this.nowfengji != val) {
	          this.nowfengji = val;
	          this.setFengjiDonghua();
	        }
	      },
	      fanclick(val) {
	        this.$emit("fanclick", val);
	      },
	      setFengjiDonghua() {
	        if (this.nowfengji == "2") {
	          document.getElementById("box1").style.animationPlayState = "running";
	          document.getElementById("box1").style.WebkitAnimationPlayState =
	            "running";
	  
	          document.getElementById("box2").style.animationPlayState = "paused";
	          document.getElementById("box2").style.WebkitAnimationPlayState =
	            "paused";
	        } else if (this.nowfengji == "1") {
	          document.getElementById("box2").style.animationPlayState = "running";
	          document.getElementById("box2").style.WebkitAnimationPlayState =
	            "running";
	          document.getElementById("box1").style.animationPlayState = "paused";
	          document.getElementById("box1").style.WebkitAnimationPlayState =
	            "paused";
	        } else {
	          document.getElementById("box2").style.animationPlayState = "paused";
	          document.getElementById("box2").style.WebkitAnimationPlayState =
	            "paused";
	          document.getElementById("box1").style.animationPlayState = "paused";
	          document.getElementById("box1").style.WebkitAnimationPlayState =
	            "paused";
	        }
	      }
  },
  watch: {
  },
  onLoad(query) {
    this.setFengjiDonghua();
	},
};
</script>

<style scoped>
div.pageback {
  padding-top:10px;
  margin-top: 12px;
  width: 100%;
  height: calc(80% - 50px);
  min-height: 350px;
  background-image: url(../../../../static/fan/page-back.png);
  background-size: 100% 100%;
}
div.ventilate {
  min-width: 300px;
  width: 60%;
  margin-left:10%;
  height: 80%;
  height: calc(80% - 120px);
  min-height: 330px;
  background-image: url(../../../../static/fan/localfan-back.png);
  background-size: 100% 100%;
}
div.arrow1,
div.arrow2,
div.arrow3,
div.arrow4,
div.arrow5,
div.arrow6,
div.arrow7,
div.arrow8,
div.arrow9,
div.arrow10,
div.arrow1-fan1,
div.arrow2-fan1,
div.arrow3-fan1,
div.arrow4-fan1,
div.arrow5-fan1,
div.arrow6-fan1,
div.arrow7-fan1,
div.arrow8-fan1,
div.arrow9-fan1,
div.arrow10-fan1 {
  position: absolute;
  right: 40px;
  opacity: 0;
  top: 96px;
  width: 30px;
  height: 15px;
  box-sizing: border-box;
  float: right;
  z-index: 1;
  transition: all 2s ease;
  background-image: url(../../../../static/fan/arrow-in.png);
  background-size: 100% 100%;
}
div.arrow101,
div.arrow102,
div.arrow103,
div.arrow104,
div.arrow105,
div.arrow106,
div.arrow107,
div.arrow108 {
  position: absolute;
  right: 70px;
  opacity: 0;
  top: 516px;
  width: 30px;
  height: 13px;
  box-sizing: border-box;
  float: right;
  z-index: 1;
  transition: all 2s ease;
  background-image: url(../../../../static/fan/arrow-out.png);
  background-size: 100% 100%;
}
div.arrow201,
div.arrow202,
div.arrow203,
div.arrow204,
div.arrow205 {
  position: absolute;
  right: 0px;
  opacity: 0;
  top: 30px;
  width: 45px;
  height: 23px;
  box-sizing: border-box;
  float: right;
  z-index: 10;
  transition: all 2s ease;
  background-image: url(../../../../static/fan/arrow-in.png);
  background-size: 100% 100%;
}
</style>
<style scoped>
.arrow1 {
  position: relative;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
}

@keyframes myfirst1 {
  0% {
    right: 10%;
    top: 16%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  10% {
    right: 33%;
    top: 16%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  11% {
    right: 34%;
    top: 15%;
    -webkit-transform: rotate(40deg);
    opacity: 1;
  }
  14% {
    right: 40%;
    top: 13%;
    -webkit-transform: rotate(40deg);
    opacity: 1;
  }
  15% {
    right: 41%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  22% {
    right: 60%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    right: 60.5%;
    top: 14%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  98% {
    right: 60.5%;
    top: 91%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    right: 60.5%;
    top: 93%;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst1 /* Safari 和 Chrome */ {
  0% {
    right: 10%;
    top: 16%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  10% {
    right: 33%;
    top: 16%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  11% {
    right: 34%;
    top: 15%;
    -webkit-transform: rotate(30deg);
    opacity: 1;
  }
  14% {
    right: 40%;
    top: 12%;
    -webkit-transform: rotate(30deg);
    opacity: 1;
  }
  15% {
    right: 41%;
    top: 12%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  22% {
    right: 60%;
    top: 12%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    right: 60.5%;
    top: 13%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  98% {
    right: 60.5%;
    top: 91%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    right: 60.5%;
    top: 93%;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

.arrow2 {
  position: relative;
  animation-delay: -18s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.arrow3 {
  position: relative;
  animation-delay: -16s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.arrow4 {
  position: relative;
  animation-delay: -14s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.arrow5 {
  position: relative;
  animation-delay: -12s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.arrow6 {
  position: relative;
  animation-delay: -10s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.arrow7 {
  position: relative;
  animation-delay: -8s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.arrow8 {
  position: relative;
  animation-delay: -6s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.arrow9 {
  position: relative;
  animation-delay: -4s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.arrow10 {
  position: relative;
  animation-delay: -2s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -2s;
}
</style>

<style scoped>
.arrow101 {
  position: relative;
  animation-delay: -10s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -10s;
}

@keyframes myfirst101 {
  0% {
    right: 62.5%;
    top: 94%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  15% {
    right: 73%;
    top: 94%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  17% {
    right: 73%;
    top: 93%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  62% {
    right: 73%;
    top: 57%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  64% {
    right: 73%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  66% {
    right: 74%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  90% {
    right: 93%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  100% {
    right: 98%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst101 /* Safari 和 Chrome */ {
  0% {
    right: 62.5%;
    top: 94%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  15% {
    right: 73%;
    top: 94%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  17% {
    right: 73%;
    top: 93%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  62% {
    right: 73%;
    top: 57%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  64% {
    right: 73%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  66% {
    right: 74%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  90% {
    right: 93%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  100% {
    right: 98%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 0;
  }
}

.arrow102 {
  position: relative;
  animation-delay: -8s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -8s;
}
.arrow103 {
  position: relative;
  animation-delay: -6s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -6s;
}
.arrow104 {
  position: relative;
  animation-delay: -4s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -4s;
}
.arrow105 {
  position: relative;
  animation-delay: -2s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -2s;
}
.arrow106 {
  position: relative;
  animation-delay: 0s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: 0s;
}
</style>
<style scoped>
.arrow1-fan1 {
  position: relative;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
}

@keyframes myfirst1-fan1 {
  0% {
    right: 10%;
    top: 10%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  10% {
    right: 33%;
    top: 10%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  11% {
    right: 34%;
    top: 11%;
    -webkit-transform: rotate(-40deg);
    opacity: 1;
  }
  14% {
    right: 40%;
    top: 13%;
    -webkit-transform: rotate(-40deg);
    opacity: 1;
  }
  15% {
    right: 41%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  22% {
    right: 60%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    right: 60.5%;
    top: 14%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  98% {
    right: 60.5%;
    top: 89%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    right: 60.5%;
    top: 91%;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst1-fan1 /* Safari 和 Chrome */ {
  0% {
    right: 10%;
    top: 10%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  10% {
    right: 33%;
    top: 10%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  11% {
    right: 34%;
    top: 11%;
    -webkit-transform: rotate(-40deg);
    opacity: 1;
  }
  14% {
    right: 40%;
    top: 13%;
    -webkit-transform: rotate(-40deg);
    opacity: 1;
  }
  15% {
    right: 41%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  22% {
    right: 60%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    right: 60.5%;
    top: 14%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  98% {
    right: 60.5%;
    top: 89%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    right: 60.5%;
    top: 91%;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

.arrow2-fan1 {
  position: relative;
  animation-delay: -18s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.arrow3-fan1 {
  position: relative;
  animation-delay: -16s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.arrow4-fan1 {
  position: relative;
  animation-delay: -14s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.arrow5-fan1 {
  position: relative;
  animation-delay: -12s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.arrow6-fan1 {
  position: relative;
  animation-delay: -10s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.arrow7-fan1 {
  position: relative;
  animation-delay: -8s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.arrow8-fan1 {
  position: relative;
  animation-delay: -6s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.arrow9-fan1 {
  position: relative;
  animation-delay: -4s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.arrow10-fan1 {
  position: relative;
  animation-delay: -2s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -2s;
}
</style>

<style scoped>
.arrow201 {
  position: relative;
  animation-delay: -8s;
  animation: myfirst201 10s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst201 10s infinite linear;
  -webkit-animation-delay: -8s;
}

@keyframes myfirst201 {
  0% {
    right: 0px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
  2% {
    right: 10px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 530px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    right: 570px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst201 /* Safari 和 Chrome */ {
  0% {
    right: 0px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
  2% {
    right: 10px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 530px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    right: 570px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
}
.arrow202 {
  position: relative;
  animation-delay: -6s;
  animation: myfirst201 10s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst201 10s infinite linear;
  -webkit-animation-delay: -6s;
}

.arrow203 {
  position: relative;
  animation-delay: -4s;
  animation: myfirst201 10s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst201 10s infinite linear;
  -webkit-animation-delay: -4s;
}

.arrow204 {
  position: relative;
  animation-delay: -2s;
  animation: myfirst201 10s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst201 10s infinite linear;
  -webkit-animation-delay: -2s;
}

.arrow205 {
  position: relative;
  animation-delay: -0.1s;
  animation: myfirst201 10s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst201 10s infinite linear;
  -webkit-animation-delay: -0.1s;
}
</style>
<style scoped>
.box,
.box2 {
  position: absolute;
  transform: perspective(1000px) rotateY(-70deg);
  width: 5px;
  height: 15px;
  transform-style: preserve-3d;
}
.box::before,
.box2::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 10px;
  background: #000;
  filter: blur(10px);
  opacity: 0.5;
  transform: rotateX(90deg);
}
.box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animate 5s linear infinite;
}
.box2 div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animate 5s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.box div span,
.box2 div span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #f1f1f1, #999, #f1f1f1);
  border-radius: 5px;
}

.box div span:nth-child(1),
.box2 div span:nth-child(1) {
  transform: rotateX(0deg);
}
.box div span:nth-child(2),
.box2 div span:nth-child(2) {
  transform: rotateX(45deg);
}
.box div span:nth-child(3),
.box2 div span:nth-child(3) {
  transform: rotateX(-45deg);
}
.box div span:nth-child(4),
.box2 div span:nth-child(4) {
  transform: rotateX(90deg);
}
@keyframes animate {
  0% {
    transform: perspective(1000px) rotateX(0deg);
  }
  100% {
    transform: perspective(1000px) rotateX(359deg);
  }
}
</style>
<style scoped>
.localT1 {
  position: absolute;
  width: 70px;
}
.localT1 div:nth-child(1) {
  float: left;
  width: 20px;
  height: 20px;
  padding: 2px;
  background: #1515e9;
  font-size: 12px;
  font-weight: 100;
  color: #fff;
  border: 1px solid #000;
  box-shadow: #1515e9 0px 0px 10px;
}
.localT1 div:nth-child(2) {
  float: left;
  width: 40px;
  height: 20px;
  padding-top: 3px;
  text-align: center;
  background: #fd1f0f;
  font-size: 10px;
  font-weight: 300;
  color: #fff;
  border: 1px solid rgb(124, 80, 80);
  box-shadow: #fd1f0f 0px 0px 10px;
}
.localF1 {
  position: absolute;
  width: 62px;
}
.localF1 div:nth-child(1) {
  float: left;
  width: 17px;
  height: 19px;
  padding: 2px;
  background: #a9a9e6;
  font-size: 12px;
  font-weight: 100;
  color: #fff;
  border: 1px solid #000;
  box-shadow: #a9a9e6 0px 0px 10px;
}
.localF1 div:nth-child(2) {
  float: left;
  width: 35px;
  height: 20px;
  padding-top: 3px;
  text-align: center;
  background: #16f179;
  font-size: 10px;
  font-weight: 300;
  color: #fff;
  border: 1px solid rgb(118, 153, 108);
  box-shadow: #16f179 0px 0px 10px;
}

.imgF2 {
  top: 80%;
  right: 62%;
  position: absolute;
  width: 20px;
  height: 4px;
  background: #f80404;
  border: 1px solid rgb(182, 85, 85);
  box-shadow: #f80404 0px 0px 10px;
}
.imgF1 {
  top: 12.5%;
  right: 53%;
  position: absolute;
  height: 18px;
  width: 4px;
  background: #f80404;
  border: 1px solid rgb(182, 85, 85);
  box-shadow: #f80404 0px 0px 10px;
}
</style>