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/library/index/App.vue | 106 +++++++++++++++++++++++++++++++++++++---------------
1 files changed, 75 insertions(+), 31 deletions(-)
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