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

<template>
  <view style="width: 100%; height: 100%">
    <div class="checkwind-echarts-div" v-if="type == 'windrect_rect'">
      <div class="checkwind">
        <div
          class="sub_line"
          v-bind:class="
            state == '0'
              ? 'top_state'
              : state == '1'
              ? 'middle_state'
              : state == '2'
              ? 'bottom_state'
              : 'bottom_state'
          "
          id="subline"
        ></div>
      </div>
      <span>{{ title }}</span>
    </div>
    <div class="checkwind-echarts-div" v-if="type == 'windrect_ds'">
      <div class="checkwind_ds">
        <div
          class="sub_line"
          v-bind:class="
            state == '0'
              ? 'top_state'
              : state == '1'
              ? 'middle_state'
              : state == '2'
              ? 'bottom_state'
              : 'bottom_state'
          "
          id="subline"
        ></div>
        <div
          class="sub_line1"
          v-bind:class="
            state == '0'
              ? 'top_state1'
              : state == '1'
              ? 'middle_state1'
              : state == '2'
              ? 'bottom_state1'
              : 'bottom_state1'
          "
          id="subline1"
        ></div>
        <div
          class="sub_line2"
          v-bind:class="
            state == '0'
              ? 'top_state2'
              : state == '1'
              ? 'middle_state2'
              : state == '2'
              ? 'bottom_state2'
              : 'bottom_state2'
          "
          id="subline2"
        ></div>
      </div>
      <span>{{ title }}</span>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: "200px",
    };
  },
  props: ["state", "title", "height", "type"],
  methods: {},
  onLoad(query) {},
};
</script>

<style scoped>
/*门里面*/
div.checkwind {
  width: 160px;
  height: 160px;
  background-image: url(/static/wind.png);
  background-size: 100% 100%;
  perspective: 800px;
}
/*左门/右门*/

div.checkwind .sub_line {
  margin-top: 10px;
  margin-left: 10px;
  width: 142px;
  height: 30px;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 2s ease;
  background-image: url(/static/line.png);
  background-size: 100% 100%;
}
div.checkwind .sub_line {
  transform-origin: left center;
  border-right: 1px solid rgb(8, 8, 8);
}
.checkwind .top_state {
  transform: translateY(5px);
}
.checkwind .middle_state {
  transform: translateY(45px);
}
.checkwind .bottom_state {
  transform: translateY(90px);
}
</style>

<style scoped>
/*门里面*/
div.checkwind_ds {
  width: 160px;
  height: 160px;
  background-image: url(/static/wind.png);
  background-size: 100% 100%;
  perspective: 800px;
}
/*左门/右门*/

div.checkwind_ds .sub_line {
  margin-top: 10px;
  margin-left: 8px;
  width: 180px;
  height: 25px;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 2s ease;
  background-image: url(/static/line_ds.png);
  background-size: 100% 100%;
}
div.checkwind_ds .sub_line1 {
  position: absolute;
  top: 20px;
  left: 12px;
  width: 30px;
  height: 35px;
  box-sizing: border-box;
  z-index: 4;
  transition: all 2s ease;
  background-image: url(/static/wind_ds1.png);
  background-size: 100% 100%;
}
div.checkwind_ds .sub_line2 {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 33px;
  height: 38px;
  box-sizing: border-box;
  z-index: 4;
  transition: all 2s ease;
  background-image: url(/static/wind_ds2.png);
  background-size: 100% 100%;
}
div.checkwind_ds .sub_line {
  transform-origin: left center;
  border-right: 1px solid rgb(8, 8, 8);
}
.checkwind_ds .top_state {
  transform: translateY(15px) rotateY(-40deg);
  /* transform: rotateY(-20deg) */
}
.checkwind_ds .middle_state {
  transform: translateY(45px) rotateY(0deg) scaleX(0.83);
}
.checkwind_ds .bottom_state {
  transform: translateY(80px);
}
.checkwind_ds .top_state1 {
  transform: translateY(0px);
  /* transform: rotateY(-20deg) */
}
.checkwind_ds .middle_state1 {
  transform: translateY(30px);
}
.checkwind_ds .bottom_state1 {
  transform: translateY(65px);
}
.checkwind_ds .top_state2 {
  transform: translateY(0px);
  /* transform: rotateY(-20deg) */
}
.checkwind_ds .middle_state2 {
  transform: translateY(35px);
}
.checkwind_ds .bottom_state2 {
  transform: translateY(72px);
}
</style>