fix: 修复弹窗关闭按钮hover背景色与图标对齐问题

- 使用flex布局确保叉号图标在按钮中心居中对齐
- 调整按钮尺寸为24x24px,移除padding避免对齐偏差
- 优化字体大小为14px,更合适的图标尺寸
- 添加line-height: 1确保垂直居中
- 添加active状态反馈,提升交互体验
- 添加focus状态视觉反馈,提升可访问性

修复效果:
- hover背景色与叉号图标完美对齐
- 更好的视觉反馈和交互体验
- 符合现代UI设计规范
This commit is contained in:
zlwu committed 2025-07-05 18:09:45 +08:00
1 parent f1819d3772
commit 09b3bd5061
1 file changed
+28 -6
+28 -6
View File
@@ -829,16 +829,19 @@
.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;
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
color: var(--art-gray-500) !important;
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
padding: 7px !important;
font-size: 14px !important;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 6px !important;
transition: all 0.3s !important;
transition: all 0.3s ease !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
@@ -849,14 +852,33 @@
left: auto !important;
right: auto !important;
bottom: auto !important;
box-sizing: border-box !important;
line-height: 1 !important;
&:hover {
background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
color: var(--art-gray-800) !important;
transform: none !important;
}
&:active {
background-color: rgba(var(--art-gray-300-rgb), 0.8) !important;
transform: scale(0.95) !important;
}
&:focus {
outline: none !important;
box-shadow: 0 0 0 2px rgba(var(--art-primary), 0.2) !important;
}
// 确保图标居中
&::before {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
line-height: 1 !important;
}
}