first commit

2026-09-09 09:14:28 +08:00
commit 5343198112
5199 changed files with 1052895 additions and 0 deletions
@@ -0,0 +1,120 @@
+<template>
+  <div class="v-tree-layout">
+
+    <div class="shrink" :style="'left:'+(showTree?'calc(20% - 15px)':'0')" @click="shrink">
+      <i v-if="!showTree" class="el-icon-arrow-right"></i>
+      <i v-else class="el-icon-arrow-left"></i>
+    </div>
+
+    <div class="v-tree-layout-left">
+      <slot name="tree"></slot>
+    </div>
+    <div class="v-tree-layout-right">
+
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+
+<script>
+
+module.exports = {
+  props: {},
+  data() {
+    return {
+      showTree: true,
+    }
+  },
+  methods: {
+    shrink() {
+      if (this.showTree) {
+        $(".v-tree-layout-left").width(0)
+        $(".v-tree-layout-right").width('100%')
+        this.showTree = false
+      } else {
+        $(".v-tree-layout-left").width('20%')
+        $(".v-tree-layout-right").width('80%')
+        this.showTree = true
+      }
+    },
+  },
+}
+</script>
+
+<style>
+
+.shrink {
+  position: absolute;
+  height: 30px;
+  width: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 15px;
+  background-color: white;
+  z-index: 99;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  box-shadow: 0 0 5px rgb(200, 200, 200);
+  cursor: pointer;
+  transition: all 500ms;
+}
+
+.shrink:hover {
+  box-shadow: 0 0 10px rgb(150, 150, 150);
+}
+
+.v-tree-layout-left::-webkit-scrollbar { /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 10px;
+}
+
+.v-tree-layout-left::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
+
+  border-radius: 10px;
+
+
+  background: #dcdcdc;
+
+}
+
+.v-tree-layout-left::-webkit-scrollbar-track { /*滚动条里面轨道*/
+
+  -webkit-box-shadow: inset 0 0 5px transparent;
+
+  border-radius: 10px;
+
+  background: transparent;
+}
+
+.v-tree-layout {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
+
+.v-tree-layout-left {
+  width: 20%;
+}
+
+.v-tree-layout-left, .v-tree-layout-left .el-tree {
+  background-color: #FFFFFF;
+}
+
+.v-tree-layout-right {
+  width: 80%;
+  border-left: 1px solid rgb(240, 240, 240);
+}
+
+.v-tree-layout-left, .v-tree-layout-right {
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  transition: all 500ms;
+  position: relative;
+}
+</style>