From c534501542feeaa6711f78c6cd91661f04eb4bcf Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期四, 17 九月 2020 17:48:46 +0800 Subject: [PATCH] 修复可视化树的样式 --- src/pages/visual/components/LeftNav.vue | 18 +--- src/pages/visual/components/treeMenu/index.vue | 8 + src/pages/visual/Pool/CategoryData.ts | 2 src/pages/visual/Pool/VideoPhotoData.ts | 1 src/pages/visual/index/App.vue | 169 +---------------------------------------- 5 files changed, 19 insertions(+), 179 deletions(-) diff --git a/src/pages/visual/Pool/CategoryData.ts b/src/pages/visual/Pool/CategoryData.ts index 6dbe433..4464105 100644 --- a/src/pages/visual/Pool/CategoryData.ts +++ b/src/pages/visual/Pool/CategoryData.ts @@ -136,7 +136,7 @@ // console.log(res,'棰勮鍒楄〃鏁版嵁') if (res && res.success) { this.personList = res.data.dataList - console.log(this.personList, "realTimeCapture") + // console.log(this.personList, "realTimeCapture") } } diff --git a/src/pages/visual/Pool/VideoPhotoData.ts b/src/pages/visual/Pool/VideoPhotoData.ts index cf36a9c..dbd7303 100644 --- a/src/pages/visual/Pool/VideoPhotoData.ts +++ b/src/pages/visual/Pool/VideoPhotoData.ts @@ -88,7 +88,6 @@ // this.cardsForHome.length = 0 this.cardsForHome.length = 0 if (res && res.success) { - console.log("鍝堝搱鍝�", res) res.data.dataList.forEach((item, index) => { if (index < this.pageSize) { this.cardsForHome.push(item as any); diff --git a/src/pages/visual/components/LeftNav.vue b/src/pages/visual/components/LeftNav.vue index 2e2df43..77866ba 100644 --- a/src/pages/visual/components/LeftNav.vue +++ b/src/pages/visual/components/LeftNav.vue @@ -8,6 +8,7 @@ active-text-color="#409EFF" style="height: 100%;" class="el-menu-vertical-demo" + unique-opened @open="menuOpen" @close="menuClose" > @@ -84,6 +85,7 @@ ref="tree" :treeName="'localTree'" :node="TreeDataPool.treeData" + :height="height" @addDevice="addCamera" /> </el-menu-item-group> @@ -118,18 +120,6 @@ /> </el-menu-item-group> </el-submenu> - <el-menu-item index="2"> - <i class="font_family icon-benditupianx"></i> - <b slot="title" class="tree-font">鏈湴鍥剧墖</b> - </el-menu-item> - <el-menu-item index="3"> - <i class="font_family icon-bendishipinx"></i> - <b slot="title" class="tree-font">鏈湴瑙嗛</b> - </el-menu-item> - <el-menu-item index="4"> - <i class="font_family icon-zaixianshipinx"></i> - <b slot="title" class="tree-font">鍦ㄧ嚎瑙嗛</b> - </el-menu-item> </el-menu> </div> </transition> @@ -137,6 +127,7 @@ <script> import TreeMenu from "./treeMenu/index"; +// import TreeMenu from "@/components/treeMenu"; import bus from "@/plugin/bus" export default { @@ -320,6 +311,9 @@ text-align: left; } + .el-submenu__title:hover { + background-color: #07284e !important; + } .item-group { margin-left: 33px; margin-top: -12px; diff --git a/src/pages/visual/components/treeMenu/index.vue b/src/pages/visual/components/treeMenu/index.vue index be62532..fb742f3 100644 --- a/src/pages/visual/components/treeMenu/index.vue +++ b/src/pages/visual/components/treeMenu/index.vue @@ -1,5 +1,5 @@ <template> - <div class="tree-menu"> + <div class="tree-menu" :style="`max-height:${height - 170}px;`"> <v-jstree :data="node" :item-events="itemClickEvents" @@ -127,6 +127,10 @@ gb28181: { type: Boolean, default: false + }, + height: { + type: Number, + default: 0 } }, data() { @@ -349,7 +353,7 @@ } .tree-menu:hover { overflow-x: visible; - overflow-y: hidden; + overflow-y: auto; margin-bottom: 0px; } </style> diff --git a/src/pages/visual/index/App.vue b/src/pages/visual/index/App.vue index 51303f5..1ff4523 100644 --- a/src/pages/visual/index/App.vue +++ b/src/pages/visual/index/App.vue @@ -9,7 +9,7 @@ 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> + <left-nav :height="screenHeight - 30"></left-nav> </div> </div> @@ -20,7 +20,7 @@ <script> //import LeftNav from "../components/LeftNav.vue"; -import LeftNav from "@/components/LeftNav.vue"; +import LeftNav from "../components/LeftNav.vue"; import TopNav from "../components/TopNav.vue"; import Home from "./home"; @@ -71,18 +71,18 @@ .tree-menu { max-width: 270px !important; } -.box-card .s-card-right-double{ +.box-card .s-card-right-double { background-color: transparent; } -.box-card .s-card-right-signal{ +.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 { + background-color: transparent !important; } .el-menu-vertical-demo::-webkit-scrollbar-thumb { background-color: transparent !important; @@ -216,162 +216,5 @@ 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> -- Gitblit v1.8.0