src/views/screen/components/screen-wrapper/index.vue
@@ -1,27 +1,27 @@
<template>
  <div class="wrapper-container">
    <select-item></select-item>
    <!-- <select-item></select-item>
    <div class="return-button" @click="returnPath">
      返回
    </div>
    <div class="wrapper-content">
      <screen-map-three></screen-map-three>
      <div class="left-container wrapper">
    <div class="wrapper-content"> -->
      <screen-map-three :loadEnd="isEnd"></screen-map-three>
      <!-- <div class="left-container wrapper">
        <screen-face class="enter-left" :class="{ 'animate-enter-x': isEnd }"></screen-face>
        <screen-car class="enter-left animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-car>
        <screen-video class="enter-left animate-delay-2" :class="{ 'animate-enter-x': isEnd }"></screen-video>
      </div>
      <div class="center-container center-wrapper">
        <screen-map-cover></screen-map-cover>
        <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table>
        <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table> -->
        <!-- <screen-detection></screen-detection> -->
      </div>
      <!-- </div>
      <div class="right-container wrapper">
        <screen-examine class="enter-right" :class="{ 'animate-enter-x': isEnd }"></screen-examine>
        <screen-data class="enter-right animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-data>
      </div>
    </div>
    </div> -->
  </div>
</template>
@@ -51,7 +51,7 @@
  },
  data() {
    return {
      isEnd: false
      isEnd: false,
    }
  },
  methods: {
@@ -69,7 +69,7 @@
    const container = document.querySelector('.screen-wrapper');
    container.addEventListener('transitionend', this.checkAnimationEnd);
  },
  destroyed() {
  beforDestroy() {
    const container = document.querySelector('.screen-wrapper');
    container.removeEventListener('transitionend', this.checkAnimationEnd);
  }
@@ -90,11 +90,11 @@
}
.wrapper-container {
  width: 100%;
  height: 100%;
  width: 46%;
  height: 54%;
  position: absolute;
  top: 0;
  left: 0;
  top: 11%;
  left: 27%;
  z-index: 1;
  .wrapper-content {
@@ -194,4 +194,4 @@
    transform: translateY(0);
  }
}
</style>
</style>