<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 appName="Camera" :height="screenHeight - 30"></left-nav>
|
</div>
|
</div>
|
|
<home :class="{'hasLeftTree':TreeDataPool.showTreeBox}"></home>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
//import LeftNav from "../components/LeftNav.vue";
|
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;
|
document.title = "SmartAI";
|
},
|
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;
|
}
|
.box-card .s-card-right-double{
|
background-color: transparent;
|
}
|
.box-card .s-card-right-signal{
|
background-color: transparent;
|
}
|
.left-tree-box .el-menu-vertical-demo:hover {
|
overflow-y: visible;
|
overflow-x: hidden;
|
}
|
.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>
|
<style lang="scss">
|
.left-tree-box {
|
width: 315px;
|
margin-left: 5px;
|
|
.el-menu {
|
border-right: solid 0px #e6e6e6 !important;
|
}
|
ul {
|
li {
|
.el-menu-item-group__title {
|
padding: none;
|
}
|
}
|
.el-submenu__title,
|
.el-menu-item {
|
padding-left: 10px !important;
|
color: #222222 !important;
|
font-size: 17px !important;
|
height: 35px;
|
line-height: 35px;
|
.el-submenu__icon-arrow {
|
font-size: 12px !important;
|
padding-right: 2px !important;
|
}
|
i {
|
padding-right: 10px !important;
|
font-size: 24px !important;
|
color: #95b7ff !important;
|
}
|
}
|
}
|
.navTopSelect {
|
.el-input__icon {
|
line-height: 34px;
|
}
|
// padding: 24px 0px;
|
padding-top: 24px;
|
padding-bottom: 12px;
|
input:nth-child(1) {
|
height: 34px;
|
box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5);
|
}
|
input:nth-child(2) {
|
height: 34px;
|
width: 103px;
|
box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5);
|
}
|
}
|
|
.el-input__inner {
|
background: #0e2457;
|
border: 1px solid #053e83;
|
box-shadow: 0 2px 11px -6px rgba(95, 95, 95, 0.5);
|
border-radius: 4px;
|
color: #95b7ff;
|
}
|
.el-select .el-input .el-select__caret {
|
color: #95b7ff;
|
}
|
input::-webkit-input-placeholder,
|
textarea::-webkit-input-placeholder {
|
/* WebKit browsers */
|
color: #9fbcfc;
|
}
|
.isCollapse {
|
font-size: 20px;
|
padding: 0px 5px;
|
}
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
.fontFamily,
|
.el-submenu__title .fontFamily,
|
.el-submenu__title .fontFamily {
|
padding-right: 20px;
|
font-size: 22px;
|
}
|
}
|
.tree-anchor .fontFamily {
|
font-size: 16px !important;
|
color: #2074ef;
|
padding-right: 0px !important;
|
}
|
.el-submenu__title,
|
.el-menu-item {
|
text-align: left;
|
}
|
|
.item-group {
|
margin-left: 33px;
|
margin-top: -12px;
|
}
|
}
|
.tree-close {
|
width: 10%;
|
margin-left: 10px;
|
font-size: 20px;
|
display: inline-block;
|
color: #9ea0a0;
|
vertical-align: middle;
|
cursor: pointer;
|
}
|
|
.tree-edit {
|
z-index: 1;
|
font-size: 16px;
|
position: absolute;
|
top: 81px;
|
cursor: pointer;
|
button {
|
border: 0px;
|
color: #3d68e1;
|
|
background-color: transparent;
|
cursor: pointer;
|
outline: none;
|
}
|
button:hover {
|
color: rgb(82, 193, 245);
|
}
|
}
|
.tree-lock {
|
left: 76%;
|
button {
|
color: #000;
|
}
|
}
|
|
.gb-lock {
|
left: 76%;
|
top: -27px;
|
button {
|
color: #000;
|
}
|
}
|
.area-add {
|
left: 35%;
|
}
|
.camera-add {
|
left: 45%;
|
}
|
.tree-font {
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #95b7ff;
|
}
|
|
.gb-refresh {
|
top: -27px;
|
left: 113px;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
|
border-bottom-color: #00000090;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
|
border-bottom-color: #68666690;
|
}
|
</style>
|
