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

<template>
  <view style="width: 100%; height: 100%">
    <div class="checkwind-echarts-div" v-if="windType == '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>
    </div>
    <div class="checkwind-echarts-div" v-if="windType == '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>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: "200px",
    };
  },
  props: ["state", "title", "height", "type"],
  computed: {
    // 兼容后端 deviceType 的多种写法：windrect / windrect_rect / windrect_ds / sys_windrect_* 等
    windType() {
      const t = String(this.type || "").toLowerCase();
      if (t.indexOf("windrect") === -1) {
        return "";
      }
      return t.indexOf("ds") > -1 ? "windrect_ds" : "windrect_rect";
    },
  },
  methods: {},
  onLoad(query) {},
};
</script>

<style scoped>
/*门里面*/
div.checkwind {
  position: relative;
  width: 480rpx;
  height: 480rpx;
  margin: 0 auto;
  overflow: hidden;
  background-image: url(/static/wind.png);
  background-size: 100% 100%;
  perspective: 2400rpx;
}
/*左门/右门*/

div.checkwind .sub_line {
  margin-top: 30rpx;
  margin-left: 30rpx;
  width: 426rpx;
  height: 90rpx;
  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: 3rpx solid rgb(8, 8, 8);
}
.checkwind .top_state {
  transform: translateY(15rpx);
}
.checkwind .middle_state {
  transform: translateY(135rpx);
}
.checkwind .bottom_state {
  transform: translateY(270rpx);
}
</style>

<style scoped>
/*门里面*/
div.checkwind_ds {
  position: relative;
  width: 500rpx;
  height: 460rpx;
  margin: 0 auto;
  overflow: hidden;
  background-image: url(/static/wind.png);
  background-size: 100% 100%;
  perspective: 2400rpx;
}
/*左门/右门*/

div.checkwind_ds .sub_line {
  margin-top: 30rpx;
  margin-left: 24rpx;
  width: 540rpx;
  height: 75rpx;
  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: 60rpx;
  left: 36rpx;
  width: 90rpx;
  height: 105rpx;
  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: 36rpx;
  right: 36rpx;
  width: 99rpx;
  height: 114rpx;
  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: 3rpx solid rgb(8, 8, 8);
}
.checkwind_ds .top_state {
  transform: translateY(45rpx) rotateY(-40deg);
  /* transform: rotateY(-20deg) */
}
.checkwind_ds .middle_state {
  transform: translateY(135rpx) rotateY(0deg) scaleX(0.83);
}
.checkwind_ds .bottom_state {
  transform: translateY(240rpx);
}
.checkwind_ds .top_state1 {
  transform: translateY(0);
  /* transform: rotateY(-20deg) */
}
.checkwind_ds .middle_state1 {
  transform: translateY(90rpx);
}
.checkwind_ds .bottom_state1 {
  transform: translateY(195rpx);
}
.checkwind_ds .top_state2 {
  transform: translateY(0);
  /* transform: rotateY(-20deg) */
}
.checkwind_ds .middle_state2 {
  transform: translateY(105rpx);
}
.checkwind_ds .bottom_state2 {
  transform: translateY(216rpx);
}
</style>