fix: 优化预览展示

web/components.d.ts

@@ -46,8 +46,10 @@ declare module 'vue' {
     IEpClose: typeof import('~icons/ep/close')['default']
     IEpCopyDocument: typeof import('~icons/ep/copy-document')['default']
     IEpDelete: typeof import('~icons/ep/delete')['default']
+    IEpIphone: typeof import('~icons/ep/iphone')['default']
     IEpLoading: typeof import('~icons/ep/loading')['default']
     IEpMinus: typeof import('~icons/ep/minus')['default']
+    IEpMonitor: typeof import('~icons/ep/monitor')['default']
     IEpMore: typeof import('~icons/ep/more')['default']
     IEpPlus: typeof import('~icons/ep/plus')['default']
     IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default']
@@ -58,6 +60,8 @@ declare module 'vue' {
     IEpSortDown: typeof import('~icons/ep/sort-down')['default']
     IEpSortUp: typeof import('~icons/ep/sort-up')['default']
     IEpTop: typeof import('~icons/ep/top')['default']
+    IEpView: typeof import('~icons/ep/view')['default']
+    IEpWarningFilled: typeof import('~icons/ep/warning-filled')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="preview-panel">
-    <div class="preview-btn" @click="dialogTableVisible = true">
+    <div class="btn preview-btn" @click="dialogTableVisible = true">
       <i-ep-view class="view-icon" :size="20" />
       <span class="btn-txt">预览</span>
     </div>
@@ -17,30 +17,36 @@
     >
       <div class="ml75">
         <div class="preview-tab">
-        <div :class="`preview-tab-item ${previewTab == 1 ? 'active' : ''}`" @click="previewTab = 1">
+          <div
-          <i-ep-iphone />
+            :class="`preview-tab-item ${previewTab == 1 ? 'active' : ''}`"
-        </div>
+            @click="previewTab = 1"
-        <div :class="`preview-tab-item ${previewTab == 2 ? 'active' : ''}`" @click="previewTab = 2">
+          >
-          <i-ep-monitor />
+            <i-ep-iphone />
-        </div>
-      </div>
-      <div :class="`preview-panel ${previewTab == 1 ? 'phone' : 'pc'}`">
-        <div class="wrapper">
-          <div class="tips-wrapper">
-            <i-ep-WarningFilled /> <span>用户预览模式，数据不保存！</span>
           </div>
-          <div v-loading="loading" element-loading-text="加载中..." style="height: 100%">
+          <div
-            <iframe
+            :class="`preview-tab-item ${previewTab == 2 ? 'active' : ''}`"
-              v-loading="loading"
+            @click="previewTab = 2"
-              id="iframe-preview"
+          >
-              :src="`/management/preview/${surveyId}`"
+            <i-ep-monitor />
-              frameborder="0"
+          </div>
-              width="100%"
+        </div>
-              height="100%"
+        <div :class="`preview-panel ${previewTab == 1 ? 'phone' : 'pc'}`">
-            ></iframe>
+          <div class="wrapper">
+            <div class="tips-wrapper">
+              <i-ep-WarningFilled /> <span>用户预览模式，数据不保存！</span>
+            </div>
+            <div v-loading="loading" element-loading-text="加载中..." style="height: 100%">
+              <iframe
+                v-loading="loading"
+                id="iframe-preview"
+                :src="`/management/preview/${surveyId}`"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
           </div>
         </div>
-      </div>
       </div>
     </el-dialog>
   </div>
@@ -69,35 +75,22 @@ const closedDialog = () => {
 }
 </script>
 <style lang="scss" scoped>
+@import url('@/management/styles/edit-btn.scss');
+
 .preview-panel {
   :deep(.preview-config-wrapper) {
     background-color: transparent;
     box-shadow: none;
     padding: 0;
   }
-  .ml75{
+  .ml75 {
     margin-left: 75px;
   }
 
-  .preview-btn {
-    width: 50px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    color: #4a4c5b;
-    cursor: pointer;
-
-    i {
-      font-size: 20px;
-    }
-
-    .btn-txt {
-      font-size: 12px;
-    }
-  }
   .view-icon {
-    font-size: 18px;
+    font-size: 20px;
-    margin-bottom: 4px;
+    height: 29px;
+    line-height: 29px;
   }
 
   .preview-tab {