From 1c28ed6347e6db8559fdeee7e032bde18ce1db5f Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 6 Sep 2024 18:42:00 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=A7=A3=E5=86=B3=E6=B8=85=E7=A9=BA=E5=90=8E?=
 =?UTF-8?q?=E5=8F=8C=E5=90=91=E7=BB=91=E5=AE=9A=E5=A4=B1=E6=95=88=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/preview/index.vue    |  8 +++++---
 src/styles/index.scss                      | 14 ++++++++++++++
 src/views/layout/components/main/index.vue | 14 ++++++++------
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/common/preview/index.vue b/src/components/common/preview/index.vue
index 9a71db87..caca7cf2 100644
--- a/src/components/common/preview/index.vue
+++ b/src/components/common/preview/index.vue
@@ -1,11 +1,11 @@
 <template>
-    <el-dialog v-model="dialog_visible" class="radius-lg" width="1168" draggable :close-on-click-modal="false" append-to-body>
+    <el-dialog v-model="dialog_visible" class="radius-lg diy-preview" width="1168" :close-on-click-modal="false" append-to-body>
         <template #header>
             <div class="title re">
                 <div class="middle size-16 fw">预览</div>
             </div>
         </template>
-        <div class="flex-row pt-16 iframe-content">
+        <div class="flex-row iframe-content">
             <iframe :src="new_link" width="100%" height="100%" frameborder="0"></iframe>
         </div>
     </el-dialog>
@@ -47,6 +47,8 @@ watch(
 </script>
 <style lang="scss" scoped>
 .iframe-content {
-    height: 60rem;
+    height: 80rem;
+    width: calc(100% + 3.2rem);
+    margin: 0 -1.6rem -1.6rem -1.6rem;
 }
 </style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 263fef27..eb432608 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -212,3 +212,17 @@ p {
         font-size: 1.2rem;
     }
 }
+
+// 弹窗样式调整
+.diy-preview.el-dialog {
+    --el-dialog-margin-top: 0;
+    display: flex;
+    flex-direction: column;
+    margin: 0 !important;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-height: calc(100% - 30px);
+    max-width: calc(100% - 30px);
+}
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 0b0cff11..98c13f60 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -4,13 +4,15 @@
         <el-collapse v-model="activeNames">
             <el-collapse-item v-for="(com, i) in components" :key="i" :title="com.name" :name="com.key">
                 <VueDraggable v-model="com.data" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
-                    <div v-for="item in com.data" :key="item.key" class="item">
-                        <div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
-                        <div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
-                            <img class="img radius-xs" :src="url_computer(item.key)" />
-                            <div>{{ item.name }}</div>
+                    <template v-if="com.data.length > 0">
+                        <div v-for="item in com.data" :key="item.key" class="item">
+                            <div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
+                            <div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
+                                <img class="img radius-xs" :src="url_computer(item.key)" />
+                                <div>{{ item.name }}</div>
+                            </div>
                         </div>
-                    </div>
+                    </template>
                 </VueDraggable>
             </el-collapse-item>
         </el-collapse>