<template>
|
<div class="main-view">
|
<div class="view-left">
|
<left-nav :isCollapse="isCollapse" @menuChange="menuChange"></left-nav>
|
</div>
|
<div class="right">
|
<div class="top">
|
<div class="collapse-trigger" @click="toggleCollapse">
|
<i :class="isCollapse?'el-icon-s-fold':'el-icon-s-unfold'"></i>
|
</div>
|
<top-nav></top-nav>
|
</div>
|
<div class="container">
|
<searchForVideoAnalyze v-if="actPage=='searchForVideoAnalyze'"></searchForVideoAnalyze>
|
<memberManage v-if="actPage=='memberManage'"></memberManage>
|
<taskManage v-if="actPage=='taskManage'"></taskManage>
|
<transferMemo v-if="actPage=='transferMemo'"></transferMemo>
|
<transferDeviceManage v-if="actPage=='transferDeviceManage'"></transferDeviceManage>
|
<configManage v-if="actPage=='configManage'"></configManage>
|
<guideIndex v-if="actPage=='guideIndex'"></guideIndex>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import LeftNav from '../components/leftNav';
|
import TopNav from '../components/topNav';
|
import SearchForVideoAnalyze from '../components/searchForVideoAnalyze';
|
import MemberManage from '../components/memberManage';
|
import TaskManage from '../components/taskManage';
|
import TransferMemo from '../components/transferMemo';
|
import TransferDeviceManage from '../components/transferDeviceManage';
|
import ConfigManage from '../components/configManage';
|
import GuideIndex from '../components/guideIndex';
|
export default {
|
components: { LeftNav, TopNav, SearchForVideoAnalyze, MemberManage, TaskManage, TransferMemo, TransferDeviceManage, ConfigManage, GuideIndex },
|
data () {
|
return {
|
isCollapse: false,
|
actPage: 'searchForVideoAnalyze',
|
}
|
},
|
mounted () {
|
|
},
|
methods: {
|
markNav () {
|
debugger
|
sessionStorage.setItem('actPage', this.actPage);
|
this.menuChange(this.actPage);
|
},
|
toggleCollapse () {
|
this.isCollapse = !this.isCollapse;
|
//通知当前活动页table(如果有) doLayout
|
},
|
menuChange (path) {
|
this.actPage = path;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.flex-box {
|
display: flex;
|
>label {
|
padding-right: 10px;
|
}
|
}
|
.el-button--primary.is-disabled,
|
.el-button--primary.is-disabled:hover,
|
.el-button--primary.is-disabled:focus,
|
.el-button--primary.is-disabled:active {
|
color: #ffffff;
|
background-color: #9eb4f0 !important;
|
border-color: #9eb4f0 !important;
|
}
|
.el-table.thbg {
|
border: 1px solid #dedede;
|
margin-top: 10px;
|
th {
|
background: #f5f5f5;
|
color: #333;
|
}
|
.operation {
|
cursor: pointer;
|
display: flex;
|
span {
|
padding: 0 3px;
|
color: #0096fa;
|
}
|
i[class^='el-icon'] {
|
padding: 3px;
|
font-size: 16px;
|
color: #0096fa;
|
}
|
}
|
}
|
.main-view {
|
display: flex;
|
background: #f0f2f5;
|
.view-left {
|
z-index: 2;
|
box-shadow: 4px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
}
|
.right {
|
flex: 1;
|
.top {
|
background: #fff;
|
position: relative;
|
.collapse-trigger {
|
position: absolute;
|
left: 20px;
|
top: 23px;
|
font-size: 20px;
|
cursor: pointer;
|
}
|
}
|
.container {
|
background: #fff;
|
margin: 10px;
|
box-sizing: border-box;
|
height: calc(100vh - 84px);
|
overflow-y: auto;
|
}
|
}
|
}
|
</style>
|
