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></screen-map>
        <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table>
        <screen-map-cover></screen-map-cover>
        <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>
@@ -31,17 +31,16 @@
import ScreenFace from '../screen-face/index';
import ScreenVideo from '../screen-video/index';
import ScreenCar from '../screen-car/index';
import ScreenMap from '../screen-map/index';
import ScreenMapCover from '../screen-map-cover/index';
import ScreenTable from '../screen-table/index';
import ScreenMapThree from '../screen-map-three/index.vue';
import ScreenMapThree from '../screen-map-three/index';
import ScreenData from '../screen-data/index';
export default {
  name: 'ScreenWrapper',
  components: {
    SelectItem,
    ScreenExamine,
    ScreenMap,
    ScreenTable,
    ScreenMapCover,
    ScreenMapThree,
@@ -52,7 +51,7 @@
  },
  data() {
    return {
      isEnd: false
      isEnd: false,
    }
  },
  methods: {
@@ -70,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);
  }
@@ -91,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 {
@@ -195,4 +194,4 @@
    transform: translateY(0);
  }
}
</style>
</style>