From 0c246004f07241043c7e51a6d3be2e0a74e8358b Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 1 Sep 2020 18:11:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E8=A7=86=E5=B1=8F?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E7=95=8C=E9=9D=A2=E7=9A=84=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E4=BD=8D=E7=BD=AE=E5=B9=B6=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/preview/AudioPreview.vue |  2 +-
 src/components/preview/VideoPreview.vue | 43 +++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/components/preview/AudioPreview.vue b/src/components/preview/AudioPreview.vue
index 3bffccb..e51a478 100644
--- a/src/components/preview/AudioPreview.vue
+++ b/src/components/preview/AudioPreview.vue
@@ -100,7 +100,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .aplayer {
   /* position: relative; */
   width: 460px;
diff --git a/src/components/preview/VideoPreview.vue b/src/components/preview/VideoPreview.vue
index 01ada5b..c95a142 100644
--- a/src/components/preview/VideoPreview.vue
+++ b/src/components/preview/VideoPreview.vue
@@ -2,14 +2,17 @@
 <div class="preview" v-if="show">
 <van-overlay :show="show">
   <div class="wrapper">
-    <div class="block">
+    <div class="block" @mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false">
+<!--      <div role="button" @click="close" class="viewer-button viewer-close" data-viewer-action="mix"></div>-->
+      <div v-show="pc?closeBarShow:true" class="close-bar" @click="close">
+        <svg-icon class="audio-player-close" icon-class="close"/>
+      </div>
       <video-player class="video-player vjs-custom-skin"
         ref="videoPlayer"
         :playsinline="true"
         :options="playerOptions">
       </video-player>
     </div>
-    <div role="button" @click="close" class="viewer-button viewer-close" data-viewer-action="mix"></div>
   </div>
 </van-overlay>
 </div>
@@ -45,6 +48,8 @@ export default {
     },
     data() {
       return {
+        closeBarShow: false,
+        pc: this.$pc,
         playerOptions: {
                     //播放速度
                     playbackRates: [0.5, 1.0, 1.5, 2.0],
@@ -105,7 +110,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .preview {
   position: fixed;
     top: 0;
@@ -125,6 +130,38 @@ export default {
     background-color: rgba(0,0,0,.7);
 }
 
+.block {
+  .close-bar {
+    z-index: 2006;
+    position: relative;
+    top: -36px;
+    right: -36px;
+    float: right;
+    width: 0;
+    height: 0;
+    border-radius: 36px;
+    border-width: 36px;
+    border-style: solid;
+    border-color: transparent transparent transparent #d4d4d475;
+    line-height: 36px;
+    transform: rotate(-45deg);
+  }
+
+  .close-bar:hover {
+    cursor: pointer;
+    border-color: transparent transparent transparent #69696975;
+  }
+
+  .audio-player-close {
+    transform: rotate(-45deg);
+    z-index: 2009;
+    position: absolute;
+    font-size: 18px;
+    top: -8px;
+    right: 13px;
+  }
+}
+
 .wrapper {
   display: flex;
   align-items: center;