调整实时数据页面样式

src/views/pqs/cockpit/realTimeData/index.vue

@@ -1,25 +1,33 @@
 <template>
-    <div class="main">
+    <div class="default-main" :style="{ padding: prop.height ? '0px !important' : '10px' }">
         <!-- 实时数据 -->
         <!-- 添加加载事件监听 -->
-        <div class="iframe-container" style="border: #1c3068 solid 1px">
-            <iframe
-                :src="iframeSrc"
-                width="100%"
-                height="100%"
-                frameborder="0"
-                scrolling="no"
-                id="iframeLeft"
-                @load="onIframeLoad"
-            ></iframe>
-        </div>
-        <div class="bottom-container">
-            <div>
-                <el-button size="small">复位</el-button>
-            </div>
-            <div>
-                <Table ref="tableRef" isGroup height="100%"></Table>
+        <div class="dataBox" :style="{ height: prop.height || pageHeight.height }">
+            <div
+                class="iframe-container"
+                :style="{
+                    boxShadow: `var(--el-box-shadow-light)`
+                }"
+            >
+                <iframe
+                    :src="iframeSrc"
+                    width="100%"
+                    height="100%"
+                    frameborder="0"
+                    scrolling="no"
+                    id="iframeLeft"
+                    @load="onIframeLoad"
+                ></iframe>
             </div>
+
+            <el-card class="bottom-container " style="flex: 1">
+                <div class="buttonBox">
+                    <el-button type="primary" icon="el-icon-Aim">复位</el-button>
+                </div>
+                <div class="tableBox">
+                    <Table ref="tableRef" isGroup height="100%"></Table>
+                </div>
+            </el-card>
         </div>
     </div>
 </template>
@@ -105,12 +113,11 @@ const tableStore: any = new TableStore({
                 question: '所有指标均合格'
             }
         ]
-
     }
 })
 const tableRef = ref()
 provide('tableRef', tableRef)
-
+const pageHeight = mainHeight(40)
 provide('tableStore', tableStore)
 
 const iframeSrc = ref('')
@@ -204,40 +211,29 @@ const sendKeysToIframe = (keyList: string[]) => {
 }
 </script>
 <style lang="scss" scoped>
-.main {
+.dataBox {
     width: 100%;
     height: 100%;
-    padding: 5px;
     display: flex;
     flex-direction: column;
-    overflow: hidden; /* 添加这行 */
 }
 
 .iframe-container {
     flex: 3.5;
-    overflow: hidden; /* 添加这行 */
 }
-
-.bottom-container {
-    flex: 0.5;
+:deep(.el-card__body) {
     display: flex;
-    //   align-items: stretch;
-    padding: 5px 0;
-    overflow: hidden; /* 添加这行 */
-}
-
-.bottom-container > div:first-child {
-    display: flex;
-    // width: 6%;
-       flex: 1;
-    align-items: center;
-}
-
-.bottom-container > div:last-child {
-      flex: 18;
-    // width: 94%;
+    padding: 10px;
     height: 100%;
-    overflow: auto; /* 添加这行，关键点 */
+    .buttonBox {
+        display: flex;
+        width: 150px;
+        align-items: center;
+        justify-content: center;
+    }
+    .tableBox {
+        flex: 1;
+        width: 100%;
+    }
 }
-
 </style>