feat：完善首页功能

src/components/VideoDialog/index.vue

@@ -0,0 +1,73 @@
+<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">
+        <source src="" type="application/x-mpegURL" />
+      </video>
+      <img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import Hls from 'hls.js'
+
+  const props = defineProps({
+    src: {
+      type: String,
+      default: ''
+    }
+  })
+
+  let modelValue = defineModel()
+  let videoRef = ref()
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val) {
+        nextTick(() => {
+          init()
+        })
+      }
+    },
+    {
+      immediate: true
+    }
+  )
+
+  const init = () => {
+    const hls = new Hls()
+    hls.loadSource(props.src)
+    hls.attachMedia(videoRef.value)
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      videoRef.value.play()
+    })
+  }
+</script>
+
+<style scoped lang="scss">
+  .dialog {
+    z-index: 9999;
+    :deep(.el-dialog) {
+      width: vw(2540);
+      height: vh(900);
+      padding: 0;
+    }
+    :deep(.el-dialog__header) {
+      padding-bottom: 0 !important;
+    }
+    .video {
+      width: vw(2540);
+      height: vh(900);
+    }
+    .close {
+      cursor: pointer;
+      position: absolute;
+      right: vw(20);
+      top: vw(20);
+      width: vw(60);
+      z-index: 9999;
+    }
+  }
+</style>