iframe点击弹框,样式修改
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
:style="{
|
||||
boxShadow: `var(--el-box-shadow-light)`
|
||||
}"
|
||||
style="border:red solid 1px;position: relative;"
|
||||
style="position: relative;"
|
||||
>
|
||||
<iframe
|
||||
:src="iframeSrc"
|
||||
|
||||
Reference in New Issue
Block a user