From fe9673dc1cc2288ac029fa0fdf81c288fc4f5e1f Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Mon, 16 Mar 2020 17:55:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0grid=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |   1 +
 src/components/Icon/IconFile.vue      |  52 ++-
 src/icons/svg/loading-image-error.svg |   1 +
 src/icons/svg/menu-grid.svg           |   1 +
 src/icons/svg/menu-list.svg           |   1 +
 src/main.js                           |   4 +-
 src/styles/home-index.scss            | 322 ++++++++++++++
 src/views/home/index.vue              | 589 +++++++++++++-------------
 8 files changed, 650 insertions(+), 321 deletions(-)
 create mode 100644 src/icons/svg/loading-image-error.svg
 create mode 100644 src/icons/svg/menu-grid.svg
 create mode 100644 src/icons/svg/menu-list.svg
 create mode 100644 src/styles/home-index.scss

diff --git a/package.json b/package.json
index 43eb5fb..7614eae 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "vant": "^2.5.0",
     "vonic": "^1.1.3",
     "vue": "2.6.10",
+    "vue-grid-layout": "^2.3.7",
     "vue-router": "3.0.6",
     "vue-simple-uploader": "^0.7.4",
     "vue-touch": "^2.0.0-beta.4",
diff --git a/src/components/Icon/IconFile.vue b/src/components/Icon/IconFile.vue
index a706b95..36982d0 100644
--- a/src/components/Icon/IconFile.vue
+++ b/src/components/Icon/IconFile.vue
@@ -1,17 +1,36 @@
 <template>
   <span>
-            <svg-icon v-if="pc && item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-left: 1rem;position: absolute;" />
-            <svg-icon v-if="!pc && item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 0.5rem;float: right;margin-left: 2rem;position: absolute;" />
-            <svg-icon v-if="item.isFolder" icon-class="folder" />
-            <svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
-            <svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />
-            <svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />
-            <el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>
-            <svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />
-            <svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />
-            <svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />
-            <svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />
-            <svg-icon v-else icon-class="file" />
+      <div v-if="item.isFavorite">
+      <div v-if="pc">
+        <svg-icon v-if="!grid" icon-class="menu-favorite-hover"
+                  style="font-size: 1rem;float: right;margin-left: 1rem;position: absolute;"/>
+        <svg-icon v-if="grid" icon-class="menu-favorite-hover"
+                  style="font-size: 1.5rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
+      </div>
+      <div v-else>
+        <svg-icon v-if="!grid" icon-class="menu-favorite-hover"
+                  style="font-size: 0.5rem;float: right;margin-left: 2rem;position: absolute;"/>
+        <svg-icon v-if="grid" icon-class="menu-favorite-hover"
+                  style="font-size: 1rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
+      </div>
+    </div>
+    <svg-icon v-if="item.isFolder" icon-class="folder"/>
+    <svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video"/>
+    <svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio"/>
+    <svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt"/>
+    <div v-else-if="item.contentType.indexOf('image') > -1">
+      <el-image v-if="grid" style="width: 80px;height: 80px;" fit="contain" :src="imageUrl+item.id">
+        <div slot="error" class="image-slot">
+          <svg-icon icon-class="loading-image-error"/>
+        </div>
+      </el-image>
+      <el-avatar v-if="!grid" shape="square" :src="imageUrl+item.id"></el-avatar>
+    </div>
+    <svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf"/>
+    <svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word"/>
+    <svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip"/>
+    <svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel"/>
+    <svg-icon v-else icon-class="file"/>
   </span>
 </template>
 <script>
@@ -22,9 +41,13 @@
         type: String,
         default: ''
       },
+      grid: {
+        type: Boolean,
+        default: false
+      },
       item: {
         type: Object,
-        default: function() {
+        default: function () {
           return {}
         }
       }
@@ -36,8 +59,7 @@
     },
     mounted() {
     },
