From 6fd44c7750bb2bb52332a10c18b1eb3a595372db Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Wed, 31 Mar 2021 18:03:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icon/IconFile.vue       |    8 +-
 src/components/ShowFile/ShowFile.vue   |  100 +-
 src/components/preview/ImageViewer.vue |    1 -
 src/styles/home-index.scss             |    2 +-
 src/views/home/mobile/index.vue        | 2633 +++++++++++++-----------
 5 files changed, 1469 insertions(+), 1275 deletions(-)

diff --git a/src/components/Icon/IconFile.vue b/src/components/Icon/IconFile.vue
index 254f431..73dbd7b 100644
--- a/src/components/Icon/IconFile.vue
+++ b/src/components/Icon/IconFile.vue
@@ -2,15 +2,15 @@
   <span>
       <div v-if="item.isFavorite && !public">
       <div v-if="pc">
-        <svg-icon v-if="!grid" icon-class="menu-favorite-hover"
+        <svg-icon v-if="!grid" class="favorite" 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"
+        <svg-icon v-if="grid" class="favorite" 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"
+        <svg-icon v-if="!grid" class="favorite" icon-class="menu-favorite-hover"
                   style="font-size: 0.5rem;float: right;margin-left: 0.5rem;position: absolute;"/>
-        <svg-icon v-if="grid" icon-class="menu-favorite-hover"
+        <svg-icon v-if="grid" class="favorite" icon-class="menu-favorite-hover"
                   style="font-size: 1rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
       </div>
     </div>
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 7cea45e..e0e0571 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="dashboard-container" v-resize="containerResize">
+    <div class="dashboard-container" v-resize="containerResize" @click="containerClick">
       <v-contextmenu ref="homeContextmenu" :disabled="contextmenuDisabled">
         <div v-for="item of contextMenus" :key="item.operation">
           <!-- 一级菜单 -->
@@ -338,36 +338,38 @@
              element-loading-text="文件加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="#f6f7fa88">
-          <div class="checkbox-group-header" v-show="!selectFile">
-            <div class="select-operation">
-              <van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox" v-model="allChecked">
-                {{ selectRowData.length > 0 ? '已选择 ' + this.tableHead[2].label : "选择" }}
-              </van-checkbox>
-              <div>
-                <el-button class="select-operation-button" icon="el-icon-download" v-if="selectRowData.length > 0"
-                           @click="downloadFile">
-                  下载
-                </el-button>
-                <el-button class="select-operation-button" icon="el-icon-share" v-if="selectRowData.length === 1"
-                           @click="share">
-                  分享
-                </el-button>
-                <el-button class="select-operation-button" icon="el-icon-document-copy" v-if="selectRowData.length > 0"
-                           @click="moveOrCopy">
-                  移动或复制
-                </el-button>
-                <el-button class="select-operation-button" icon="el-icon-delete" v-if="selectRowData.length > 0"
-                           type="danger" @click="deleteFile">
-                </el-button>
-              </div>
-            </div>
-            <el-divider style="transform: scaleY(0.5);"></el-divider>
-          </div>
+<!--          <div class="checkbox-group-header" v-show="!selectFile">-->
+<!--            <div class="select-operation">-->
+<!--              <van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox" v-model="allChecked">-->
+<!--                {{ selectRowData.length > 0 ? '已选择 ' + this.tableHead[2].label : "选择" }}-->
+<!--              </van-checkbox>-->
+<!--              <div>-->
+<!--                <el-button class="select-operation-button" icon="el-icon-download" v-if="selectRowData.length > 0"-->
+<!--                           @click="downloadFile">-->
+<!--                  下载-->
+<!--                </el-button>-->
+<!--                <el-button class="select-operation-button" icon="el-icon-share" v-if="selectRowData.length === 1"-->
+<!--                           @click="share">-->
+<!--                  分享-->
+<!--                </el-button>-->
+<!--                <el-button class="select-operation-button" icon="el-icon-document-copy" v-if="selectRowData.length > 0"-->
+<!--                           @click="moveOrCopy">-->
+<!--                  移动或复制-->
+<!--                </el-button>-->
+<!--                <el-button class="select-operation-button" icon="el-icon-delete" v-if="selectRowData.length > 0"-->
+<!--                           type="danger" @click="deleteFile">-->
+<!--                </el-button>-->
+<!--              </div>-->
+<!--            </div>-->
+<!--            <el-divider style="transform: scaleY(0.5);"></el-divider>-->
+<!--          </div>-->
 
           <van-checkbox-group v-model="selectRowData" @change="handleSelectionChange" ref="checkboxGroup">
             <van-grid square :center="true" :column-num="gridColumnNum" :gutter="10" :border="false"
                       :style="{'width':'100%','max-height': clientHeight-45+'px','overflow':'auto'}">
               <van-grid-item v-for="(item,index) in fileList" ref="gridItem" :key="item.id"
+                             @click="gridItemClick(item)"
+                             @dblclick="fileClick(item)"
               >
                 <div
                   class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
@@ -379,12 +381,11 @@
                   }"
                   @mouseover="gridItemHover(item,index)"
                   @mouseout="gridItemOut(item,index)"
-                  @click="gridItemClick(item)"
                   @contextmenu.prevent="rowContextmenu(item)"
                 >
-                  <van-checkbox v-show="!selectFile" v-if="gridHoverItemIndex === index || selectRowData.includes(item)"
-                                class="grid-item-checkbox" :name="item"
-                                @click.stop="clickGridItemCheckBox(item,index)"/>
+<!--                  <van-checkbox v-show="!selectFile" v-if="gridHoverItemIndex === index || selectRowData.includes(item)"-->
+<!--                                class="grid-item-checkbox" :name="item"-->
+<!--                                @click.stop.prevent="clickGridItemCheckBox(item,index)"/>-->
                   <div :class="{'grid-item-icon':true, 'grid-item-icon-image': queryFileType === 'image' ? gridHoverItemIndex === index || selectRowData.includes(item) : false}">
                     <icon-file v-show="queryFileType !== 'image'" :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
                                :grid="true"></icon-file>
@@ -928,7 +929,6 @@ export default {
     window.onresize = function (){
       that.clientHeight = document.documentElement.clientHeight - that.lessClientHeight
     }
-
     // 画矩形选区
     this.darwRectangle()
 
@@ -1033,10 +1033,16 @@ export default {
         return
       }
       if (!this.drawFlag) {
-        this.fileClick(row)
+        // this.fileClick(row)
       }
+      this.$refs.fileListTable.clearSelection()
+      this.$refs.fileListTable.toggleRowSelection([{row: row}])
+      this.pinSelect(null, row)
     },
