<template>
|
<div class="wrapper-container">
|
<!-- <select-item></select-item>
|
<div class="return-button" @click="returnPath">
|
返回
|
</div>
|
<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-detection></screen-detection> -->
|
|
<!-- </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>
|
</template>
|
|
<script>
|
import SelectItem from '../select-item/index';
|
import ScreenExamine from '../screen-examine/index';
|
import ScreenFace from '../screen-face/index';
|
import ScreenVideo from '../screen-video/index';
|
import ScreenCar from '../screen-car/index';
|
import ScreenMapCover from '../screen-map-cover/index';
|
import ScreenTable from '../screen-table/index';
|
import ScreenMapThree from '../screen-map-three/index';
|
import ScreenData from '../screen-data/index';
|
|
export default {
|
name: 'ScreenWrapper',
|
components: {
|
SelectItem,
|
ScreenExamine,
|
ScreenTable,
|
ScreenMapCover,
|
ScreenMapThree,
|
ScreenFace,
|
ScreenVideo,
|
ScreenCar,
|
ScreenData
|
},
|
data() {
|
return {
|
isEnd: false,
|
}
|
},
|
methods: {
|
returnPath() {
|
this.$router.push('/index');
|
},
|
checkAnimationEnd(event) {
|
if (this.isEnd) return;
|
if (event.propertyName === 'transform') {
|
this.isEnd = true;
|
}
|
}
|
},
|
mounted() {
|
const container = document.querySelector('.screen-wrapper');
|
container.addEventListener('transitionend', this.checkAnimationEnd);
|
},
|
beforDestroy() {
|
const container = document.querySelector('.screen-wrapper');
|
container.removeEventListener('transitionend', this.checkAnimationEnd);
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.return-button {
|
position: absolute;
|
right: 20px;
|
top: 10px;
|
border-radius: 4px;
|
border: 1px solid #4481DD;
|
background-color: rgba(67, 102, 155, 0.4);
|
color: #4481DD;
|
padding: 5px 20px;
|
cursor: pointer;
|
}
|
|
.wrapper-container {
|
width: 46%;
|
height: 54%;
|
position: absolute;
|
top: 11%;
|
left: 27%;
|
z-index: 1;
|
|
.wrapper-content {
|
width: 100%;
|
height: calc(100% - 60px);
|
margin-top: 60px;
|
position: relative;
|
box-sizing: border-box;
|
padding: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
}
|
|
.wrapper {
|
width: 25%;
|
height: 100%;
|
box-sizing: border-box;
|
padding: 0 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
&:first-of-type {
|
padding-left: 0;
|
}
|
|
&:last-of-type {
|
padding-right: 0;
|
}
|
}
|
|
.center-wrapper {
|
width: 50%;
|
height: 100%;
|
box-sizing: border-box;
|
padding: 0 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.animate-enter-x {
|
animation: enter-x 0.4s ease forwards;
|
}
|
|
.animate-enter-y {
|
animation: enter-y 0.4s ease forwards;
|
}
|
|
.enter-left {
|
transform: translateX(-100px);
|
opacity: 0;
|
}
|
|
.enter-right {
|
transform: translateX(100px);
|
opacity: 0;
|
}
|
|
.enter-top {
|
transform: translateY(100px);
|
opacity: 0;
|
}
|
|
.animate-delay-1 {
|
animation-delay: 0.1s;
|
}
|
|
.animate-delay-2 {
|
animation-delay: 0.3s;
|
}
|
|
.animate-delay-3 {
|
animation-delay: 0.5s;
|
}
|
|
@keyframes enter-x {
|
from {
|
opacity: 0;
|
}
|
|
to {
|
opacity: 1;
|
transform: translateX(0);
|
}
|
}
|
|
@keyframes enter-y {
|
from {
|
opacity: 0;
|
}
|
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
</style>
|
