From b2569db9a55804d67c5ea6b34547eb8706daae80 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Wed, 19 Feb 2020 23:01:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=8B=E6=8B=89=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                     |   5 +-
 src/views/demo/index_m.vue      | 213 +++++++++-----------------------
 src/views/home/mobile/index.vue |  51 +++++++-
 3 files changed, 109 insertions(+), 160 deletions(-)

diff --git a/src/main.js b/src/main.js
index 38a968d..a6a7764 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,7 +14,7 @@ import store from './store'
 import router from './router'
 // import WeVue from 'we-vue'
 // import 'we-vue/lib/style.css'
-import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem} from 'vant';
+import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet} from 'vant';
 
 import '@/icons' // icon
 import '@/permission' // permission control
@@ -58,6 +58,7 @@ Vue.use(NavBar);
 Vue.use(Icon);
 Vue.use(Tabbar);
 Vue.use(TabbarItem);
+Vue.use(ActionSheet);
 
 Vue.use(uploader)
 Vue.use(EVueContextmenu)
@@ -74,7 +75,7 @@ new Vue({
 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
   Vue.prototype.$pc = false
 } else {
-  Vue.prototype.$pc = false
+  Vue.prototype.$pc = true
   let winWidth = document.documentElement.offsetWidth ||
     document.body.offsetWidth
   winWidth = winWidth < 1366 ? 1366 : winWidth
diff --git a/src/views/demo/index_m.vue b/src/views/demo/index_m.vue
index 8c8d52e..1816ef6 100644
--- a/src/views/demo/index_m.vue
+++ b/src/views/demo/index_m.vue
@@ -1,160 +1,65 @@
 <template>
-  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      @load="getFileList"
-      >
-
-      <van-row class="classification">
-        <van-col span="6" align="center">
-          <svg-icon icon-class="image" />
-          <div>图片</div>
-        </van-col>
-        <van-col span="6" align="center">
-          <svg-icon icon-class="document" />
-          <div>文档</div>
-        </van-col>
-        <van-col span="6" align="center">
-          <svg-icon icon-class="video" />
-          <div>视屏</div>
-        </van-col>
-        <van-col span="6" align="center">
-          <svg-icon icon-class="audio" />
-          <div>音乐</div>
-        </van-col>
-      </van-row>
-
-      <!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name"></van-cell>-->
-      <!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name" :label="item.updateDate"></van-cell>-->
-      <van-swipe-cell v-for="(item,index) in fileList" :key="item.id" :title="item.name">
-        <van-divider v-if="index === 0" style="margin: 0 15px 0 15px;"></van-divider>
-        <van-row>
-          <van-col span="4" align="center">
-            <svg-icon v-if="item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />
-            <svg-icon v-if="item.isFolder" icon-class="folder" />
-            <svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
-            <svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />
-            <svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />
-            <el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>
-            <svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />
-            <svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />
-            <svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />
-            <svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />
-            <svg-icon v-else icon-class="file" />
-          </van-col>
-          <van-col span="16">
-            <van-col span="16">
-              {{item.name}}
-            </van-col>
-            <van-col span="16" class="file-description" justify="space-between">
-              <van-col span="8">
-                {{formatTime(item.agoTime)}}
-              </van-col>
-              <van-col span="8">
-                {{formatSize(item.size)}}
-              </van-col>
-            </van-col>
-          </van-col>
-          <van-col span="4"></van-col>
-        </van-row>
-
-        <van-button
-          slot="right"
-          square
-          text="删除"
-          type="danger"
-          class="delete-button">
-        </van-button>
-        <van-divider></van-divider>
-      </van-swipe-cell>
-    </van-list>
-  </van-pull-refresh>
+    <!-- 背景图高斯模糊效果 -->
+    <div class="bgFilter">
+        <div class="box">
+            <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img" class="bg">
+            <div class="content">
+                <!-- <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img"> -->
+                <div class="text">我是文字我是文字我是文字</div>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
-import 'vant/lib/button/style';
-import 'vant/lib/cell/style';
-import 'vant/lib/cell-group/style'
-import 'vant/lib/image/style';
-import 'vant/lib/list/style';
-import 'vant/lib/pull-refresh/style';
-import 'vant/lib/swipe-cell/style';
-import 'vant/lib/col/style';
-import 'vant/lib/row/style';
-import 'vant/lib/divider/style';
-
-import { getPath, getPathList, setPath, removePath } from '@/utils/path'
-import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
-import api from '@/api/upload-api'
-
 export default {
-  data() {
-    return {
-      fileList: [],
-      loading: false,
-      finished: false,
-      refreshing: false
-    };
-  },
-  methods: {
-    formatTime(time) {
-      return formatTime(time)
-    },
-    formatSize(size) {
-      return formatSize(size)
-    },
-    onRefresh() {
-      // 清空列表数据
-      this.finished = false;
-
-      // 重新加载数据
-      // 将 loading 设置为 true，表示处于加载状态
-      this.loading = true;
-      this.getFileList();
-    },
-    getFileList() {
-      this.loading = true
-      api.fileList({
-        userId: this.$store.state.user.userId,
-        currentDirectory: getPath(),
-        pageIndex: 1,
-        pageSize: 30
-      }).then(res => {
-        this.fileList = res.data
-        // 加载状态结束
-        this.loading = true;
-        this.refreshing = false;
-
-          // 数据全部加载完成
-          if (this.fileList.length >= res.count) {
-            this.finished = true;
-          }
-
-      }).catch(e => {})
-    },
-  }
-}
+    name: "bgFilter"
+};
 </script>
 <style lang="scss" scoped>
-  .svg-icon {
-    width: 2.5em;
-    height: 2.5em;
-  }
-  .van-divider {
-    margin: 5px 15px 5px 15px;
-  }
-  .file-description {
-    color: #646566;
-    font-size: 12px;
-    margin-top: 0.6rem;
-  }
-  .van-col {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow:ellipsis;
-  }
-  .classification {
-    padding: 1rem 0 1rem 0;
-  }
-</style>
+.bgFilter {
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    .box {
+        width: 700px;
+        height: 500px;
+        position: relative;
+        // 我是模糊的背景
+        .bg {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            overflow: hidden;
+            -webkit-filter: blur(8px);
+            -moz-filter: blur(8px);
+            -o-filter: blur(8px);
+            -ms-filter: blur(8px);
+            filter: blur(8px);
+        }
+        // 我是图片和上面的文字
+        .content {
+            .text {
+                width: 100%;
+                padding: 30px;
+                box-sizing: border-box;
+                background-color: rgba(255, 255, 255, 0.7);
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                z-index: 1;
+                text-align: right;
+            }
+            img {
+                position: absolute;
+                top: 50%;
+                left: 5%;
+                transform: translate(0, -50%);
+                z-index: 2;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue
index 8a776ff..268e99c 100644
--- a/src/views/home/mobile/index.vue
+++ b/src/views/home/mobile/index.vue
@@ -38,7 +38,7 @@
       <!--</van-nav-bar>-->
 
       <van-sticky :offset-top="0">
-        <div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div>
+        <!-- <div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div> -->
         <van-nav-bar
           v-if="pathList.length < 3"
           title="浏览"
@@ -148,6 +148,13 @@
       </van-tabbar>
     </div>
 
+    <van-action-sheet
+      v-model="actionSheetShow"
+      :actions="actions"
+      cancel-text="取消"
+      @cancel="onCancel"
+    />
+
   </div>
 </template>
 <script>
@@ -178,6 +185,7 @@
         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=',
         tabActive: 0,
         path: this.$route.query.path,
         fileList: [],
@@ -192,7 +200,13 @@
         },
         loading: false,
         finished: false,
-        refreshing: false
+        refreshing: false,
+        actionSheetShow: false, // 下拉菜单
+        actions: [
+          { name: '上传文件' },
+          { name: '上传文件夹' },
+          { name: '新建文件夹' }
+        ],
       };
     },
     mounted(){
@@ -282,6 +296,7 @@
       },
       // 点击右边按钮(标题)
       titleRightClick() {
+        this.actionSheetShow = true
         console.log('titleRightClick')
       },
       handleLink(item, index, isPushLink) {
@@ -441,6 +456,9 @@
           window.open(url, '_blank')
         }
       },
+      onCancel() {
+        this.actionSheetShow = false;
+      },
       swipeUp() {
         this.test = 10
         console.log(67)
@@ -507,6 +525,10 @@
     text-overflow:ellipsis;
   }
 
+  .van-list {
+    margin-bottom: 75px
+  }
+
   .list-item {
     padding: 5px 10px;
 
@@ -523,13 +545,34 @@
     background-color: #bfcbd930;
   }
 
+  .van-nav-bar {
+    background: #ffffffcc;
+    position: relative;
+    box-shadow: 4px 0px 2px rgba(0,0,0,0.5);
+  }
+  .van-nav-bar::after{
+    background: inherit;
+    -webkit-filter: blur(15px);
+    filter: blur(20px);
+}
+
   .van-nav-bar__title {
-    max-width: 30%;
+    width: 30%;
+    position: absolute;
+    margin-left: 35%;
+    z-index: 11;
   }
 
   .van-nav-bar__left {
-     max-width: 30%;
+    //  max-width: 30%;
+     z-index: 11;
    }
+   .van-nav-bar__left:active {
+    background-color: hsl(0, 94%, 47%);
+  }
+   .van-nav-bar__right {
+    z-index: 11;
+  }
   /*.van-nav-bar__left {*/
      /*left: 0;*/
   /*}*/