<template>
|
<div class="layout">
|
<top-nav></top-nav>
|
<div class="router-view-box" :style="`height:${screenHeight}px;`">
|
<!-- 首页 -->
|
<div
|
class="left-tree"
|
v-if="TreeDataPool.showTreeBox"
|
style="animation-duration: 0.7s;background: #051130;width:315px;float:left;height:100%"
|
>
|
<div class="tree-box" style="border: 2px solid #182c65;margin-top:7px">
|
<left-nav :height="screenHeight - 30"></left-nav>
|
</div>
|
</div>
|
|
<home :class="{'hasLeftTree':TreeDataPool.showTreeBox}"></home>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import LeftNav from "../components/LeftNav.vue";
|
import TopNav from "../components/TopNav.vue";
|
import Home from "./home"
|
|
export default {
|
mounted() {
|
this.screenHeight = document.documentElement.clientHeight - 90;
|
this.getCenter();
|
this.TreeDataPool.showTreeBox = false
|
this.screenHeight = document.documentElement.clientHeight - 90;
|
},
|
components: {
|
LeftNav,
|
TopNav,
|
Home
|
},
|
|
data() {
|
return {
|
screenHeight: 0,
|
center: "",
|
defaultHeight: 432,
|
defaultWidth: 600,
|
activeName: 'deviceManage'
|
};
|
},
|
methods: {
|
resizeWidth(w) {
|
this.defaultWidth = w;
|
},
|
resizeHeight(h) {
|
this.defaultHeight = h;
|
},
|
getCenter() {
|
this.center = {
|
x: document.documentElement.clientWidth / 2 - 250,
|
y: document.documentElement.clientHeight / 2 - 200
|
};
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
.layout {
|
min-width: 1350px;
|
overflow: auto;
|
}
|
.tree-menu{
|
max-width: 270px!important;
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar{
|
background-color: transparent!important;
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar-thumb{
|
background-color: transparent!important;
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar-track{
|
background-color: transparent!important;
|
}
|
.hasLeftTree{
|
float: left;
|
width: calc(100% - 315px);
|
}
|
.router-view-box {
|
width: 100%;
|
height: 100%;
|
min-height: 684px;
|
overflow: auto;
|
.router-view {
|
float: left;
|
height: 100%;
|
width: calc(100% - 315px);
|
}
|
.windown-model {
|
.content {
|
position: absolute;
|
top: 5px;
|
z-index: 20000;
|
.el-tabs__nav {
|
z-index: 20000;
|
}
|
}
|
.el-carousel {
|
.el-carousel__container {
|
height: calc(100% - 10px);
|
.el-carousel__arrow:hover {
|
background-color: rgba(102, 102, 102);
|
}
|
.el-carousel__arrow--right {
|
right: 42%;
|
}
|
.el-carousel__arrow--left {
|
left: 42%;
|
}
|
}
|
}
|
.el-tabs__nav {
|
//box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.07);
|
padding-left: 20px;
|
.el-tabs__active-bar {
|
width: 40px;
|
margin-left: 20px;
|
}
|
.el-tabs__item {
|
font-size: 18px;
|
}
|
}
|
.titlebar {
|
background: #fff !important;
|
height: 10px !important;
|
padding: 0px;
|
position: relative;
|
z-index: 30000;
|
.button {
|
font-size: 25px;
|
margin: 5px;
|
//position: relative;
|
//z-index: 5;
|
top: 10px;
|
}
|
}
|
.button {
|
background-color: transparent;
|
border: none;
|
font-size: medium;
|
margin: 0;
|
padding: 0 0.25em;
|
border-radius: 4pt;
|
cursor: pointer;
|
}
|
.el-carousel__indicators {
|
display: none;
|
}
|
.el-carousel {
|
height: calc(100% - 50px);
|
}
|
.el-carousel__arrow {
|
bottom: -25px !important;
|
top: inherit !important;
|
}
|
.model-bottom {
|
width: 100%;
|
height: 45px;
|
line-height: 45px;
|
font-size: 15px;
|
color: #222222;
|
.model-bottom-left,
|
.model-bottom-right {
|
cursor: pointer;
|
padding: 0px 10px;
|
}
|
.model-bottom-left {
|
float: left;
|
}
|
.model-bottom-right {
|
float: right;
|
}
|
.model-bottom-left:hover {
|
color: #3d68e1;
|
}
|
.model-bottom-right:hover {
|
color: #3d68e1;
|
}
|
}
|
}
|
}
|
.close-tree-log {
|
position: absolute;
|
width: 32px;
|
height: 41px;
|
float: left;
|
top: 48px;
|
box-sizing: border-box;
|
background: #ffffff;
|
box-shadow: 0 -3px 36px 0 rgba(0, 0, 0, 0.19);
|
border-top-right-radius: 3em;
|
border-bottom-right-radius: 3em;
|
i {
|
position: relative;
|
top: -4px;
|
left: -5px;
|
font-size: 24px;
|
color: #3d68e1;
|
cursor: pointer;
|
}
|
}
|
</style>
|
