| | |
| | | <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> |
| | | |
| | |
| | | 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, |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | isEnd: false |
| | | isEnd: false, |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | const container = document.querySelector('.screen-wrapper'); |
| | | container.addEventListener('transitionend', this.checkAnimationEnd); |
| | | }, |
| | | destroyed() { |
| | | beforDestroy() { |
| | | const container = document.querySelector('.screen-wrapper'); |
| | | container.removeEventListener('transitionend', this.checkAnimationEnd); |
| | | } |
| | |
| | | } |
| | | |
| | | .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 { |
| | |
| | | transform: translateY(0); |
| | | } |
| | | } |
| | | </style> |
| | | </style> |