<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></screen-face>
|
<screen-car></screen-car>
|
<screen-video></screen-video>
|
</div>
|
<div class="center-container center-wrapper">
|
<screen-map></screen-map>
|
<screen-table></screen-table>
|
<!-- <screen-detection></screen-detection> -->
|
|
</div>
|
<div class="right-container wrapper">
|
<screen-examine></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 ScreenTable from '../screen-table/index';
|
export default {
|
name: 'ScreenWrapper',
|
components: {
|
SelectItem,
|
ScreenFace,
|
ScreenExamine,
|
ScreenVideo,
|
ScreenCar,
|
ScreenMap,
|
ScreenTable
|
},
|
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: 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;
|
}
|
</style>
|
