feat：完善功能

src/components/VideoDialog/index.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="dialog">
     <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
-      <video class="video" ref="videoRef" muted autoplay controls style="object-fit: cover">
+      <video
+        v-if="src"
+        class="video"
+        ref="videoRef"
+        muted
+        autoplay
+        controls
+        style="object-fit: cover"
+      >
         <source src="" type="application/x-mpegURL" />
       </video>
+      <p v-else class="none">暂无信号</p>
       <img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
     </el-dialog>
   </div>
@@ -37,7 +46,11 @@
   )
 
   const init = () => {
-    const hls = new Hls()
+    const hls = new Hls({
+      maxBufferLength: 10, // 最大缓冲长度（秒）
+      maxMaxBufferLength: 15, // 缓冲区长度的上限
+      maxBufferSize: 15 * 1000 * 1000 // 最大缓冲大小（字节）
+    })
     hls.loadSource(props.src)
     hls.attachMedia(videoRef.value)
     hls.on(Hls.Events.MANIFEST_PARSED, () => {
@@ -49,10 +62,23 @@
 <style scoped lang="scss">
   .dialog {
     z-index: 9999;
+    .none {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      color: #fff;
+      font-weight: bold;
+      font-size: vw(30);
+      transform: translate(-50%, -50%);
+      z-index: 999;
+    }
     :deep(.el-dialog) {
-      width: vw(1600);
-      height: vw(900);
-      padding: 0;
+      position: relative;
+      width: vw(1660);
+      height: vw(980);
+      padding: vw(40) vw(30) vw(30) vw(30);
+      background-image: url('@/assets/images/one-video-bg.png');
+      background-size: 100% 100%;
     }
     :deep(.el-dialog__header) {
       padding-bottom: 0 !important;
@@ -64,8 +90,8 @@
     .close {
       cursor: pointer;
       position: absolute;
-      right: vw(20);
-      top: vw(20);
+      right: vw(40);
+      top: vw(50);
       width: vw(60);
       z-index: 9999;
     }