Browse Source

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

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

修复策略:
- 多重选择器确保样式优先级
- 现代CSS属性覆盖框架默认样式
- 强制重置定位属性防止被覆盖
- 针对不同弹窗类型的特定样式设置
zlwu 1 năm trước cách đây
mục cha
commit
f1819d3772
1 tập tin đã thay đổi với 38 bổ sung và 1 xóa
  1. 38 1
      web/src/assets/styles/art-element-ui.scss

+ 38 - 1
web/src/assets/styles/art-element-ui.scss

@@ -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;