diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index d288ccb07d..2428dca442 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="canvasInfo" :style="customStyle" class="bg">
+  <div id="canvasInfoTemp" :style="customStyle" class="bg">
     <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
       {{ $t('panel.panelNull') }}
     </el-row>
@@ -101,7 +101,7 @@ export default {
     const _this = this
     const erd = elementResizeDetectorMaker()
     // 监听div变动事件
-    erd.listenTo(document.getElementById('canvasInfo'), element => {
+    erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
       _this.$nextTick(() => {
         _this.restore()
       })
@@ -116,8 +116,8 @@ export default {
     getStyle,
     restore() {
       debugger
-      const canvasHeight = document.getElementById('canvasInfo').offsetHeight
-      const canvasWidth = document.getElementById('canvasInfo').offsetWidth
+      const canvasHeight = document.getElementById('canvasInfoTemp').offsetHeight
+      const canvasWidth = document.getElementById('canvasInfoTemp').offsetWidth
       this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
       this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
       if (this.showType === 'width') {
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index e14df6876c..f6ed8155d5 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -101,7 +101,7 @@
           @mousedown="handleMouseDown"
           @mouseup="deselectCurComponent"
         >
-          <Editor :out-style="outStyle" />
+          <Editor v-if="!previewVisible" :out-style="outStyle" />
         </div>
       </de-main-container>
       <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
@@ -135,14 +135,10 @@
       </div>
     </el-dialog>
 
-    <el-dialog
-      v-if="previewVisible"
-      :visible.sync="previewVisible"
-      :fullscreen="true"
-      custom-class="preview-dialog"
-    >
-      <PreviewFullScreen :fullscreen="previewVisible" />
-    </el-dialog>
+    <fullscreen style="height: 100%;background: none" :fullscreen.sync="previewVisible">
+      <Preview v-if="previewVisible" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
+    </fullscreen>
+
   </el-row>
 </template>