iframe点击弹框，样式修改

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

@@ -4,34 +4,23 @@
         <div v-for="corner in corners" :key="corner.id" :class="['corner', corner.className]">
             <div class="content">
                 <div class="title" style="display: flex">
-                    <img src="@/assets/img/lightning.png" style="width: 25px; height: 25px; margin-right: 10px" />
+                    <img src="@/assets/img/lightning.png" class="title_img" />
                     <span>{{ corner.title }}</span>
                 </div>
-                <table class="table">
+                <vxe-table
-                    <thead>
+                    :data="corner.data"
-                        <tr>
+                    size="small"
-                            <th>名称</th>
+                    border
-                            <th>A</th>
+                    show-header
-                            <th>B</th>
+                    :header-cell-style="{ textAlign: 'center' }"
-                            <th>C</th>
+                    :cell-style="{ textAlign: 'center' }"
-                        </tr>
+                    height="200"
-                    </thead>
+                >
-                    <tbody>
+                    <vxe-column field="name" title="名称" width="70"></vxe-column>
-                        <tr v-for="(item, index) in corner.data" :key="index">
+                    <vxe-column field="a" title="A" width="40"></vxe-column>
-                            <td>{{ item.name }}</td>
+                    <vxe-column field="b" title="B" width="40"></vxe-column>
-                            <td>{{ item.a }}</td>
+                    <vxe-column field="c" title="C" width="40"></vxe-column>
-                            <td>{{ item.b }}</td>
+                </vxe-table>
-                            <td>{{ item.c }}</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <!-- <el-descriptions :column="1" size="small" label-width="70px" border>
-                    <el-descriptions-item
-                        v-for="(item, index) in corner.data"
-                        :key="index"
-                        :label="item.label"
-                    ></el-descriptions-item>
-                </el-descriptions> -->
             </div>
             <span class="close-btn" @click="closeCorner(corner.id)">
                 <Close />
@@ -349,41 +338,6 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style>
-/* 走马灯样式 - 支持逐条显示 */
-.simple-marquee {
-    width: 230px;
-    height: 24px;
-    overflow: hidden;
-    position: relative;
-    white-space: nowrap;
-}
-
-.marquee-content {
-    display: inline-block;
-    padding-left: 100%;
-    /* animation: marquee-single 15s linear infinite; */
-    animation: marquee-single var(--marquee-duration, 25s) linear infinite;
-    line-height: 24px;
-    text-decoration: underline;
-    text-decoration-color: #4877f6;
-}
-
-@keyframes marquee-single {
-    0% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(-100%);
-    }
-}
-
-/* 鼠标悬停时暂停动画 */
-.simple-marquee:hover .marquee-content {
-    animation-play-state: paused;
-    cursor: pointer;
-}
-</style>
 
 <style scoped lang="scss">
 .container {
@@ -391,7 +345,7 @@ onBeforeUnmount(() => {
 }
 
 .corner {
-    width: 180px;
+    width: 200px;
     /* height: 135px; */
     background-color: #fff;
     position: absolute;
@@ -445,10 +399,16 @@ onBeforeUnmount(() => {
     padding: 5px;
     /* color: #409eff; */
     border-bottom: 1px solid #444;
-    background-color: #81d3f8;
+    background-color: var(--el-color-primary);
     border-radius: 8px 8px 0 0;
 }
 
+.title_img {
+    width: 25px;
+    height: 25px;
+    margin-right: 10px;
+}
+
 .data-item {
     display: flex;
     margin-bottom: 4px;

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

@@ -8,7 +8,7 @@
                 :style="{
                     boxShadow: `var(--el-box-shadow-light)`
                 }"
-                style="border:red solid 1px;position: relative;"
+                style="position: relative;"
             >
                 <iframe
                     :src="iframeSrc"