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

<template>
  <view style="width: 100%; height: 100%">
    <div class="door-container">
      <div style="display: flex" v-show="doorcount == 1">
        <div class="door1" v-show="doorcount == 1" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor1"
          ></div>
          <div class="doortitle">风门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor1"
          ></div>
        </div>
        <div></div>
      </div>
      <div
        style="
          background: linear-gradient(
            to right,
            rgba(55, 135, 254, 0.08),
            rgba(4, 184, 255, 0.08),
            rgba(60, 161, 237, 0.08)
          );
          background-size: 100% 100%;
          background-repeat: no-repeat;
        "
        v-show="doorcount == 2"
      >
        <div class="door2" v-show="doorcount == 2" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor2"
          ></div>
          <div class="doortitle">前门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor2"
          ></div>
        </div>
        <div class="door2" v-show="doorcount == 2" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor3"
          ></div>
          <div class="doortitle">后门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor3"
          ></div>
        </div>
      </div>
      <div style="" v-show="doorcount == 3">
        <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor4"
          ></div>
          <div class="doortitle">前门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor4"
          ></div>
        </div>
        <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor5"
          ></div>
          <div class="doortitle">中门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor5"
          ></div>
        </div>
        <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor6"
          ></div>
          <div class="doortitle">后门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor6"
          ></div>
        </div>
        <div>
          <!-- <video
            v-if="item.type == 'flv'"
            :id="'cameraElement' + item.id"
            muted
            autoplay
            controls
            width="100%"
            height="100%"
            style="width: 100%"
          ></video> -->
        </div>
      </div>
      <div style="" v-show="doorcount == 4">
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor7"
          ></div>
          <div class="doortitle">1号门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor7"
          ></div>
        </div>
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor8"
          ></div>
          <div class="doortitle">2号门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor8"
          ></div>
        </div>
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor9"
          ></div>
          <div class="doortitle">3号门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor9"
          ></div>
        </div>
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate4 == '1' ||
              gatestate4 == '开启' ||
              gatestate4 == '打开' ||
              gatestate4 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor10"
          ></div>
          <div class="doortitle">4号门</div>
          <div
            class="right_door"
            v-bind:class="
              gatestate4 == '1' ||
              gatestate4 == '开启' ||
              gatestate4 == '打开' ||
              gatestate4 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor10"
          ></div>
        </div>
        <div>
          <!-- <video
            v-if="item.type == 'flv'"
            :id="'cameraElement' + item.id"
            muted
            autoplay
            controls
            width="100%"
            height="100%"
            style="width: 100%"
          ></video> -->
        </div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rows: [], //分行
      height: "200px",
      videoDeviceId: "",
      flvPlayer: [],
      VideoDeviceUrl: "",
      videoList: [],
      num: 1, //摄像头个数
      columnNum: 1, //列数
      columSpan: 24, //列块
    };
  },
  props: [
    "gatestate1",
    "gatestate2",
    "gatestate3",
    "gatestate4",
    "doorcount",
    "cameralist",
  ],
  methods: {},
  watch: {
    doorcount(val) {
      if (val == 1) {
        this.height = "180px";
      }
      if (val == 2) {
        this.height = "180px";
      }
      if (val == 3) {
        this.height = "110px";
      }
      if (val == 4) {
        this.height = "180px";
      }
    },
  },
};
</script>

<style scoped>
/*门里面*/
div.door1 {
  width: 50%;
  float: left;
  margin-left: 20%;
  background-image: url(/static/door.png);
  background-size: 100% 100%;
  perspective: 800px;
}
div.door2 {
  width: 50%;
  float: left;
  background-image: url(/static/door.png);
  background-size: 100% 100%;
  perspective: 800px;
}
div.door3 {
  width: 33.3%;
  float: left;
  background-image: url(/static/door.png);
  background-size: 100% 100%;
  perspective: 400px;
}
div.door4 {
  width: 50%;
  float: left;
  background-image: url(/static/door.png);
  background-size: 100% 100%;
  perspective: 800px;
}
/*左门/右门*/

div.left_door {
  top: 12%;
  left: 10%;
  width: 40.5%;
  height: 78%;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  position: absolute;
  transition: all 2s ease;
  background-image: url(/static/left.png);
  background-size: 100% 100%;
}
div.right_door {
  top: 12%;
  right: 10%;
  width: 40.2%;
  height: 78%;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  position: absolute;
  transition: all 2s ease;
  background-image: url(/static/left.png);
  background-size: 100% 100%;
}
div.left_door {
  transform-origin: left center;
  border-right: 1px solid rgb(8, 8, 8);
}
div.right_door {
  transform-origin: right center;
  border-left: 1px solid rgb(8, 8, 8);
}
.open_left {
  transform: rotateY(100deg);
}
.open_right {
  transform: rotateY(-100deg);
}
.close_left {
  transform: rotateY(0);
}
.close_right {
  transform: rotateY(0deg);
}
/*使用css变形功能

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

    div.door:hover div.right_door{
        transform:rotateY(-100deg);
    }*/
.doortitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #677799;
  z-index: 999;
  text-align: center;
}
</style>