iframe点击弹框,样式修改

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

View File

@@ -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">
<thead>
<tr>
<th>名称</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in corner.data" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.a }}</td>
<td>{{ item.b }}</td>
<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> -->
<vxe-table
:data="corner.data"
size="small"
border
show-header
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
height="200"
>
<vxe-column field="name" title="名称" width="70"></vxe-column>
<vxe-column field="a" title="A" width="40"></vxe-column>
<vxe-column field="b" title="B" width="40"></vxe-column>
<vxe-column field="c" title="C" width="40"></vxe-column>
</vxe-table>
</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;

View File

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