<template>
|
<div class="wrapper-container">
|
<select-item></select-item>
|
<div class="return-button">
|
<el-button type="primary" @click="returnPath">管理系统</el-button>
|
</div>
|
<div class="wrapper-content">
|
<div class="left-container wrapper">
|
<screen-face class="animate-enter-x enter-left"></screen-face>
|
<screen-car class="animate-enter-x enter-left animate-delay-1"></screen-car>
|
<screen-video class="animate-enter-x enter-left animate-delay-2"></screen-video>
|
</div>
|
<div class="center-container center-wrapper">
|
<!-- <screen-map></screen-map> -->
|
<screen-map-cover></screen-map-cover>
|
<screen-table class="animate-enter-y enter-top"></screen-table>
|
<!-- <screen-detection></screen-detection> -->
|
|
</div>
|
<div class="right-container wrapper">
|
<screen-examine class="animate-enter-x enter-right"></screen-examine>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import SelectItem from '../select-item/index';
|
import ScreenFace from '../screen-face/index';
|
import ScreenExamine from '../screen-examine/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';
|
export default {
|
name: 'ScreenWrapper',
|
components: {
|
SelectItem,
|
ScreenFace,
|
ScreenExamine,
|
ScreenVideo,
|
ScreenCar,
|
ScreenMap,
|
ScreenTable,
|
ScreenMapCover
|
},
|
methods: {
|
returnPath() {
|
this.$router.push('/index');
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.return-button {
|
position: absolute;
|
right: 20px;
|
top: 40px;
|
}
|
|
.wrapper-container {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 1;
|
|
.wrapper-content {
|
width: 100%;
|
height: calc(100% - 100px);
|
margin-top: 100px;
|
position: relative;
|
box-sizing: border-box;
|
padding: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
}
|
|
.wrapper {
|
width: 20%;
|
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: 60%;
|
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 {
|
100% {
|
opacity: 1;
|
transform: translateX(0);
|
}
|
}
|
|
@keyframes enter-y {
|
100% {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
</style>
|
