diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index 9a0a7e4..f54f6e1 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -66,13 +66,13 @@
       </el-container>
     </div>
   </div>
-  <div class="preview-XML">
-    <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
+  <div>
+    <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%" append-to-body>
       <highlightjs :code="xmlStr" language="XML" />
     </el-dialog>
   </div>
   <div>
-    <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%">
+    <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%" append-to-body>
       <div style="text-align: center" v-html="svgData" />
     </el-dialog>
   </div>
@@ -361,18 +361,16 @@ defineExpose({
     }
   }
 }
-.preview-XML {
-  pre {
-    margin: 0;
-    height: 100%;
-    max-height: calc(80vh - 32px);
-    overflow-x: hidden;
-    overflow-y: auto;
-    :deep(.hljs) {
-      word-break: break-word;
-      white-space: pre-wrap;
-      padding: 0.5em;
-    }
+pre {
+  margin: 0;
+  height: 100%;
+  max-height: calc(80vh - 32px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  :deep(.hljs) {
+    word-break: break-word;
+    white-space: pre-wrap;
+    padding: 0.5em;
   }
 }