Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iframe点击弹框，样式修改

Browse Source
This commit is contained in:
stt
2025-10-24 10:54:37 +08:00
parent f2e328826d
commit f41af33413
2 changed files with 24 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/pqs/cockpit/realTimeData/iframeDia.vue
View File

@@ -4,34 +4,23 @@
<div v-for="corner in corners" :key="corner.id" :class="['corner', corner.className]"> <div v-for="corner in corners" :key="corner.id" :class="['corner', corner.className]">
<div class="content"> <div class="content">
<div class="title" style="display: flex"> <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> <span>{{ corner.title }}</span>
</div> </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> </div>
<span class="close-btn" @click="closeCorner(corner.id)"> <span class="close-btn" @click="closeCorner(corner.id)">
<Close /> <Close />
@@ -349,41 +338,6 @@ onBeforeUnmount(() => {
}) })
</script> </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"> <style scoped lang="scss">
.container { .container {
@@ -391,7 +345,7 @@ onBeforeUnmount(() => {
} }
.corner { .corner {
width: 180px; width: 200px;
/* height: 135px; */ /* height: 135px; */
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
@@ -445,10 +399,16 @@ onBeforeUnmount(() => {
padding: 5px; padding: 5px;
/* color: #409eff; */ /* color: #409eff; */
border-bottom: 1px solid #444; border-bottom: 1px solid #444;
background-color: #81d3f8; background-color: var(--el-color-primary);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
} }
.title_img {
width: 25px;
height: 25px;
margin-right: 10px;
}
.data-item { .data-item {
display: flex; display: flex;
margin-bottom: 4px; margin-bottom: 4px;

2
src/views/pqs/cockpit/realTimeData/index.vue
View File

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