From 1df4b1f08a2e8f553db34e10cc1b8b5b1ff01572 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期六, 19 九月 2020 17:03:04 +0800
Subject: [PATCH] 统一左侧目录树伸缩行为
---
src/pages/datapush/index/RightEvent.vue | 2
src/pages/cameraAccess/index/App.vue | 81 -------------
src/pages/library/index/App.vue | 106 ++++++++++++-----
src/pages/cameraVideo/index/App.vue | 16 +-
src/pages/datapush/index/App.vue | 98 +++++++++++++--
src/pages/datapush/index/LeftList.vue | 5
6 files changed, 169 insertions(+), 139 deletions(-)
diff --git a/src/pages/cameraAccess/index/App.vue b/src/pages/cameraAccess/index/App.vue
index d7b7ab0..14f9cc8 100644
--- a/src/pages/cameraAccess/index/App.vue
+++ b/src/pages/cameraAccess/index/App.vue
@@ -144,86 +144,5 @@
background-size: 100% 100%;
}
}
-// .column {
-// overflow-y: hidden;
-// display: flex;
-// width: 100%;
-// height: 100%;
-// }
-// .column-left {
-// height: 100%;
-// padding-bottom: 20px;
-// box-sizing: border-box;
-// // height: inherit;
-// background-color: #fff;
-// position: relative;
-// //float: left;
-// }
-// .column-right {
-// position: relative;
-// flex: 1;
-// background-color: #fff;
-// box-sizing: border-box;
-// overflow-y: hidden;
-// height: 100%;
-// min-width: 1602px;
-// }
-// .resize-save {
-// position: absolute;
-// top: 0;
-// right: 5px;
-// bottom: 0;
-// left: 0;
-// padding: 14px;
-// overflow-x: hidden;
-// overflow-y: hidden;
-// }
-// .resize-bar {
-// width: 310px;
-// height: inherit;
-// resize: horizontal;
-// cursor: ew-resize;
-// opacity: 0;
-// overflow: scroll;
-// max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
-// min-width: 33px; //璁惧畾鏈�灏忓搴�
-// }
-// /* 鎷栨嫿绾� */
-// .resize-line {
-// position: absolute;
-// right: 0;
-// top: 0;
-// bottom: 0;
-// border-right: 2px solid #efefef;
-// border-left: 1px solid #e0e0e0;
-// pointer-events: none;
-// //cursor: ew-resize;
-// }
-// .resize-bar:hover ~ .resize-line,
-// .resize-bar:active ~ .resize-line {
-// border-left: 1px dashed skyblue;
-// }
-// .resize-bar::-webkit-scrollbar {
-// width: 200px;
-// height: inherit;
-// }
-// /* Firefox鍙湁涓嬮潰涓�灏忓潡鍖哄煙鍙互鎷変几 */
-// @supports (-moz-user-select: none) {
-// .resize-bar:hover ~ .resize-line,
-// .resize-bar:active ~ .resize-line {
-// border-left: 1px solid #bbb;
-// }
-// .resize-bar:hover ~ .resize-line::after,
-// .resize-bar:active ~ .resize-line::after {
-// content: "";
-// position: absolute;
-// width: 16px;
-// height: 16px;
-// bottom: 0;
-// right: -8px;
-// // background: url(./resize.svg);
-// background-size: 100% 100%;
-// }
-// }
</style>
diff --git a/src/pages/cameraVideo/index/App.vue b/src/pages/cameraVideo/index/App.vue
index c038b7d..c2479d2 100644
--- a/src/pages/cameraVideo/index/App.vue
+++ b/src/pages/cameraVideo/index/App.vue
@@ -43,21 +43,26 @@
</script>
<style lang="scss" scoped>
+
.column {
- height:100%;
+ overflow: hidden;
+ min-width: 1399px;
+ height: 100%;
}
.column-left {
- height: inherit;
background-color: #fff;
position: relative;
float: left;
+ height: 100vh;
+ //height: inherit;
}
.column-right {
- height: 100%;
- background-color: #fff;
+ height: 100vh;
+ background-color: #eee;
box-sizing: border-box;
+ //overflow: hidden;
overflow-x: auto;
- overflow-y: hidden;
+ overflow-y: auto;
}
.resize-save {
position: absolute;
@@ -84,7 +89,6 @@
right: 0;
top: 0;
bottom: 0;
- z-index: 100;
border-right: 2px solid #efefef;
border-left: 1px solid #e0e0e0;
pointer-events: none;
diff --git a/src/pages/datapush/index/App.vue b/src/pages/datapush/index/App.vue
index d56eb85..ae3fccc 100644
--- a/src/pages/datapush/index/App.vue
+++ b/src/pages/datapush/index/App.vue
@@ -1,21 +1,25 @@
<template>
- <div class="flex-box bg-w p10">
+ <div class="flex-box bg-w ">
<div class="ev-left-list">
- <leftList
- ref="baseSync"
- listWidth="350px"
- title="鍚屾搴�"
- type="1"
- :isSelected="isSelected"
- :activeId="selectedId"
- @getEvents="getEventList"
- @del-list="delList"
- @add="changeToAdd"
- @enabled="eventSwitch"
- ></leftList>
+ <div class="resize-bar"></div>
+ <div class="resize-line"></div>
+ <div class="resize-save">
+ <leftList
+ ref="baseSync"
+ listWidth="350px"
+ title="鍚屾搴�"
+ type="1"
+ :isSelected="isSelected"
+ :activeId="selectedId"
+ @getEvents="getEventList"
+ @del-list="delList"
+ @add="changeToAdd"
+ @enabled="eventSwitch"
+ ></leftList>
+ </div>
</div>
- <div v-show="isShowRight">
+ <div v-show="isShowRight" style="height:100vh;overflow-y:auto">
<rightEvent
ref="right"
:eventObject="eventObject"
@@ -94,12 +98,72 @@
</script>
<style lang="scss">
-
+.flex-box{
+ height: 100%;
+}
.ev-left-list {
- border-right: 1px solid #e0e0e0;
- min-width: 384px;
+ //border-right: 1px solid #e0e0e0;
+ //min-width: 384px;
+ //height: 100vh;
+ height: 100vh;
+ position: relative;
+}
+.resize-save {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ bottom: 0;
+ left: 0;
+ padding: 14px;
+ overflow-x: hidden;
+}
+.resize-bar {
+ width: 310px;
+ height: inherit;
+ resize: horizontal;
+ cursor: ew-resize;
+ opacity: 0;
+ overflow: scroll;
+ max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
+ min-width: 33px; //璁惧畾鏈�灏忓搴�
+}
+/* 鎷栨嫿绾� */
+.resize-line {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 2px solid #efefef;
+ border-left: 1px solid #e0e0e0;
+ pointer-events: none;
+}
+.resize-bar:hover ~ .resize-line,
+.resize-bar:active ~ .resize-line {
+ border-left: 1px dashed skyblue;
+}
+.resize-bar::-webkit-scrollbar {
+ width: 200px;
+ height: inherit;
}
+/* Firefox鍙湁涓嬮潰涓�灏忓潡鍖哄煙鍙互鎷変几 */
+@supports (-moz-user-select: none) {
+ .resize-bar:hover ~ .resize-line,
+ .resize-bar:active ~ .resize-line {
+ border-left: 1px solid #bbb;
+ }
+ .resize-bar:hover ~ .resize-line::after,
+ .resize-bar:active ~ .resize-line::after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ bottom: 0;
+ right: -8px;
+ // background: url(./resize.svg);
+ background-size: 100% 100%;
+ }
+}
.ant-divider,
.ant-divider-vertical {
margin: 0 8px;
diff --git a/src/pages/datapush/index/LeftList.vue b/src/pages/datapush/index/LeftList.vue
index 32b7308..c4ee556 100644
--- a/src/pages/datapush/index/LeftList.vue
+++ b/src/pages/datapush/index/LeftList.vue
@@ -182,11 +182,10 @@
position: absolute;
left: 0px;
width: 355px;
- height: 100%;
-
+ height: calc(100% - 60px);
margin-top: 20px;
border-top: 1px solid #e0e0e0;
- border-bottom: 1px solid #e0e0e0;
+ //border-bottom: 1px solid #e0e0e0;
}
.out-div {
width: 350px;
diff --git a/src/pages/datapush/index/RightEvent.vue b/src/pages/datapush/index/RightEvent.vue
index 79b19d5..dd24196 100644
--- a/src/pages/datapush/index/RightEvent.vue
+++ b/src/pages/datapush/index/RightEvent.vue
@@ -795,7 +795,7 @@
height: 10px;
background-color: #e9ebf2;
width: 100%;
- position: absolute;
+ //position: absolute;
}
.s-right-rule {
diff --git a/src/pages/library/index/App.vue b/src/pages/library/index/App.vue
index bb63ca9..cc628db 100644
--- a/src/pages/library/index/App.vue
+++ b/src/pages/library/index/App.vue
@@ -1,16 +1,19 @@
<template>
<div class="s-base-manage">
<div class="flex-box base-overflow" >
- <div class="pl20 data-left-box">
- <base-list
- ref="baseSync"
- :listWidth="`100%`"
- :title="`鍚屾搴揱"
- type="sync"
- :isSelected="isSelected"
- @getList="getPersonList"
- @changeShow="changeToAdd"
- ></base-list>
+ <div class="data-left-box">
+ <div class="resize-bar"></div>
+ <div class="resize-line"></div>
+ <div class="resize-save">
+ <base-list
+ ref="baseSync"
+ :title="`鍚屾搴揱"
+ type="sync"
+ :isSelected="isSelected"
+ @getList="getPersonList"
+ @changeShow="changeToAdd"
+ ></base-list>
+ </div>
</div>
<div class="bg-white ml20 data-right-box">
<div v-show="showList">
@@ -138,38 +141,79 @@
.s-data-manage-breadcrumb {
margin: 0 3px;
height: 5%;
- -webkit-box-sizing: border-box;
+ box-sizing: border-box;
border: 1px solid #e4e7ed;
- -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
box-shadow: #e4e7ed 0px 0px 9px inset;
border-radius: 5px;
}
.data-left-box {
- height: 100%;
- @media screen and (max-width: 1440px) {
- width: 23%;
- }
- @media screen and (min-width: 1440px) and (max-width: 1640px) {
- width: 21%;
- }
- @media screen and (min-width: 1640px) {
- width: 20%;
- }
+ //height: 100%;
+ height: 100vh;
+ position: relative;
+ background: #fff;
box-sizing: border-box;
border-right: 1px solid #e0e0e0;
+}
+.resize-save {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ bottom: 0;
+ left: 0;
+ padding: 14px;
+ overflow-x: hidden;
+}
+.resize-bar {
+ width: 310px;
+ height: inherit;
+ resize: horizontal;
+ cursor: ew-resize;
+ opacity: 0;
+ overflow: scroll;
+ max-width: 500px; //璁惧畾鏈�澶ф媺浼搁暱搴�
+ min-width: 33px; //璁惧畾鏈�灏忓搴�
+}
+/* 鎷栨嫿绾� */
+.resize-line {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ border-right: 2px solid #efefef;
+ border-left: 1px solid #e0e0e0;
+ pointer-events: none;
+}
+.resize-bar:hover ~ .resize-line,
+.resize-bar:active ~ .resize-line {
+ border-left: 1px dashed skyblue;
+}
+.resize-bar::-webkit-scrollbar {
+ width: 200px;
+ height: inherit;
+}
+
+/* Firefox鍙湁涓嬮潰涓�灏忓潡鍖哄煙鍙互鎷変几 */
+@supports (-moz-user-select: none) {
+ .resize-bar:hover ~ .resize-line,
+ .resize-bar:active ~ .resize-line {
+ border-left: 1px solid #bbb;
+ }
+ .resize-bar:hover ~ .resize-line::after,
+ .resize-bar:active ~ .resize-line::after {
+ content: "";
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ bottom: 0;
+ right: -8px;
+ // background: url(./resize.svg);
+ background-size: 100% 100%;
+ }
}
.data-right-box {
height: calc(100% - 40px);
overflow-y: auto;
- @media screen and (max-width: 1440px) {
- width: 77%;
- }
- @media screen and (min-width: 1440px) and (max-width: 1640px) {
- width: 79%;
- }
- @media screen and (min-width: 1640px) {
- width: 80%;
- }
+ flex: 1;
padding: 5px 20px 5px 5px;
box-sizing: border-box;
}
--
Gitblit v1.8.0