-    methods: {
-    }
+    methods: {}
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/icons/svg/loading-image-error.svg b/src/icons/svg/loading-image-error.svg
new file mode 100644
index 0000000..153b162
--- /dev/null
+++ b/src/icons/svg/loading-image-error.svg
@@ -0,0 +1 @@
+<svg t="1584339268975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1230" width="32" height="32"><path d="M797.6 96h-584c-13.6 0-24 10.4-24 24v464c0 12.8 11.2 24 24 24h372.8c-4.8-3.2-8.8-7.2-12.8-11.2-3.2-2.4-5.6-5.6-8.8-8.8l-3.2-3.2c-3.2-3.2-5.6-6.4-8.8-10.4l-1.6-1.6c-20-27.2-32-60.8-32-96.8 0-83.2 63.2-152 144.8-163.2-20-27.2-43.2-45.6-72.8-45.6-80.8 0-67.2 96-139.2 103.2-72 8-83.2-140.8-136-153.6-36.8-8.8-73.6 36.8-92 64.8V130.4h561.6V344c13.6 9.6 24.8 20.8 35.2 33.6V120c0.8-13.6-9.6-24-23.2-24z m-92.8 402.4c0 10.4-7.2 19.2-17.6 19.2-10.4 0-17.6-8.8-17.6-19.2l-4.8-95.2c0-10.4 12-19.2 22.4-19.2s22.4 8.8 22.4 19.2l-4.8 95.2zM688 568.8c-10.4 0-19.2-8.8-19.2-18.4 0-10.4 8.8-19.2 19.2-19.2s19.2 8.8 19.2 19.2c0 9.6-8.8 18.4-19.2 18.4z m0-224c-74.4 0-134.4 59.2-134.4 131.2 0 73.6 60 132 134.4 132s134.4-59.2 134.4-131.2c-0.8-72.8-60.8-132-134.4-132z" fill="#CCCCCC" p-id="1231"></path><path d="M54.4 783.2l11.2 1.6c-1.6 3.2-2.4 6.4-4.8 9.6h45.6v8.8c-4.8 9.6-12 17.6-22.4 24 12 5.6 24.8 10.4 40 13.6l-6.4 9.6c-16.8-4.8-31.2-10.4-43.2-16.8-13.6 7.2-29.6 12.8-49.6 17.6l-5.6-10.4c17.6-3.2 32.8-8 45.6-13.6-6.4-4.8-12.8-9.6-17.6-14.4-5.6 4.8-11.2 9.6-17.6 13.6l-7.2-8.8c15.2-9.6 26.4-20.8 32-34.4z m20 39.2c8.8-5.6 15.2-11.2 20-18.4h-40c-0.8 0.8-1.6 1.6-1.6 2.4 6.4 5.6 13.6 10.4 21.6 16zM40 868.8c23.2 4 45.6 10.4 66.4 18.4l-4 10.4c-21.6-8-44-14.4-67.2-19.2l4.8-9.6z m18.4-24c13.6 4.8 26.4 10.4 37.6 16l-5.6 8.8c-12-7.2-24-12.8-37.6-16.8l5.6-8z m83.2-76v152h-12v-7.2H12v7.2H0v-152h141.6zM12 902.4h117.6V780H12v122.4z m200-83.2v10.4c0 6.4-0.8 12.8-0.8 18.4H292v72.8h-12.8V860h-69.6c-4 26.4-13.6 46.4-28.8 60l-9.6-8c18.4-17.6 27.2-44.8 28-82.4v-64H212v41.6h51.2v-46.4h12v46.4h39.2v12H212z m278.4-32.8v131.2h-12v-12h-32.8v12h-12V786.4h56.8z m-44.8 108h32.8v-96h-32.8v96z m-76-132.8h12.8v35.2h35.2c0 54.4-0.8 88-2.4 100.8-1.6 14.4-10.4 21.6-25.6 21.6-2.4 0-7.2 0-13.6-0.8l-3.2-11.2c5.6 0 10.4 0.8 14.4 0.8 8.8 0 14.4-4.8 15.2-15.2 0.8-8.8 1.6-36.8 2.4-84h-23.2c-0.8 51.2-12 88.8-34.4 112l-9.6-8c20-21.6 30.4-56.8 31.2-104h-28v-12h28v-35.2h0.8z m155.2 13.6h33.6V760h12v14.4h31.2v11.2h-31.2v16H612c-0.8-12.8-0.8-27.2-0.8-42.4H624c0 16 0 29.6 0.8 42.4h44v11.2h-43.2c0.8 15.2 2.4 28 4 37.6 0.8 4.8 2.4 9.6 3.2 14.4 6.4-12.8 11.2-27.2 15.2-43.2l11.2 4.8c-5.6 21.6-12.8 40-21.6 54.4 1.6 4 3.2 7.2 4.8 10.4 4.8 8.8 8 12.8 11.2 12.8 2.4 0 5.6-9.6 7.2-28l10.4 5.6c-4 23.2-9.6 34.4-16.8 34.4-5.6 0-12-5.6-19.2-16-1.6-3.2-4-6.4-4.8-9.6-8.8 12-19.2 20.8-30.4 27.2l-6.4-10.4c12.8-7.2 23.2-16.8 32-30.4-2.4-8-4.8-16-6.4-25.6-2.4-11.2-4-24.8-5.6-40.8H516v-11.2h43.2v-16h-33.6v-8h-0.8z m116.8-12.8c8.8 9.6 15.2 18.4 20 25.6l-9.6 6.4c-4.8-8-12-16.8-20-26.4l9.6-5.6z m-39.2 122.4V896c-8.8 0.8-17.6 2.4-27.2 3.2V920h-12v-19.2c-12.8 1.6-25.6 2.4-40 3.2l-1.6-12c14.4-0.8 28-1.6 41.6-3.2v-15.2h-33.6l-2.4-10.4c4.8-5.6 9.6-12.8 13.6-21.6h-19.2v-11.2h24c1.6-4 3.2-8.8 4.8-13.6l12 2.4c-1.6 4-2.4 7.2-4 11.2H604v11.2h-50.4c-4 8-8 15.2-12 21.6H564v-13.6h12v13.6h26.4v10.4H576V888c8.8-0.8 18.4-2.4 26.4-3.2z m120-120l12 4.8c-2.4 8-5.6 15.2-9.6 22.4H760v-30.4h12.8V792h58.4v12h-58.4v11.2c0 8-0.8 16-2.4 23.2h72v12h-64.8c8.8 24.8 31.2 44.8 67.2 58.4l-7.2 11.2c-37.6-16-61.6-38.4-71.2-66.4-3.2 11.2-8 21.6-14.4 29.6-12 16-32 28-59.2 36.8l-6.4-10.4c27.2-8.8 46.4-20.8 56.8-35.2 4.8-7.2 8-15.2 10.4-24h-64.8v-12H756c1.6-7.2 2.4-15.2 2.4-23.2V804h-41.6c-6.4 10.4-12.8 19.2-20.8 25.6l-10.4-9.6c17.6-13.6 28.8-32 36.8-55.2zM963.2 800c-0.8 1.6-1.6 4-1.6 5.6 2.4 23.2 8.8 43.2 18.4 60.8 8.8-18.4 14.4-40.8 14.4-66.4h-31.2z m-9.6 24c-3.2 6.4-7.2 12-11.2 16.8l-7.2-9.6c12.8-16.8 20.8-40.8 24-71.2l12 1.6c-1.6 9.6-3.2 18.4-4.8 26.4h51.2v12h-11.2c-0.8 30.4-7.2 56-19.2 77.6 8.8 12 20 22.4 33.6 31.2l-6.4 12c-13.6-8.8-24-19.2-33.6-32-8.8 12.8-20 23.2-32.8 32l-6.4-11.2c13.6-8 24-19.2 32-31.2-9.6-16-16.8-34.4-20-54.4zM932 768v108.8h-12v-97.6h-41.6V876h-11.2V768H932z m-20 113.6c9.6 9.6 18.4 19.2 24.8 28.8l-9.6 8.8c-5.6-9.6-13.6-19.2-24-29.6l8.8-8z m-17.6-88.8h11.2v52.8c0 20-3.2 36-8.8 48-5.6 11.2-15.2 20-28 26.4l-6.4-10.4c12-5.6 20.8-13.6 25.6-24s7.2-24 7.2-40v-52.8h-0.8z" fill="#9B9B9B" p-id="1232"></path></svg>
diff --git a/src/icons/svg/menu-grid.svg b/src/icons/svg/menu-grid.svg
new file mode 100644
index 0000000..b1a5e32
--- /dev/null
+++ b/src/icons/svg/menu-grid.svg
@@ -0,0 +1 @@
+<svg t="1584183590713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="848" width="32" height="32"><path d="M384 128h-170.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h170.666667a85.333333 85.333333 0 0 0 85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333z m-170.666667 256v-170.666667h170.666667v170.666667z" p-id="849"></path><path d="M810.666667 128h-170.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h170.666667a85.333333 85.333333 0 0 0 85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333z m-170.666667 256v-170.666667h170.666667v170.666667z" p-id="850"></path><path d="M384 554.666667h-170.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h170.666667a85.333333 85.333333 0 0 0 85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333z m-170.666667 256v-170.666667h170.666667v170.666667z" p-id="851"></path><path d="M810.666667 554.666667h-170.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h170.666667a85.333333 85.333333 0 0 0 85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333z m-170.666667 256v-170.666667h170.666667v170.666667z" p-id="852"></path></svg>
diff --git a/src/icons/svg/menu-list.svg b/src/icons/svg/menu-list.svg
new file mode 100644
index 0000000..05fe17f
--- /dev/null
+++ b/src/icons/svg/menu-list.svg
@@ -0,0 +1 @@
+<svg t="1584183645708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="990" width="32" height="32"><path d="M287.957333 192.426667h-64C206.314667 192.426667 192 206.72 192 224.341333v63.914667c0 17.621333 14.293333 31.914667 31.957333 31.914667h64c17.642667 0 31.957333-14.293333 31.957334-31.914667v-63.914667c0-17.621333-14.293333-31.914667-31.957334-31.914666z m0 255.573333h-64C206.314667 448 192 462.293333 192 479.914667v63.914666c0 17.621333 14.293333 31.914667 31.957333 31.914667h64c17.642667 0 31.957333-14.293333 31.957334-31.914667v-63.914666c0-17.621333-14.293333-31.914667-31.957334-31.914667z m0 255.573333h-64c-17.642667 0-31.957333 14.293333-31.957333 31.914667v63.914667c0 17.621333 14.293333 31.914667 31.957333 31.914666h64c17.642667 0 31.957333-14.293333 31.957334-31.914666v-63.914667c0-17.621333-14.293333-31.914667-31.957334-31.914667z m127.914667-415.317333h383.829333a31.936 31.936 0 1 0 0-63.829333H415.872a31.936 31.936 0 1 0 0 63.829333z m383.829333 191.658667H415.872a31.936 31.936 0 1 0 0 63.829333h383.829333a31.936 31.936 0 1 0 0-63.829333z m0 255.573333H415.872a31.936 31.936 0 1 0 0 63.829333h383.829333a31.936 31.936 0 1 0 0-63.829333z" p-id="991"></path></svg>
diff --git a/src/main.js b/src/main.js
index 19e4672..da068e1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,7 +15,7 @@ import router from './router'
 import VueWechatTitle from 'vue-wechat-title'
 // import WeVue from 'we-vue'
 // import 'we-vue/lib/style.css'
