Просмотр исходного кода

fix: 23930 (v1.1.0全景看看)管理中心-我的素材-视频-鼠标悬浮后,没有播放按钮

任一存 3 лет назад
Родитель
Сommit
4a6deba5e2
1 измененных файлов с 28 добавлено и 0 удалено
  1. 28 0
      src/views/material/video/index.vue

+ 28 - 0
src/views/material/video/index.vue

@@ -79,6 +79,9 @@
             v-else-if="sub.type == 'image'"
             @click="previewVedio(item)"
           >
+            <div class="video-icon-mask">
+              <i class="iconfont icon-editor_play" />
+            </div>
             <img :src="`${data}` || $thumb" alt="" />
           </div>
           <span
@@ -381,6 +384,31 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.img {
+  position: relative;
+  .video-icon-mask {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    .icon-editor_play {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: #fff;
+      font-size: 20px;
+    }
+  }
+  &:hover {
+    .video-icon-mask {
+      display: block;
+    }
+  }
+}
 </style>
 <style lang="less" scoped>
 @import "../style.less";