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

<template>
  <view style="width: 100%; height: 100%">
   <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 style="top:14%;left:18%" v-if="nowfengji == '1'" class="devfan1"></div>
           <div style="top:14%;left:27.5%" v-if="nowfengji == '1'" class="devfan1"></div>
           <div style="bottom:13%;left:18%" v-if="nowfengji == '2'" class="devfan1"></div>
           <div style="bottom:13%;left:27.5%" v-if="nowfengji == '2'" class="devfan1"></div>

            <div style="top:3%;left:9%"  class="state1" v-if="nowfengji == '1'" >运行</div>
            <div style="top:3%;left:9%"  class="state2" v-else>停止</div>
            
            <div style="top:3%;left:34%"  class="state1" v-if="nowfengji == '1'" >运行</div>
            <div style="top:3%;left:34%"  class="state2" v-else>停止</div>

            
            <div style="bottom:25%;left:9%"  class="state1" v-if="nowfengji == '2'" >运行</div>
            <div style="bottom:25%;left:9%"  class="state2" v-else>停止</div>
            
            <div style="bottom:25%;left:34%"  class="state1" v-if="nowfengji == '2'" >运行</div>
            <div style="bottom:25%;left:34%"  class="state2" v-else>停止</div>


           <div style="top:17%;right:41%"  class="textshow">主风机</div>
           <div style="bottom:15%;right:41%"  class="textshow">备风机</div>
           
           <div style="top:32%;left:6%"  class="textshow2">前级电机</div>
           <div style="top:32%;left:34%"  class="textshow2">后级电机</div>
           <div style="bottom:-2%;left:6%"  class="textshow2">前级电机</div>
           <div style="bottom:-2%;left:34%"  class="textshow2">后级风机</div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nowfengji: ""
    };
  },
  props: {
    mainFanText: {
      type: String,
      default: "主风机",
    },
    subFanText: {
      type: String,
      default: "备风机",
    },
	fan1State: {
      type: String,
      default: "",
    },
	fan2State: {
      type: String,
      default: "",
    },
  },
  methods: {
	  
	      setnowfengji(val) {
	        if (this.nowfengji != val) {
	          this.nowfengji = val;
	          this.setFengjiDonghua();
	        }
	      },
	      setFengjiDonghua() {
	        if (this.nowfengji == "2") {
	        } else if (this.nowfengji == "1") {
	        } else {
	        }
	      },
		  setNowStart(){
			  		  if(this.fan1State=="1"){
			  			  this.nowfengji = "1"
			  		  }
			  		  else if(this.fan2State=="1"){
			  			  this.nowfengji = "2"
			  		  }
			  		  else{
			  			  this.nowfengji = ""
			  		  }
		  }
  },
  watch:{
	  fan1State(val){
		  this.setNowStart()
	  },
	  fan2State(val){
		  this.setNowStart()
	  }
  },
  onLoad(query) {
    this.setFengjiDonghua();
	},
};
</script>

<style scoped>
div.ventilate {
  width: 100%;
  height:200px;
  min-height: 200px;
  min-width: 300px;
  background-image: url(/static/fan/fan.png);
  background-size: 100% 100%;
  perspective: 800px;
}
.state1{
  position: absolute;
  z-index: 2;
  width:8%;
  height: 14px;
  padding-bottom: 5px;
  padding-left: 3px;
  background-color: rgba(78, 155, 1, 0.438);
  border:none;
  color: rgb(255, 255, 255);
  font-size: 12px;
}
.state2{
  position: absolute;
  z-index: 2;
  width:8%;
  height: 14px;
  padding-bottom: 5px;
  padding-left: 3px;
  background-color: rgba(167, 42, 11, 0.5);
  border:none;
  color: rgb(206, 206, 212);
  font-size: 12px;
}
.textshow{
  position: absolute;
  z-index: 2;
  color: rgb(20, 19, 19);
  font-size: 16px;
}
.textshow2{
  position: absolute;
  z-index: 2;
  color: rgb(100, 106, 136);
  font-size: 14px;
}
.devfan1,
.devfan2{
  position: absolute !important;
  z-index: 2;
  min-width: 20px;
  min-height: 20px;
  height: 22px;
  width:22px;
  background-image: url(/static/fan/devFan.png);
  background-size: 100% 100%;
}

.devfan1 {
  position: relative;
  animation: rotate1 3s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: rotate1 3s infinite linear;
}

@keyframes rotate1 {
  0% {
    -webkit-transform: rotate(0deg);
    opacity:1;
  }
  100% {
    -webkit-transform: rotate(360deg);
    opacity: 1;
  }
}
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%;
}
</style>
<style scoped>
.arrow1 {
  position: relative;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
}

@keyframes myfirst1 {
  0% {
    left: -5%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
  3% {
    left: 0%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    left: 75%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  72% {
    left: 76%;
    top: 78%;
    -webkit-transform: rotate(135deg);
    opacity: 1;
  }
  85% {
    left: 85%;
    top: 53%;
    -webkit-transform: rotate(135deg);
    opacity: 1;
  }
  86% {
    left: 86%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  99% {
    left: 99%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst1 /* Safari 和 Chrome */ {
  0% {
    left: -5%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
  3% {
    left: 0%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    left: 75%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  72% {
    left: 76%;
    top: 78%;
    -webkit-transform: rotate(135deg);
    opacity: 1;
  }
  85% {
    left: 85%;
    top: 53%;
    -webkit-transform: rotate(135deg);
    opacity: 1;
  }
  86% {
    left: 86%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  99% {
    left: 99%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    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>
.arrow1-fan1 {
  position: relative;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
}

@keyframes myfirst1-fan1 {
  0% {
    left: -5%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
  3% {
    left: 0%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    left: 75%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  72% {
    left: 76%;
    top: 22%;
    -webkit-transform: rotate(225deg);
    opacity: 1;
  }
  85% {
    left: 85%;
    top: 47%;
    -webkit-transform: rotate(225deg);
    opacity: 1;
  }
  86% {
    left: 86%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  99% {
    left: 99%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst1-fan1 /* Safari 和 Chrome */ {
  0% {
    left: -5%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
  3% {
    left: 0%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    left: 75%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  72% {
    left: 76%;
    top: 22%;
    -webkit-transform: rotate(225deg);
    opacity: 1;
  }
  85% {
    left: 85%;
    top: 47%;
    -webkit-transform: rotate(225deg);
    opacity: 1;
  }
  86% {
    left: 86%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  99% {
    left: 99%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    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>