-import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet, Field, Overlay, Checkbox, CheckboxGroup} from 'vant';
+import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet, Field, Overlay, Checkbox, CheckboxGroup, Grid, GridItem} from 'vant';
 
 // mavonEditor
 import mavonEditor from 'mavon-editor'
@@ -70,6 +70,8 @@ Vue.use(Field);
 Vue.use(Overlay);
 Vue.use(Checkbox);
 Vue.use(CheckboxGroup);
+Vue.use(Grid);
+Vue.use(GridItem);
 
 Vue.use(mavonEditor);
 
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
new file mode 100644
index 0000000..03a35c8
--- /dev/null
+++ b/src/styles/home-index.scss
@@ -0,0 +1,322 @@
+.dashboard {
+  &-container {
+    min-width: 500px;
+    margin: 10px 10px 10px 15px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+
+.redirect {
+  color: #97a8be;
+}
+.no-redirect {
+  color: #000000;
+  cursor: text;
+  margin-right: 10px;
+}
+
+/deep/ .el-breadcrumb__separator {
+  margin: 0 0;
+  font-weight: 700;
+  color: #C0C4CC;
+}
+
+.el-breadcrumb {
+  font-size: 1rem;
+  line-height: 46px;
+}
+
+.button-class {
+  cursor: pointer;
+}
+
+.button-class:hover {
+  border-radius: 5px;
+  background-color: #409eff14;
+}
+
+.newFileMenu ul {
+  list-style: none;
+  padding-inline-start: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.newFileMenu li {
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  min-width: 136px;
+}
+.newFileMenu li:hover {
+  cursor: pointer;
+  border-radius: 5px;
+  /*background-color: #409eff14;*/
+  background-color: #409eff30;
+}
+.newFileMenu li > .menuitem {
+  cursor: pointer;
+  line-height: 38px;
+  margin-left: 10%;
+}
+.newFileMenu li > .menuitem > .text {
+  cursor: pointer;
+  margin-left: 8%;font-weight: normal;
+}
+.newFileMenu li > .menuitem > .svg-icon {
+  cursor: pointer;
+  font-size: 20px;
+}
+/deep/ .el-input-group__append /deep/ .el-loading-spinner {
+  top: 0;
+  margin-top: 0.75rem;
+}
+/deep/ .cell /deep/ .el-loading-spinner {
+  top: 0;
+  margin-top: 0.54rem;
+}
+/deep/ .cell /deep/ .el-button {
+  padding: 8px 16px;
+  margin-left: 10px;
+}
+/deep/ .el-checkbox {
+  cursor: default;
+}
+/deep/ .el-checkbox__input {
+  cursor: default;
+}
+.el-button.is-circle {
+  border-radius: 50%;
+  padding: 9px;
+}
+/deep/.svg-icon {
+  font-size: 28px;
+}
+/deep/.el-table thead {
+  color: #4f4f50;
+}
+/deep/ .el-table thead .el-table-column--selection .cell {
+  padding-left: 15px;
+}
+/deep/.el-table .cell {
+  padding-right: 5px;
+}
+/deep/.el-table th {
+  padding: 0 0;
+}
+/deep/.el-table td{
+  padding: 1px 0;
+  height: 50px;
+}
+/deep/.el-table__header tr, .el-table__header th {
+  height: 40px;
+}
+/deep/.el-avatar>img {
+  display: inherit;
+  vertical-align: inherit;
+}
+/deep/.el-avatar {
+  background: #ffffff;
+  margin: 7px 0 0 0;
+}
+/deep/.el-avatar {
+  width: 35px;
+  height: 35px;
+  line-height: 35px;
+}
+
+/deep/ .ctx-menu-container {
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+
+.menu-triangle-bottom {
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+
+.menu-triangle-bottom::after {
+  position: absolute;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  content: '';
+  bottom: -6px;
+  left: 74px;
+  border-style: solid;
+  border-width: 6px;
+  border-color: #fff #fff transparent transparent;
+  -webkit-transform: rotate(135deg);
+  transform: rotate(135deg);
+  -webkit-box-shadow: 1px -1px 1px #cccccc73;
+  box-shadow: 1px -1px 1px #cccccc73;
+}
+
+.menu-triangle-top {
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+
+.menu-triangle-top::after {
+  position: absolute;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  content: '';
+  top: -6px;
+  left: 74px;
+  border-style: solid;
+  border-width: 6px;
+  border-color: #fff #fff #e0000000 white;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  -webkit-box-shadow: 1px -1px 1px #cccccc73;
+  box-shadow: -1px -1px 1px #cccccc73;
+}
+/*解决合计不显示的问题*/
+/deep/
+.el-table__footer-wrapper{
+  position: fixed;
+}
+
+/deep/ .el-table__row /deep/.table-file-name:hover {
+  cursor: 'pointer';
+  color: "#19ACF9"
+}
+
+.searchClass{
+  float: right;
+  width: 30%;
+}
+
+//.grid {
+//  border-left: 1px solid #0c7cd5;
+//}
+
+.el-pagination {
+  float: right;
+  margin-top: 50px;
+}
+
+/deep/ .el-dialog__header {
+  padding: 20px 20px 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/deep/ .el-dialog__title {
+  font-size: 16px;
+}
+/deep/ .el-dialog__body {
+  padding: 0 20px 0 20px;
+}
+/deep/ .el-tree-node__content {
+  height: 35px;
+  /*border-bottom: 1px solid #ccc;*/
+  position: relative;
+}
+
+/deep/ .custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+/deep/ .el-tree-node.is-expanded>.el-tree-node__children {
+  max-height: 500px;
+  overflow: auto;
+}
+
+/deep/ .drag-parent-class {
+  z-index: 999;
+  position: fixed;
+  right: 0;
+  left: 0;
+  overflow: auto;
+  margin: 0;
+  display: none;
+  /*-webkit-transition: all .1s ease-in-out 0s;*/
+  /*transition: all .1s ease-in-out 0s;*/
+}
+
+/deep/ .drag-parent-class .el-table {
+  background-color: #66cc66;
+}
+
+/deep/ .drag-parent-class .el-table tr {
+  background-color: #66cc66;
+}
+
+/deep/.van-grid-item__text {
+  text-align: center;
+  color: #646566;
+  font-size: 12px;
+  word-wrap: break-word;
+  width: -webkit-fill-available;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/deep/ .van-grid {
+  padding: 20px 0 0 20px;
+}
+
+/deep/ .van-grid-item__content .svg-icon{
+  font-size: 4rem;
+}
+/deep/ .grid-item-text {
+  text-align: center;
+  color: #606266;
+  font-size: smaller;
+  word-wrap: break-word;
+  width: -webkit-fill-available;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/deep/ .grid-time {
+  border-radius: 10px;
+  padding: 14px 8px;
+  .grid-item-checkbox {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 1;
+  }
+  .grid-item-icon{
+    text-align: center;
+    position: relative;
+    margin: 9px auto 0;
+    width: 84px;
+    height: 84px;
+  }
+  .grid-item-checkbox-select {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: rgba(255, 19, 93, 0.25);
+  }
+}
+/deep/ .grid-time:hover {
+  background: #baebff40;
+}
+ .checkbox-group-header {
+  margin: 10px 0 0;
+   .grid-all-checkbox {
+     height: 50px;
+     width: fit-content;
+     margin-left: 25px;
+     font-size: 14px;
+     padding: 10px;
+   }
+   .el-divider--horizontal {
+     display: block;
+     height: 1px;
+     width: 100%;
+     margin: 0;
+   }
+}
+
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a689b80..b239915 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard-container">
+  <div class="dashboard-container" v-resize="containerResize">
     <el-breadcrumb class="app-breadcrumb" separator="">
       <transition-group name="breadcrumb">
         <el-breadcrumb-item v-for="(item,index) in pathList" :key="item.index">
@@ -52,11 +52,16 @@
         </el-breadcrumb-item>
       </transition-group>
       <div class="search-content">
-        <el-input placeholder="搜索您的文件" class="searchClass" v-model="searchFileName" :clearable="true" @keyup.enter.native="searchFile(searchFileName)">
-          <el-button slot="append" @click="searchFile(searchFileName)">
-            <svg-icon icon-class="search" />
-          </el-button>
-        </el-input>
+        <div class="searchClass">
+          <el-input placeholder="搜索您的文件"  v-model="searchFileName" :clearable="true" @keyup.enter.native="searchFile(searchFileName)">
+            <el-button slot="prepend" @click="searchFile(searchFileName)">
+              <svg-icon icon-class="search" />
+            </el-button>
+            <el-button slot="append" @click="changeVmode">
+              <svg-icon :icon-class="grid ? 'menu-list' : 'menu-grid'" />
+            </el-button>
+          </el-input>
+        </div>
       </div>
     </el-breadcrumb>
 
@@ -114,7 +119,9 @@
 
     <!--<div class="dashboard-text">path: {{ path }}</div>-->
 
+    <!--list布局-->
     <el-table
+      v-show="!grid"
       ref="fileListTable"
       v-loading="tableLoading"
       :max-height="clientHeight"
@@ -231,6 +238,36 @@
             </el-table-column>
           </template>
     </el-table>
+
+    <!--grid布局-->
+    <div v-show="grid" v-loading="tableLoading"
+         element-loading-text="文件加载中"
+         element-loading-spinner="el-icon-loading"
+         element-loading-background="#f6f7fa88">
+      <div class="checkbox-group-header">
+        <van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox()" v-model="allChecked">{{indexList.length>0 ? '已选择 '+this.tableHead[2].label : "选择"}}</van-checkbox>
+        <el-divider></el-divider>
+      </div>
+
+      <van-checkbox-group v-model="selectRowData" @change="handleSelectionChange" ref="checkboxGroup">
+        <van-grid square :column-num="gridColumnNum" :gutter="20" :border="false">
+          <van-grid-item v-for="(item,index) in fileList" ref="gridItem"  :key="item.id"
+          >
+            <div class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
+                 :style="{'background': indexList.includes(index)?'#baebff91':'','cursor':indexList.length>0?'default':'pointer'}"
+                 @mouseover="gridItemHover(item,index)"
+                 @mouseout="gridItemOut(item,index)"
+                 @click="gridItemClick(item)"
+                 @contextmenu.prevent="rowContextmenu(item)"
+            >
+              <van-checkbox v-show="gridHoverItemIndex === index || indexList.includes(index)" class="grid-item-checkbox" :name="item" @click.stop="clickGridItemCheckBox(item,index)"/>
+              <div class="grid-item-icon"><icon-file :item="item" :image-url="imageUrl" :grid="true"></icon-file></div>
+             <span class="grid-item-text">{{item.name}}</span>
+            </div>
+          </van-grid-item>
+        </van-grid>
+      </van-checkbox-group>
+    </div>
     <el-pagination
       background
       layout="prev, pager, next"
@@ -261,6 +298,10 @@
 </template>
 
 <script>
+import 'vant/lib/grid/style';
+import 'vant/lib/grid-item/style';
+import 'vant/lib/checkbox/style';
+import 'vant/lib/checkbox-group/style';
 /* eslint-disable */
 import { mapGetters } from 'vuex'
 // import defaultSettings from '@/settings'
@@ -270,10 +311,10 @@ import Bus from '@/assets/js/bus'
 import api from '@/api/upload-api'
 import BreadcrumbFilePath from "../../components/Breadcrumb/BreadcrumbFilePath";
 import IconFile from "../../components/Icon/IconFile";
-import vuedraggable from 'vuedraggable';
 
 export default {
-  components: { IconFile, BreadcrumbFilePath, vuedraggable},
+  components: { IconFile, BreadcrumbFilePath,
+  },
   data() {
     return {
       imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
@@ -376,6 +417,12 @@ export default {
       dragLoop: null,
       positionX:0,
       positionY:0,
+      grid: true,
+      vmode: 'list',
+      gridColumnNum: -1,
+      gridHoverItemIndex: -1,
+      gridHoverIntermediate: -1,
+      allChecked: false
     }
   },
   computed: {
@@ -396,27 +443,57 @@ export default {
     })
 
     // 加载路径
-    const pathList = getPathList()
-    if (pathList && pathList !== 'undefined') {
-      const res = JSON.parse(pathList)
-      const list = []
-      res.forEach(function(element) {
-        const item0 = {}
-        item0['folder'] = element.folder + ''
-        item0['index'] = element.index
-        list.push(item0)
-      })
-      this.pathList = list
-    }
+    // const pathList = getPathList()
+    // if (pathList && pathList !== 'undefined') {
+    //   const res = JSON.parse(pathList)
+    //   const list = []
+    //   res.forEach(function(element) {
+    //     const item0 = {}
+    //     item0['folder'] = element.folder + ''
+    //     item0['index'] = element.index
+    //     list.push(item0)
+    //   })
+    //   this.pathList = list
+    // }
 
     if (window.history && window.history.pushState) {
       history.pushState(null, null, document.URL);
       window.addEventListener('popstate', this.goBack, false);
     }
+
+
     const that = this
     window.onresize = function temp() {
       that.clientHeight = document.documentElement.clientHeight - 165
     }
+
+    // 加载布局
+    if(this.$route.query.vmode){
+      this.vmode = this.$route.query.vmode
+      if(this.vmode === 'list'){
+        this.grid = false
+      }else{
+        this.grid = true
+      }
+    }
+
+    // 加载url上的path
+    if(this.$route.query.path){
+      const path = decodeURI(this.$route.query.path)
+      this.pathList.splice(1,1)
+      path.split('/').forEach((pathName,index)=>{
+        if(index > 0){
+          const item = {}
+          item['folder'] = pathName
+          item['index'] = index
+          this.pathList.push(item)
+        }
+      })
+      const item = {}
+      item['folder'] = '+'
+      item['index'] = this.pathList.length
+      this.pathList.push(item)
+    }
   },
   destroyed() {
     removePath()
@@ -430,9 +507,71 @@ export default {
         // 聚焦元素
         el.querySelector('input').focus()
       }
+    },
+    resize: { // 指令的名称
+      bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
+        let width = '', height = '';
+        function isReize() {
+          const style = document.defaultView.getComputedStyle(el);
+          if (width !== style.width || height !== style.height) {
+            binding.value();  // 关键
+          }
+          width = style.width;
+          height = style.height;
+        }
+        el.__vueSetInterval__ = setInterval(isReize, 300);
+      },
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__);
+      }
     }
   },
   methods: {
+    gridItemHover(item,index) {
+      this.gridHoverItemIndex = index;
+      this.gridHoverIntermediate = index;
+    },
+    gridItemOut(item,index) {
+      this.gridHoverIntermediate = -1
+      const _this = this
+      setTimeout(function () {
+        if(_this.gridHoverIntermediate !== _this.gridHoverItemIndex){
+          _this.gridHoverItemIndex = -1;
+        }
+      },10)
+    },
+    clickGridItemCheckBox(item,index) {
+      // 同步列表的checkbox
+      if(this.indexList.includes(index)){
+        this.$refs.fileListTable.toggleRowSelection(item,false)
+      }
+    },
+    clickGridAllCheckBox() {
+      if(this.indexList.length !== this.fileList.length){
+        this.$refs.checkboxGroup.toggleAll(true);
+      }else{
+        this.$refs.checkboxGroup.toggleAll();
+        this.$refs.fileListTable.clearSelection();
+      }
+    },
+    gridItemClick(row) {
+      if (this.indexList.length < 1) {
+        if (row.index !== this.editingIndex) {
+          this.fileClick(row)
+          this.editingIndex = -1
+        }
+      } else {
+        if(this.indexList.includes(row.index)){
+          this.$refs.fileListTable.toggleRowSelection(row,false)
+        }else{
+          this.$refs.fileListTable.toggleRowSelection(row,true)
+        }
+      }
+    },
+    containerResize(f) {
+      let clientWidth = document.querySelector(".dashboard-container").clientWidth
+      this.gridColumnNum = clientWidth/120 -2
+    },
     // 行拖拽
     rowDrop() {
       const _this = this
@@ -443,11 +582,21 @@ export default {
 
       // 目标元素
       let target = document.querySelector('.el-table__body-wrapper tbody');
+
+      if(this.grid){
+        target = document.querySelector('.van-checkbox-group .van-grid')
+      }
+
       let rows = 0;//行数
       setTimeout(function () {
         rows = target.childElementCount
         for (let i = 0; i < target.childElementCount; i++) {
-          const child = target.children[i]
+          let child = target.children[i]
+          // 设置索引,表格自带rowIndex,这里我们设置grid的
+          if(_this.grid){
+            child.children[0].children[0].rowIndex = i
+            child = child.children[0].children[0]
+          }
           child.draggable = true
           // child.style.cursor = 'copy'
           child.ondragstart = function(e){
@@ -466,35 +615,60 @@ export default {
       // 被拖动的元素正在那个容器里
       let dragIndex = -1
 
+      // 判断经过了那个元素
+      let judgThroughDom = function (e) {
+        let throughRow = null
+        // van-grid-item van-grid-item--square
+        // grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square
+        if(_this.grid){
+          if(e.relatedTarget && e.relatedTarget.rowIndex) {
+            return e.relatedTarget
+          }
+        } else {
+          if(e.target.className === 'grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square'){
+            throughRow = e.target
+          } else {
+            if(e.path[0].tagName === 'TD' || e.path[0].tagName === 'DIV'){
+              // throughRow 表示被拖动的元素正在哪一行上
+              throughRow = e.path.find(path => {
+                // console.log(path.rowIndex,path,e,'path.className',path.className)
+                if(path.className === 'el-table__row' || path.className === 'grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square'){
+                  return path
+                }
+              })
+            }
+          }
+          return throughRow
+        }
+      }
+
       target.ondragenter = function(e){
         clearTimeout(loop)
-
         // 由于被拖动的元素 经过tbody中的每一元素都会触发该事件, 但是我们只需要它正在那一行上就行了
-        if(e.path[0].tagName === 'TD'){
-          // throughRow 表示被拖动的元素正在哪一行上
-          const throughRow = e.path.find(path => {
-            if(path.className === 'el-table__row'){
-              return path
-            }
-          })
+        let throughRow = judgThroughDom(e)
+        if(throughRow){
+          // console.log('throughRow',throughRow)
           if(dragIndex !== throughRow.rowIndex){
             if(dragIndex > -1){
               // 清除上次进入的容器的状态
               const last = target.children[dragIndex];
               clearClass(last)
             }
-            // console.log('拖动进入目标元素'+selectRow.rowIndex);
+            console.log('拖动进入目标元素'+throughRow.rowIndex);
             // 不是自己或未文件夹时才改变状态
             if(draggedIndex !== throughRow.rowIndex && _this.fileList[throughRow.rowIndex].isFolder){
               // 改变本次进入的容器的状态
               dragged.style.cursor = 'copy'
               throughRow.style.height = 60+'px'
               throughRow.style.backgroundColor = '#e9fdcf'
+              if(_this.grid){
+                throughRow.style.height = 120+'px'
+              }
             }
             dragIndex = throughRow.rowIndex
           }
+          leaveIndex = -1
         }
-        leaveIndex = -1
       }
 
       target.ondragover = function(e){
@@ -508,19 +682,15 @@ export default {
 
       target.ondragleave = function(e){
         clearTimeout(loop)
-        if(e.path[0].tagName === 'TD'){
-          const throughRow = e.path.find(path => {
-            if(path.className === 'el-table__row'){
-              return path
-            }
-          })
+        let throughRow = judgThroughDom(e)
+        if(throughRow){
           if(dragIndex !== throughRow.rowIndex){
-            // console.log('拖动离开目标元素'+selectRow.rowIndex);
+            console.log('拖动离开目标元素'+throughRow.rowIndex);
             // selectRow.style.height = 'unset'
             // selectRow.style.backgroundColor = '#fff'
             // dragIndex = selectRow.rowIndex
           }
-          if(throughRow.rowIndex === 0 || throughRow.rowIndex === rows-1){
+          if(_this.grid){
             // 离开第一行或最后一行
             leaveIndex = throughRow.rowIndex
             loop = setTimeout(function () {
@@ -531,7 +701,19 @@ export default {
                 dragIndex = -1
               }
             },100)
-          }``
+          }
+          // if(throughRow.rowIndex === 0 || throughRow.rowIndex === rows-1){
+          //   // 离开第一行或最后一行
+          //   leaveIndex = throughRow.rowIndex
+          //   loop = setTimeout(function () {
+          //     if(leaveIndex > -1){
+          //       console.log("离开了",leaveIndex)
+          //       const leave = target.children[leaveIndex];
+          //       clearClass(leave)
+          //       dragIndex = -1
+          //     }
+          //   },100)
+          // }
         }
       }
       target.ondrop = function(){
@@ -631,7 +813,8 @@ export default {
           if (!this.$route.query.path){
             this.$router.push(`/_m`)
           } else {
-            this.$router.push(`?path=${encodeURIComponent(this.path)}`)
+            // this.$router.push(`?path=${encodeURIComponent(this.path)}`)
+            this.$router.push(`?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
           }
         }
         setPath(this.path, this.pathList)
@@ -670,8 +853,15 @@ export default {
     // 新建文件夹
     newFolderNameClick() {
       console.log('user', this.$store.state.user);
-      this.newFolderLoading = true
       if(this.newFolderName){
+        if(/[\/\\"<>\?\*]/gi.test(this.newFolderName)){
+          this.$message({
+            message: '文件名不能包含以下字字符:<,>,|,*,?,,/',
+            type: 'warning'
+          });
+          return;
+        }
+        this.newFolderLoading = true
         api.uploadFolder({
           isFolder: true,
           filename: this.newFolderName,
@@ -712,6 +902,18 @@ export default {
     searchFileByKeyWord(key) {
       this.searchFile(key)
     },
+    // 切换布局
+    changeVmode(){
+      this.grid = !this.grid
+      console.log(this.$route.fullPath)
+      this.vmode = 'list'
+      if(this.grid){
+        this.vmode = 'grid'
+      }
+      this.$router.push(`?vmode=${this.vmode}&path=${this.path}`)
+      // 改变拖拽目标
+      this.rowDrop()
+    },
     searchFile(key) {
       if(key){
         this.pathList = [{ 'folder': '', index: 0 }]
@@ -725,7 +927,8 @@ export default {
         item2['index'] = 2
         this.pathList.push(item1)
         this.pathList.push(item2)
-        this.$router.push(`?search-file=${key}`)
+        // this.$router.push(`?search-file=${key}`)
+        this.$router.push(`?vmode=${this.vmode}&search-file=${key}`)
         this.tableLoading = true
         api.searchFile({
           userId: this.$store.state.user.userId,
@@ -756,10 +959,12 @@ export default {
         pageSize: this.pagination.pageSize
       }).then(res => {
         this.fileList = res.data
-        this.tableLoading = false
         this.clientHeight = document.documentElement.clientHeight - 165
         this.listModeSearch = true
         this.pagination['total'] = res.count
+        this.$nextTick(()=>{
+          this.tableLoading = false
+        })
       }).catch(e => {})
       this.path = row.path + row.name
     },
@@ -773,11 +978,17 @@ export default {
         pageSize: this.pagination.pageSize
       }).then(res => {
         this.fileList = res.data
-        this.tableLoading = false
+        this.fileList.map((item,index) => {
+          item.index = index
+        })
         this.clientHeight = document.documentElement.clientHeight - 165
         this.listModeSearch = false
         this.pagination['total'] = res.count
-        // 是列表可拖拽
+        this.$nextTick(()=>{
+          this.containerResize()
+          this.tableLoading = false
+        })
+        // 使列表可拖拽
         this.rowDrop()
       }).catch(e => {})
     },
@@ -790,10 +1001,12 @@ export default {
         pageSize: 30
       }).then(res => {
         this.fileList = res.data
-        this.tableLoading = false
         this.clientHeight = document.documentElement.clientHeight - 165
         this.listModeSearch = true
         this.pagination['total'] = res.count
+        this.$nextTick(()=>{
+          this.tableLoading = false
+        })
       }).catch(e => {})
     },
     currentChange(pageIndex) {
@@ -874,6 +1087,11 @@ export default {
         selectTotalSize += item.size
         this.indexList.push(item.index)
       }
+
+      row.forEach(r => {
+        this.$refs.fileListTable.toggleRowSelection(r,true)
+      });
+
       const item_name = this.tableHead[2]
       const item_more = this.tableHead[4]
       const item_size = this.tableHead[5]
@@ -897,11 +1115,11 @@ export default {
         item_date.label = '修改日期'
         item_date.sortable = true
       }
-      // this.$set(this.tableHead, 2, item_name)
-      // this.$set(this.tableHead, 2, item_more)
-      // this.$set(this.tableHead, 5, item_size)
-      console.log('selectRowData', this.selectRowData)
-      console.log('rowContextData', this.rowContextData)
+      if(this.indexList.length == this.fileList.length){
+        this.allChecked = true
+      }else{
+        this.allChecked = false
+      }
     },
     // cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
     rowRed({ row, column, rowIndex, columnIndex }) {
@@ -966,16 +1184,20 @@ export default {
     // 重命名
     rowRename(newFileName, row) {
       if (newFileName) {
-
+        console.log('newFileName', newFileName)
+        if(/[\/\\"<>\?\*]/gi.test(newFileName)){
+          this.$message({
+            message: '文件名不能包含以下字字符:<,>,|,*,?,,/',
+            type: 'warning'
+          });
+          return;
+        }
         if (!row.isFolder) {
           const ext = '.' + row.suffix
           if (!newFileName.endsWith(ext)) {
             newFileName += ext
           }
         }
-
-        console.log('newFileName', newFileName)
-
         this.renameLoading = true
         const findIndex = this.fileList.findIndex(item => {
           if(newFileName === item.name){
@@ -1031,7 +1253,7 @@ export default {
       this.showOperationMenus(event)
     },
     // 鼠标右击
-    rowContextmenu(row, column, event) {
+    rowContextmenu(row) {
       if (this.indexList.includes(row.index)) {
         this.menusIsMultiple = true
         this.menus = this.multipleRightMenus
@@ -1396,7 +1618,8 @@ export default {
           this.pathList[this.pathList.length - 1] = item1
           this.pathList.push(item2)
           this.pagination.pageIndex = 1
-          this.$router.push(`?search-file=${row.id}`)
+          // this.$router.push(`?search-file=${row.id}`)
+          this.$router.push(`?vmode=${this.vmode}&search-file=${row.id}`)
           this.searchFileAndOpenDir(row)
         } else {
           if(this.path){
@@ -1415,7 +1638,8 @@ export default {
           setPath(this.path, this.pathList)
           this.pagination.pageIndex = 1
           const path = encodeURIComponent(this.path);
-          this.$router.push(`?path=${path}`)
+          console.log(this.vmode)
+          this.$router.push(`?vmode=${this.vmode}&path=${path}`)
           this.getFileList()
         }
       } else {
@@ -1436,252 +1660,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .dashboard {
-    &-container {
-      min-width: 500px;
-      margin: 10px 10px 10px 15px;
-    }
-    &-text {
-      font-size: 30px;
-      line-height: 46px;
-    }
-  }
-
-  .redirect {
-    color: #97a8be;
-  }
-  .no-redirect {
-    color: #000000;
-    cursor: text;
-    margin-right: 10px;
-  }
-
-  /deep/ .el-breadcrumb__separator {
-    margin: 0 0;
-    font-weight: 700;
-    color: #C0C4CC;
-  }
-
-  .el-breadcrumb {
-    font-size: 1rem;
-    line-height: 46px;
-  }
-
-  .button-class {
-    cursor: pointer;
-  }
-
-  .button-class:hover {
-    border-radius: 5px;
-    background-color: #409eff14;
-  }
-
-  .newFileMenu ul {
-    list-style: none;
-    padding-inline-start: 0px;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .newFileMenu li {
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    font-size: 16px;
-    min-width: 136px;
-  }
-  .newFileMenu li:hover {
-    cursor: pointer;
-    border-radius: 5px;
-    /*background-color: #409eff14;*/
-    background-color: #409eff30;
-  }
-  .newFileMenu li > .menuitem {
-    cursor: pointer;
-    line-height: 38px;
-    margin-left: 10%;
-  }
-  .newFileMenu li > .menuitem > .text {
-    cursor: pointer;
-    margin-left: 8%;font-weight: normal;
-  }
-  .newFileMenu li > .menuitem > .svg-icon {
-    cursor: pointer;
-    font-size: 20px;
-  }
-  /deep/ .el-input-group__append /deep/ .el-loading-spinner {
-    top: 0;
-    margin-top: 0.75rem;
-  }
-  /deep/ .cell /deep/ .el-loading-spinner {
-    top: 0;
-    margin-top: 0.54rem;
-  }
-  /deep/ .cell /deep/ .el-button {
-    padding: 8px 16px;
-    margin-left: 10px;
-  }
-  /deep/ .el-checkbox {
-    cursor: default;
-  }
-  /deep/ .el-checkbox__input {
-    cursor: default;
-  }
-  .el-button.is-circle {
-    border-radius: 50%;
-    padding: 9px;
-  }
-  /deep/.svg-icon {
-    font-size: 28px;
-  }
-  /deep/.el-table thead {
-    color: #4f4f50;
-  }
-  /deep/ .el-table thead .el-table-column--selection .cell {
-    padding-left: 15px;
-  }
-  /deep/.el-table .cell {
-    padding-right: 5px;
-  }
-  /deep/.el-table th {
-    padding: 0 0;
-  }
-  /deep/.el-table td{
-    padding: 1px 0;
-    height: 50px;
-  }
-  /deep/.el-table__header tr, .el-table__header th {
-    height: 40px;
-  }
-  /deep/.el-avatar>img {
-    display: inherit;
-    vertical-align: inherit;
-  }
-  /deep/.el-avatar {
-    background: #ffffff;
-    margin: 7px 0 0 0;
-  }
-  /deep/.el-avatar {
-    width: 35px;
-    height: 35px;
-    line-height: 35px;
-  }
-
-  /deep/ .ctx-menu-container {
-    border: 0 solid rgba(0, 0, 0, 0);
-  }
-
-  .menu-triangle-bottom {
-    border: 0 solid rgba(0, 0, 0, 0);
-  }
-
-  .menu-triangle-bottom::after {
-    position: absolute;
-    display: inline-block;
-    width: 0;
-    height: 0;
-    content: '';
-    bottom: -6px;
-    left: 74px;
-    border-style: solid;
-    border-width: 6px;
-    border-color: #fff #fff transparent transparent;
-    -webkit-transform: rotate(135deg);
-    transform: rotate(135deg);
-    -webkit-box-shadow: 1px -1px 1px #cccccc73;
-    box-shadow: 1px -1px 1px #cccccc73;
-  }
-
-  .menu-triangle-top {
-    border: 0 solid rgba(0, 0, 0, 0);
-  }
-
-  .menu-triangle-top::after {
-    position: absolute;
-    display: inline-block;
-    width: 0;
-    height: 0;
-    content: '';
-    top: -6px;
-    left: 74px;
-    border-style: solid;
-    border-width: 6px;
-    border-color: #fff #fff #e0000000 white;
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    -webkit-box-shadow: 1px -1px 1px #cccccc73;
-    box-shadow: -1px -1px 1px #cccccc73;
-  }
-  /*解决合计不显示的问题*/
-  /deep/
-  .el-table__footer-wrapper{
-    position: fixed;
-  }
-
-  /deep/ .el-table__row /deep/.table-file-name:hover {
-    cursor: 'pointer';
-    color: "#19ACF9"
-  }
-
-  .searchClass{
-    float: right;
-    width: 30%;
-  }
-
-  .el-pagination {
-    float: right;
-    margin-top: 50px;
-  }
-
-  /deep/ .el-dialog__header {
-    padding: 20px 20px 20px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  /deep/ .el-dialog__title {
-    font-size: 16px;
-  }
-  /deep/ .el-dialog__body {
-    padding: 0 20px 0 20px;
-  }
-  /deep/ .el-tree-node__content {
-    height: 35px;
-    /*border-bottom: 1px solid #ccc;*/
-    position: relative;
-  }
-
-  /deep/ .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    padding-right: 8px;
-  }
-
-  /deep/ .el-tree-node.is-expanded>.el-tree-node__children {
-    max-height: 500px;
-    overflow: auto;
-  }
-
-  /deep/ .drag-parent-class {
-    z-index: 999;
-    position: fixed;
-    right: 0;
-    left: 0;
-    overflow: auto;
-    margin: 0;
-    display: none;
-    /*-webkit-transition: all .1s ease-in-out 0s;*/
-    /*transition: all .1s ease-in-out 0s;*/
-  }
-
-  /deep/ .drag-parent-class .el-table {
-    background-color: #66cc66;
-  }
-
-  /deep/ .drag-parent-class .el-table tr {
-    background-color: #66cc66;
-  }
+  @import "src/styles/home-index";
 
 </style>