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

<template>
  <view style="width: 100%; height: 100%">
    <div class="door-container">
      <div v-show="windowcount == 1">
        <div
          class="autowindow_new"
          v-show="windowcount == 1"
          :style="{ height: height }"
          style="margin: 0 auto"
        >
          <div
            class="window_new_1"
            :style="`transform: rotateX(${windowAngle}deg)`"
            id="subwindowpic11"
          ></div>
          <div
            class="window_new_2"
            :style="`transform: rotateX(${windowAngle}deg)`"
            id="subwindowpic12"
          ></div>
          <div
            class="window_new_3"
            :style="`transform: rotateX(${windowAngle}deg)`"
            id="subwindowpic13"
          ></div>
          <div
            class="window_new_4"
            :style="`transform: rotateX(${windowAngle}deg)`"
            id="subwindowpic14"
          ></div>
          <div
            class="window_new_5"
            :style="`transform: rotateX(${windowAngle}deg)`"
            id="subwindowpic15"
          ></div>
        </div>
        <div>
          <video controls style="width: 100%"></video>
        </div>
      </div>
      <div v-show="windowcount == 2">
        <div style="display: flex; flex-wrap: nowrap">
          <div class="autowindow_new" :style="{ height: height }">
            <div
              class="window_new_1"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic11"
            ></div>
            <div
              class="window_new_2"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic12"
            ></div>
            <div
              class="window_new_3"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic13"
            ></div>
            <div
              class="window_new_4"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic14"
            ></div>
            <div
              class="window_new_5"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic15"
            ></div>
          </div>
          <div class="autowindow_new" :style="{ height: height }">
            <div
              class="window_new_1"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic11"
            ></div>
            <div
              class="window_new_2"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic12"
            ></div>
            <div
              class="window_new_3"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic13"
            ></div>
            <div
              class="window_new_4"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic14"
            ></div>
            <div
              class="window_new_5"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic15"
            ></div>
          </div>
        </div>
      </div>
      <div v-show="windowcount == 3">
        <div style="display: flex; flex-wrap: nowrap">
          <div class="autowindow_new" :style="{ height: height }">
            <div
              class="window_new_1"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic11"
            ></div>
            <div
              class="window_new_2"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic12"
            ></div>
            <div
              class="window_new_3"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic13"
            ></div>
            <div
              class="window_new_4"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic14"
            ></div>
            <div
              class="window_new_5"
              :style="`transform: rotateX(${windowAngle}deg)`"
              id="subwindowpic15"
            ></div>
          </div>
          <div class="autowindow_new" :style="{ height: height }">
            <div
              class="window_new_1"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic11"
            ></div>
            <div
              class="window_new_2"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic12"
            ></div>
            <div
              class="window_new_3"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic13"
            ></div>
            <div
              class="window_new_4"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic14"
            ></div>
            <div
              class="window_new_5"
              :style="`transform: rotateX(${windowAngle1}deg)`"
              id="subwindowpic15"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: "200px",
    };
  },
  props: ["windowAngle", "windowAngle1", "windowcount"],
  methods: {},
  watch: {
    windownum(val) {
      if (val == 1) {
        this.height = "180px";
      }
      if (val == 2) {
        this.height = "180px";
      }
    },
  },
  onLoad(query) {},
};
</script>

<style scoped>
/*风窗样式*/
div.autowindow_new {
  width: 50%;
  background-image: url(/static/window/window-bk.png);
  background-size: 100% 100%;
  perspective: 800px;
}
/*风窗1 2 3 4*/

div.window_new_1 {
  margin-top: 2%;
  margin-left: 4%;
  width: 92%;
  height: 15%;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 2s;
  background-image: url(/static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_2 {
  margin-top: 1%;
  margin-left: 4%;
  width: 92%;
  height: 15%;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 2s;
  background-image: url(/static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_3 {
  margin-top: 1%;
  margin-left: 4%;
  width: 92%;
  height: 15%;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 2s;
  background-image: url(/static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_4 {
  margin-top: 1%;
  margin-left: 4%;
  width: 92%;
  height: 15%;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 2s;
  background-image: url(/static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_5 {
  margin-top: 1%;
  margin-left: 4%;
  width: 92%;
  height: 15%;
  background-color: crimson;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  transition: all 2s;
  background-image: url(/static/window/window_new1.png);
  background-size: 100% 100%;
}
div.window_new_1 {
  transition: all 2s ease;
  transform-origin: center center;
}
div.window_new_2 {
  transition: all 2s ease;
  transform-origin: center center;
}
div.window_new_3 {
  transition: all 2s ease;
  transform-origin: center center;
}
div.window_new_4 {
  transition: all 2s ease;
  transform-origin: center center;
}
div.window_new_5 {
  transition: all 2s ease;
  transform-origin: center center;
}
.open {
  transform: rotateX(100deg);
}
.close {
  transform: rotateX(0deg);
}
/*使用css变形功能

    div.door:hover div.left_door{
        transform:rotateY(100deg);
    }

    div.door:hover div.right_door{
        transform:rotateY(-100deg);
    }*/
</style>