[重大更新] 整体主题样式重写 改为卡片式布局 样式更企业化
This commit is contained in:
疯狂的狮子Li
@@ -64,6 +64,8 @@
|
||||
/*-------------Dialog-------------**/
|
||||
.el-overlay {
|
||||
overflow: hidden;
|
||||
background: var(--app-overlay-mask);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
.el-overlay-dialog {
|
||||
display: flex;
|
||||
@@ -71,21 +73,72 @@
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
|
||||
.el-dialog {
|
||||
margin: 0 auto !important;
|
||||
border-radius: var(--app-radius-lg);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) padding-box,
|
||||
var(--app-surface-bg);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 18px 20px 14px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
margin-right: 0;
|
||||
background: var(--app-elevated-soft-bg);
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
color: var(--app-text-title);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 15px;
|
||||
right: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: var(--app-elevated-close-bg);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s ease,
|
||||
color 0.2s ease;
|
||||
|
||||
.el-dialog__close {
|
||||
color: var(--app-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--app-elevated-close-hover-bg);
|
||||
transform: translateY(-1px);
|
||||
|
||||
.el-dialog__close {
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 15px !important;
|
||||
padding: 18px 20px 12px !important;
|
||||
}
|
||||
.el-dialog__header {
|
||||
padding: 16px 16px 8px 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--brder-color);
|
||||
margin-right: 0;
|
||||
|
||||
.el-dialog__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 14px 20px 20px;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -97,6 +150,10 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-dialog__footer .el-button {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
// refine element ui upload
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
@@ -111,8 +168,46 @@
|
||||
|
||||
// dropdown
|
||||
.el-dropdown-menu {
|
||||
border-radius: var(--app-radius-md);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
padding: 8px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
min-height: 36px;
|
||||
margin: 2px 0;
|
||||
border-radius: 10px;
|
||||
color: var(--app-text-title);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--app-accent-soft);
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item.is-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item--divided {
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
border-top: none;
|
||||
|
||||
&::before {
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
top: -6px;
|
||||
width: auto;
|
||||
background: rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
@@ -128,7 +223,7 @@
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
|
||||
.el-menu--collapse > div > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -152,14 +247,104 @@
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.el-form--inline .el-date-editor {
|
||||
width: 308px;
|
||||
}
|
||||
|
||||
/* 设置 el-message-box 消息弹框内容强制换行 */
|
||||
.el-message-box .el-message-box__message {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
border-radius: var(--app-radius-lg);
|
||||
width: min(440px, calc(100vw - 32px));
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
border-radius: 20px;
|
||||
box-shadow: var(--app-shadow-md);
|
||||
|
||||
.el-message-box__header {
|
||||
padding: 18px 20px 0;
|
||||
}
|
||||
|
||||
.el-message-box__title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-message-box__headerbtn {
|
||||
top: 14px;
|
||||
right: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: var(--app-elevated-close-bg);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
|
||||
.el-message-box__close {
|
||||
color: var(--app-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--app-elevated-close-hover-bg);
|
||||
transform: translateY(-1px);
|
||||
|
||||
.el-message-box__close {
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-message-box__content {
|
||||
padding: 16px 20px 18px;
|
||||
}
|
||||
|
||||
.el-message-box__container {
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.el-message-box__status {
|
||||
position: static;
|
||||
margin-top: 1px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px !important;
|
||||
background: var(--app-elevated-soft-bg);
|
||||
}
|
||||
|
||||
.el-message-box__message {
|
||||
color: var(--app-text-title);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.el-message-box__btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 20px 20px;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.el-message-box__btns .el-button {
|
||||
margin-left: 0;
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
.el-message-box__input {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-message,
|
||||
@@ -169,6 +354,281 @@
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
.el-message {
|
||||
min-width: 320px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
.el-message__icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.el-message__content {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-message__closeBtn {
|
||||
color: var(--app-text-muted);
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-message--success {
|
||||
border-color: var(--el-color-success-light-7);
|
||||
background: var(--el-color-success-light-9);
|
||||
}
|
||||
|
||||
.el-message--warning {
|
||||
border-color: var(--el-color-warning-light-7);
|
||||
background: var(--el-color-warning-light-9);
|
||||
}
|
||||
|
||||
.el-message--error {
|
||||
border-color: var(--el-color-danger-light-7);
|
||||
background: var(--el-color-danger-light-9);
|
||||
}
|
||||
|
||||
.el-message--info {
|
||||
border-color: var(--el-color-primary-light-7);
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.el-notification {
|
||||
width: 340px;
|
||||
padding: 16px 18px 16px 16px;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
|
||||
.el-notification__group {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.el-notification__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-notification__content {
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-notification__closeBtn {
|
||||
top: 18px;
|
||||
color: var(--app-text-muted);
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-notification.right,
|
||||
.el-notification.left {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.el-notification--success {
|
||||
border-color: var(--el-color-success-light-7);
|
||||
}
|
||||
|
||||
.el-notification--warning {
|
||||
border-color: var(--el-color-warning-light-7);
|
||||
}
|
||||
|
||||
.el-notification--error {
|
||||
border-color: var(--el-color-danger-light-7);
|
||||
}
|
||||
|
||||
.el-notification--info {
|
||||
border-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
.el-select__popper.el-popper,
|
||||
.el-picker__popper.el-popper,
|
||||
.el-autocomplete__popper.el-popper,
|
||||
.el-cascader__dropdown,
|
||||
.el-dropdown__popper.el-popper,
|
||||
.el-popover.el-popper {
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
}
|
||||
|
||||
.el-select__popper.el-popper,
|
||||
.el-autocomplete__popper.el-popper,
|
||||
.el-cascader__dropdown,
|
||||
.el-dropdown__popper.el-popper,
|
||||
.el-popover.el-popper {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.el-select-dropdown__list,
|
||||
.el-autocomplete-suggestion__list,
|
||||
.el-cascader-menu {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item,
|
||||
.el-autocomplete-suggestion li,
|
||||
.el-cascader-node {
|
||||
min-height: 38px;
|
||||
margin: 2px 0;
|
||||
border-radius: 10px;
|
||||
color: var(--app-text-title);
|
||||
line-height: 38px;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover,
|
||||
.el-autocomplete-suggestion li:hover,
|
||||
.el-cascader-node:not(.is-disabled):hover,
|
||||
.el-cascader-node.in-active-path {
|
||||
background: var(--app-accent-soft);
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-selected,
|
||||
.el-autocomplete-suggestion li.highlighted {
|
||||
background: rgba(64, 158, 255, 0.12);
|
||||
color: var(--app-accent-strong);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-disabled,
|
||||
.el-cascader-node.is-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.el-autocomplete-suggestion li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.el-autocomplete-suggestion li div {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.el-cascader-menu {
|
||||
min-width: 180px;
|
||||
border-right-color: rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.el-cascader-node__prefix,
|
||||
.el-cascader-node__postfix {
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-popper.is-dark {
|
||||
border-color: rgba(15, 23, 42, 0.72);
|
||||
background: rgba(15, 23, 42, 0.92);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.el-popper.is-dark .el-popper__arrow::before {
|
||||
background: rgba(15, 23, 42, 0.92);
|
||||
border-color: rgba(15, 23, 42, 0.72);
|
||||
}
|
||||
|
||||
.el-popper.is-light {
|
||||
border-color: var(--app-surface-border);
|
||||
background: var(--app-surface-bg);
|
||||
}
|
||||
|
||||
.el-popper.is-light .el-popper__arrow::before {
|
||||
background: var(--app-surface-bg);
|
||||
border-color: var(--app-surface-border);
|
||||
}
|
||||
|
||||
.el-picker__popper.el-popper {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.el-date-picker,
|
||||
.el-date-range-picker,
|
||||
.el-time-panel,
|
||||
.el-time-range-picker,
|
||||
.el-picker-panel {
|
||||
background: transparent;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-picker-panel__body-wrapper,
|
||||
.el-date-range-picker__content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-picker-panel__icon-btn,
|
||||
.el-date-picker__header-label,
|
||||
.el-date-range-picker__header-label {
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-date-table td,
|
||||
.el-month-table td .cell,
|
||||
.el-year-table td .cell {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.el-date-table td.today .el-date-table-cell__text,
|
||||
.el-month-table td.today .cell,
|
||||
.el-year-table td.today .cell {
|
||||
color: var(--app-accent-strong);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.el-date-table td.available:hover,
|
||||
.el-month-table td .cell:hover,
|
||||
.el-year-table td .cell:hover {
|
||||
color: var(--app-accent-strong);
|
||||
background: var(--app-accent-soft);
|
||||
}
|
||||
|
||||
.el-date-table td.current:not(.disabled) .el-date-table-cell__text,
|
||||
.el-month-table td.current:not(.disabled) .cell,
|
||||
.el-year-table td.current:not(.disabled) .cell {
|
||||
background: var(--app-accent-strong);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-date-editor .el-range-separator {
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-time-panel__content::before,
|
||||
.el-time-panel__content::after {
|
||||
border-color: rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.el-scrollbar__thumb {
|
||||
background: rgba(148, 163, 184, 0.42);
|
||||
}
|
||||
|
||||
.el-scrollbar__thumb:hover {
|
||||
background: rgba(100, 116, 139, 0.56);
|
||||
}
|
||||
|
||||
// Modern rounded inputs
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner,
|
||||
@@ -193,11 +653,10 @@
|
||||
// Buttons
|
||||
.el-button {
|
||||
border-radius: var(--app-radius-md);
|
||||
transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
||||
transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-button:not(.is-text):not(.is-link):hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
@@ -214,32 +673,200 @@
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.el-tooltip__popper {
|
||||
max-width: 320px;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.el-popconfirm {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.el-popconfirm__main {
|
||||
gap: 10px;
|
||||
line-height: 1.6;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-popconfirm__action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.el-popconfirm__action .el-button {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-drawer {
|
||||
border-radius: var(--app-radius-lg);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
border: 1px solid var(--app-surface-border);
|
||||
}
|
||||
|
||||
.el-drawer__header {
|
||||
margin-bottom: 0;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding: 18px 20px 16px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
background: var(--app-elevated-soft-bg);
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-drawer__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 18px 20px 20px;
|
||||
}
|
||||
|
||||
.el-drawer__close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: var(--app-elevated-close-bg);
|
||||
color: var(--app-text-muted);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--app-elevated-close-hover-bg);
|
||||
color: var(--app-accent-strong);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background: rgba(248, 250, 252, 0.76);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.el-loading-spinner .path {
|
||||
stroke: var(--app-accent-strong);
|
||||
}
|
||||
|
||||
.el-descriptions {
|
||||
--el-descriptions-table-border: rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.el-descriptions__body .el-descriptions__table {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-descriptions__label.el-descriptions__cell {
|
||||
background: var(--app-elevated-soft-bg) !important;
|
||||
color: var(--app-text-title);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-descriptions__content.el-descriptions__cell {
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
color: var(--app-text-title);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
min-height: 34px;
|
||||
margin: 2px 0;
|
||||
border-radius: 10px;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover,
|
||||
.el-tree-node.is-current > .el-tree-node__content {
|
||||
background: var(--app-accent-soft);
|
||||
}
|
||||
|
||||
.el-radio-button__inner,
|
||||
.el-checkbox-button__inner {
|
||||
border-radius: 10px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.el-radio-button:first-child .el-radio-button__inner,
|
||||
.el-checkbox-button:first-child .el-checkbox-button__inner,
|
||||
.el-radio-button:last-child .el-radio-button__inner,
|
||||
.el-checkbox-button:last-child .el-checkbox-button__inner {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.el-empty__image {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.el-empty__description p {
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-color-dropdown {
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.el-message--success {
|
||||
background: rgba(31, 138, 90, 0.18);
|
||||
}
|
||||
|
||||
.el-message--warning {
|
||||
background: rgba(184, 121, 34, 0.18);
|
||||
}
|
||||
|
||||
.el-message--error {
|
||||
background: rgba(178, 74, 74, 0.18);
|
||||
}
|
||||
|
||||
.el-message--info {
|
||||
background: rgba(43, 107, 211, 0.18);
|
||||
}
|
||||
|
||||
.el-loading-mask {
|
||||
background: rgba(6, 11, 22, 0.7);
|
||||
}
|
||||
|
||||
.el-popper.is-dark {
|
||||
border-color: rgba(30, 41, 59, 0.92);
|
||||
background: rgba(15, 23, 42, 0.96);
|
||||
}
|
||||
|
||||
.el-popper.is-dark .el-popper__arrow::before {
|
||||
background: rgba(15, 23, 42, 0.96);
|
||||
border-color: rgba(30, 41, 59, 0.92);
|
||||
}
|
||||
}
|
||||
|
||||
// Table polish
|
||||
.el-table {
|
||||
border-radius: var(--app-radius-lg);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border: 1px solid var(--app-surface-border);
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
background: var(--el-bg-color);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table__row:hover td.el-table__cell {
|
||||
background-color: var(--el-fill-color-light) !important;
|
||||
background-color: rgba(53, 109, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
// Tabs
|
||||
@@ -264,6 +891,27 @@
|
||||
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-pagination .el-pagination__total,
|
||||
.el-pagination .el-pagination__jump {
|
||||
color: var(--app-text-muted);
|
||||
}
|
||||
|
||||
.el-pagination .btn-prev,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .el-pager li,
|
||||
.el-pagination .el-pagination__sizes .el-input__wrapper {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||||
background: var(--app-surface-bg);
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li.is-active {
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
background: var(--el-bg-color-page);
|
||||
background: var(--app-shell-bg);
|
||||
font-family:
|
||||
'MiSans',
|
||||
'HarmonyOS Sans SC',
|
||||
@@ -44,6 +44,12 @@ html.dark svg {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
@@ -147,7 +153,7 @@ aside {
|
||||
|
||||
//main-container全局样式
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
padding: 16px;
|
||||
background: var(--app-surface-bg);
|
||||
border: 1px solid var(--app-surface-border);
|
||||
border-radius: var(--app-radius-lg);
|
||||
@@ -159,19 +165,62 @@ aside {
|
||||
.search {
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: var(--app-radius-lg);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
background-color: var(--el-bg-color-overlay);
|
||||
border: 1px solid var(--app-surface-border);
|
||||
background-color: var(--app-surface-bg);
|
||||
padding: 0.75rem;
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
border-color: var(--el-border-color);
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.el-card,
|
||||
.el-dialog,
|
||||
.el-drawer,
|
||||
.el-popover.el-popper,
|
||||
.el-dropdown__popper .el-dropdown-menu,
|
||||
.el-picker__popper,
|
||||
.el-select__popper.el-popper {
|
||||
border-radius: var(--app-radius-lg);
|
||||
border-color: var(--app-surface-border);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
}
|
||||
|
||||
.el-card,
|
||||
.el-dialog,
|
||||
.el-drawer {
|
||||
background: var(--app-surface-bg);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: var(--app-accent-strong);
|
||||
--el-button-border-color: var(--app-accent-strong);
|
||||
--el-button-hover-bg-color: #4a7cff;
|
||||
--el-button-hover-border-color: #4a7cff;
|
||||
--el-button-active-bg-color: #2e5ce0;
|
||||
--el-button-active-border-color: #2e5ce0;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-border-color: var(--app-surface-border);
|
||||
--el-table-header-bg-color: var(--tableHeaderBg);
|
||||
--el-table-tr-bg-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-select__wrapper {
|
||||
box-shadow: 0 0 0 1px transparent inset;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
margin: 30px 50px;
|
||||
position: relative;
|
||||
|
||||
+333
-15
@@ -76,6 +76,41 @@ h6 {
|
||||
.el-form .el-form-item__label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-main > .page-shell,
|
||||
.app-main > .page-shell.p-2 {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.p-2 > .el-row,
|
||||
.p-2 > .el-card,
|
||||
.p-2 > .search-wrap,
|
||||
.p-2 > div,
|
||||
.p-2 > section {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.page-shell > .el-row,
|
||||
.page-shell > .el-card,
|
||||
.page-shell > .search-wrap,
|
||||
.page-shell > div,
|
||||
.page-shell > section {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 6vh !important;
|
||||
}
|
||||
@@ -84,7 +119,7 @@ h6 {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
padding: 10px 20px 0;
|
||||
padding: 14px 22px 4px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
@@ -118,17 +153,18 @@ h6 {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px !important;
|
||||
margin-top: 18px;
|
||||
padding: 10px 0 0 !important;
|
||||
}
|
||||
|
||||
/* tree border */
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7;
|
||||
background: #ffffff none;
|
||||
border-radius: var(--app-radius-md);
|
||||
margin-top: 8px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
background: rgba(255, 255, 255, 0.42) none;
|
||||
border-radius: 22px;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -188,27 +224,28 @@ h6 {
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 14px 15px 7px !important;
|
||||
min-height: 40px;
|
||||
background: var(--el-fill-color-blank);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding: 14px 16px 10px !important;
|
||||
min-height: auto;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px 20px 20px 20px !important;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: var(--app-radius-lg);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
border-color: var(--el-border-color-lighter);
|
||||
border-color: var(--app-surface-border);
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
background: var(--app-surface-bg);
|
||||
}
|
||||
|
||||
.el-card:hover {
|
||||
box-shadow: var(--app-shadow-md);
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(64, 158, 255, 0.16);
|
||||
}
|
||||
|
||||
.card-box {
|
||||
@@ -298,6 +335,287 @@ h6 {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.panel-heading h3,
|
||||
.table-heading h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.panel-kicker {
|
||||
display: none;
|
||||
color: var(--app-accent-strong);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.toolbar-shell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.table-heading p {
|
||||
margin: 4px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--app-text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.toolbar-actions::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.toolbar-actions > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-actions .top-right-btn {
|
||||
margin-left: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-actions .el-button + .el-button,
|
||||
.toolbar-actions .el-dropdown + .el-button,
|
||||
.toolbar-actions .el-button + .el-dropdown,
|
||||
.toolbar-actions .el-dropdown + .el-dropdown,
|
||||
.toolbar-actions .top-right-btn + .el-button,
|
||||
.toolbar-actions .el-button + .top-right-btn,
|
||||
.toolbar-actions .top-right-btn + .el-dropdown,
|
||||
.toolbar-actions .el-dropdown + .top-right-btn {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.table-panel .toolbar-actions .el-button:not(.is-circle):not(.is-link) {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.query-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 14px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.query-form .el-form-item {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.query-form .el-form-item__content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.query-form .el-form-item:last-child {
|
||||
margin-left: auto;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.query-form .el-form-item:last-child .el-form-item__content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.query-form .el-form-item:last-child .el-button {
|
||||
margin-left: 0 !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.query-form .el-form-item:last-child .el-button + .el-button {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.query-form .el-input__wrapper,
|
||||
.query-form .el-select__wrapper,
|
||||
.query-form .el-textarea__inner,
|
||||
.query-form .el-date-editor,
|
||||
.query-form .el-range-editor,
|
||||
.query-form .el-cascader .el-input__wrapper,
|
||||
.query-form .el-input-number,
|
||||
.query-form .el-input-number__decrease,
|
||||
.query-form .el-input-number__increase {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.query-form .el-button {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.query-form {
|
||||
gap: 10px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.query-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.query-form .el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.query-form .el-input,
|
||||
.query-form .el-select,
|
||||
.query-form .el-date-editor,
|
||||
.query-form .el-cascader,
|
||||
.query-form .el-input-number {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.query-form .el-form-item:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table .el-button.is-link {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
min-width: 28px !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 10px !important;
|
||||
background: rgba(53, 109, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.data-table .el-button.is-link + .el-button.is-link {
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.el-card.search-panel,
|
||||
.el-card.side-panel {
|
||||
border-radius: 16px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-card.table-panel {
|
||||
border-radius: 14px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-card.search-panel .el-card__header,
|
||||
.el-card.side-panel .el-card__header {
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
}
|
||||
|
||||
.el-card.table-panel .el-card__header {
|
||||
border-top-left-radius: 14px;
|
||||
border-top-right-radius: 14px;
|
||||
}
|
||||
|
||||
.el-card.search-panel .el-card__body,
|
||||
.el-card.side-panel .el-card__body {
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
}
|
||||
|
||||
.el-card.table-panel .el-card__body {
|
||||
border-bottom-left-radius: 14px;
|
||||
border-bottom-right-radius: 14px;
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
.el-card__header {
|
||||
display: block;
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding-top: 16px !important;
|
||||
overflow: hidden;
|
||||
max-height: 560px;
|
||||
opacity: 1;
|
||||
transition:
|
||||
max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
opacity 0.24s ease,
|
||||
padding-top 0.24s ease,
|
||||
padding-bottom 0.24s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.search-panel.is-collapsed {
|
||||
.el-card__body {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-panel-toggle {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: color 0.24s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--app-accent-strong);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
margin-left: auto;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-right: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
color: var(--app-text-muted);
|
||||
transform: rotate(-135deg);
|
||||
transition:
|
||||
transform 0.24s ease,
|
||||
color 0.24s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.search-panel.is-collapsed .search-panel-toggle::after {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
:global(html.dark) {
|
||||
.tree-border {
|
||||
background: rgba(15, 23, 42, 0.42);
|
||||
border-color: rgba(100, 116, 139, 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
/* horizontal el menu */
|
||||
.el-menu--horizontal .el-menu-item .svg-icon + span,
|
||||
.el-menu--horizontal .el-sub-menu__title .svg-icon + span {
|
||||
|
||||
+191
-72
@@ -4,9 +4,9 @@
|
||||
.main-container {
|
||||
height: 100%;
|
||||
transition: margin-left 0.28s;
|
||||
margin-left: $base-sidebar-width;
|
||||
margin-left: calc(#{$base-sidebar-width} + 12px);
|
||||
position: relative;
|
||||
background: var(--el-bg-color-page);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
@@ -17,17 +17,19 @@
|
||||
-webkit-transition: width 0.28s;
|
||||
transition: width 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
background-color: $base-menu-background;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
height: calc(100vh - 24px);
|
||||
position: fixed;
|
||||
font-size: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
border-right: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
@@ -49,10 +51,24 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-logo {
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
.el-scrollbar.theme-light {
|
||||
--side-menu-text: #1f2937;
|
||||
--side-menu-hover-bg: rgba(64, 158, 255, 0.08);
|
||||
--side-menu-hover-text: #111827;
|
||||
--side-menu-active-bg: rgba(64, 158, 255, 0.12);
|
||||
--side-menu-active-text: #409eff;
|
||||
--side-menu-active-border: rgba(64, 158, 255, 0.16);
|
||||
--side-menu-active-line: #409eff;
|
||||
}
|
||||
|
||||
.el-scrollbar.theme-dark {
|
||||
--side-menu-text: #e5edf8;
|
||||
--side-menu-hover-bg: rgba(255, 255, 255, 0.08);
|
||||
--side-menu-hover-text: #ffffff;
|
||||
--side-menu-active-bg: rgba(64, 158, 255, 0.22);
|
||||
--side-menu-active-text: #ffffff;
|
||||
--side-menu-active-border: rgba(96, 165, 250, 0.24);
|
||||
--side-menu-active-line: #60a5fa;
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
@@ -73,6 +89,11 @@
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-menu--inline {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
@@ -82,89 +103,123 @@
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item .svg-icon,
|
||||
.el-sub-menu__title .svg-icon,
|
||||
.el-sub-menu__icon-arrow {
|
||||
color: var(--side-menu-text) !important;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-menu-item .el-menu-tooltip__trigger {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.theme-dark .sub-menu-title-noDropdown,
|
||||
.theme-dark .submenu-title-noDropdown,
|
||||
.theme-dark .el-sub-menu__title {
|
||||
border-radius: var(--app-radius-md);
|
||||
margin: 1px 5px 1px 5px;
|
||||
margin: 3px 8px;
|
||||
&:hover {
|
||||
background-color: $base-sub-menu-title-hover !important;
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
.sub-menu-title-noDropdown,
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
border-radius: var(--app-radius-md);
|
||||
margin: 1px 5px 1px 5px;
|
||||
margin: 3px 8px;
|
||||
color: var(--side-menu-text) !important;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
color: $base-menu-color-active !important;
|
||||
color: var(--side-menu-active-text) !important;
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: calc($base-sidebar-width - 20px) !important;
|
||||
min-width: calc($base-sidebar-width - 16px) !important;
|
||||
border-radius: var(--app-radius-md);
|
||||
height: 45px;
|
||||
margin: 1px 5px 1px 5px;
|
||||
height: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
&:not(.is-active):hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .theme-dark .el-sub-menu .el-menu-item {
|
||||
background-color: $base-sub-menu-background !important;
|
||||
border-radius: var(--app-radius-md);
|
||||
height: 45px;
|
||||
margin: 1px 5px 1px 5px;
|
||||
height: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--el-menu-active-color) !important;
|
||||
color: #fff;
|
||||
background: var(--side-menu-active-bg) !important;
|
||||
color: var(--side-menu-active-text) !important;
|
||||
box-shadow:
|
||||
inset 3px 0 0 var(--side-menu-active-line),
|
||||
inset 0 0 0 1px var(--side-menu-active-border);
|
||||
}
|
||||
&:not(.is-active):hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: $base-sub-menu-hover !important;
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .theme-dark .el-menu-item {
|
||||
border-radius: var(--app-radius-md);
|
||||
height: 45px;
|
||||
margin: 1px 5px 1px 5px;
|
||||
height: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--el-menu-active-color) !important;
|
||||
color: #fff;
|
||||
background: var(--side-menu-active-bg) !important;
|
||||
color: var(--side-menu-active-text) !important;
|
||||
box-shadow:
|
||||
inset 3px 0 0 var(--side-menu-active-line),
|
||||
inset 0 0 0 1px var(--side-menu-active-border);
|
||||
}
|
||||
&:not(.is-active):hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: $base-menu-hover !important;
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .el-menu-item {
|
||||
border-radius: var(--app-radius-md);
|
||||
height: 45px;
|
||||
margin: 1px 5px 1px 5px;
|
||||
height: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&.is-active {
|
||||
background-color: var(--el-menu-active-color) !important;
|
||||
color: #fff;
|
||||
background: var(--side-menu-active-bg) !important;
|
||||
color: var(--side-menu-active-text) !important;
|
||||
box-shadow:
|
||||
inset 3px 0 0 var(--side-menu-active-line),
|
||||
inset 0 0 0 1px var(--side-menu-active-border);
|
||||
}
|
||||
&:not(.is-active):hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: rgba(0, 0, 0, 0.04) !important;
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -172,74 +227,137 @@
|
||||
// 收起菜单后的样式
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 54px !important;
|
||||
width: 58px !important;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 54px;
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.sub-menu-title-noDropdown {
|
||||
.sidebar-shell {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
height: 45px;
|
||||
height: 40px;
|
||||
width: 40px !important;
|
||||
min-width: 40px !important;
|
||||
margin: 3px auto !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center !important;
|
||||
box-sizing: border-box;
|
||||
// 选中状态的菜单
|
||||
&.is-active {
|
||||
background-color: var(--el-menu-active-color) !important;
|
||||
color: #fff !important;
|
||||
background-color: var(--side-menu-active-bg) !important;
|
||||
color: var(--side-menu-active-text) !important;
|
||||
box-shadow: inset 3px 0 0 var(--side-menu-active-line);
|
||||
}
|
||||
|
||||
.el-tooltip {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.el-menu-tooltip__trigger {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& .el-sub-menu {
|
||||
overflow: hidden;
|
||||
border-radius: var(--app-radius-md);
|
||||
.el-sub-menu__title,
|
||||
.el-sub-menu__title.el-tooltip__trigger {
|
||||
border-radius: var(--app-radius-md);
|
||||
height: 45px;
|
||||
height: 40px;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center !important;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// 选中状态的菜单
|
||||
&.is-active .el-sub-menu__title,
|
||||
&.is-active .el-sub-menu__title.el-tooltip__trigger {
|
||||
background-color: var(--el-menu-active-color) !important;
|
||||
background-color: var(--side-menu-active-bg) !important;
|
||||
box-shadow: inset 3px 0 0 var(--side-menu-active-line);
|
||||
}
|
||||
|
||||
|
||||
& > .el-sub-menu__title {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse {
|
||||
> div > .el-sub-menu {
|
||||
width: 40px !important;
|
||||
min-width: 40px !important;
|
||||
margin: 3px auto !important;
|
||||
}
|
||||
|
||||
> div > .el-sub-menu > .el-sub-menu__title,
|
||||
> div > .el-sub-menu > .el-sub-menu__title.el-tooltip__trigger {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
box-sizing: border-box;
|
||||
transform: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.is-active .svg-icon {
|
||||
fill: #fff;
|
||||
fill: currentColor;
|
||||
}
|
||||
.svg-icon {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
// 这里设置width会跟随sidebar-container的transition 不符合预期
|
||||
|
||||
> div > .el-sub-menu > .el-sub-menu__title .svg-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translate(-50%, -50%);
|
||||
display: block;
|
||||
margin: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.el-sub-menu {
|
||||
& > .el-sub-menu__title {
|
||||
& > span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
& > i {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> div > .el-sub-menu > .el-sub-menu__title {
|
||||
justify-content: center !important;
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
& > span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
& > i {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -264,7 +382,7 @@
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-$base-sidebar-width, 0, 0);
|
||||
transform: translate3d(calc(-#{$base-sidebar-width} - 12px), 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -288,6 +406,7 @@
|
||||
// 收起菜单后悬浮的菜单样式
|
||||
.el-popper.is-pure{
|
||||
border-radius: var(--app-radius-md);
|
||||
box-shadow: var(--app-shadow-md);
|
||||
.el-menu--popup{
|
||||
border-radius: var(--app-radius-md);
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
// 全局SCSS变量
|
||||
:root {
|
||||
--menuBg: #1f2d3d;
|
||||
--menuColor: #bfcbd9;
|
||||
--menuActiveText: #f4f4f5;
|
||||
--menuHover: #263445;
|
||||
--menuBg: #ffffff;
|
||||
--menuColor: #1f2937;
|
||||
--menuActiveText: #111827;
|
||||
--menuHover: rgba(64, 158, 255, 0.12);
|
||||
|
||||
--subMenuBg: #1f2d3d;
|
||||
--subMenuActiveText: #f4f4f5;
|
||||
--subMenuHover: #001528;
|
||||
--subMenuTitleHover: #293444;
|
||||
--subMenuBg: #ffffff;
|
||||
--subMenuActiveText: #111827;
|
||||
--subMenuHover: rgba(64, 158, 255, 0.12);
|
||||
--subMenuTitleHover: rgba(64, 158, 255, 0.08);
|
||||
|
||||
// 菜单栏缩进
|
||||
--el-menu-base-level-padding: 12px;
|
||||
@@ -16,8 +16,8 @@
|
||||
--el-menu-item-height: 50px;
|
||||
|
||||
--fixedHeaderBg: #ffffff;
|
||||
--tableHeaderBg: #f8f8f9;
|
||||
--tableHeaderTextColor: #515a6e;
|
||||
--tableHeaderBg: #f8fafc;
|
||||
--tableHeaderTextColor: #475569;
|
||||
|
||||
// ele
|
||||
--brder-color: #e8e8e8;
|
||||
@@ -28,13 +28,28 @@
|
||||
|
||||
// Modern rounded style + soft shadows
|
||||
--app-radius-sm: 6px;
|
||||
--app-radius-md: 10px;
|
||||
--app-radius-lg: 14px;
|
||||
--app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.08);
|
||||
--app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
|
||||
--app-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);
|
||||
--app-radius-md: 12px;
|
||||
--app-radius-lg: 18px;
|
||||
--app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
|
||||
--app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
|
||||
--app-shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.1);
|
||||
--app-surface-bg: #ffffff;
|
||||
--app-surface-border: var(--el-border-color-lighter);
|
||||
--app-surface-border: #e5e7eb;
|
||||
--app-shell-bg: #f5f7fa;
|
||||
--app-shell-spot-1: rgba(64, 158, 255, 0.08);
|
||||
--app-shell-spot-2: rgba(64, 158, 255, 0.04);
|
||||
--app-sidebar-border: #e5e7eb;
|
||||
--app-navbar-bg: #ffffff;
|
||||
--app-navbar-border: #e5e7eb;
|
||||
--app-navbar-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
|
||||
--app-accent-soft: rgba(64, 158, 255, 0.08);
|
||||
--app-accent-strong: #409eff;
|
||||
--app-text-title: #1f2937;
|
||||
--app-text-muted: #6b7280;
|
||||
--app-overlay-mask: rgba(15, 23, 42, 0.22);
|
||||
--app-elevated-soft-bg: #f8fafc;
|
||||
--app-elevated-close-bg: rgba(148, 163, 184, 0.14);
|
||||
--app-elevated-close-hover-bg: rgba(64, 158, 255, 0.14);
|
||||
|
||||
// Element Plus tokens
|
||||
--el-border-radius-base: var(--app-radius-md);
|
||||
@@ -42,21 +57,21 @@
|
||||
--el-border-radius-round: 999px;
|
||||
--el-box-shadow-light: var(--app-shadow-sm);
|
||||
--el-box-shadow: var(--app-shadow-md);
|
||||
--el-bg-color-page: #f5f7fb;
|
||||
--el-bg-color-page: var(--app-shell-bg);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--menuBg: #1d1e1f;
|
||||
--menuColor: #bfcbd9;
|
||||
--menuActiveText: #f4f4f5;
|
||||
--menuHover: #171819;
|
||||
--menuBg: #111827;
|
||||
--menuColor: #e5edf8;
|
||||
--menuActiveText: #f8fbff;
|
||||
--menuHover: rgba(85, 129, 255, 0.2);
|
||||
|
||||
--subMenuBg: #1d1e1f;
|
||||
--subMenuActiveText: #1d1e1f;
|
||||
--subMenuHover: #171819;
|
||||
--subMenuTitleHover: #171819;
|
||||
--subMenuBg: #111827;
|
||||
--subMenuActiveText: #f8fbff;
|
||||
--subMenuHover: rgba(85, 129, 255, 0.18);
|
||||
--subMenuTitleHover: rgba(148, 163, 184, 0.12);
|
||||
|
||||
--fixedHeaderBg: #171819;
|
||||
--fixedHeaderBg: #0f172a;
|
||||
--tableHeaderBg: var(--el-bg-color);
|
||||
--tableHeaderTextColor: var(--el-text-color);
|
||||
|
||||
@@ -204,12 +219,27 @@ html.dark {
|
||||
--tags-view-active-border-color: var(--el-color-primary-light-2);
|
||||
|
||||
// Modern rounded style + soft shadows (dark)
|
||||
--app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 18px rgba(0, 0, 0, 0.25);
|
||||
--app-shadow-md: 0 10px 26px rgba(0, 0, 0, 0.35);
|
||||
--app-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.4);
|
||||
--app-surface-bg: #151922;
|
||||
--app-surface-border: var(--el-border-color);
|
||||
--el-bg-color-page: #0f1115;
|
||||
--app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
|
||||
--app-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.28);
|
||||
--app-shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.32);
|
||||
--app-surface-bg: #111827;
|
||||
--app-surface-border: rgba(71, 85, 105, 0.5);
|
||||
--app-shell-bg: #060b16;
|
||||
--app-shell-spot-1: rgba(69, 120, 255, 0.18);
|
||||
--app-shell-spot-2: rgba(45, 212, 191, 0.14);
|
||||
--app-sidebar-border: rgba(148, 163, 184, 0.1);
|
||||
--app-navbar-bg: #111827;
|
||||
--app-navbar-border: rgba(71, 85, 105, 0.48);
|
||||
--app-navbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
|
||||
--app-accent-soft: rgba(64, 158, 255, 0.14);
|
||||
--app-accent-strong: #60a5fa;
|
||||
--app-text-title: #f3f7ff;
|
||||
--app-text-muted: #8ea0bd;
|
||||
--app-overlay-mask: rgba(2, 6, 23, 0.58);
|
||||
--app-elevated-soft-bg: rgba(148, 163, 184, 0.08);
|
||||
--app-elevated-close-bg: rgba(148, 163, 184, 0.18);
|
||||
--app-elevated-close-hover-bg: rgba(96, 165, 250, 0.18);
|
||||
--el-bg-color-page: var(--app-shell-bg);
|
||||
// vxe-table 主题
|
||||
--vxe-font-color: #98989e;
|
||||
--vxe-primary-color: #2c7ecf;
|
||||
|
||||
Reference in New Issue
Block a user