md

src/features/invigilation/common/FlvMedia.vue

@@ -24,22 +24,23 @@
         <span>无视频源</span>
       </div>
     </div>
-    <div
-      v-if="liveUrl && !result.error && !loading && !hideAudioIcon"
-      class="media-video-muted"
-      @click.stop="videoMuted"
-    >
-      <i :class="['icon', !muted ? 'icon-audio-act' : 'icon-audio']"></i>
-    </div>
-    <div
-      v-if="liveUrl && !loading"
-      class="media-video-play media-video-refresh"
-      title="点击刷新"
-      @click.stop="reloadVideo"
-    >
-      <i class="el-icon-refresh"></i>
-    </div>
-    <!-- <div
+    <div class="media-video-actions">
+      <div
+        v-if="liveUrl && !result.error && !loading && !hideAudioIcon"
+        class="media-video-action media-video-muted"
+        @click.stop="videoMuted"
+      >
+        <i :class="['icon', !muted ? 'icon-audio-act' : 'icon-audio']"></i>
+      </div>
+      <div
+        v-if="liveUrl && !loading"
+        class="media-video-action media-video-refresh"
+        title="点击刷新"
+        @click.stop="reloadVideo"
+      >
+        <i class="el-icon-refresh"></i>
+      </div>
+      <!-- <div
       v-if="liveUrl && !result.error && !loading && flvPlayer"
       class="media-video-play"
       @click.stop="playOrPausePlayer"
@@ -48,6 +49,7 @@
         :class="[this.paused ? 'el-icon-video-play' : 'el-icon-video-pause']"
       ></i>
     </div> -->
+    </div>
   </div>
 </template>
 

src/features/invigilation/common/FlvMediaFlv.vue

@@ -24,22 +24,23 @@
         <span>无视频源</span>
       </div>
     </div>
-    <div
-      v-if="liveUrl && !result.error && !loading && !hideAudioIcon"
-      class="media-video-muted"
-      @click.stop="videoMuted"
-    >
-      <i :class="['icon', !muted ? 'icon-audio-act' : 'icon-audio']"></i>
-    </div>
-    <div
-      v-if="liveUrl && !loading"
-      class="media-video-play media-video-refresh"
-      title="点击刷新"
-      @click.stop="reloadVideo"
-    >
-      <i class="el-icon-refresh"></i>
-    </div>
-    <!-- <div
+    <div class="media-video-actions">
+      <div
+        v-if="liveUrl && !result.error && !loading && !hideAudioIcon"
+        class="media-video-action media-video-muted"
+        @click.stop="videoMuted"
+      >
+        <i :class="['icon', !muted ? 'icon-audio-act' : 'icon-audio']"></i>
+      </div>
+      <div
+        v-if="liveUrl && !loading"
+        class="media-video-action media-video-refresh"
+        title="点击刷新"
+        @click.stop="reloadVideo"
+      >
+        <i class="el-icon-refresh"></i>
+      </div>
+      <!-- <div
       v-if="liveUrl && !result.error && !loading && flvPlayer"
       class="media-video-play"
       @click.stop="playOrPausePlayer"
@@ -48,6 +49,7 @@
         :class="[this.paused ? 'el-icon-video-play' : 'el-icon-video-pause']"
       ></i>
     </div> -->
+    </div>
   </div>
 </template>
 

src/styles/base.scss

@@ -1690,45 +1690,37 @@ body {
       }
     }
   }
-  .media-video-muted {
+  .media-video-actions {
     position: absolute;
-    width: 28px;
     height: 28px;
     bottom: 10px;
     right: 10px;
     z-index: 100;
-    text-align: center;
-    line-height: 28px;
-    background-color: rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    cursor: pointer;
-
-    &:hover {
-      transform: scale(1.1, 1.1);
-    }
+    text-align: right;
   }
-  .media-video-play {
-    position: absolute;
+  .media-video-action {
+    display: inline-block;
+    vertical-align: middle;
     width: 28px;
     height: 28px;
-    bottom: 10px;
-    right: 43px;
-    z-index: 100;
     text-align: center;
     line-height: 28px;
-    font-size: 20px;
-    color: #ddd;
     background-color: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
+    color: #ddd;
+    font-size: 20px;
+    margin: 0 2px;
     cursor: pointer;
-
     &:hover {
       transform: scale(1.1, 1.1);
     }
   }
-  .media-video-refresh {
-    right: 10px;
-  }
+
+  // .media-video-play {
+  // }
+  // .media-video-refresh {
+  //   right: 10px;
+  // }
 }
 
 .cc-image-preview {