fix: 强化弹窗关闭按钮位置样式,确保15px右侧距离生效

- 使用更强的CSS选择器,提高样式优先级
- 添加多层选择器:.el-overlay .el-dialog .el-dialog__headerbtn等
- 使用inset-inline-end属性覆盖Element Plus内联样式
- 在弹窗头部容器中强制设置关闭按钮位置
- 重置所有可能的定位属性,确保right: 15px生效

修复策略:
- 多重选择器确保样式优先级
- 现代CSS属性覆盖框架默认样式
- 强制重置定位属性防止被覆盖
- 针对不同弹窗类型的特定样式设置
This commit is contained in:
zlwu committed 2025-07-05 18:06:27 +08:00
1 parent 7ff0dc0fba
commit f1819d3772
1 file changed
+38 -1
+38 -1
View File
@@ -805,7 +805,10 @@
}
}
// 全局强制显示所有弹窗关闭按钮
// 全局强制显示所有弹窗关闭按钮 - 使用更强的选择器
.el-overlay .el-dialog .el-dialog__headerbtn,
.el-dialog .el-dialog__headerbtn,
.el-message-box .el-message-box__headerbtn,
.el-dialog__headerbtn,
.el-message-box__headerbtn {
display: block !important;
@@ -817,8 +820,13 @@
z-index: 1000 !important;
width: auto !important;
height: auto !important;
inset-inline-end: 15px !important; /* 现代CSS属性,覆盖Element Plus的内联样式 */
}
// 强化关闭按钮样式,确保优先级足够高
.el-overlay .el-dialog .el-dialog__headerbtn .el-dialog__close,
.el-dialog .el-dialog__headerbtn .el-dialog__close,
.el-message-box .el-message-box__headerbtn .el-message-box__close,
.el-message-box__headerbtn .el-message-box__close,
.el-dialog__headerbtn .el-dialog__close {
display: block !important;
@@ -835,6 +843,12 @@
border: none !important;
cursor: pointer !important;
outline: none !important;
position: relative !important;
inset: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
&:hover {
background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
@@ -846,6 +860,29 @@
}
}
// 额外的强制样式,应对Element Plus可能的内联样式
.el-dialog__header {
position: relative !important;
.el-dialog__headerbtn {
position: absolute !important;
top: 6px !important;
right: 15px !important;
inset-inline-end: 15px !important;
}
}
.el-message-box__header {
position: relative !important;
.el-message-box__headerbtn {
position: absolute !important;
top: 6px !important;
right: 15px !important;
inset-inline-end: 15px !important;
}
}
.el-message-box__title {
font-weight: 500 !important;