feat 视频位置问题修复

src/layout/components/notice/index.vue

@@ -27,7 +27,6 @@
       :title="dialog.title"
       width="500px"
       class="monitor-dialog"
-      append-to-body
       :before-close="handleMonitorDialogClose"
       fullscreen
       destroy-on-close
@@ -50,6 +49,7 @@
 import { useNoticeStore } from '@/store/modules/notice';
 import { listNotice } from '@/api/system/notice';
 import { initHls, destroyHls } from '@/utils/video';
+import { onBeforeRouteLeave } from 'vue-router';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -179,17 +179,72 @@ onMounted(() => {
     console.log('消息列表:', newsList.value);
   });
 });
+
+onBeforeRouteLeave(() => {
+  dialog.visible = false;
+  monitorVideoUrl.value = '';
+});
 </script>
 
 <style lang="scss" scoped>
 /* 全屏监控弹窗：占满视口、禁止外层滚动，视频在可视区内尽可能放大 */
-.monitor-video-stack {
+:deep(.monitor-dialog.el-dialog) {
   display: flex;
-  justify-content: center;
-  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+  max-height: 100vh;
+  margin: 0;
+  overflow: hidden;
 }
+
+:deep(.monitor-dialog .el-dialog__header) {
+  flex-shrink: 0;
+  margin-right: 0;
+}
+
+:deep(.monitor-dialog .el-dialog__body) {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.monitor-video-wrap {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  background: #000;
+}
+
+.monitor-video-stack {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
 .monitor-video {
-  height: 679px;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; //cover裁剪
+  background: #000;
+}
+
+.monitor-draw-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  cursor: crosshair;
+  background: transparent;
 }
 
 .layout-navbars-breadcrumb-user-news {