1689 lines
45 KiB
SCSS
1689 lines
45 KiB
SCSS
// Art Design Pro Element Plus 样式优化
|
|
@use './art-variables.scss' as *;
|
|
|
|
// 全局圆角规范 - 所有表单控件和按钮统一使用8px圆角
|
|
// 圆角层级：
|
|
// - 表单控件（input、select、button等）：8px
|
|
// - 下拉选项、关闭按钮等小元素：6px
|
|
// - 容器组件（card、table、dialog等）：12px
|
|
// - checkbox等超小元素：4px
|
|
:root {
|
|
--form-border-radius: 8px !important;
|
|
}
|
|
|
|
:root {
|
|
// 系统主色
|
|
--main-color: var(--el-color-primary);
|
|
--el-color-white: white !important;
|
|
--el-color-black: white !important;
|
|
|
|
// 输入框边框颜色
|
|
--el-border-color: var(--art-border-color) !important;
|
|
|
|
// 按钮粗度
|
|
--el-font-weight-primary: 400 !important;
|
|
|
|
// 边框、按钮圆角...
|
|
--el-border-radius-base: 8px !important;
|
|
--el-border-radius-small: 8px !important;
|
|
--el-messagebox-border-radius: 8px !important;
|
|
--el-input-border-radius: 8px !important;
|
|
|
|
.region .el-radio-button__original-radio:checked + .el-radio-button__inner {
|
|
color: var(--main-color);
|
|
}
|
|
}
|
|
|
|
.el-pagination.is-background .btn-next,
|
|
.el-pagination.is-background .btn-prev,
|
|
.el-pagination.is-background .el-pager li {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.el-popover {
|
|
min-width: 80px;
|
|
border-radius: 8px !important;
|
|
border: 1px solid var(--art-border-color) !important;
|
|
}
|
|
|
|
// 工具提示圆角设置
|
|
.el-tooltip__popper {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.el-dialog__header {
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
.el-dialog__body {
|
|
padding: 25px 10px !important;
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
padding: 10px 10px !important;
|
|
}
|
|
|
|
// ✅ el-message 样式优化
|
|
.el-message {
|
|
background-color: var(--art-main-bg-color) !important;
|
|
border: 0 !important;
|
|
box-shadow:
|
|
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
|
|
|
|
p {
|
|
color: var(--art-text-gray-700) !important;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
// 修改 el-dropdown 样式
|
|
.el-dropdown-menu {
|
|
min-width: 116px !important;
|
|
padding: 6px !important;
|
|
border-radius: 8px !important;
|
|
border: none !important;
|
|
background-color: var(--art-main-bg-color) !important;
|
|
box-shadow: var(--art-box-shadow-lg) !important;
|
|
|
|
.el-dropdown-menu__item {
|
|
padding: 8px 16px !important;
|
|
border-radius: 8px !important;
|
|
color: var(--art-text-gray-700) !important;
|
|
|
|
&:hover:not(.is-disabled) {
|
|
color: var(--art-gray-900) !important;
|
|
background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 隐藏 select、dropdown 的三角
|
|
.el-select__popper,
|
|
.el-dropdown__popper {
|
|
margin-top: -6px !important;
|
|
|
|
.el-popper__arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.el-dropdown-selfdefine:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
// 处理移动端组件兼容性
|
|
@media screen and (max-width: $device-phone) {
|
|
.el-message-box,
|
|
.el-message,
|
|
.el-dialog {
|
|
width: calc(100% - 24px) !important;
|
|
}
|
|
|
|
.el-date-picker.has-sidebar.has-time {
|
|
width: calc(100% - 24px);
|
|
left: 12px !important;
|
|
}
|
|
|
|
.el-picker-panel *[slot='sidebar'],
|
|
.el-picker-panel__sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
|
|
.el-picker-panel__sidebar + .el-picker-panel__body {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
// 修改el-button样式 - 美观大气的按钮设计
|
|
.el-button {
|
|
border-radius: 8px !important;
|
|
padding: 0 16px !important;
|
|
height: 32px !important;
|
|
font-weight: 500 !important;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
border: 1px solid transparent !important;
|
|
cursor: pointer !important;
|
|
letter-spacing: 0.02em !important;
|
|
|
|
// 基础悬浮效果
|
|
&:hover {
|
|
transform: translateY(-1px) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0) scale(0.98) !important;
|
|
transition-duration: 0.1s !important;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
// 禁用状态
|
|
&.is-disabled {
|
|
opacity: 0.5 !important;
|
|
cursor: not-allowed !important;
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
// Primary 按钮 - 轮廓式主色设计
|
|
&.el-button--primary {
|
|
border: 1px solid rgb(var(--art-primary)) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
background: rgba(var(--art-primary), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-primary), 0.1) !important;
|
|
border-color: rgba(var(--art-primary), 0.8) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-primary), 0.15) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
}
|
|
}
|
|
|
|
// Success 按钮 - 轮廓式成功色设计
|
|
&.el-button--success {
|
|
border: 1px solid rgb(var(--art-success)) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
background: rgba(var(--art-success), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-success), 0.1) !important;
|
|
border-color: rgba(var(--art-success), 0.8) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
color: rgb(var(--art-success)) !important;
|
|
background: rgba(var(--art-success), 0.15) !important;
|
|
}
|
|
}
|
|
|
|
// Warning 按钮 - 轮廓式警告色设计
|
|
&.el-button--warning {
|
|
border: 1px solid rgb(var(--art-warning)) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
background: rgba(var(--art-warning), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-warning), 0.1) !important;
|
|
border-color: rgba(var(--art-warning), 0.8) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-warning), 0.15) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
}
|
|
}
|
|
|
|
// Danger 按钮 - 轮廓式危险色设计
|
|
&.el-button--danger {
|
|
border: 1px solid rgb(var(--art-danger)) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
background: rgba(var(--art-danger), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-danger), 0.1) !important;
|
|
border-color: rgba(var(--art-danger), 0.8) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-danger), 0.15) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
}
|
|
}
|
|
|
|
// Info 按钮 - 轮廓式信息色设计
|
|
&.el-button--info {
|
|
border: 1px solid rgb(var(--art-info)) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
background: rgba(var(--art-info), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-info), 0.1) !important;
|
|
border-color: rgba(var(--art-info), 0.8) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-info), 0.15) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
}
|
|
}
|
|
|
|
// Default 按钮 - 灰色
|
|
&.el-button--default,
|
|
&:not([class*="el-button--"]) {
|
|
background: var(--art-main-bg-color) !important;
|
|
border: 1px solid var(--art-border-color) !important;
|
|
color: var(--art-text-gray-700) !important;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
|
|
&:hover {
|
|
background: var(--art-gray-100) !important;
|
|
border-color: var(--art-gray-300) !important;
|
|
color: var(--art-text-gray-800) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: var(--art-gray-200) !important;
|
|
border-color: var(--art-gray-400) !important;
|
|
}
|
|
}
|
|
|
|
// Plain 朴素按钮样式 - 与标准按钮保持一致的轮廓式设计
|
|
&.is-plain {
|
|
// Plain按钮与标准按钮样式完全一致
|
|
&.el-button--primary {
|
|
border: 1px solid rgb(var(--art-primary)) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
background: rgba(var(--art-primary), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-primary), 0.1) !important;
|
|
border-color: rgba(var(--art-primary), 0.8) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-primary), 0.15) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--success {
|
|
border: 1px solid rgb(var(--art-success)) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
background: rgba(var(--art-success), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-success), 0.1) !important;
|
|
border-color: rgba(var(--art-success), 0.8) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-success), 0.15) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--warning {
|
|
border: 1px solid rgb(var(--art-warning)) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
background: rgba(var(--art-warning), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-warning), 0.1) !important;
|
|
border-color: rgba(var(--art-warning), 0.8) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-warning), 0.15) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--danger {
|
|
border: 1px solid rgb(var(--art-danger)) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
background: rgba(var(--art-danger), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-danger), 0.1) !important;
|
|
border-color: rgba(var(--art-danger), 0.8) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-danger), 0.15) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--info {
|
|
border: 1px solid rgb(var(--art-info)) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
background: rgba(var(--art-info), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-info), 0.1) !important;
|
|
border-color: rgba(var(--art-info), 0.8) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-info), 0.15) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Text 文字按钮样式
|
|
&.el-button--text {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
padding: 0 8px !important;
|
|
box-shadow: none !important;
|
|
|
|
&.el-button--primary {
|
|
color: rgb(var(--art-primary)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-primary), 0.1) !important;
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-primary), 0.15) !important;
|
|
transform: scale(0.98) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--success {
|
|
color: rgb(var(--art-success)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-success), 0.1) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-success), 0.15) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--warning {
|
|
color: rgb(var(--art-warning)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-warning), 0.1) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-warning), 0.15) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--danger {
|
|
color: rgb(var(--art-danger)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-danger), 0.1) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-danger), 0.15) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--info {
|
|
color: rgb(var(--art-info)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-info), 0.1) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-info), 0.15) !important;
|
|
}
|
|
}
|
|
|
|
span {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
// 不同尺寸按钮
|
|
&.el-button--large {
|
|
height: 40px !important;
|
|
padding: 0 20px !important;
|
|
font-size: 14px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
&.el-button--small {
|
|
height: 28px !important;
|
|
padding: 0 12px !important;
|
|
font-size: 12px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
// 图标按钮
|
|
&.is-circle {
|
|
border-radius: 50% !important;
|
|
padding: 0 !important;
|
|
width: 32px !important;
|
|
|
|
&.el-button--large {
|
|
width: 40px !important;
|
|
}
|
|
|
|
&.el-button--small {
|
|
width: 28px !important;
|
|
}
|
|
}
|
|
|
|
// 加载状态
|
|
&.is-loading {
|
|
pointer-events: none !important;
|
|
opacity: 0.7 !important;
|
|
|
|
&:before {
|
|
content: "" !important;
|
|
position: absolute !important;
|
|
left: -1px !important;
|
|
top: -1px !important;
|
|
right: -1px !important;
|
|
bottom: -1px !important;
|
|
border-radius: inherit !important;
|
|
background: inherit !important;
|
|
opacity: 0.4 !important;
|
|
}
|
|
}
|
|
|
|
// 链接按钮样式
|
|
&.is-link {
|
|
border: none !important;
|
|
background: none !important;
|
|
padding: 0 !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
text-decoration: underline !important;
|
|
|
|
&:hover {
|
|
color: rgba(var(--art-primary), 0.8) !important;
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
// 图标样式修复
|
|
.el-icon {
|
|
display: inline-flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
height: 1em !important;
|
|
width: 1em !important;
|
|
vertical-align: middle !important;
|
|
|
|
svg {
|
|
height: 1em !important;
|
|
width: 1em !important;
|
|
fill: currentColor !important;
|
|
}
|
|
}
|
|
|
|
// 按钮中的图标
|
|
.el-icon {
|
|
margin-right: 4px !important;
|
|
vertical-align: middle !important;
|
|
|
|
&:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
&.is-circle .el-icon {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
// 按钮组样式
|
|
.el-button-group {
|
|
.el-button {
|
|
&:first-child {
|
|
border-top-right-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-left-radius: 0 !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
}
|
|
|
|
&:not(:first-child):not(:last-child) {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-right: -1px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 修改el-tag样式
|
|
.el-tag {
|
|
height: 26px !important;
|
|
line-height: 26px !important;
|
|
border: 0 !important;
|
|
border-radius: 8px !important;
|
|
font-weight: 500;
|
|
transition: all 0.3s !important;
|
|
padding: 0 8px !important;
|
|
|
|
&.el-tag--primary {
|
|
background-color: rgb(var(--art-bg-primary)) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
}
|
|
|
|
&.el-tag--success {
|
|
background-color: rgb(var(--art-bg-success)) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
}
|
|
|
|
&.el-tag--warning {
|
|
background-color: rgb(var(--art-bg-warning)) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
}
|
|
|
|
&.el-tag--danger {
|
|
background-color: rgb(var(--art-bg-danger)) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
}
|
|
|
|
&.el-tag--info {
|
|
background-color: rgb(var(--art-bg-info)) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
}
|
|
}
|
|
|
|
.el-checkbox-group {
|
|
&.el-table-filter__checkbox-group label.el-checkbox {
|
|
height: 17px !important;
|
|
|
|
.el-checkbox__label {
|
|
font-weight: 400 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-checkbox {
|
|
.el-checkbox__inner {
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
border-radius: 4px !important;
|
|
border-color: var(--art-border-color) !important;
|
|
|
|
&::after {
|
|
width: 4px;
|
|
height: 8px;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 4px;
|
|
margin: auto;
|
|
border: 2px solid var(--el-checkbox-checked-icon-color);
|
|
border-left: 0;
|
|
border-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-notification {
|
|
border-radius: 12px !important;
|
|
box-shadow: var(--art-box-shadow-lg) !important;
|
|
|
|
.el-notification__icon {
|
|
font-size: 22px !important;
|
|
}
|
|
}
|
|
|
|
// 修改 el-message-box 样式
|
|
.el-message-box {
|
|
padding: 25px 20px !important;
|
|
border-radius: 12px !important;
|
|
box-shadow: var(--art-box-shadow-lg) !important;
|
|
background-color: var(--art-main-bg-color) !important;
|
|
|
|
// 确认弹窗按钮样式统一规范 - 使用更高优先级确保样式正确应用
|
|
.el-message-box__btns {
|
|
.el-button {
|
|
// 基础按钮样式
|
|
border-radius: 8px !important;
|
|
padding: 0 16px !important;
|
|
height: 32px !important;
|
|
font-weight: 500 !important;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
border: 1px solid transparent !important;
|
|
cursor: pointer !important;
|
|
letter-spacing: 0.02em !important;
|
|
|
|
// 基础悬浮效果
|
|
&:hover {
|
|
transform: translateY(-1px) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0) scale(0.98) !important;
|
|
transition-duration: 0.1s !important;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
// 确定按钮（确认按钮）样式 - 与全局轮廓式按钮规范保持一致
|
|
&.el-button--primary {
|
|
border: 1px solid rgb(var(--art-primary)) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
background: rgba(var(--art-primary), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-primary), 0.1) !important;
|
|
border-color: rgba(var(--art-primary), 0.8) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-primary), 0.15) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
}
|
|
}
|
|
|
|
// 取消按钮（默认按钮）样式
|
|
&.el-button--default,
|
|
&:not([class*="el-button--"]) {
|
|
background: var(--art-main-bg-color) !important;
|
|
border: 1px solid var(--art-border-color) !important;
|
|
color: var(--art-text-gray-700) !important;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
|
|
&:hover {
|
|
background: var(--art-gray-100) !important;
|
|
border-color: var(--art-gray-300) !important;
|
|
color: var(--art-text-gray-800) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: var(--art-gray-200) !important;
|
|
border-color: var(--art-gray-400) !important;
|
|
}
|
|
}
|
|
|
|
// 其他类型按钮样式（与全局轮廓式按钮规范保持一致）
|
|
&.el-button--success {
|
|
border: 1px solid rgb(var(--art-success)) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
background: rgba(var(--art-success), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-success), 0.1) !important;
|
|
border-color: rgba(var(--art-success), 0.8) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-success), 0.15) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--warning {
|
|
border: 1px solid rgb(var(--art-warning)) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
background: rgba(var(--art-warning), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-warning), 0.1) !important;
|
|
border-color: rgba(var(--art-warning), 0.8) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-warning), 0.15) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--danger {
|
|
border: 1px solid rgb(var(--art-danger)) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
background: rgba(var(--art-danger), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-danger), 0.1) !important;
|
|
border-color: rgba(var(--art-danger), 0.8) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-danger), 0.15) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--info {
|
|
border: 1px solid rgb(var(--art-info)) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
background: rgba(var(--art-info), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-info), 0.1) !important;
|
|
border-color: rgba(var(--art-info), 0.8) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-info), 0.15) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 全局强制显示所有弹窗关闭按钮 - 使用更强的选择器
|
|
.el-overlay .el-dialog .el-dialog__headerbtn,
|
|
.el-dialog .el-dialog__headerbtn,
|
|
.el-dialog__headerbtn,
|
|
.el-message-box__headerbtn {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
position: absolute !important;
|
|
// top: 6px !important;
|
|
right: 15px !important;
|
|
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: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
color: var(--art-gray-500) !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 ease !important;
|
|
background: transparent !important;
|
|
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;
|
|
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;
|
|
}
|
|
}
|
|
|
|
// 额外的强制样式，应对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;
|
|
color: var(--art-text-gray-800) !important;
|
|
}
|
|
|
|
.el-table__column-filter-trigger i {
|
|
color: var(--main-color) !important;
|
|
margin: -3px 0 0 2px;
|
|
}
|
|
|
|
// 去除 el-dropdown 鼠标放上去出现的边框
|
|
.el-tooltip__trigger:focus-visible {
|
|
outline: unset;
|
|
}
|
|
|
|
// ipad 表单右侧按钮优化
|
|
@media screen and (max-width: $device-ipad-pro) {
|
|
.el-table-fixed-column--right {
|
|
padding-right: 0 !important;
|
|
|
|
.el-button {
|
|
margin: 5px 10px 5px 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 修改 dialog 动画
|
|
.dialog-fade-enter-active {
|
|
.el-dialog {
|
|
animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
|
|
}
|
|
}
|
|
|
|
.dialog-fade-leave-active {
|
|
animation: fade-out 0.2s linear;
|
|
|
|
.el-dialog {
|
|
animation: dialog-close 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
|
}
|
|
}
|
|
|
|
@keyframes dialog-open {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.2);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes dialog-close {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.2);
|
|
}
|
|
}
|
|
|
|
// 遮罩层动画
|
|
@keyframes fade-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
// 修改 el-select 样式
|
|
.el-select {
|
|
height: 32px !important;
|
|
|
|
.el-input {
|
|
height: 32px !important;
|
|
|
|
.el-input__wrapper {
|
|
border-radius: 8px !important;
|
|
border-color: var(--art-border-color) !important;
|
|
transition: all 0.3s ease !important;
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
padding: 0 12px !important;
|
|
box-sizing: border-box !important;
|
|
|
|
&:hover {
|
|
border-color: var(--main-color) !important;
|
|
}
|
|
|
|
&.is-focus {
|
|
border-color: var(--main-color) !important;
|
|
box-shadow: 0 0 0 2px rgba(var(--art-primary), 0.1) !important;
|
|
}
|
|
|
|
.el-input__inner {
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
line-height: 32px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.el-input__suffix {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-select-dropdown__list {
|
|
padding: 5px !important;
|
|
|
|
.el-select-dropdown__item {
|
|
height: 38px !important;
|
|
line-height: 38px !important;
|
|
border-radius: 6px !important;
|
|
color: var(--art-text-gray-700) !important;
|
|
|
|
&.is-selected {
|
|
color: var(--art-gray-900) !important;
|
|
font-weight: 400 !important;
|
|
background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(var(--art-gray-200-rgb), 0.7) !important;
|
|
}
|
|
}
|
|
|
|
.el-select-dropdown__item:hover ~ .is-selected,
|
|
.el-select-dropdown__item.is-selected:has(~ .el-select-dropdown__item:hover) {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
// 修改输入框样式
|
|
.el-input {
|
|
height: 32px !important;
|
|
|
|
.el-input__wrapper {
|
|
border-radius: 8px !important;
|
|
border-color: var(--art-border-color) !important;
|
|
transition: all 0.3s ease !important;
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
padding: 0 12px !important;
|
|
box-sizing: border-box !important;
|
|
|
|
&:hover {
|
|
border-color: var(--main-color) !important;
|
|
}
|
|
|
|
&.is-focus {
|
|
border-color: var(--main-color) !important;
|
|
box-shadow: 0 0 0 2px rgba(var(--art-primary), 0.1) !important;
|
|
}
|
|
|
|
.el-input__inner {
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
line-height: 32px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.el-input__prefix,
|
|
.el-input__suffix {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 修改表格样式
|
|
.el-table {
|
|
border-radius: 12px !important;
|
|
overflow: hidden;
|
|
box-shadow: var(--art-root-card-box-shadow) !important;
|
|
border: 1px solid var(--art-border-color) !important;
|
|
|
|
.el-table__header {
|
|
th {
|
|
background-color: var(--art-gray-100) !important;
|
|
color: var(--art-text-gray-700) !important;
|
|
font-weight: 500 !important;
|
|
border-bottom: 1px solid var(--art-border-color) !important;
|
|
}
|
|
}
|
|
|
|
.el-table__body {
|
|
tr {
|
|
transition: all 0.3s ease !important;
|
|
|
|
&:hover {
|
|
background-color: rgba(var(--art-gray-100-rgb), 0.5) !important;
|
|
}
|
|
|
|
td {
|
|
border-bottom: 1px solid var(--art-border-color) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 修改卡片样式
|
|
.el-card {
|
|
border-radius: 12px !important;
|
|
box-shadow: var(--art-root-card-box-shadow) !important;
|
|
border: 1px solid var(--art-border-color) !important;
|
|
background-color: var(--art-main-bg-color) !important;
|
|
|
|
.el-card__header {
|
|
padding: var(--space-xl) !important;
|
|
border-bottom: 1px solid var(--art-border-color) !important;
|
|
font-weight: 500 !important;
|
|
color: var(--art-text-gray-800) !important;
|
|
}
|
|
|
|
.el-card__body {
|
|
padding: var(--space-xl) !important;
|
|
}
|
|
}
|
|
|
|
// 实现水波纹在文字下面效果
|
|
.el-button > span {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
// 页面背景
|
|
body {
|
|
background-color: var(--art-bg-color) !important;
|
|
}
|
|
|
|
// 表单项样式优化
|
|
.el-form-item {
|
|
margin-bottom: var(--space-lg) !important;
|
|
|
|
.el-form-item__label {
|
|
color: var(--art-text-gray-700) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
}
|
|
|
|
// 统一表单控件高度
|
|
.el-date-editor,
|
|
.el-cascader,
|
|
.el-autocomplete,
|
|
.el-input-number {
|
|
height: 32px !important;
|
|
|
|
.el-input {
|
|
height: 32px !important;
|
|
|
|
.el-input__wrapper {
|
|
border-radius: 8px !important;
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
padding: 0 12px !important;
|
|
box-sizing: border-box !important;
|
|
|
|
.el-input__inner {
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
line-height: 32px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.el-input__prefix,
|
|
.el-input__suffix {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 下拉框箭头调整
|
|
.el-select .el-input .el-select__caret {
|
|
line-height: 32px !important;
|
|
}
|
|
|
|
// 日期选择器的特殊处理
|
|
.el-date-editor {
|
|
.el-input__inner {
|
|
padding-left: 30px !important;
|
|
}
|
|
|
|
.el-input__prefix {
|
|
left: 8px !important;
|
|
|
|
.el-input__prefix-inner {
|
|
line-height: 32px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 确保表单控件高度完全一致的额外规则
|
|
.el-form-item__content {
|
|
.el-input,
|
|
.el-select,
|
|
.el-date-editor,
|
|
.el-cascader,
|
|
.el-autocomplete,
|
|
.el-input-number {
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
|
|
.el-input__wrapper {
|
|
border-radius: 8px !important;
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
box-sizing: border-box !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
.el-input__inner {
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
line-height: 32px !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
outline: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 特殊处理选择框的下拉箭头
|
|
.el-select .el-input {
|
|
.el-input__suffix {
|
|
.el-input__suffix-inner {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
height: 32px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 确保按钮与表单控件高度一致
|
|
.el-form-item__content .el-button {
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
max-height: 32px !important;
|
|
}
|
|
|
|
// 确保弹窗中的按钮样式与全局轮廓式设计保持完全一致
|
|
.el-dialog {
|
|
.el-button {
|
|
// 继承全局轮廓式按钮样式，确保弹窗和列表中的按钮完全一致
|
|
&.el-button--primary {
|
|
border: 1px solid rgb(var(--art-primary)) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
background: rgba(var(--art-primary), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-primary), 0.1) !important;
|
|
border-color: rgba(var(--art-primary), 0.8) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-primary), 0.15) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
}
|
|
|
|
&.is-loading {
|
|
opacity: 0.7 !important;
|
|
}
|
|
}
|
|
|
|
// 确保其他类型按钮在弹窗中也正确显示轮廓式样式
|
|
&.el-button--success {
|
|
border: 1px solid rgb(var(--art-success)) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
background: rgba(var(--art-success), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-success), 0.1) !important;
|
|
border-color: rgba(var(--art-success), 0.8) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-success), 0.15) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--warning {
|
|
border: 1px solid rgb(var(--art-warning)) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
background: rgba(var(--art-warning), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-warning), 0.1) !important;
|
|
border-color: rgba(var(--art-warning), 0.8) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-warning), 0.15) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--danger {
|
|
border: 1px solid rgb(var(--art-danger)) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
background: rgba(var(--art-danger), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-danger), 0.1) !important;
|
|
border-color: rgba(var(--art-danger), 0.8) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-danger), 0.15) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--info {
|
|
border: 1px solid rgb(var(--art-info)) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
background: rgba(var(--art-info), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-info), 0.1) !important;
|
|
border-color: rgba(var(--art-info), 0.8) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-info), 0.15) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--default,
|
|
&:not([class*="el-button--"]) {
|
|
background: var(--art-main-bg-color) !important;
|
|
border: 1px solid var(--art-border-color) !important;
|
|
color: var(--art-text-gray-700) !important;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
|
|
&:hover {
|
|
background: var(--art-gray-100) !important;
|
|
border-color: var(--art-gray-300) !important;
|
|
color: var(--art-text-gray-800) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 强制确保弹窗底部按钮区域与全局轮廓式设计保持一致
|
|
.el-dialog__footer .el-button,
|
|
.dialog-footer .el-button {
|
|
// 继承全局轮廓式按钮样式，确保最高优先级
|
|
&.el-button--primary {
|
|
border: 1px solid rgb(var(--art-primary)) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
background: rgba(var(--art-primary), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-primary), 0.1) !important;
|
|
border-color: rgba(var(--art-primary), 0.8) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-primary), 0.15) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--success {
|
|
border: 1px solid rgb(var(--art-success)) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
background: rgba(var(--art-success), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-success), 0.1) !important;
|
|
border-color: rgba(var(--art-success), 0.8) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
color: rgb(var(--art-success)) !important;
|
|
background: rgba(var(--art-success), 0.15) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--warning {
|
|
border: 1px solid rgb(var(--art-warning)) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
background: rgba(var(--art-warning), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-warning), 0.1) !important;
|
|
border-color: rgba(var(--art-warning), 0.8) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-warning), 0.15) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--danger {
|
|
border: 1px solid rgb(var(--art-danger)) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
background: rgba(var(--art-danger), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-danger), 0.1) !important;
|
|
border-color: rgba(var(--art-danger), 0.8) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-danger), 0.15) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--info {
|
|
border: 1px solid rgb(var(--art-info)) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
background: rgba(var(--art-info), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-info), 0.1) !important;
|
|
border-color: rgba(var(--art-info), 0.8) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-info), 0.15) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 确保表格中的按钮样式与全局轮廓式设计保持一致
|
|
.el-table {
|
|
.el-button {
|
|
// 表格中的标准按钮继承全局轮廓式样式
|
|
&.el-button--primary {
|
|
border: 1px solid rgb(var(--art-primary)) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
background: rgba(var(--art-primary), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-primary), 0.1) !important;
|
|
border-color: rgba(var(--art-primary), 0.8) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-primary), 0.15) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--success {
|
|
border: 1px solid rgb(var(--art-success)) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
background: rgba(var(--art-success), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-success), 0.1) !important;
|
|
border-color: rgba(var(--art-success), 0.8) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-success), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-success), 0.15) !important;
|
|
color: rgb(var(--art-success)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--warning {
|
|
border: 1px solid rgb(var(--art-warning)) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
background: rgba(var(--art-warning), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-warning), 0.1) !important;
|
|
border-color: rgba(var(--art-warning), 0.8) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-warning), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-warning), 0.15) !important;
|
|
color: rgb(var(--art-warning)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--danger {
|
|
border: 1px solid rgb(var(--art-danger)) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
background: rgba(var(--art-danger), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-danger), 0.1) !important;
|
|
border-color: rgba(var(--art-danger), 0.8) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-danger), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-danger), 0.15) !important;
|
|
color: rgb(var(--art-danger)) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--info {
|
|
border: 1px solid rgb(var(--art-info)) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
background: rgba(var(--art-info), 0.05) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-info), 0.1) !important;
|
|
border-color: rgba(var(--art-info), 0.8) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-info), 0.2) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-info), 0.15) !important;
|
|
color: rgb(var(--art-info)) !important;
|
|
}
|
|
}
|
|
|
|
// 表格中的特殊link和text按钮保持原有样式
|
|
&.el-button--text,
|
|
&.is-link {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
padding: 0 8px !important;
|
|
box-shadow: none !important;
|
|
|
|
&.el-button--primary {
|
|
color: rgb(var(--art-primary)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-primary), 0.1) !important;
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--success {
|
|
color: rgb(var(--art-success)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-success), 0.1) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--warning {
|
|
color: rgb(var(--art-warning)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-warning), 0.1) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--danger {
|
|
color: rgb(var(--art-danger)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-danger), 0.1) !important;
|
|
}
|
|
}
|
|
|
|
&.el-button--info {
|
|
color: rgb(var(--art-info)) !important;
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-info), 0.1) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 专门针对 MessageBox 按钮的强制样式规则 - 确保最高优先级
|
|
// MessageBox 按钮顺序调整：确定按钮在左侧，取消按钮在右侧（符合国内用户习惯）
|
|
.el-message-box .el-message-box__btns {
|
|
display: flex !important;
|
|
flex-direction: row-reverse !important;
|
|
justify-content: flex-start !important;
|
|
gap: 12px !important;
|
|
}
|
|
|
|
.el-message-box .el-message-box__btns .el-button.el-button--primary {
|
|
border: 1px solid rgb(var(--art-primary)) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
background: rgba(var(--art-primary), 0.05) !important;
|
|
border-radius: 8px !important;
|
|
height: 32px !important;
|
|
padding: 0 16px !important;
|
|
font-weight: 500 !important;
|
|
order: 2 !important; // 确定按钮排在前面（左侧）
|
|
|
|
&:hover {
|
|
background: rgba(var(--art-primary), 0.1) !important;
|
|
border-color: rgba(var(--art-primary), 0.8) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
box-shadow: 0 4px 12px rgba(var(--art-primary), 0.2) !important;
|
|
transform: translateY(-1px) !important;
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(var(--art-primary), 0.15) !important;
|
|
color: rgb(var(--art-primary)) !important;
|
|
transform: translateY(0) scale(0.98) !important;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none !important;
|
|
}
|
|
}
|
|
|
|
.el-message-box .el-message-box__btns .el-button.el-button--default,
|
|
.el-message-box .el-message-box__btns .el-button:not([class*="el-button--"]) {
|
|
border-radius: 8px !important;
|
|
height: 32px !important;
|
|
padding: 0 16px !important;
|
|
font-weight: 500 !important;
|
|
order: 1 !important; // 取消按钮排在后面（右侧）
|
|
|
|
&:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
|
transform: translateY(-1px) !important;
|
|
}
|
|
|
|
&:active {
|
|
// background: var(--art-gray-200) !important;
|
|
border-color: var(--art-gray-400) !important;
|
|
transform: translateY(0) scale(0.98) !important;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none !important;
|
|
}
|
|
}
|