更新 disk 相关页面和接口

src/api/disk.js

@@ -1,6 +1,7 @@
 import { delete0, get, post } from '@/utils/request'
 
 const diskApi = {
+  getImageList: '/api/disk/image/list',
   getFolderTreeApi: '/api/disk/folder/tree',
   createFolderApi: '/api/disk/folder/add',
   addDiskFileApi: '/api/disk/file',
@@ -42,3 +43,7 @@ export function getFileUrl(fileType, fileId) {
 export function getFileDetail(fileId) {
   return get(diskApi.getFileDetailApi + '?fileId=' + fileId)
 }
+
+export function getImageList(searchForm) {
+  return get(diskApi.getImageList, searchForm)
+}

src/router/index.js

@@ -84,12 +84,14 @@ const DataSource = () => import('views/admin/DataSource')
 // 网盘主页
 // ********************************************************************************************************************
 const Disk = () => import('views/disk/Disk')
+const DiskOverview = () => import('views/disk/DiskOverview')
 const FileList = () => import('views/disk/FileList')
 const UploadFile = () => import('views/disk/UploadFile')
 const FileShare = () => import('views/disk/FileShare')
 const FileImage = () => import('views/disk/FileImage')
 const FileVideo = () => import('views/disk/FileVideo')
 const FileAudio = () => import('views/disk/FileAudio')
+const FileText = () => import('views/disk/FileText')
 
 // ********************************************************************************************************************
 // 使用安装路由插件
@@ -363,6 +365,12 @@ const routes = [
     component: Disk,
     meta: { needAuth: true },
     children: [
+      {
+        path: '',
+        name: '概览',
+        component: DiskOverview,
+        meta: { needAuth: true }
+      },
       {
         path: '/disk/list',
         name: '文件',
@@ -393,6 +401,12 @@ const routes = [
         component: FileAudio,
         meta: { needAuth: true }
       },
+      {
+        path: '/disk/text',
+        name: '文本',
+        component: FileText,
+        meta: { needAuth: true }
+      },
       {
         path: '/disk/share',
         name: '分享',

src/views/disk/Disk.vue

@@ -59,6 +59,10 @@
             <i class="el-icon-headset" />
             <span slot="title">音频</span>
           </el-menu-item>
+          <el-menu-item index="/disk/text">
+            <i class="el-icon-headset" />
+            <span slot="title">文本</span>
+          </el-menu-item>
           <el-menu-item index="/disk/share">
             <i class="el-icon-share" />
             <span slot="title">分享</span>

src/views/disk/DiskOverview.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-row>
+    <el-row>
+      <el-button size="mini" type="danger" @click="loadAll">网盘概览</el-button>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import {
+  getImageList
+} from '@/api/disk'
+
+export default {
+  name: 'DiskOverview',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      audioList: [],
+      searchForm: {
+        pageNumber: 1,
+        fileType: 1003
+      }
+    }
+  },
+  created() {
+    document.title = '网盘概览'
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.dataList = []
+      getImageList(this.searchForm).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.totalSize = resp.data.totalSize
+          for (const item of this.dataList) {
+            console.log(item)
+          }
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    loadAll() {
+    }
+  }
+}
+</script>
+
+<style scoped>
+.time {
+  font-size: 15px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.tit {
+  font-weight: 700;
+  font-size: 18px;
+
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /*行数*/
+  -webkit-box-orient: vertical;
+}
+
+.num {
+  position: relative;
+  font-size: 15px;
+  padding-top: 9px;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .tit {
+    font-weight: 600;
+    font-size: 12px;
+    height: 32px;
+  }
+  .time {
+    font-size: 10px;
+    color: #999;
+  }
+  .num {
+    font-size: 9px;
+    padding-top: 3px;
+  }
+  .bottom {
+    margin-top: 2px;
+    line-height: 7px;
+  }
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 175px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+/*.card:hover {
+  !*鼠标放上之后元素变成1.06倍大小*!
+  transform: scale(1.06);
+}*/
+.imgs {
+  position: relative;
+}
+.play-icon {
+  position: absolute;
+  /*top: -15px;*/
+  right: 2%;
+  bottom: 5px;
+  z-index: 7;
+  width: 40px;
+}
+</style>

src/views/disk/FileAudio.vue

@@ -1,36 +1,233 @@
 <template>
   <el-row>
-    <span>音频文件</span>
+    <el-row>
+      <el-button size="mini" type="danger" @click="loadAll">加载视频</el-button>
+    </el-row>
+    <el-row>
+      <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
+            </div>
+            <div class="text item">
+              <audio-player
+                :id="item.fileId"
+                ref="audioPlayer"
+                :is-loop="false"
+                :show-prev-button="false"
+                :show-next-button="false"
+                :show-playback-rate="false"
+                :audio-list="audioList.map(elm => elm.url)"
+                :before-play="handleBeforePlay"
+                theme-color="#87CEFA"
+                @playing="onPlaying"
+                @on-progress-move="onProgressMove"
+                @ended="onEnd"
+              />
+            </div>
+          </el-card>
+        </el-row>
+      </el-col>
+    </el-row>
   </el-row>
 </template>
 
 <script>
+import DPlayer from 'dplayer'
+import {
+  getImageList
+} from '@/api/disk'
+import SocketInstance from '@/utils/ws/socket-instance'
+
 export default {
-  name: 'FileAudio',
+  name: 'FileVideo',
   data() {
     return {
+      DPlayer,
+      dplayer: null,
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
-      data: {
-      },
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      audioList: [],
+      searchForm: {
+        pageNumber: 1,
+        fileType: 1003
+      }
     }
   },
   created() {
     document.title = '我的音频'
+    this.getData()
   },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
+  methods: {
+    getData() {
+      this.dataList = []
+      getImageList(this.searchForm).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.totalSize = resp.data.totalSize
+          for (const item of this.dataList) {
+            console.log(item)
+          }
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    initMp4Player(fileId, videoUrl) {
+      return new DPlayer({
+        container: document.getElementById(fileId),
+        lang: 'zh-cn',
+        screenshot: false,
+        autoplay: false,
+        volume: 0.1,
+        mutex: false,
+        video: {
+          url: videoUrl
+        }
+      })
+    },
+    loadAll() {
+      for (const item of this.dataList) {
+        /* const elem = document.getElementById(item.fileId)
+        console.log(elem)*/
+        this.initMp4Player(item.fileId, item.url)
       }
+    },
+    // 播放前做的事
+    handleBeforePlay(next) {
+      // 这里可以做一些事情...
+      // this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
+      this.$refs.audioPlayer.$refs.audio.currentTime = this.audioInfo.currentTime
+      // 开始播放
+      next()
+    },
+    handlePlaySpecify() {
+      this.$refs.audioPlayer.currentPlayIndex = 1
+      this.$nextTick(() => {
+        this.$refs.audioPlayer.play()
+        this.title = this.audioList[
+          this.$refs.audioPlayer.currentPlayIndex
+        ].name
+      })
+    },
+    onPlaying() {
+      const jsonData = {}
+      jsonData.videoId = this.audioInfo.audioId
+      jsonData.currentTime = this.$refs.audioPlayer.$refs.audio.currentTime
+      SocketInstance.send(jsonData)
+    },
+    onProgressMove(event) {
+    },
+    onEnd(event) {
     }
-  },
-  methods: {
   }
 }
 </script>
 
 <style scoped>
+.time {
+  font-size: 15px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.tit {
+  font-weight: 700;
+  font-size: 18px;
+
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /*行数*/
+  -webkit-box-orient: vertical;
+}
+
+.num {
+  position: relative;
+  font-size: 15px;
+  padding-top: 9px;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .tit {
+    font-weight: 600;
+    font-size: 12px;
+    height: 32px;
+  }
+  .time {
+    font-size: 10px;
+    color: #999;
+  }
+  .num {
+    font-size: 9px;
+    padding-top: 3px;
+  }
+  .bottom {
+    margin-top: 2px;
+    line-height: 7px;
+  }
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 175px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+/*.card:hover {
+  !*鼠标放上之后元素变成1.06倍大小*!
+  transform: scale(1.06);
+}*/
+.imgs {
+  position: relative;
+}
+.play-icon {
+  position: absolute;
+  /*top: -15px;*/
+  right: 2%;
+  bottom: 5px;
+  z-index: 7;
+  width: 40px;
+}
 </style>

src/views/disk/FileImage.vue

@@ -1,36 +1,167 @@
 <template>
   <el-row>
-    <span>图片文件</span>
+    <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <router-link target="_blank" :to="`/image/album/${item.fileId}`">
+          <div class="imgs">
+            <el-image
+              lazy
+              fit="cover"
+              :src="item.url"
+              class="coverImg"
+            />
+          </div>
+        </router-link>
+        <div style="padding: 14px">
+          <router-link target="_blank" :to="`/image/album/${item.fileId}`">
+            <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
+          </router-link>
+        </div>
+      </el-row>
+    </el-col>
   </el-row>
 </template>
 
 <script>
+import {
+  getImageList
+} from '@/api/disk'
+
 export default {
   name: 'FileImage',
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
-      data: {
-      },
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      searchForm: {
+        pageNumber: 1,
+        fileType: 1001
+      }
     }
   },
   created() {
     document.title = '我的图片'
-  },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
-      }
-    }
+    this.getData()
   },
   methods: {
+    getData() {
+      this.dataList = []
+      getImageList(this.searchForm).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.totalSize = resp.data.totalSize
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    }
   }
 }
 </script>
 
 <style scoped>
+.time {
+  font-size: 15px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.tit {
+  font-weight: 700;
+  font-size: 18px;
+
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /*行数*/
+  -webkit-box-orient: vertical;
+}
+
+.num {
+  position: relative;
+  font-size: 15px;
+  padding-top: 9px;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .tit {
+    font-weight: 600;
+    font-size: 12px;
+    height: 32px;
+  }
+  .time {
+    font-size: 10px;
+    color: #999;
+  }
+  .num {
+    font-size: 9px;
+    padding-top: 3px;
+  }
+  .bottom {
+    margin-top: 2px;
+    line-height: 7px;
+  }
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 175px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+/*.card:hover {
+  !*鼠标放上之后元素变成1.06倍大小*!
+  transform: scale(1.06);
+}*/
+.imgs {
+  position: relative;
+}
+.play-icon {
+  position: absolute;
+  /*top: -15px;*/
+  right: 2%;
+  bottom: 5px;
+  z-index: 7;
+  width: 40px;
+}
 </style>

src/views/disk/FileList.vue

@@ -295,9 +295,9 @@ export default {
       // 回到顶部
       scrollTo(0, 0)
     },
-    getData(searchForm) {
+    getData() {
       this.dataList = []
-      getFileList(searchForm).then(resp => {
+      getFileList(this.searchForm).then(resp => {
         if (resp.code === 0) {
           this.dataList = resp.data.fileList.list
           this.totalSize = resp.data.fileList.totalSize

src/views/disk/FileText.vue

@@ -0,0 +1,175 @@
+<template>
+  <el-row>
+    <el-row>
+      <el-button size="mini" type="danger" @click="loadAll">加载视频</el-button>
+    </el-row>
+    <el-row>
+      <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
+            </div>
+            <div class="text item">
+            </div>
+          </el-card>
+        </el-row>
+      </el-col>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import {
+  getImageList
+} from '@/api/disk'
+import {get} from "@/utils/request";
+
+export default {
+  name: 'FileText',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      audioList: [],
+      searchForm: {
+        pageNumber: 1,
+        fileType: 1004
+      }
+    }
+  },
+  created() {
+    document.title = '我的文本'
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.dataList = []
+      getImageList(this.searchForm).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.totalSize = resp.data.totalSize
+          for (const item of this.dataList) {
+            console.log(item)
+          }
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    loadAll() {
+      const item = this.dataList[0]
+      get(item.url).then(resp => {
+        console.log(resp)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.time {
+  font-size: 15px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.tit {
+  font-weight: 700;
+  font-size: 18px;
+
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /*行数*/
+  -webkit-box-orient: vertical;
+}
+
+.num {
+  position: relative;
+  font-size: 15px;
+  padding-top: 9px;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .tit {
+    font-weight: 600;
+    font-size: 12px;
+    height: 32px;
+  }
+  .time {
+    font-size: 10px;
+    color: #999;
+  }
+  .num {
+    font-size: 9px;
+    padding-top: 3px;
+  }
+  .bottom {
+    margin-top: 2px;
+    line-height: 7px;
+  }
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 175px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+/*.card:hover {
+  !*鼠标放上之后元素变成1.06倍大小*!
+  transform: scale(1.06);
+}*/
+.imgs {
+  position: relative;
+}
+.play-icon {
+  position: absolute;
+  /*top: -15px;*/
+  right: 2%;
+  bottom: 5px;
+  z-index: 7;
+  width: 40px;
+}
+</style>

src/views/disk/FileVideo.vue

@@ -1,36 +1,194 @@
 <template>
   <el-row>
-    <span>视频文件</span>
+    <el-row>
+      <el-button size="mini" type="danger" @click="loadAll">加载视频</el-button>
+    </el-row>
+    <el-row>
+      <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
+            </div>
+            <div class="text item">
+              <div :id="item.fileId" ref="dplayer" style="height: 240px;" />
+            </div>
+          </el-card>
+        </el-row>
+      </el-col>
+    </el-row>
   </el-row>
 </template>
 
 <script>
+import DPlayer from 'dplayer'
+import {
+  getImageList
+} from '@/api/disk'
+
 export default {
   name: 'FileVideo',
   data() {
     return {
+      DPlayer,
+      dplayer: null,
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
-      data: {
-      },
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      searchForm: {
+        pageNumber: 1,
+        fileType: 1002
+      }
     }
   },
   created() {
     document.title = '我的视频'
+    this.getData()
   },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
+  methods: {
+    getData() {
+      this.dataList = []
+      getImageList(this.searchForm).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.totalSize = resp.data.totalSize
+          for (const item of this.dataList) {
+            console.log(item.url)
+            const elem = document.getElementById(item.fileId)
+            console.log(elem)
+            // this.initMp4Player(item.fileId, item.url)
+          }
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    initMp4Player(fileId, videoUrl) {
+      return new DPlayer({
+        container: document.getElementById(fileId),
+        lang: 'zh-cn',
+        screenshot: false,
+        autoplay: false,
+        volume: 0.1,
+        mutex: true,
+        video: {
+          url: videoUrl
+        }
+      })
+    },
+    loadAll() {
+      for (const item of this.dataList) {
+        /* const elem = document.getElementById(item.fileId)
+        console.log(elem)*/
+        this.initMp4Player(item.fileId, item.url)
       }
     }
-  },
-  methods: {
   }
 }
 </script>
 
 <style scoped>
+.time {
+  font-size: 15px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.tit {
+  font-weight: 700;
+  font-size: 18px;
+
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /*行数*/
+  -webkit-box-orient: vertical;
+}
+
+.num {
+  position: relative;
+  font-size: 15px;
+  padding-top: 9px;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .tit {
+    font-weight: 600;
+    font-size: 12px;
+    height: 32px;
+  }
+  .time {
+    font-size: 10px;
+    color: #999;
+  }
+  .num {
+    font-size: 9px;
+    padding-top: 3px;
+  }
+  .bottom {
+    margin-top: 2px;
+    line-height: 7px;
+  }
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 175px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+/*.card:hover {
+  !*鼠标放上之后元素变成1.06倍大小*!
+  transform: scale(1.06);
+}*/
+.imgs {
+  position: relative;
+}
+.play-icon {
+  position: absolute;
+  /*top: -15px;*/
+  right: 2%;
+  bottom: 5px;
+  z-index: 7;
+  width: 40px;
+}
 </style>