fix: 强化弹窗关闭按钮位置样式,确保15px右侧距离生效
- 使用更强的CSS选择器,提高样式优先级 - 添加多层选择器:.el-overlay .el-dialog .el-dialog__headerbtn等 - 使用inset-inline-end属性覆盖Element Plus内联样式 - 在弹窗头部容器中强制设置关闭按钮位置 - 重置所有可能的定位属性,确保right: 15px生效 修复策略: - 多重选择器确保样式优先级 - 现代CSS属性覆盖框架默认样式 - 强制重置定位属性防止被覆盖 - 针对不同弹窗类型的特定样式设置
This commit is contained in:
1 parent
7ff0dc0fba
commit
f1819d3772
1 file changed
+38
-1
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user