-    containerResize(ddd) {
+    containerClick() {
+
+    },
+    containerResize() {
       const container = document.querySelector(".dashboard-container")
       let clientWidth = container.clientWidth
       this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight
@@ -1078,7 +1084,9 @@ export default {
       let retcLeft = 0, retcTop = 0, retcHeight = 0, retcWidth = 0
       _this.drawFlag = false
       let itemClassName = 'el-table__row'
+      draw.onmousedown = null
       draw.onmousedown = function (e) {
+        console.log('draw', onmousedown)
         if (_this.fileListScrollTop > 0) {
           return
         }
@@ -1192,9 +1200,7 @@ export default {
             _this.$refs.fileListTable.toggleRowSelection([{row: _this.fileList[element.rowIndex], selected: false}])
           }
         })
-        setTimeout(function () {
-          drawSelecting = false
-        }, 150)
+        setTimeout(() => drawSelecting = false, 10)
       }
       //检查两个DIV是否有接触
       let checkTouch = function (item, draw) {
@@ -1279,6 +1285,7 @@ export default {
           }
 
           child.ondragstart = function (e) {
+            console.log('child.ondragstart')
             if (_this.fileListScrollTop === 0) {
               let count = _this.selectRowData.length
               if (_this.selectRowData.length >= 99) {
@@ -1312,11 +1319,7 @@ export default {
             // 清除上次进入的容器的状态
             const last = target.children[dragIndex];
             clearClass(last)
-            if (_this.grid) {
-              dragged.style.cursor = 'pointer'
-            } else {
-              dragged.style.cursor = 'default'
-            }
+            dragged.style.cursor = 'default'
           }
         }
       }, 0)
@@ -1514,12 +1517,11 @@ export default {
     },
     // 浏览器的返回事件
     goBack() {
-      if (this.pathList.length === 2) {
+      if (this.pathList.length <= 1) {
         this.$router.push(`/?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
         return
       }
-      const linkIndex = this.pathList.length - 3
-      this.handleLink(this.pathList[linkIndex], linkIndex)
+      this.lastLink()
     },
     lastLink() {
       this.handleLink(this.pathList[this.pathList.length - 2], this.pathList.length - 2)
@@ -2127,12 +2129,12 @@ export default {
     },
     //双击
     dblclick(row) {
-      // this.fileClick(row)
+      this.fileClick(row)
     },
     // 单元格点击事件
     cellClick(row, column) {
       if(this.selectFile){
-        this.fileClick(row)
+        // this.fileClick(row)
         return
       }
       clearTimeout(this.Loop);
@@ -2955,10 +2957,6 @@ export default {
         }
         if (row.suffix === 'pdf') {
           // pdf文件
-          let host = window.location.host
-          if (window.location.port.length > 0) {
-            host = window.location.host.substring(0, window.location.host.length - window.location.port.length - 1)
-          }
           fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token)
           return
         }
@@ -2968,7 +2966,6 @@ export default {
           return
         }
         // 其他文件
-        let fileIds = [row.id]
         this.notPreviewDialogVisible = true
       }
     },
@@ -3065,6 +3062,7 @@ export default {
 
 .table-file-name:hover {
   color: #19ACF9;
+  cursor: pointer;
 }
 
 /deep/ .plTableBox .el-table .el-table__header {
diff --git a/src/components/preview/ImageViewer.vue b/src/components/preview/ImageViewer.vue
index 8ab9081..0f4b58b 100644
--- a/src/components/preview/ImageViewer.vue
+++ b/src/components/preview/ImageViewer.vue
@@ -190,7 +190,6 @@ export default {
       this.vantImagePreview = vant.ImagePreview({
         images: imageUrls,
         startPosition: viewIndex,
-        closeable: true,
         onClose() {
           Bus.$emit('updateImageViewerStatus', false)
         },
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
index a6cc951..deab8f8 100644
--- a/src/styles/home-index.scss
+++ b/src/styles/home-index.scss
@@ -313,6 +313,7 @@
 /deep/ .grid-time {
   border-radius: 10px;
   padding: 0 8px;
+  border: solid 1px #ccc0;
   .grid-item-checkbox {
     position: absolute;
     top: 10px;
@@ -336,7 +337,6 @@
 }
 /deep/ .grid-time:hover {
   border: solid 1px #c8c9cc;
-  cursor: pointer;
 }
  .checkbox-group-header {
   margin: 10px 0 0;
diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue
index 9936116..ab5baef 100644
--- a/src/views/home/mobile/index.vue
+++ b/src/views/home/mobile/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container" v-resize="containerResize">
     <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
     <!--左侧菜单-->
     <van-popup v-model="leftMenuShow" get-container="body" position="left" :style="{ height: '100%', width: '35%'}">
@@ -13,11 +13,11 @@
             :src="imageUrl+avatar"
           />
         </div>
-        <span>{{name}}</span>
+        <span>{{ name }}</span>
 
         <div class="classification">
-          <van-cell title="首页" icon="wap-home-o"  @click="clickFileType(null,{})"/>
-          <van-cell title="收藏" icon="star-o"  @click="clickFileType(null,{isFavorite: true})"/>
+          <van-cell title="首页" icon="wap-home-o" @click="clickFileType(null,{})"/>
+          <van-cell title="收藏" icon="star-o" @click="clickFileType(null,{isFavorite: true})"/>
           <van-cell title="图片" icon="photo-o" @click="clickFileType('image',{isFolder: false})"/>
           <van-cell title="视频" icon="video-o" @click="clickFileType('video',{isFolder: false})"/>
           <van-cell title="音乐" icon="music-o" @click="clickFileType('audio',{isFolder: false})"/>
@@ -57,7 +57,8 @@
                   width="25"
                   height="25"
                 >
-                  <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+                  <path
+                    d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"/>
                 </svg>
               </div>
             </van-nav-bar>
@@ -81,7 +82,7 @@
               @click-right="checkboxAll"
               @click-left="clickBack">
               <div class="header-button" slot="left">
-                <van-icon name="arrow-left" />
+                <van-icon name="arrow-left"/>
               </div>
             </van-nav-bar>
             <div class="searchbar" :style="searchBarClass">
@@ -108,24 +109,33 @@
                   <van-icon name="more-o"/>
                 </van-col>
                 <van-col class="operating-header-col" span="16" align="center" @click="showSortSheet">
-                  已按{{actionsSortName}}排序 <van-icon class="sortable" :name="'arrow-'+sortOrder" />
+                  已按{{ actionsSortName }}排序
+                  <van-icon class="sortable" :name="'arrow-'+sortOrder"/>
                 </van-col>
                 <van-col class="operating-header-col" span="4" align="center" @click="changeVmode">
-                  <van-icon name="bars" :style="!grid?{background:'#1989fa',color:'#ffffff',padding:'0 5px',borderRadius: '5px'}:{}"/>
+                  <van-icon name="bars"
+                            :style="!grid?{background:'#1989fa',color:'#ffffff',padding:'0 5px',borderRadius: '5px'}:{}"/>
                 </van-col>
               </van-row>
             </div>
           </van-cell>
 
           <!--搜索结果-->
-          <van-cell v-if="searchStatus && searchValue.length > 0 && fileList.length > 0" style="background-color:#f7f8fa;">
-            <div class="search-result">{{resultCount}}个结果</div>
+          <van-cell v-if="searchStatus && searchValue.length > 0 && fileList.length > 0"
+                    style="background-color:#f7f8fa;">
+            <div class="search-result">{{ resultCount }}个结果</div>
           </van-cell>
           <van-cell v-if="searchStatus && searchValue.length > 0 && fileList.length === 0">
             <div class="search-result-no">无结果</div>
           </van-cell>
 
-          <van-cell v-show="!grid" class="list-item" :style="{'background': selectIndexList.includes(index) ? '#90c2fcb5' : ''}" center v-for="(item,index) in fileList" :key="item.id" @click="fileClick(item,index)" :is-link="item.isFolder">
+          <!--空状态-->
+          <van-empty v-if="!loading && fileList.length === 0" description="空空如也"/>
+
+          <van-cell v-if="!grid" class="list-item"
+                    :style="{'background': selectIndexList.includes(index) ? '#90c2fcb5' : ''}" center
+                    v-for="(item,index) in fileList" :key="item.id" @click="fileClick(item,index)"
+                    :is-link="item.isFolder">
             <div class="list-item-div" @touchstart="touchStart(item)" @touchend="touchEnd" @touchmove="touchMove">
               <van-row class="row-file">
                 <van-col span="4" align="center" class="list-cell-icon">
@@ -133,11 +143,11 @@
                 </van-col>
                 <van-col span="16" class="list-item-content">
                   <van-col span="24">
-                    {{item.name}}
+                    {{ item.name }}
                   </van-col>
                   <van-col span="24" class="file-description" justify="space-between">
                     <van-col span="24">
-                      {{formatTime(item.agoTime)}}&nbsp;&nbsp;&nbsp;{{formatSize(item.size)}}
+                      {{ formatTime(item.agoTime) }}&nbsp;&nbsp;&nbsp;{{ formatSize(item.size) }}
                     </van-col>
                   </van-col>
                 </van-col>
@@ -146,16 +156,23 @@
                 </van-col>
               </van-row>
             </div>
-            <van-checkbox v-if="selectStatus" slot="right-icon" :name="item" ref="checkboxes"></van-checkbox>
+            <van-checkbox class="file-item-checkbox" v-if="!grid && selectStatus" slot="right-icon" :name="item" ref="checkboxes"></van-checkbox>
           </van-cell>
 
-          <van-grid v-show="grid" square :center="true" :column-num="4" :gutter="10" :border="false" :style="{'width':'100%','overflow':'auto'}">
-            <van-grid-item v-for="(item,index) in fileList" ref="gridItem"  :key="item.id">
-              <div>
+          <van-grid v-if="grid" square :center="true" :column-num="gridColumnNum" :gutter="10" :border="false"
+                    :style="{'width':'100%','overflow':'auto'}">
+            <van-grid-item class="parent-grid-item" v-for="(item,index) in fileList" ref="gridItem" :key="item.id"
+                           @click="fileClick(item,index)">
+              <div
+                class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
+                :style="{'background': selectIndexList.includes(index) ? '#90c2fcb5' : '', 'border-radius': '15px'}"
+                @touchstart="touchStart(item)" @touchend="touchEnd" @touchmove="touchMove">
+                <van-checkbox  class="file-item-checkbox" v-if="grid && selectStatus" slot="right-icon" :name="item" ref="checkboxes"></van-checkbox>
                 <div class="grid-item-icon">
-                  <icon-file :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl" :grid="true"></icon-file>
+                  <icon-file :item="item" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
+                             :grid="true"></icon-file>
                 </div>
-                <span :title="item.name" class="grid-item-text">{{item.name}}</span>
+                <span :title="item.name" class="grid-item-text">{{ item.name }}</span>
               </div>
             </van-grid-item>
           </van-grid>
@@ -186,20 +203,24 @@
     </van-action-sheet>
 
     <van-dialog v-model="showNewFolder" show-cancel-button @confirm="newFolderNameClick">
-      <van-field class="new-folder-input" v-model="newFolderName" placeholder="请输入文件夹名称" :border="true" :clearable="true" ref="newFolderInput" :autofocus="true">
+      <van-field class="new-folder-input" v-model="newFolderName" placeholder="请输入文件夹名称" :border="true"
+                 :clearable="true" ref="newFolderInput" :autofocus="true">
       </van-field>
     </van-dialog>
 
     <van-dialog v-model="showRename" show-cancel-button @confirm="rowRename()">
-      <van-field class="rename-input" v-model="renameFileName" placeholder="请输入文件名称" :border="true" :clearable="true" ref="renameInput" :autofocus="true">
+      <van-field class="rename-input" v-model="renameFileName" placeholder="请输入文件名称" :border="true" :clearable="true"
+                 ref="renameInput" :autofocus="true">
       </van-field>
     </van-dialog>
 
     <e-vue-contextmenu ref="contextShow" class="newFileMenu" @ctx-show="show" @ctx-hide="hide">
-      <ul v-for="(item,index) in menus" :key="item.label" :class="{'menu-list-first':index===0,'menu-list-last':index===menus.length-1,'menu-list':index<menus.length-1&&index>0}">
+      <ul v-for="(item,index) in menus" :key="item.label"
+          :class="{'menu-list-first':index===0,'menu-list-last':index===menus.length-1,'menu-list':index<menus.length-1&&index>0}">
         <div v-if="index !== 0" style="border-bottom:1px solid #cccccc85"></div>
         <li :class="{'remove':item.operation==='remove'}" @click="menusOperations(item.operation)">
-          <div class="menuitem"><svg-icon :icon-class="item.iconClass" />
+          <div class="menuitem">
+            <svg-icon :icon-class="item.iconClass"/>
             <span class="menuitem text">{{ item.label }}</span>
           </div>
         </li>
@@ -207,8 +228,8 @@
     </e-vue-contextmenu>
 
     <van-overlay ref="overlayShow" :show="overlayShow" duration="0.3" @click="overlayClick">
-      <van-cell v-if="rowContextData.name!=null" :style="overlayContentClass" class="list-item overlay-content-class" center @click="fileClick(rowContextData,rowContextData.index)" :is-link="rowContextData.isFolder">
-        <!--<div :style="overlayContentClass">-->
+      <van-cell v-if="rowContextData.name!=null && !grid" :style="overlayContentClass"
+                class="list-item overlay-content-class" center :is-link="rowContextData.isFolder">
         <div>
           <van-row class="row-file">
             <van-col span="4" align="center" class="list-cell-icon">
@@ -216,19 +237,32 @@
             </van-col>
             <van-col span="16" class="list-item-content">
               <van-col span="24">
-                {{rowContextData.name}}
+                {{ rowContextData.name }}
               </van-col>
               <van-col span="24" class="file-description" justify="space-between">
                 <van-col span="24">
-                  {{formatTime(rowContextData.agoTime)}}&nbsp;&nbsp;&nbsp;{{formatSize(rowContextData.size)}}
+                  {{ formatTime(rowContextData.agoTime) }}&nbsp;&nbsp;&nbsp;{{ formatSize(rowContextData.size) }}
                 </van-col>
               </van-col>
             </van-col>
             <van-col span="4"></van-col>
           </van-row>
         </div>
-        <van-checkbox v-if="selectStatus" v-model="isShowCheckContext" slot="right-icon" :name="rowContextData"></van-checkbox>
+        <van-checkbox class="file-item-checkbox" v-if="selectStatus" v-model="isShowCheckContext" slot="right-icon"
+                      :name="rowContextData"></van-checkbox>
       </van-cell>
+
+      <div v-if="rowContextData.name!=null && grid" :style="overlayContentClass"
+           class="grid-time overlay-content-class van-grid-item__content van-grid-item__content--center van-grid-item__content--square">
+        <van-checkbox class="file-item-checkbox" v-if="selectStatus" v-model="isShowCheckContext" slot="right-icon"
+                      :name="rowContextData"></van-checkbox>
+        <div class="grid-item-icon">
+          <icon-file :item="rowContextData" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"
+                     :grid="true"></icon-file>
+        </div>
+        <span :title="rowContextData.name" class="grid-item-text">{{ rowContextData.name }}</span>
+      </div>
+
     </van-overlay>
     <!--为了不受右键区域的影响, 把弹窗之类的提取出来-->
     <sim-text-preview :file.sync="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
@@ -238,1267 +272,1430 @@
 </template>
 <script>
 
-  import { mapGetters } from 'vuex'
-  import {formatSize, formatTime, strlen, substring10} from '@/utils/number'
-  import api from '@/api/file-api'
-  import IconFile from "../../../components/Icon/IconFile";
-  import Bus from '@/assets/js/bus'
-  import {getPath, getPathList, removePath, setPath} from '@/utils/path'
-  import fileConfig from "@/utils/file-config";
-  import ImageViewer from "@/components/preview/ImageViewer";
-  import VideoPreview from "@/components/preview/VideoPreview";
-  import SimTextPreview from "@/components/preview/SimTextPreview";
-  import {suffix} from "@/utils/file-type";
-  let pinyin = require("pinyin");
+import {mapGetters} from 'vuex'
+import {formatSize, formatTime} from '@/utils/number'
+import api from '@/api/file-api'
+import IconFile from "../../../components/Icon/IconFile";
+import Bus from '@/assets/js/bus'
+import fileConfig from "@/utils/file-config";
+import ImageViewer from "@/components/preview/ImageViewer";
+import VideoPreview from "@/components/preview/VideoPreview";
+import SimTextPreview from "@/components/preview/SimTextPreview";
+import {suffix} from "@/utils/file-type";
 
-  export default {
-    components: {
-      SimTextPreview,
-      VideoPreview,
-      ImageViewer, IconFile,
-    },
-    computed: {
-      ...mapGetters([
-        'name',
-        'avatar'
-      ])
-    },
-    data() {
-      return {
-        test: 0,
-        lastTabbarOffsetTop: 0,// 底部tabbar与上边框 上次的距离
-        diffTabbarTop: 0,// 底部tabbar与上边框的变化距离
-        isiPhoneX: 0,
-        imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
-        audioCoverUrl: process.env.VUE_APP_BASE_API + '/view/cover?jmal-token=' + this.$store.state.user.token + '&id=',
-        tabActive: 0,
-        path: this.$route.query.path,
-        fileList: [],
-        pathList: [
-          { 'folder': '', index: 0 },
-          { 'folder': '+', index: 1 }
-        ],
-        pagination: {
-          pageIndex: 0,
-          pageSize: 50,
-          total: 0,
-        },
-        queryFileType: null,
-        queryCondition: {isFolder:null},
-        loading: false,
-        finished: false,
-        refreshing: false,
-        actionSheetShow: false, // 下拉菜单
-        actionsMenus: [
-          { name: '新建文件夹' },
-        ],
-        actionSortSheetShow: false,
-        actionsSortMenus: [
-          { name: '名称' },
-          { name: '日期' },
-          { name: '大小' },
-        ],
-        actionsSortName: '名称',
-        showNewFolder: false,
-        showRename: false,
-        newFolderName: '新建文件夹',
-        Loop: null,
-        isJustHideMenus: false,
-        menus: [
-          // { iconClass: 'menu-open', label: '打开', operation: 'open' },
-          { iconClass: 'menu-select', label: '选择', operation: 'select' },
-          { iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
-          { iconClass: 'menu-rename', label: '重命名', operation: 'rename' },
-          { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-          { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
-        ],
-        rowContextData: {},
-        selectRowData: [],
-        checkboxGroup: [],
-        newFolderLoading: false,
-        renameLoading: false,
-        renameFileName: '',
-        selectIndexList: [],
-        selectStatus: false,
-        isShowCheckContext: false,
-        overlayShow: false,
-        overlayContentClass: {},
-        vanNavBarClass: {},
-        searchBarClass: {},
-        leftMenuShow: false,
-        searchValue: '',
-        searchStatus: true,
-        resultCount: 0,
-        sortOrder: 'up',
-        sortableProp: null,
-        order: null,
-        grid: false,
-        vmode: 'list',
-        imagePreviewRow: {},
-        imagePreviewVisible: false,
-        videoPreviewRow: {},
-        videoPreviewVisible: false,
-        textPreviewVisible: false,
-        textPreviewRow: {},
-      };
-    },
-    mounted(){
-      // 加载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)
+let pinyin = require("pinyin");
+
+export default {
+  components: {
+    SimTextPreview,
+    VideoPreview,
+    ImageViewer, IconFile,
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'avatar'
+    ])
+  },
+  data() {
+    return {
+      test: 0,
+      lastTabbarOffsetTop: 0,// 底部tabbar与上边框 上次的距离
+      diffTabbarTop: 0,// 底部tabbar与上边框的变化距离
+      isiPhoneX: 0,
+      imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
+      audioCoverUrl: process.env.VUE_APP_BASE_API + '/view/cover?jmal-token=' + this.$store.state.user.token + '&id=',
+      tabActive: 0,
+      path: this.$route.query.path,
+      fileList: [],
+      pathList: [
+        {'folder': '', index: 0},
+        {'folder': '+', index: 1}
+      ],
+      pagination: {
+        pageIndex: 0,
+        pageSize: 50,
+        total: 0,
+      },
+      queryFileType: null,
+      queryCondition: {isFolder: null},
+      loading: false,
+      finished: false,
+      refreshing: false,
+      actionSheetShow: false, // 下拉菜单
+      actionsMenus: [
+        {name: '新建文件夹'},
+      ],
+      actionSortSheetShow: false,
+      actionsSortMenus: [
+        {name: '名称'},
+        {name: '日期'},
+        {name: '大小'},
+      ],
+      actionsSortName: '名称',
+      showNewFolder: false,
+      showRename: false,
+      newFolderName: '新建文件夹',
+      Loop: null,
+      isJustHideMenus: false,
+      menus: [
+        // { iconClass: 'menu-open', label: '打开', operation: 'open' },
+        {iconClass: 'menu-select', label: '选择', operation: 'select'},
+        {iconClass: 'menu-favorite', label: '收藏', operation: 'favorite'},
+        {iconClass: 'menu-rename', label: '重命名', operation: 'rename'},
+        {iconClass: 'menu-copy', label: '移动或复制', operation: 'copy'},
+        {iconClass: 'menu-download', label: '下载', operation: 'download'},
+        {iconClass: 'menu-remove', label: '删除', operation: 'remove'}
+      ],
+      rowContextData: {},
+      selectRowData: [],
+      checkboxGroup: [],
+      newFolderLoading: false,
+      renameLoading: false,
+      renameFileName: '',
+      selectIndexList: [],
+      selectStatus: false,
+      isShowCheckContext: false,
+      overlayShow: false,
+      overlayContentClass: {},
+      vanNavBarClass: {},
+      searchBarClass: {},
+      leftMenuShow: false,
+      searchValue: '',
+      searchStatus: true,
+      resultCount: 0,
+      sortOrder: 'up',
+      sortableProp: null,
+      order: null,
+      grid: false,
+      vmode: 'list',
+      gridColumnNum: -1,
+      imagePreviewRow: {},
+      imagePreviewVisible: false,
+      videoPreviewRow: {},
+      videoPreviewVisible: false,
+      textPreviewVisible: false,
+      textPreviewRow: {},
+    };
+  },
+  directives: {
+    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;
+        }
 
-      if (window.history && window.history.pushState) {
-        history.pushState(null, null, document.URL)
-        window.addEventListener('popstate', this.goBack, false)
+        el.__vueSetInterval__ = setInterval(isReize, 300);
+      },
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__);
+      }
+    }
+  },
+  mounted() {
+    // 加载布局
+    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)
+        }
+      })
+    }
+
+    if (window.history && window.history.pushState) {
+      history.pushState(null, null, document.URL)
+      window.addEventListener('popstate', this.goBack, false)
+    }
+  },
+  destroyed() {
+    window.removeEventListener('popstate', this.goBack, false);
+  },
+  methods: {
+    // 是否高亮收藏图标
+    highlightFavorite(isFavorite, isHover) {
+      const item_menu = this.menus.find(item => {
+        if (item.operation === 'favorite' || item.operation === 'unFavorite') {
+          return item
+        }
+      })
+      if (item_menu) {
+        if (isFavorite) {
+          item_menu.label = '取消收藏'
+          item_menu.iconClass = 'menu-unfavorite-hover'
+          item_menu.operation = 'unFavorite'
+        } else {
+          if (isHover) {
+            item_menu.iconClass = 'menu-favorite-hover'
+          } else {
+            item_menu.iconClass = 'menu-favorite'
+          }
+          item_menu.label = '收藏'
+          item_menu.operation = 'favorite'
+        }
+        // this.$set(this.menus, 0, item_menu)
       }
     },
-    destroyed(){
-      window.removeEventListener('popstate', this.goBack, false);
+    // 显示操作菜单
+    show() {
     },
-    methods: {
-      // 是否高亮收藏图标
-      highlightFavorite(isFavorite, isHover) {
-        const item_menu = this.menus.find(item => {
-          if (item.operation === 'favorite' || item.operation === 'unFavorite') {
-            return item
+    hide() {
+      const that = this
+      this.isJustHideMenus = true
+      setTimeout(function () {
+        that.isJustHideMenus = false
+      }, 100)
+    },
+    showCheckContext() {
+      return this.selectIndexList.includes(this.rowContextData.index)
+    },
+    // 长按事件
+    rowContextmenu(row, target, touchClientX) {
+      // 改变菜单
+      if (this.selectStatus && this.selectIndexList.includes(row.index)) {
+        if (this.selectIndexList.includes(row.index)) {
+          const item = {iconClass: 'menu-unselect', label: '取消选择', operation: 'unselect'}
+          this.menus.splice(0, 1, item)
+        }
+      } else {
+        const item = {iconClass: 'menu-select', label: '选择', operation: 'select'}
+        this.menus.splice(0, 1, item)
+      }
+
+      this.preliminaryRowData(row)
+      // 长按选择的数据
+      const offsetTop = this.getElementToPageTop(target) - row.scrollY
+      const e = {}
+      if ((offsetTop + (target.offsetHeight / 2)) > document.body.offsetHeight / 2) {
+        e.pageX = touchClientX
+        e.pageY = this.getElementToPageTop(target) - this.menus.length * 47 + 5
+      } else {
+        e.pageX = touchClientX
+        e.pageY = this.getElementToPageTop(target) + target.offsetHeight + 5
+      }
+      this.$refs.contextShow.showMenu(e)
+    },
+    // 选择某行预备数据
+    preliminaryRowData(row) {
+      this.rowContextData = row
+      this.isShowCheckContext = this.selectIndexList.includes(row.index)
+      const isFavorite = this.rowContextData.isFavorite
+      this.highlightFavorite(isFavorite, false)
+    },
+    // 菜单操作
+    menusOperations(operation) {
+      const that = this
+      switch (operation) {
+        case 'favorite':
+          this.favoriteOperating(true)
+          break
+        case 'open':
+          this.fileClick(this.rowContextData, this.rowContextData.index)
+          break
+        case 'unselect':
+          const index = this.rowContextData.index
+          this.$refs.checkboxes[index].toggle();
+          break
+        case 'unFavorite':
+          this.favoriteOperating(false)
+          break
+        case 'select':
+          this.selectStatus = true
+          this.selectIndexList.push(this.rowContextData.index)
+          setTimeout(() => {
+            this.$refs.checkboxes[that.rowContextData.index].toggle()
+          }, 0)
+          break
+        case 'rename':
+          this.renameFileName = this.rowContextData.name
+          this.showRename = true
+          setTimeout(function () {
+            that.$refs.renameInput.focus()
+          }, 0)
+          break
+        case 'copy':
+          vant.Toast('暂不支持移动');
+          break
+        case 'download':
+          this.downloadFile()
+          break
+        case 'remove':
+          this.deleteFile()
+          break
+      }
+      this.overlayShow = false
+      document.documentElement.style.overflow = null;
+      this.$refs.contextShow.hideMenu()
+    },
+    // 重命名
+    rowRename() {
+      const row = this.rowContextData
+      let newFileName = this.renameFileName
+      if (newFileName) {
+        if (!row.isFolder) {
+          const ext = '.' + row.suffix
+          if (!newFileName.endsWith(ext)) {
+            newFileName += ext
+          }
+        }
+        this.renameLoading = true
+        const findIndex = this.fileList.findIndex(item => {
+          if (newFileName === item.name) {
+            return item;
           }
         })
-        if (item_menu) {
-          if (isFavorite) {
-            item_menu.label = '取消收藏'
-            item_menu.iconClass = 'menu-unfavorite-hover'
-            item_menu.operation = 'unFavorite'
-          } else {
-            if (isHover) {
-              item_menu.iconClass = 'menu-favorite-hover'
-            } else {
-              item_menu.iconClass = 'menu-favorite'
-            }
-            item_menu.label = '收藏'
-            item_menu.operation = 'favorite'
+        if (findIndex > -1) {
+          let msg = '该文件已存在'
+          if (row.isFolder) {
+            msg = '该文件夹已存在'
           }
-          // this.$set(this.menus, 0, item_menu)
-        }
-      },
-      // 显示操作菜单
-      show() {
-      },
-      hide() {
-        const that = this
-        this.isJustHideMenus = true
-        setTimeout(function() {
-          that.isJustHideMenus = false
-        }, 100)
-      },
-      showCheckContext(){
-        return this.selectIndexList.includes(this.rowContextData.index)
-      },
-      // 长按事件
-      rowContextmenu(row, target, touchClientX) {
-        // 改变菜单
-        if(this.selectStatus && this.selectIndexList.includes(row.index)){
-          if(this.selectIndexList.includes(row.index)){
-            const item = { iconClass: 'menu-unselect', label: '取消选择', operation: 'unselect' }
-            this.menus.splice(0,1,item)
-          }
-        }else{
-          const item = { iconClass: 'menu-select', label: '选择', operation: 'select' }
-          this.menus.splice(0,1,item)
-        }
-
-        this.preliminaryRowData(row)
-        // 长按选择的数据
-        const offsetTop = target.offsetTop - row.scrollY
-        const e = {}
-        if ((offsetTop+(target.offsetHeight/2)) > document.body.offsetHeight/2) {
-          e.pageX = touchClientX
-          e.pageY = target.offsetTop - this.menus.length*47 + 5
-        } else {
-          e.pageX = touchClientX
-          e.pageY = target.offsetTop + target.offsetHeight + 5
-        }
-        this.$refs.contextShow.showMenu(e)
-      },
-      // 选择某行预备数据
-      preliminaryRowData(row) {
-        this.rowContextData = row
-        this.isShowCheckContext = this.selectIndexList.includes(row.index)
-        const isFavorite = this.rowContextData.isFavorite
-        this.highlightFavorite(isFavorite, false)
-      },
-      // 菜单操作
-      menusOperations(operation) {
-        const that = this
-        switch (operation) {
-          case 'favorite':
-            this.favoriteOperating(true)
-            break
-          case 'open':
-            this.fileClick(this.rowContextData, this.rowContextData.index)
-            break
-          case 'unselect':
-            const index = this.rowContextData.index
-            this.$refs.checkboxes[index].toggle();
-            break
-          case 'unFavorite':
-            this.favoriteOperating(false)
-            break
-          case 'select':
-            this.selectStatus = true
-            this.selectIndexList.push(this.rowContextData.index)
-            setTimeout(() => {
-              this.$refs.checkboxes[that.rowContextData.index].toggle()
-            },0)
-            break
-          case 'rename':
-            this.renameFileName = this.rowContextData.name
-            this.showRename = true
-            setTimeout(function () {
-              that.$refs.renameInput.focus()
-            },0)
-            break
-          case 'copy':
-            vant.Toast('暂不支持移动');
-            break
-          case 'download':
-            this.downloadFile()
-            break
-          case 'remove':
-            this.deleteFile()
-            break
-        }
-        this.overlayShow = false
-        document.documentElement.style.overflow = null;
-        this.$refs.contextShow.hideMenu()
-      },
-      // 重命名
-      rowRename() {
-        const row = this.rowContextData
-        let newFileName = this.renameFileName
-        if (newFileName) {
-          if (!row.isFolder) {
-            const ext = '.' + row.suffix
-            if (!newFileName.endsWith(ext)) {
-              newFileName += ext
-            }
-          }
-          this.renameLoading = true
-          const findIndex = this.fileList.findIndex(item => {
-            if(newFileName === item.name){
-              return item;
-            }
-          })
-          if(findIndex > -1){
-            let msg = '该文件已存在'
-            if(row.isFolder){
-              msg = '该文件夹已存在'
-            }
-            this.$message({
-              message: msg,
-              type: 'warning'
-            });
-            this.renameLoading = false
-            return
-          }
-
-          api.rename({
-            newFileName: newFileName,
-            username: this.$store.state.user.name,
-            id: row.id
-          }).then(res => {
-            if (res.data) {
-              this.renameLoading = false
-              row.name = newFileName
-              this.fileList[row.index] = row
-              this.editingIndex = -1
-            }
-          })
-        } else {
-          this.editingIndex = -1
-        }
-      },
-      // 下载
-      downloadFile() {
-        let totalSize = 0
-        if(this.selectRowData.length > 0){
-          this.selectRowData.forEach(item => {
-            totalSize += item.size
-          })
-        }else{
-          totalSize += this.rowContextData.size
-        }
-        if (totalSize > 0) {
-          let fileIds = [];
-          if (this.selectRowData.length > 0) {
-            this.selectRowData.forEach(value => {
-              fileIds.push(value.id)
-            })
-          } else {
-            fileIds.push(this.rowContextData.id)
-          }
-          if (fileIds.length > 1 || this.rowContextData.isFolder){
-            fileConfig.packageDownload(fileIds, this.$store.state.user.token)
-            return
-          }
-          fileConfig.download(this.$store.state.user.name, this.rowContextData, this.$store.state.user.token)
-        } else {
           this.$message({
-            message: '所选文件夹为空',
+            message: msg,
             type: 'warning'
           });
+          this.renameLoading = false
+          return
         }
-      },
-      // 收藏/取消收藏
-      favoriteOperating(isFavorite) {
-        this.rowContextData.isFavorite = isFavorite
-        this.highlightFavorite(isFavorite, true)
-        api.favoriteUrl({
-          token: this.$store.state.user.token,
-          fileIds: this.rowContextData.id,
-          isFavorite: isFavorite
+
+        api.rename({
+          newFileName: newFileName,
+          username: this.$store.state.user.name,
+          id: row.id
         }).then(res => {
+          if (res.data) {
+            this.renameLoading = false
+            row.name = newFileName
+            this.fileList[row.index] = row
+            this.editingIndex = -1
+          }
         })
-      },
-      // 删除
-      deleteFile() {
-        let fileList = []
-        const fileIds = []
+      } else {
+        this.editingIndex = -1
+      }
+    },
+    downloadFile() {
+      let totalSize = 0
+      if (this.selectRowData.length > 0) {
+        this.selectRowData.forEach(item => {
+          totalSize += item.size
+        })
+      } else {
+        totalSize += this.rowContextData.size
+      }
+      if (totalSize > 0) {
+        let fileIds = [];
         if (this.selectRowData.length > 0) {
-          fileList = this.selectRowData
           this.selectRowData.forEach(value => {
             fileIds.push(value.id)
           })
         } else {
-          fileList = this.selectRowData
           fileIds.push(this.rowContextData.id)
         }
-        const str = this.getShowSumFileAndFolder(fileList)
-
-        vant.Dialog.confirm({
-          title: '提示',
-          message: '此操作将永久删除' + str + ', 是否继续?'
-        }).then(() => {
-          api.delete({
-            username: this.$store.state.user.name,
-            fileIds: fileIds
-          }).then(() => {
-            // 刷新列表
-            this.getFileList()
-            vant.Toast.setDefaultOptions({ duration: 800 });
-            vant.Toast.success('删除成功');
-            if (this.selectRowData.length > 1){
-              this.selectRowData = []
-            }
-          })
-        })
-      },
-      touchMove() {
-        // // 避免和长按事件冲突
-        clearTimeout(this.Loop);
-        // e.preventDefault();
-      },
-      touchStart(item){
-        // e.preventDefault();
-        // Toast.setDefaultOptions({ duration: 500 });
-        //手指触摸
-        clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
-        const that = this
-        const e = window.event
-        this.Loop = setTimeout(function() {
-          item.scrollY = e.targetTouches[0].pageY-e.targetTouches[0].clientY
-          const touchClientX = e.targetTouches[0].clientX;
-          that.findListItem(item,e.targetTouches[0].target,touchClientX)
-          that.overlayShow = true
-          document.documentElement.style.overflow='hidden';
-        },500);
-      },
-      touchEnd(){
-        //手指离开
-        clearTimeout(this.Loop);
-      },
-      // 点击遮罩层
-      overlayClick() {
-        this.overlayShow = false
-        document.documentElement.style.overflow = null;
-      },
-      findListItem(item,target,touchClientX){
-        let background = this.selectIndexList.includes(this.rowContextData.index) ? '#90c2fcb5' : ''
-        const offsetParent = target.offsetParent
-        const parentElement = target.parentElement
-        if(!offsetParent && parentElement){
-          this.findListItem(item,target.parentElement,touchClientX)
-        }else{
-          if(offsetParent.className.indexOf('list-item') > -1){
-            this.overlayContentClass = {
-              'top': (offsetParent.offsetTop-item.scrollY)+'px',
-              'height': offsetParent.offsetHeight+'px',
-              'width': offsetParent.offsetWidth+'px',
-              'left': offsetParent.offsetLeft+'px',
-              'border-radius': '0px',
-              'background': background
-            }
-            const that = this
-            setTimeout(function () {
-              that.overlayContentClass = {
-                'top': (offsetParent.offsetTop-item.scrollY)+'px',
-                'height': offsetParent.offsetHeight+'px',
-                'width': (offsetParent.offsetWidth-20)+'px',
-                'left': (offsetParent.offsetLeft+10)+'px',
-                'border-radius': (offsetParent.offsetHeight/4)+'px',
-                'background': background
-              }
-            },0)
-            document.addEventListener('touchstart', function() {}, false);
-            this.rowContextmenu(item,offsetParent,touchClientX)
-            return offsetParent
-          } else {
-            this.findListItem(item,target.offsetParent,touchClientX)
-          }
-        }
-      },
-      // 浏览器的返回事件
-      goBack(){
-        if (this.pathList.length === 2) {
-          this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
+        if (fileIds.length > 1 || this.rowContextData.isFolder) {
+          fileConfig.packageDownload(fileIds, this.$store.state.user.token)
           return
         }
+        fileConfig.download(this.$store.state.user.name, this.rowContextData, this.$store.state.user.token)
+      } else {
+        this.$message({
+          message: '所选文件夹为空',
+          type: 'warning'
+        });
+      }
+    },
+    // 收藏/取消收藏
+    favoriteOperating(isFavorite) {
+      this.rowContextData.isFavorite = isFavorite
+      this.highlightFavorite(isFavorite, true)
+      api.favoriteUrl({
+        token: this.$store.state.user.token,
+        fileIds: this.rowContextData.id,
+        isFavorite: isFavorite
+      }).then(res => {
+      })
+    },
+    // 删除
+    deleteFile() {
+      let fileList = []
+      const fileIds = []
+      if (this.selectRowData.length > 0) {
+        fileList = this.selectRowData
+        this.selectRowData.forEach(value => {
+          fileIds.push(value.id)
+        })
+      } else {
+        fileList = this.selectRowData
+        fileIds.push(this.rowContextData.id)
+      }
+      const str = this.getShowSumFileAndFolder(fileList)
 
-        const linkIndex = this.pathList.length - 3
-        this.handleLink(this.pathList[linkIndex],linkIndex)
-      },
-      // 点击返回按钮(标题), 返回上一级
-      clickBack() {
-        this.handleLink(this.pathList[this.pathList.length - 2], this.pathList.length - 2)
-      },
-      //菜单键
-      leftMenu(){
-        this.leftMenuShow = true
-      },
-      async logout() {
-        await this.$store.dispatch('user/logout')
-        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-      },
-      startSearch(){
-        // this.searchStatus = true
-        this.vanNavBarClass = {
-          visibility: 'hidden'
-        }
-        this.searchBarClass = {
-          marginTop: '-30px'
-        }
-        let searchAction = document.querySelector('.van-search__action')
-        searchAction.style.marginRight = '0px'
-        searchAction.style.visibility = 'visible'
-        searchAction.style.color = '#1989fa'
-      },
-      endSearch() {
-        const that = this
-        setTimeout(function () {
-          that.vanNavBarClass = {
-            visibility: 'visible'
-          }
-        },150)
-        this.searchBarClass = {
-          marginTop: '0px'
-        }
-        let searchAction = document.querySelector('.van-search__action')
-        searchAction.style.marginRight = '-44px'
-        searchAction.style.visibility = 'hidden'
-        this.searchValue = ''
-        this.getFileList()
-      },
-      onSearch(){
-        if(this.searchValue.length < 1){
+      vant.Dialog.confirm({
+        title: '提示',
+        message: '此操作将永久删除' + str + ', 是否继续?'
+      }).then(() => {
+        api.delete({
+          username: this.$store.state.user.name,
+          fileIds: fileIds
+        }).then(() => {
+          // 刷新列表
           this.getFileList()
-        }else{
-          this.searchFile(this.searchValue)
-        }
-      },
-      // 切换布局
-      changeVmode(){
-        this.grid = !this.grid
-        this.vmode = 'list'
-        if(this.grid){
-          this.vmode = 'grid'
-        }
-        if(!this.path){
-          this.path = ''
-        }
-        this.$router.push(`?vmode=${this.vmode}&path=${this.path}`)
-      },
-      showSortSheet() {
-        this.actionSortSheetShow = true
-      },
-      // 更多操作
-      moreOperations() {
-        // Toast("提示").setDefaultOptions({ duration: 200 });
-        this.actionSheetShow = true
-        this.actionsMenus = [
-          { name: '新建文件夹' },
-        ]
-        if(window.uploader.support){
-          const menuItem = {}
-          menuItem['name'] = '上传文件'
-          this.actionsMenus.push(menuItem)
-        }
-        if(window.uploader.supportDirectory){
-          const menuItem = {}
-          menuItem['name'] = '上传文件夹'
-          this.actionsMenus.push(menuItem)
-        }
-      },
-      handleLink(item, index, unPushLink, unRefresh) {
-        if (item && item.search) {
-          if (item.searchKey) {
-            this.searchFileByKeyWord(item.searchKey)
-          } else if (item.row) {
-            this.searchFileAndOpenDir(item.row)
+          vant.Toast.setDefaultOptions({duration: 800});
+          vant.Toast.success('删除成功');
+          if (this.selectRowData.length > 1) {
+            this.selectRowData = []
           }
-          this.pathList.splice(this.pathList.findIndex((v, i) => i === index + 1), this.pathList.length - (index + 1))
+        })
+      })
+    },
+    touchMove() {
+      // // 避免和长按事件冲突
+      clearTimeout(this.Loop);
+      // e.preventDefault();
+    },
+    touchStart(item) {
+      // e.preventDefault();
+      // Toast.setDefaultOptions({ duration: 500 });
+      //手指触摸
+      clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
+      const e = window.event
+      this.Loop = setTimeout(() => {
+        item.scrollY = e.targetTouches[0].pageY - e.targetTouches[0].clientY
+        if (this.findListItem(item, e.targetTouches[0].target, e.targetTouches[0].clientX)) {
+          this.overlayShow = true
+          document.documentElement.style.overflow = 'hidden';
+        }
+      }, 500);
+    },
+    touchEnd() {
+      //手指离开
+      clearTimeout(this.Loop);
+    },
+    // 点击遮罩层
+    overlayClick() {
+      this.overlayShow = false
+      document.documentElement.style.overflow = null;
+    },
+    findListItem(item, target, touchClientX) {
+      if (target === null) {
+        return false
+      }
+      const offsetParent = target.offsetParent
+      const parentElement = target.parentElement
+      if (!offsetParent && parentElement || offsetParent === null) {
+        return this.findListItem(item, target.parentElement, touchClientX)
+      } else {
+        if (offsetParent.className.indexOf('list-item') > -1) {
+          // list
+          this.longPressDisplayLayer(item, offsetParent, touchClientX)
+        } else if (offsetParent.className.indexOf('grid-time') > -1) {
+          // grid
+          this.longPressDisplayLayer(item, offsetParent, touchClientX)
         } else {
-          this.pathList.splice(this.pathList.findIndex((v, i) => i === index + 1), this.pathList.length - (index + 1))
-          this.pathList.forEach((p, number) => {
-            if (number === 0) {
-              this.path = ''
-            } else if (number === this.pathList.length) {
-            } else {
-              this.path += '/' + this.pathList[number].folder
-            }
-          })
-          if (!unPushLink) {
-            if (!this.$route.query.path) {
-              this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
-            } else {
-              this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
-            }
-          }
-          if (!unRefresh) {
-            this.pagination.pageIndex = 1
-            this.getFileList()
-          }
+          return this.findListItem(item, target.offsetParent, touchClientX)
         }
-      },
-      // 格式化最近时间
-      formatTime(time) {
-        return formatTime(time)
-      },
-      // 格式化文件大小
-      formatSize(size) {
-        return formatSize(size)
-      },
-      // 下拉刷新
-      onRefresh() {
-        // 清空列表数据
-        this.finished = false;
-        // 重新加载数据
-        // 将 loading 设置为 true，表示处于加载状态
-        this.loading = true;
-        this.getFileList();
-      },
-      getFileList(onLoad) {
-        this.beforeLoadData(onLoad)
-        api.fileList({
-          userId: this.$store.state.user.userId,
-          currentDirectory: this.$route.query.path,
-          queryFileType: this.queryFileType,
-          sortableProp: this.sortableProp,
-          order: this.order,
-          isFolder: this.queryCondition.isFolder,
-          isFavorite: this.queryCondition.isFavorite,
-          queryCondition: this.queryCondition,
-          pageIndex: this.pagination.pageIndex,
-          pageSize: this.pagination.pageSize,
-        }).then(res => {
-          this.loadData(res,onLoad)
-        }).catch(e => {})
-      },
-      searchFile(key,onLoad) {
-        if(key){
-          this.beforeLoadData(onLoad)
-          this.$router.push(`?vmode=${this.vmode}&search-file=${key}`)
-          api.searchFile({
-            userId: this.$store.state.user.userId,
-            username: this.$store.state.user.name,
-            keyword: key,
-            currentDirectory: this.$route.query.path,
-            pageIndex: this.pagination.pageIndex,
-            pageSize: this.pagination.pageSize
-          }).then(res => {
-            this.loadData(res,onLoad)
+      }
+      return true
+    },
+    // 长按显示层
+    longPressDisplayLayer(item, offsetParent, touchClientX) {
+      const background = this.selectIndexList.includes(this.rowContextData.index) ? '#90c2fcb5' : ''
+      this.overlayContentClass = {
+        'top': (this.getElementToPageTop(offsetParent) - item.scrollY) + 'px',
+        'height': offsetParent.offsetHeight + 'px',
+        'width': offsetParent.offsetWidth + 'px',
+        'left': this.getElementToPageLeft(offsetParent) + 'px',
+        'border-radius': '0px',
+        'background': background
+      }
+      setTimeout(() => {
+        this.overlayContentClass = {
+          'top': (this.getElementToPageTop(offsetParent) - item.scrollY) + 'px',
+          'height': offsetParent.offsetHeight + 'px',
+          'width': (offsetParent.offsetWidth - (this.grid ? 0 : 10)) + 'px',
+          'left': (this.getElementToPageLeft(offsetParent) + (this.grid ? 0 : 5)) + 'px',
+          'border-radius': '20px',
+          'background': background
+        }
+      }, 0)
+      this.rowContextmenu(item, offsetParent, touchClientX)
+    },
+    // 获取DOM元素到页面顶部的距离
+    getElementToPageTop(el) {
+      if (el.className.indexOf('parent-grid-item') > -1) {
+        return el.offsetTop
+      }
+      if (el.parentElement) {
+        return this.getElementToPageTop(el.parentElement) + el.offsetTop
+      }
+      return el.offsetTop
+    },
+    // 获取DOM元素到页面左边的距离
+    getElementToPageLeft(el) {
+      if (el.className.indexOf('parent-grid-item') > -1) {
+        return el.offsetLeft
+      }
+      if (el.offsetParent) {
+        return this.getElementToPageLeft(el.offsetParent) + el.offsetLeft
+      }
+      return el.offsetLeft
+    },
+    // 浏览器的返回事件
+    goBack() {
+      if (this.pathList.length <= 1) {
+        this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
+        return
+      }
+      this.clickBack()
+    },
+    // 点击返回按钮(标题), 返回上一级
+    clickBack() {
+      this.handleLink(this.pathList[this.pathList.length - 2], this.pathList.length - 2)
+    },
+    //菜单键
+    leftMenu() {
+      this.leftMenuShow = true
+    },
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    },
+    startSearch() {
+      // this.searchStatus = true
+      this.vanNavBarClass = {
+        visibility: 'hidden'
+      }
+      this.searchBarClass = {
+        marginTop: '-30px'
+      }
+      let searchAction = document.querySelector('.van-search__action')
+      searchAction.style.marginRight = '0px'
+      searchAction.style.visibility = 'visible'
+      searchAction.style.color = '#1989fa'
+    },
+    endSearch() {
+      const that = this
+      setTimeout(function () {
+        that.vanNavBarClass = {
+          visibility: 'visible'
+        }
+      }, 150)
+      this.searchBarClass = {
+        marginTop: '0px'
+      }
+      let searchAction = document.querySelector('.van-search__action')
+      searchAction.style.marginRight = '-44px'
+      searchAction.style.visibility = 'hidden'
+      this.searchValue = ''
+      this.getFileList()
+    },
+    onSearch() {
+      if (this.searchValue.length < 1) {
+        this.getFileList()
+      } else {
+        this.searchFile(this.searchValue)
+      }
+    },
+    // 切换布局
+    changeVmode() {
+      this.grid = !this.grid
+      this.vmode = 'list'
+      if (this.grid) {
+        this.vmode = 'grid'
+      }
+      if (!this.path) {
+        this.path = ''
+      }
+      this.$router.push(`?vmode=${this.vmode}&path=${this.path}`)
+    },
+    showSortSheet() {
+      this.actionSortSheetShow = true
+    },
+    // 更多操作
+    moreOperations() {
+      // Toast("提示").setDefaultOptions({ duration: 200 });
+      this.actionSheetShow = true
+      this.actionsMenus = [
+        {name: '新建文件夹'},
+      ]
+      if (window.uploader.support) {
+        const menuItem = {}
+        menuItem['name'] = '上传文件'
+        this.actionsMenus.push(menuItem)
+      }
+      if (window.uploader.supportDirectory) {
+        const menuItem = {}
+        menuItem['name'] = '上传文件夹'
+        this.actionsMenus.push(menuItem)
+      }
+    },
+    handleLink(item, index, unPushLink, unRefresh) {
+      if (item && item.search) {
+        if (item.searchKey) {
+          this.searchFileByKeyWord(item.searchKey)
+        } else if (item.row) {
+          this.searchFileAndOpenDir(item.row)
+        }
+        this.pathList.splice(this.pathList.findIndex((v, i) => i === index + 1), this.pathList.length - (index + 1))
+      } else {
+        this.pathList.splice(this.pathList.findIndex((v, i) => i === index + 1), this.pathList.length - (index + 1))
+        this.pathList.forEach((p, number) => {
+          if (number === 0) {
             this.path = ''
-            this.listModeSearch = true
-            this.listModeSearchOpenDir = false
-          })
+          } else if (number === this.pathList.length) {
+          } else {
+            this.path += '/' + this.pathList[number].folder
+          }
+        })
+        if (!unPushLink) {
+          if (!this.$route.query.path) {
+            this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
+          } else {
+            this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
+          }
         }
-      },
-      // 请求之前的准备
-      beforeLoadData(onLoad){
-        if (onLoad) {
-          this.pagination.pageIndex++
-        } else {
+        if (!unRefresh) {
           this.pagination.pageIndex = 1
+          this.getFileList()
         }
-        this.finished = false;
-      },
-      // 填充数据
-      loadData(res,onLoad){
-        if(onLoad){
-          res.data.forEach((file,index) => {
-            file['index'] = (this.pagination.pageIndex - 1) * this.pagination.pageSize + index
-            this.fileList.push(file)
-          })
-        }else{
-          this.fileList = res.data
-          this.fileList.map((file,index) => {
-            file['index'] = index
-          })
-        }
+      }
+    },
+    // 格式化最近时间
+    formatTime(time) {
+      return formatTime(time)
+    },
+    // 格式化文件大小
+    formatSize(size) {
+      return formatSize(size)
+    },
+    // 下拉刷新
+    onRefresh() {
+      // 清空列表数据
+      this.finished = false;
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.loading = true;
+      this.getFileList();
+    },
+    getFileList(onLoad) {
+      this.beforeLoadData(onLoad)
+      api.fileList({
+        userId: this.$store.state.user.userId,
+        currentDirectory: this.$route.query.path,
+        queryFileType: this.queryFileType,
+        sortableProp: this.sortableProp,
+        order: this.order,
+        isFolder: this.queryCondition.isFolder,
+        isFavorite: this.queryCondition.isFavorite,
+        queryCondition: this.queryCondition,
+        pageIndex: this.pagination.pageIndex,
+        pageSize: this.pagination.pageSize,
+      }).then(res => {
+        this.loadData(res, onLoad)
+      }).catch(e => {
+      })
+    },
+    searchFile(key, onLoad) {
+      if (key) {
+        this.beforeLoadData(onLoad)
+        this.$router.push(`?vmode=${this.vmode}&search-file=${key}`)
+        api.searchFile({
+          userId: this.$store.state.user.userId,
+          username: this.$store.state.user.name,
+          keyword: key,
+          currentDirectory: this.$route.query.path,
+          pageIndex: this.pagination.pageIndex,
+          pageSize: this.pagination.pageSize
+        }).then(res => {
+          this.loadData(res, onLoad)
+          this.path = ''
+          this.listModeSearch = true
+          this.listModeSearchOpenDir = false
+        })
+      }
+    },
+    // 请求之前的准备
+    beforeLoadData(onLoad) {
+      if (onLoad) {
+        this.pagination.pageIndex++
+      } else {
+        this.pagination.pageIndex = 1
+      }
+      this.finished = false;
+      this.fileList = []
+    },
+    // 填充数据
+    loadData(res, onLoad) {
+      if (onLoad) {
+        res.data.forEach((file, index) => {
+          file['index'] = (this.pagination.pageIndex - 1) * this.pagination.pageSize + index
+          this.fileList.push(file)
+        })
+      } else {
+        this.fileList = res.data
+        this.fileList.map((file, index) => {
+          file['index'] = index
+        })
+      }
+      this.refreshing = false
+      this.resultCount = res.count
+      // 数据全部加载完成
+      if (this.fileList.length >= res.count) {
+        this.finished = true;
+      }
+      // 排序
+      this.fileList.sort(this.compare(this.sortableProp))
+      this.$nextTick(() => {
+        this.containerResize()
         // 加载状态结束
         this.loading = false
-        this.refreshing = false
-        this.resultCount = res.count
-        // 数据全部加载完成
-        if (this.fileList.length >= res.count) {
-          this.finished = true;
+      })
+    },
+    containerResize() {
+      const container = document.querySelector(".container")
+      let clientWidth = container.clientWidth
+      if (clientWidth > 1024) {
+        this.gridColumnNum = Math.round(clientWidth / 100 - 4)
+      } else {
+        this.gridColumnNum = Math.round(clientWidth / 100 - 2)
+        if (clientWidth <= 550) {
+          this.gridColumnNum = 4
         }
-        // 排序
-        this.fileList.sort(this.compare(this.sortableProp))
-      },
-      clickFileType(queryFileType,queryCondition){
-        this.queryCondition = queryCondition
-        this.queryFileType = queryFileType
-        this.getFileList()
-        this.leftMenuShow = false
-      },
-      uploadList() {
-        this.$router.push(`/upload/index_m`)
-      },
-      // 统计
-      statistics() {
-        let totalSize = 0
-        this.fileList.forEach(file => {
-          totalSize += file.size;
-        })
-        return this.getShowSumFileAndFolder(this.fileList) + ' ' + this.getShowSumSize(totalSize)
-      },
-      // 统计文件和文件夹
-      getShowSumFileAndFolder(fileList) {
-        let folderSize = 0
-        let fileSize = 0
-        fileList.forEach((fileInfo) => {
-          if (fileInfo.isFolder) {
-            folderSize += 1
-          } else {
-            fileSize += 1
-          }
-        })
-        let folderSum = ''
-        if (folderSize > 0) {
-          folderSum = folderSize + '个文件夹'
+        if (clientWidth <= 375) {
+          this.gridColumnNum = 3
         }
-        let fileSum = ''
-        if (fileSize > 0) {
-          fileSum = fileSize + '个文件'
-        }
-        return folderSum + ' ' + fileSum
-      },
-      // 计算总大小
-      getShowSumSize(totalSize) {
-        let sizeSum = ''
-        if (totalSize > 0) {
-          sizeSum = '  共'
-        }
-        if (totalSize === 0) {
-          return sizeSum
-        } else if (totalSize < 1024) {
-          sizeSum += totalSize + 'B'
-        } else if (totalSize >= 1024 && totalSize < 1024 * 1024) {
-          sizeSum += (totalSize / 1024).toFixed(2) + 'K'
-        } else if (totalSize >= 1024 * 1024 && totalSize < 1024 * 1024 * 1024) {
-          sizeSum += (totalSize / (1024 * 1024)).toFixed(2) + 'M'
+      }
+    },
+    clickFileType(queryFileType, queryCondition) {
+      this.queryCondition = queryCondition
+      this.queryFileType = queryFileType
+      this.getFileList()
+      this.leftMenuShow = false
+    },
+    uploadList() {
+      this.$router.push(`/upload/index_m`)
+    },
+    // 统计
+    statistics() {
+      let totalSize = 0
+      this.fileList.forEach(file => {
+        totalSize += file.size;
+      })
+      return this.getShowSumFileAndFolder(this.fileList) + ' ' + this.getShowSumSize(totalSize)
+    },
+    // 统计文件和文件夹
+    getShowSumFileAndFolder(fileList) {
+      let folderSize = 0
+      let fileSize = 0
+      fileList.forEach((fileInfo) => {
+        if (fileInfo.isFolder) {
+          folderSize += 1
         } else {
-          sizeSum += (totalSize / (1024 * 1024 * 1024)).toFixed(2) + 'G'
+          fileSize += 1
         }
+      })
+      let folderSum = ''
+      if (folderSize > 0) {
+        folderSum = folderSize + '个文件夹'
+      }
+      let fileSum = ''
+      if (fileSize > 0) {
+        fileSum = fileSize + '个文件'
+      }
+      return folderSum + ' ' + fileSum
+    },
+    // 计算总大小
+    getShowSumSize(totalSize) {
+      let sizeSum = ''
+      if (totalSize > 0) {
+        sizeSum = '  共'
+      }
+      if (totalSize === 0) {
         return sizeSum
-      },
-      // 全选或反选
-      checkboxAll() {
-        if(this.selectRowData.length !== this.fileList.length){
-          this.$refs.checkboxGroup.toggleAll(true);
-        }else{
-          this.$refs.checkboxGroup.toggleAll();
-        }
-      },
-      // 取消选择状态
-      cancelSelect() {
-        this.$refs.checkboxGroup.toggleAll(false)
-        const that = this
-        setTimeout(function () {
-          that.selectStatus = false
-        })
-      },
-      // 选择状态改变时触发
-      checkboxChange(any) {
-        this.selectRowData = any
-        this.selectIndexList = []
-        for (const item of any) {
-          this.selectIndexList.push(item.index)
-        }
-        this.selectStatus = true
-      },
-      // 点击文件或文件夹
-      fileClick(row,index) {
-        if(this.selectStatus){
-          this.$refs.checkboxes[index].toggle();
-        }else{
-          if (row.isFolder) {
-            // 打开文件夹
-            if(this.path){
-              this.path += '/' + row.name
-            } else {
-              this.path = '/' + row.name
-            }
-            const item = {}
-            item['folder'] = row.name
-            item['index'] = this.pathList.length - 1
-            this.pathList.push(item)
-            this.$router.push(`/_m?path=${encodeURIComponent(this.path)}`)
-            this.getFileList()
+      } else if (totalSize < 1024) {
+        sizeSum += totalSize + 'B'
+      } else if (totalSize >= 1024 && totalSize < 1024 * 1024) {
+        sizeSum += (totalSize / 1024).toFixed(2) + 'K'
+      } else if (totalSize >= 1024 * 1024 && totalSize < 1024 * 1024 * 1024) {
+        sizeSum += (totalSize / (1024 * 1024)).toFixed(2) + 'M'
+      } else {
+        sizeSum += (totalSize / (1024 * 1024 * 1024)).toFixed(2) + 'G'
+      }
+      return sizeSum
+    },
+    // 全选或反选
+    checkboxAll() {
+      if (this.selectRowData.length !== this.fileList.length) {
+        this.$refs.checkboxGroup.toggleAll(true);
+      } else {
+        this.$refs.checkboxGroup.toggleAll();
+      }
+    },
+    // 取消选择状态
+    cancelSelect() {
+      this.$refs.checkboxGroup.toggleAll(false)
+      const that = this
+      setTimeout(function () {
+        that.selectStatus = false
+      })
+    },
+    // 选择状态改变时触发
+    checkboxChange(any) {
+      this.selectRowData = any
+      this.selectIndexList = []
+      for (const item of any) {
+        this.selectIndexList.push(item.index)
+      }
+      this.selectStatus = true
+    },
+    // 点击文件或文件夹
+    fileClick(row, index) {
+      if (this.selectStatus) {
+        this.$refs.checkboxes[index].toggle();
+      } else {
+        if (row.isFolder) {
+          // 打开文件夹
+          if (this.path) {
+            this.path += '/' + row.name
           } else {
-            if (row.contentType.startsWith('image')) {
-              this.imagePreviewVisible = true
-              this.imagePreviewRow = row
-              return
-            }
-            if (suffix.simText.includes(row.suffix)) {
-              // 文本文件
-              this.textPreviewRow = row
-              this.textPreviewVisible = true
-              return
-            }
-            if (row.contentType.indexOf('video') > -1) {
-              // 视频文件
-              this.videoPreviewVisible = true
-              this.videoPreviewRow = row
-              return
-            }
-            if (row.contentType.indexOf('audio') > -1) {
-              // 音频文件
-              Bus.$emit('onAddAudio', row, this.audioCoverUrl)
-              return
-            }
-            // 通用打开文件的方法
+            this.path = '/' + row.name
+          }
+          const item = {}
+          item['folder'] = row.name
+          item['index'] = this.pathList.length - 1
+          this.pathList.push(item)
+          this.$router.push(`/_m?vmode=${this.vmode}&path=${encodeURIComponent(this.path)}`)
+          this.getFileList()
+        } else {
+          if (row.contentType.startsWith('image')) {
+            // 图片
+            this.imagePreviewVisible = true
+            this.imagePreviewRow = row
+            return
+          }
+          if (suffix.simText.includes(row.suffix)) {
+            // 文本文件
+            this.textPreviewRow = row
+            this.textPreviewVisible = true
+            return
+          }
+          if (row.contentType.indexOf('video') > -1) {
+            // 视频文件
+            this.videoPreviewVisible = true
+            this.videoPreviewRow = row
+            return
+          }
+          if (row.contentType.indexOf('audio') > -1) {
+            // 音频文件
+            Bus.$emit('onAddAudio', row, this.audioCoverUrl)
+            return
+          }
+          if (row.suffix === 'pdf') {
+            // pdf文件
             fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token)
+            return
           }
-        }
-      },
-      onCancel() {
-        this.actionSheetShow = false
-        this.actionSortSheetShow = false
-      },
-      compare(property){
-        return (a,b) => {
-          let value1 = a[property]
-          let value2 = b[property]
-          if(this.order === 'ascending'){
-            return value1 - value2
-          }else{
-            return value2 - value1
-          }
-        }
-      },
-      selectSortActionsMenus(action) {
-        const that = this
-        setTimeout(function () {
-          that.actionSortSheetShow = false
-        },100)
-        if(this.sortOrder === 'up'){
-          this.sortOrder = 'down'
-          this.order = 'descending'
-        }else{
-          this.sortOrder = 'up'
-          this.order = 'ascending'
-        }
-        this.actionsSortName = action.name
-        if(action.name === '名称'){
-          this.sortableProp = 'name'
-          if(this.sortOrder === 'up'){
-            this.order = null
-          }
-          this.getFileList()
-        }
-        if(action.name === '大小'){
-          this.sortableProp = 'size'
-          this.fileList.sort(this.compare(this.sortableProp))
-        }
-        if(action.name === '日期'){
-          this.sortableProp = 'updateDate'
-          this.getFileList()
-          // this.fileList.sort(this.compare('agoTime'))
-        }
-      },
-      // 选择上传文件菜单
-      selectActionsMenus(action) {
-        const that = this
-        setTimeout(function () {
-          that.actionSheetShow = false
-        },100)
-        // 新建文件夹
-        if(action.name === '新建文件夹'){
-          this.newFolderName = '新建文件夹'
-          let append = 0
-          let filenameList = []
-          this.fileList.forEach(file => {
-            filenameList.push(file.name)
-          })
-          while(filenameList.includes(this.newFolderName)){
-            append += 1
-            this.newFolderName = '新建文件夹' + append
-          }
-          this.showNewFolder = true
-          const that = this
-          setTimeout(function () {
-            that.$refs.newFolderInput.focus()
-          },0)
-        }
-        // 上传文件
-        if(action.name === '上传文件'){
-          // 打开文件选择框
-          Bus.$emit('openUploader', {
-            // 传入的参数
-            currentDirectory: this.path,
-            username: this.$store.state.user.name,
-            userId: this.$store.state.user.userId
-          })
-        }
-        // 上传文件夹
-        if(action.name === '上传文件夹'){
-          // 打开文件夹选择框
-          Bus.$emit('uploadFolder', {
-            // 传入的参数
-            currentDirectory: this.path,
-            username: this.$store.state.user.name,
-            userId: this.$store.state.user.userId
-          })
-        }
-      },
-      // 新建文件夹
-      newFolderNameClick() {
-        this.newFolderLoading = true
-        if(this.newFolderName){
-          api.uploadFolder({
-            isFolder: true,
-            filename: this.newFolderName,
-            currentDirectory: this.path,
-            username: this.$store.state.user.name,
-            userId: this.$store.state.user.userId
-          }).then((res) => {
-            if(res.data === 1){
-              this.newFolderLoading = false
-              this.$message({
-                message: '该文件夹已存在',
-                type: 'warning'
-              });
-            } else {
-              this.newFolderLoading = false
-              this.showNewFolder = false
-              this.isShowNewFolder = false
-              Notify({ type: 'success', message: '新建文件夹成功', duration: 1000 });
-              if (this.listModeSearch) {
-                this.getFileListBySearchMode()
-              } else {
-                this.getFileList()
-              }
-            }
-          })
-        }else{
-          this.newFolderLoading = false
-          this.$message({
-            message: '请输入文件夹名称',
-            type: 'warning'
+          vant.Dialog.confirm({
+            title: '标题',
+            message: '此文件不支持预览，是否下载',
+            confirmButtonText: '下载'
+          }).then(() => {
+            // 通用下载文件的方法
+            setTimeout(() => {
+              fileConfig.download(this.$store.state.user.name, row, this.$store.state.user.token)
+            }, 0)
+          }).catch(() => {
+              // on cancel
           });
         }
-      },
-      swipeUp() {
-        this.test = 10
-      },
-      tabBottom() {
-        return { padding: '0 0 20px 0' }
       }
+    },
+    onCancel() {
+      this.actionSheetShow = false
+      this.actionSortSheetShow = false
+    },
+    compare(property) {
+      return (a, b) => {
+        let value1 = a[property]
+        let value2 = b[property]
+        if (this.order === 'ascending') {
+          return value1 - value2
+        } else {
+          return value2 - value1
+        }
+      }
+    },
+    selectSortActionsMenus(action) {
+      const that = this
+      setTimeout(function () {
+        that.actionSortSheetShow = false
+      }, 100)
+      if (this.sortOrder === 'up') {
+        this.sortOrder = 'down'
+        this.order = 'descending'
+      } else {
+        this.sortOrder = 'up'
+        this.order = 'ascending'
+      }
+      this.actionsSortName = action.name
+      if (action.name === '名称') {
+        this.sortableProp = 'name'
+        if (this.sortOrder === 'up') {
+          this.order = null
+        }
+        this.getFileList()
+      }
+      if (action.name === '大小') {
+        this.sortableProp = 'size'
+        this.fileList.sort(this.compare(this.sortableProp))
+      }
+      if (action.name === '日期') {
+        this.sortableProp = 'updateDate'
+        this.getFileList()
+        // this.fileList.sort(this.compare('agoTime'))
+      }
+    },
+    // 选择上传文件菜单
+    selectActionsMenus(action) {
+      const that = this
+      setTimeout(function () {
+        that.actionSheetShow = false
+      }, 100)
+      // 新建文件夹
+      if (action.name === '新建文件夹') {
+        this.newFolderName = '新建文件夹'
+        let append = 0
+        let filenameList = []
+        this.fileList.forEach(file => {
+          filenameList.push(file.name)
+        })
+        while (filenameList.includes(this.newFolderName)) {
+          append += 1
+          this.newFolderName = '新建文件夹' + append
+        }
+        this.showNewFolder = true
+        const that = this
+        setTimeout(function () {
+          that.$refs.newFolderInput.focus()
+        }, 0)
+      }
+      // 上传文件
+      if (action.name === '上传文件') {
+        // 打开文件选择框
+        Bus.$emit('openUploader', {
+          // 传入的参数
+          currentDirectory: this.path,
+          username: this.$store.state.user.name,
+          userId: this.$store.state.user.userId
+        })
+      }
+      // 上传文件夹
+      if (action.name === '上传文件夹') {
+        // 打开文件夹选择框
+        Bus.$emit('uploadFolder', {
+          // 传入的参数
+          currentDirectory: this.path,
+          username: this.$store.state.user.name,
+          userId: this.$store.state.user.userId
+        })
+      }
+    },
+    // 新建文件夹
+    newFolderNameClick() {
+      this.newFolderLoading = true
+      if (this.newFolderName) {
+        api.uploadFolder({
+          isFolder: true,
+          filename: this.newFolderName,
+          currentDirectory: this.path,
+          username: this.$store.state.user.name,
+          userId: this.$store.state.user.userId
+        }).then((res) => {
+          if (res.data === 1) {
+            this.newFolderLoading = false
+            this.$message({
+              message: '该文件夹已存在',
+              type: 'warning'
+            });
+          } else {
+            this.newFolderLoading = false
+            this.showNewFolder = false
+            this.isShowNewFolder = false
+            Notify({type: 'success', message: '新建文件夹成功', duration: 1000});
+            if (this.listModeSearch) {
+              this.getFileListBySearchMode()
+            } else {
+              this.getFileList()
+            }
+          }
+        })
+      } else {
+        this.newFolderLoading = false
+        this.$message({
+          message: '请输入文件夹名称',
+          type: 'warning'
+        });
+      }
+    },
+    swipeUp() {
+      this.test = 10
+    },
+    tabBottom() {
+      return {padding: '0 0 20px 0'}
     }
   }
+}
 </script>
 <style lang="scss" scoped>
-  * {
-    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
-    -webkit-user-select:none; /*webkit浏览器*/
-    -moz-user-select:none;/*火狐*/
-    -ms-user-select:none; /*IE10*/
-    user-select:none;
-  }
+* {
+  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -moz-user-select: none; /*火狐*/
+  -ms-user-select: none; /*IE10*/
+  user-select: none;
+}
 
-  input {
-    -webkit-user-select:auto; /*webkit浏览器*/
-  }
+input {
+  -webkit-user-select: auto; /*webkit浏览器*/
+}
 
-  .tab-bottom {
-    padding: 0 0 25px 0;
-    .van-tabbar-item {
-      margin-top:25px;
-      animation:ordinary .4s forwards;
-      -moz-animation:ordinary .4s forwards; /* Firefox */
-      -webkit-animation:ordinary .4s forwards; /* Safari and Chrome */
-      -o-animation:ordinary .4s forwards; /* Opera */
-    }
-  }
-
-  @keyframes iphoneX
-  {
-    from {margin-top:25px;}
-    to {margin-top:-5px;}
-  }
-
-  @keyframes ordinary
-  {
-    from {margin-top:-5px;}
-    to {margin-top:25px;}
-  }
-
-  .tab-bottom-iphoneX {
-    padding: 0 0 25px 0;
-    .van-tabbar-item {
-      animation:iphoneX .4s forwards;
-      -moz-animation:iphoneX .4s forwards; /* Firefox */
-      -webkit-animation:iphoneX .4s forwards; /* Safari and Chrome */
-      -o-animation:iphoneX .5s forwards; /* Opera */
-    }
-  }
-
-  .tab-bottom-iphoneXS {
-    padding: 0 0 25px 0;
-    .van-tabbar-item {
-      animation:iphoneX .4s forwards;
-      -moz-animation:iphoneX .4s forwards; /* Firefox */
-      -webkit-animation:iphoneX .4s forwards; /* Safari and Chrome */
-      -o-animation:iphoneX .4s forwards; /* Opera */
-    }
-  }
+.tab-bottom {
+  padding: 0 0 25px 0;
 
   .van-tabbar-item {
-    color: #646566;
-    text-align: center;
-    margin-top: 20px;
-    font-size: 10px;
-    .tab-text {
-      margin-top: 2px;
-    }
+    margin-top: 25px;
+    animation: ordinary .4s forwards;
+    -moz-animation: ordinary .4s forwards; /* Firefox */
+    -webkit-animation: ordinary .4s forwards; /* Safari and Chrome */
+    -o-animation: ordinary .4s forwards; /* Opera */
   }
+}
 
-  .container {
-    font-size: 14px;
+@keyframes iphoneX {
+  from {
+    margin-top: 25px;
+  }
+  to {
+    margin-top: -5px;
+  }
+}
 
-    .classification {
-      padding: 1rem 0 1rem 0;
-      background: wheat;
-    }
+@keyframes ordinary {
+  from {
+    margin-top: -5px;
+  }
+  to {
+    margin-top: 25px;
+  }
+}
 
-  }
-  /deep/ .block {
-    .audio-player-close {
-      width: 1em;
-      height: 1em;
-    }
-  }
-  /*.van-divider {*/
-  /*margin: 5px 15px 0px 15px;*/
-  /*}*/
-  .file-description {
-    color: #646566;
-    font-size: 12px;
-  }
-  .van-col {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow:ellipsis;
-  }
+.tab-bottom-iphoneX {
+  padding: 0 0 25px 0;
 
-  .list-item {
-    padding: 5px 10px;
+  .van-tabbar-item {
+    animation: iphoneX .4s forwards;
+    -moz-animation: iphoneX .4s forwards; /* Firefox */
+    -webkit-animation: iphoneX .4s forwards; /* Safari and Chrome */
+    -o-animation: iphoneX .5s forwards; /* Opera */
+  }
+}
 
-    .list-cell-icon {
-      font-size: 18px;
-    }
+.tab-bottom-iphoneXS {
+  padding: 0 0 25px 0;
 
-    .list-item-content {
-      margin-left: 5px;
-    }
+  .van-tabbar-item {
+    animation: iphoneX .4s forwards;
+    -moz-animation: iphoneX .4s forwards; /* Firefox */
+    -webkit-animation: iphoneX .4s forwards; /* Safari and Chrome */
+    -o-animation: iphoneX .4s forwards; /* Opera */
+  }
+}
 
-    /deep/ .svg-icon {
-      width: 2.5em;
-      height: 2.5em;
-    }
-  }
-  .overlay-content-class {
-    -webkit-transition: all .1s ease-in-out 0s;
-    transition: all .1s ease-in-out 0s;
-    box-shadow: 2px 3px 3px #888888;
+.van-tabbar-item {
+  color: #646566;
+  text-align: center;
+  margin-top: 20px;
+  font-size: 10px;
 
+  .tab-text {
+    margin-top: 2px;
   }
+}
 
-  .list-item:active {
-    background-color: #bfcbd930;
-  }
+.container {
+  font-size: 14px;
 
-  /deep/.van-sticky {
-    background: inherit;
-    -webkit-backdrop-filter: saturate(180%) blur(10px);
-    backdrop-filter: saturate(180%) blur(10px);
-    background-color: rgba(255,255,255,0.72);
-    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.25);
-  }
-
-  [class*=van-hairline]::after {
-    border: 0 solid rgba(255,255,255,0.72);
-  }
-
-  /deep/ .van-sticky--fixed {
-    z-index: 1;
-  }
-
-  .van-nav-bar {
-    /*height: 59px;*/
-    /*line-height: 59px;*/
-    background-color: unset;
-    -webkit-transition: all .15s ease-in-out 0s;
-    transition: all .15s ease-in-out 0s;
-    /*position: relative;*/
-    /*box-shadow: 4px 0 2px rgba(0,0,0,0.5);*/
-  }
-  .van-nav-bar::after{
-    /*background: inherit;*/
-    /*!*-webkit-filter: blur(15px);*!*/
-    /*!*filter: blur(20px);*!*/
-    /*-webkit-backdrop-filter: saturate(180%) blur(20px);*/
-    /*backdrop-filter: saturate(180%) blur(20px);*/
-    /*background-color: rgba(255,255,255,0.72);*/
-  }
-
-  .van-overlay {
-    -webkit-backdrop-filter: saturate(180%) blur(1.5px);
-    backdrop-filter: saturate(180%) blur(1.5px);
-    background-color: rgba(0,0,0,.7);
-  }
-
-  .van-nav-bar__title {
-    width: 30%;
-    position: absolute;
-    margin-left: 35%;
-    z-index: 11;
-  }
-
-  .van-nav-bar__left {
-    //  max-width: 30%;
-    z-index: 11;
-    .van-icon-arrow-left {
-      font-size: 24px;
-    }
-  }
-  /*.van-nav-bar__left:active {*/
-    /*background-color: #f8f8f8;*/
-    /*!*background-color: hsl(0, 94%, 47%);*!*/
-  /*}*/
-  .van-nav-bar__right {
-    z-index: 11;
-  }
-  .van-nav-bar__arrow+.van-nav-bar__text {
-    max-width: 7.5rem;
-    min-width: 5.5rem;
-    text-align: left;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow:ellipsis;
-  }
-
-  .new-folder-input /deep/ .van-field__body{
-    height: 40px;
-  }
-
-  .newFileMenu ul {
-    list-style: none;
-    padding-inline-start: 0px;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .newFileMenu {
-    color: #000000db;
-    background-color: #efefef;
-    padding: 1px 0;
-  }
-  /deep/.menu-background::after{
-    background: inherit;
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-    backdrop-filter: saturate(180%) blur(20px);
-    background-color: rgba(255,255,255,0.72);
-  }
-  .newFileMenu li {
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    font-size: 1em;
-    min-width: 136px;
-    height: 3em;
-  }
-
-  .newFileMenu .remove {
-    color: rgba(255, 0, 0, 0.8);
-  }
-
-  .newFileMenu .menu-list-first li:active {
-    border-top-left-radius:1rem;
-    border-top-right-radius:1rem;
-    background-color: #E1E1E1;
-  }
-  .newFileMenu .menu-list li:active {
-    background-color: #E1E1E1;
-  }
-  .newFileMenu .menu-list-last li:active {
-    border-bottom-right-radius:1rem;
-    border-bottom-left-radius:1rem;
-    background-color: #E1E1E1;
-  }
-
-  /*.newFileMenu li:active {*/
-  /*cursor: pointer;*/
-  /*border-radius: 1rem;*/
-  /*background-color: #cccccc;*/
-  /*}*/
-
-  .newFileMenu li .menuitem {
-    cursor: pointer;
-    line-height: 3em;;
-    margin-left: 10%;
-  }
-  .newFileMenu li .menuitem .text {
-    cursor: pointer;
-    margin-left: 10%;
-    font-weight: normal;
-  }
-  .newFileMenu li .menuitem .svg-icon {
-    width: 1rem;
-    height: 1rem;
-  }
-  /deep/ .ctx-menu-container {
-    top: unset;
-    border: 1px solid rgba(0,0,0,.15);
-    border-radius: 1rem;
-    -webkit-box-shadow: 0 0 0 #ccc;
-    box-shadow: 0 0 0 #ccc;
-  }
-  .header-button {
-    margin: 0 -16px;
-    padding: 0 16px;
-  }
-  .header-button-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-    vertical-align: middle;
-  }
-  .header-button:active {
-    background-color: #f2f3f5;
-  }
-  .left-menu {
-    padding: 1rem 0 0 0;
-    height: 100%;
-    width: 100%;
-    text-align: center;
-  }
-  .logout {
-    padding: 1rem 0 0 0;
-  }
   .classification {
-    padding: 1rem 0 0 0;
-    /deep/.van-cell:active {
-      background-color: #f8f8f8;
+    padding: 1rem 0 1rem 0;
+    background: wheat;
+  }
+
+}
+
+/deep/ .block {
+  .audio-player-close {
+    width: 1em;
+    height: 1em;
+  }
+}
+
+/*.van-divider {*/
+/*margin: 5px 15px 0px 15px;*/
+/*}*/
+.file-description {
+  color: #646566;
+  font-size: 12px;
+}
+
+.van-col {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.list-item {
+  padding: 5px 10px;
+
+  .list-cell-icon {
+    font-size: 18px;
+  }
+
+  .list-item-content {
+    margin-left: 5px;
+  }
+
+  /deep/ .svg-icon {
+    width: 2.5em;
+    height: 2.5em;
+  }
+}
+
+.overlay-content-class {
+  -webkit-transition: all .1s ease-in-out 0s;
+  transition: all .1s ease-in-out 0s;
+  box-shadow: 2px 3px 3px #888888;
+
+}
+
+.list-item:active {
+  background-color: #bfcbd930;
+}
+
+/deep/ .van-sticky {
+  background: inherit;
+  -webkit-backdrop-filter: saturate(180%) blur(10px);
+  backdrop-filter: saturate(180%) blur(10px);
+  background-color: rgba(255, 255, 255, 0.72);
+  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.25);
+}
+
+[class*=van-hairline]::after {
+  border: 0 solid rgba(255, 255, 255, 0.72);
+}
+
+/deep/ .van-sticky--fixed {
+  z-index: 1;
+}
+
+.van-nav-bar {
+  /*height: 59px;*/
+  /*line-height: 59px;*/
+  background-color: unset;
+  -webkit-transition: all .15s ease-in-out 0s;
+  transition: all .15s ease-in-out 0s;
+  /*position: relative;*/
+  /*box-shadow: 4px 0 2px rgba(0,0,0,0.5);*/
+}
+
+.van-nav-bar::after {
+  /*background: inherit;*/
+  /*!*-webkit-filter: blur(15px);*!*/
+  /*!*filter: blur(20px);*!*/
+  /*-webkit-backdrop-filter: saturate(180%) blur(20px);*/
+  /*backdrop-filter: saturate(180%) blur(20px);*/
+  /*background-color: rgba(255,255,255,0.72);*/
+}
+
+.van-overlay {
+  -webkit-backdrop-filter: saturate(180%) blur(1.5px);
+  backdrop-filter: saturate(180%) blur(1.5px);
+  background-color: rgba(0, 0, 0, .7);
+}
+
+.van-nav-bar__title {
+  width: 30%;
+  position: absolute;
+  margin-left: 35%;
+  z-index: 11;
+}
+
+.van-nav-bar__left {
+  //  max-width: 30%;
+  z-index: 11;
+
+  .van-icon-arrow-left {
+    font-size: 24px;
+  }
+}
+
+/*.van-nav-bar__left:active {*/
+/*background-color: #f8f8f8;*/
+/*!*background-color: hsl(0, 94%, 47%);*!*/
+/*}*/
+.van-nav-bar__right {
+  z-index: 11;
+}
+
+.van-nav-bar__arrow + .van-nav-bar__text {
+  max-width: 7.5rem;
+  min-width: 5.5rem;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.new-folder-input /deep/ .van-field__body {
+  height: 40px;
+}
+
+.newFileMenu ul {
+  list-style: none;
+  padding-inline-start: 0px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.newFileMenu {
+  color: #000000db;
+  background-color: #efefef;
+  padding: 1px 0;
+}
+
+/deep/ .menu-background::after {
+  background: inherit;
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: rgba(255, 255, 255, 0.72);
+}
+
+.newFileMenu li {
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  font-size: 1em;
+  min-width: 136px;
+  height: 3em;
+}
+
+.newFileMenu .remove {
+  color: rgba(255, 0, 0, 0.8);
+}
+
+.newFileMenu .menu-list-first li:active {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  background-color: #E1E1E1;
+}
+
+.newFileMenu .menu-list li:active {
+  background-color: #E1E1E1;
+}
+
+.newFileMenu .menu-list-last li:active {
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+  background-color: #E1E1E1;
+}
+
+/*.newFileMenu li:active {*/
+/*cursor: pointer;*/
+/*border-radius: 1rem;*/
+/*background-color: #cccccc;*/
+/*}*/
+
+.newFileMenu li .menuitem {
+  cursor: pointer;
+  line-height: 3em;;
+  margin-left: 10%;
+}
+
+.newFileMenu li .menuitem .text {
+  cursor: pointer;
+  margin-left: 10%;
+  font-weight: normal;
+}
+
+.newFileMenu li .menuitem .svg-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+/deep/ .ctx-menu-container {
+  top: unset;
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-radius: 1rem;
+  -webkit-box-shadow: 0 0 0 #ccc;
+  box-shadow: 0 0 0 #ccc;
+}
+
+.header-button {
+  margin: 0 -16px;
+  padding: 0 16px;
+}
+
+.header-button-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  vertical-align: middle;
+}
+
+.header-button:active {
+  background-color: #f2f3f5;
+}
+
+.left-menu {
+  padding: 1rem 0 0 0;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+}
+
+.logout {
+  padding: 1rem 0 0 0;
+}
+
+.classification {
+  padding: 1rem 0 0 0;
+
+  /deep/ .van-cell:active {
+    background-color: #f8f8f8;
+  }
+}
+
+.searchbar {
+  height: 48px;
+  background-color: unset;
+  -webkit-transition: all .3s ease-in-out 0s;
+  transition: all .3s ease-in-out 0s;
+  /*background: inherit;*/
+  /*background-color: #fff;*/
+  /*-webkit-backdrop-filter: saturate(180%) blur(20px);*/
+  /*backdrop-filter: saturate(180%) blur(20px);*/
+  /*background-color: rgba(255,255,255,0.72);*/
+}
+
+/*.searchbar::after{*/
+/*background: inherit;*/
+/*background-color: #fff;*/
+/*-webkit-backdrop-filter: saturate(180%) blur(20px);*/
+/*backdrop-filter: saturate(180%) blur(20px);*/
+/*background-color: rgba(255,255,255,0.72);*/
+/*}*/
+.van-search {
+  padding: 0 12px;
+}
+
+.van-search__action {
+  -webkit-transition: all .3s ease-in-out 0s;
+  transition: all .3s ease-in-out 0s;
+  margin-right: -44px;
+  visibility: hidden;
+}
+
+.search-result {
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.search-result-no {
+  height: 80px;
+  line-height: 80px;
+  font-weight: 600;
+  font-size: 20px;
+  text-align: center;
+}
+
+.operating-header {
+  .operating-header-col {
+    height: 28px;
+    color: #1989fa;
+
+    .sortable {
+      font-size: 14px !important;
     }
-  }
-  .searchbar{
-    height: 48px;
-    background-color: unset;
-    -webkit-transition: all .3s ease-in-out 0s;
-    transition: all .3s ease-in-out 0s;
-    /*background: inherit;*/
-    /*background-color: #fff;*/
-    /*-webkit-backdrop-filter: saturate(180%) blur(20px);*/
-    /*backdrop-filter: saturate(180%) blur(20px);*/
-    /*background-color: rgba(255,255,255,0.72);*/
-  }
-  /*.searchbar::after{*/
-    /*background: inherit;*/
-    /*background-color: #fff;*/
-    /*-webkit-backdrop-filter: saturate(180%) blur(20px);*/
-    /*backdrop-filter: saturate(180%) blur(20px);*/
-    /*background-color: rgba(255,255,255,0.72);*/
-  /*}*/
-  .van-search {
-    padding:0 12px;
-  }
-  .van-search__action {
-    -webkit-transition: all .3s ease-in-out 0s;
-    transition: all .3s ease-in-out 0s;
-    margin-right: -44px;
-    visibility: hidden;
-  }
-  .search-result {
-    font-weight: 600;
-    font-size: 20px;
-  }
-  .search-result-no {
-    height: 80px;
-    line-height: 80px;
-    font-weight: 600;
-    font-size: 20px;
-    text-align: center;
-  }
-  .operating-header {
-    .operating-header-col {
-      height: 28px;
+
+    .van-icon {
+      line-height: 28px;
+      font-size: 20px;
       color: #1989fa;
-      .sortable {
-        font-size: 14px!important;
-      }
-      .van-icon{
-        line-height: 28px;
-        font-size: 20px;
-        color: #1989fa;
-      }
-    }
-    .operating-header-col:active {
-      color: #C2CCD1;
-      .van-icon{
-        color: #C2CCD1;
-      }
     }
   }
 
-  /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;
+  .operating-header-col:active {
+    color: #C2CCD1;
+
+    .van-icon {
+      color: #C2CCD1;
+    }
   }
+}
+
+/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/ .van-grid-item__content {
+  padding: 0px;
+
+  .grid-item-icon {
+    svg {
+      width: 4rem;
+      height: 4rem;
+    }
+
+    .favorite.svg-icon {
+      width: 1.5rem !important;
+      height: 1.5rem !important;
+      margin: 15px 10px;
+    }
+
+    .el-image {
+      width: 4rem !important;
+      height: 4rem !important;
+    }
+  }
+}
+.file-item-checkbox {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 1;
+}
 </style>