<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-unfold' : 'el-icon-s-fold'"></i>
|
</div>-->
|
<top-nav></top-nav>
|
</div>
|
<div class="body">
|
<!-- <el-card style="margin: 20px 0px 0px 20px;min-height: 90vh">-->
|
<router-view></router-view>
|
<!-- </el-card>-->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import TopNav from "./components/topNav.vue";
|
import LeftNav from "./components/leftNav.vue";
|
export default {
|
components: {
|
LeftNav,
|
TopNav
|
},
|
data() {
|
return {
|
isCollapse: false,
|
actPage: "guideIndex",
|
};
|
},
|
mounted() {
|
},
|
methods: {
|
markNav() {
|
sessionStorage.setItem("actPage", this.actPage);
|
this.menuChange(this.actPage);
|
},
|
toggleCollapse() {
|
this.isCollapse = !this.isCollapse;
|
//通知当前活动页table(如果有) doLayout
|
},
|
menuChange(path) {
|
if (path == "guideIndex") {
|
// this.$refs.GuideIndex.refreshShoubiNum()
|
}
|
if (path == "taskscreen") {
|
//window.location.href = window.location.href+'taskscreen/index.html'
|
window.open(window.location.href + "taskscreen/index.html", "_blank");
|
} else if (path == "hiddendangerscreen") {
|
//window.location.href = window.location.href+'hiddendangerscreen/index.html'
|
window.open(
|
window.location.href + "hiddendangerscreen/index.html",
|
"_blank"
|
);
|
}
|
this.actPage = path;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.flex-box {
|
display: flex;
|
> label {
|
padding-right: 10px;
|
}
|
}
|
.flex-end {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.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;
|
}
|
.table-area {
|
margin-bottom: 20px;
|
.el-table {
|
border: 1px solid #ddd;
|
thead {
|
color: #111 !important;
|
th {
|
background: #f4f4f4;
|
}
|
}
|
.operation {
|
span {
|
font-size: 14px;
|
color: #1a99ff;
|
padding-right: 10px;
|
}
|
}
|
}
|
}
|
.el-table.thbg {
|
border: 1px solid #dedede;
|
margin: 10px 0;
|
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 {
|
margin-top: -15px;
|
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>
|
