调整实时数据页面样式

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

@@ -1,8 +1,14 @@
 <template>
-    <div class="main">
+    <div class="default-main" :style="{ padding: prop.height ? '0px !important' : '10px' }">
         <!-- 实时数据 -->
         <!-- 添加加载事件监听 -->
-        <div class="iframe-container" style="border: #1c3068 solid 1px">
+        <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%"
@@ -13,13 +19,15 @@
                     @load="onIframeLoad"
                 ></iframe>
             </div>
-        <div class="bottom-container">
+
-            <div>
+            <el-card class="bottom-container " style="flex: 1">
-                <el-button size="small">复位</el-button>
+                <div class="buttonBox">
+                    <el-button type="primary" icon="el-icon-Aim">复位</el-button>
                 </div>
-            <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; /* 添加这行 */
 }
-
+:deep(.el-card__body) {
-.bottom-container {
-    flex: 0.5;
     display: flex;
-    //   align-items: stretch;
+    padding: 10px;
-    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%;
     height: 100%;
-    overflow: auto; /* 添加这行，关键点 */
+    .buttonBox {
+        display: flex;
+        width: 150px;
+        align-items: center;
+        justify-content: center;
+    }
+    .tableBox {
+        flex: 1;
+        width: 100%;
+    }
 }
-
 </style>