update 重构 将scss文件拆解 按具体功能细分文件 便于后续维护
This commit is contained in:
疯狂的狮子Li
@@ -0,0 +1,144 @@
|
||||
/* Global document styles and lightweight utility helpers. */
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
background: var(--app-shell-bg);
|
||||
font-family:
|
||||
'MiSans',
|
||||
'HarmonyOS Sans SC',
|
||||
'PingFang SC',
|
||||
'Source Han Sans SC',
|
||||
'Noto Sans SC',
|
||||
'Hiragino Sans GB',
|
||||
'Microsoft YaHei',
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html.dark .svg-icon,
|
||||
html.dark svg {
|
||||
fill: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.padding-content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pl-5 {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inlineBlock {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: ' ';
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
background: #eef1f6;
|
||||
padding: 8px 24px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: var(--app-radius-md);
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-family:
|
||||
'MiSans',
|
||||
'HarmonyOS Sans SC',
|
||||
'PingFang SC',
|
||||
'Source Han Sans SC',
|
||||
'Noto Sans SC',
|
||||
'Hiragino Sans GB',
|
||||
'Microsoft YaHei',
|
||||
sans-serif;
|
||||
color: #2c3e50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
a {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/* Shared cards, panels, and content surfaces. */
|
||||
|
||||
.form-header {
|
||||
font-size: 15px;
|
||||
color: #6379bb;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 8px 10px 25px 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 18px;
|
||||
padding: 10px 0 0 !important;
|
||||
}
|
||||
|
||||
.tree-border {
|
||||
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) {
|
||||
.pagination-container .el-pagination > .el-pagination__jump {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pagination-container .el-pagination > .el-pagination__sizes {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table .fixed-width .el-button--small {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.el-table .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-table .el-dropdown,
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.list-group-striped > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 14px 16px 10px !important;
|
||||
min-height: auto;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: var(--app-radius-lg);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
border-color: var(--app-surface-border);
|
||||
overflow: hidden;
|
||||
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);
|
||||
border-color: rgba(64, 158, 255, 0.16);
|
||||
}
|
||||
|
||||
.card-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/* Legacy shared layout helpers that were previously kept in index.scss. */
|
||||
|
||||
.components-container {
|
||||
margin: 30px 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub-navbar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
transition: 600ms ease position;
|
||||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
|
||||
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.draft {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
}
|
||||
|
||||
.link-type,
|
||||
.link-type:focus {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
padding-bottom: 10px;
|
||||
|
||||
.filter-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
/* Legacy shared utility classes that are still used across pages. */
|
||||
|
||||
@use '../variables.module.scss' as *;
|
||||
|
||||
.pt5 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.pr5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pb5 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.mr5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mb5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mr20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.el-form .el-form-item__label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 6vh !important;
|
||||
}
|
||||
|
||||
.el-dialog.scrollbar .el-dialog__body {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
padding: 14px 22px 4px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
.el-table__header-wrapper,
|
||||
.el-table__fixed-header-wrapper {
|
||||
th {
|
||||
word-break: break-word;
|
||||
background-color: $table-header-bg !important;
|
||||
color: $table-header-text-color;
|
||||
height: 40px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*='el-icon-'] + span {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--horizontal .el-menu-item .svg-icon + span,
|
||||
.el-menu--horizontal .el-sub-menu__title .svg-icon + span {
|
||||
margin-left: 3px;
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/* Shared vertical page shell spacing helpers. */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Scoped mixins for CRUD pages so view-level styles stay focused on page-specific rules. */
|
||||
|
||||
@mixin action-link-buttons($background: rgba(53, 109, 255, 0.08)) {
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin toolbar-responsive($mobile-breakpoint: 900px) {
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin content-stack($gap: 12px) {
|
||||
.content-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dept-tree-panel($padding-top: 6px) {
|
||||
.dept-tree {
|
||||
padding-top: $padding-top;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin table-crud-page($mobile-breakpoint: 900px, $background: rgba(53, 109, 255, 0.08)) {
|
||||
@include action-link-buttons($background);
|
||||
@include toolbar-responsive($mobile-breakpoint);
|
||||
}
|
||||
|
||||
@mixin tree-table-crud-page($mobile-breakpoint: 900px, $gap: 12px, $tree-padding-top: 6px, $background: rgba(53, 109, 255, 0.08)) {
|
||||
@include content-stack($gap);
|
||||
@include dept-tree-panel($tree-padding-top);
|
||||
@include table-crud-page($mobile-breakpoint, $background);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
/* Shared search and filter form layout. */
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/* Search panel, table actions, and responsive panel shells. */
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/* Reusable scoped mixins for selector dialogs backed by cards and vxe tables. */
|
||||
|
||||
@mixin shell-gap($selectors...) {
|
||||
@each $selector in $selectors {
|
||||
#{$selector} {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-shell {
|
||||
.selector-card {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dialog-body-padding($dialog-class) {
|
||||
.#{$dialog-class} :deep(.el-dialog__body) {
|
||||
padding-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin selector-header-tags($mobile-breakpoint: 768px) {
|
||||
.selector-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.selector-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
max-width: min(100%, 520px);
|
||||
}
|
||||
|
||||
.selector-tags :deep(.el-tag) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
.selector-tags {
|
||||
justify-content: flex-start;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin selector-table {
|
||||
.selector-table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-table--render-default) {
|
||||
border-radius: 10px;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-header--column) {
|
||||
background: var(--tableHeaderBg);
|
||||
color: var(--tableHeaderTextColor);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-body--column),
|
||||
.selector-table :deep(.vxe-header--column) {
|
||||
border-color: var(--app-surface-border);
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-body--row.row--hover),
|
||||
.selector-table :deep(.vxe-body--row:hover) {
|
||||
background-color: rgba(53, 109, 255, 0.05);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/* Table headers and toolbar action layouts. */
|
||||
|
||||
.top-right-btn {
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/* Legacy theme helper classes and color accents. */
|
||||
|
||||
.el-button--cyan.is-active,
|
||||
.el-button--cyan:active {
|
||||
background: #20b2aa;
|
||||
border-color: #20b2aa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--cyan:focus,
|
||||
.el-button--cyan:hover {
|
||||
background: #48d1cc;
|
||||
border-color: #48d1cc;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--cyan {
|
||||
background-color: #20b2aa;
|
||||
border-color: #20b2aa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #1c84c6;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #23c6c8;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #f8ac59;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #ed5565;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-lg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar-upload-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sortable-ghost {
|
||||
opacity: 0.8;
|
||||
color: #fff !important;
|
||||
background: #42b983 !important;
|
||||
}
|
||||
@@ -1,956 +0,0 @@
|
||||
.el-collapse {
|
||||
.collapse__title {
|
||||
font-weight: 600;
|
||||
padding: 0 8px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.el-collapse-item__content {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
input[type='file'] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cell {
|
||||
.el-tag {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.small-padding {
|
||||
.cell {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
.el-button--mini {
|
||||
padding: 7px 10px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-col {
|
||||
.cell {
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
|
||||
.el-tag {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*-------------Dialog-------------**/
|
||||
.el-overlay {
|
||||
overflow: hidden;
|
||||
background: var(--app-overlay-mask);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
.el-overlay-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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: 18px 20px 12px !important;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: calc(90vh - 111px) !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-dialog__footer .el-button {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-dialog__footer .dialog-footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// refine element ui upload
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown
|
||||
.el-dropdown-menu {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// fix date-picker ui bug in filter-item
|
||||
.el-range-editor.el-input__inner {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
// to fix el-date-picker css style
|
||||
.el-range-separator {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.el-menu--collapse > div > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-dropdown .el-dropdown-link {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
/* 当 el-form 的 inline 属性为 true 时 */
|
||||
/* 设置 label 的宽度默认为 68px */
|
||||
.el-form--inline .el-form-item__label {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
/* 设置 el-select 的宽度默认为 240px */
|
||||
.el-form--inline .el-select {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
/* 设置 el-input 的宽度默认为 240px */
|
||||
.el-form--inline .el-input {
|
||||
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 {
|
||||
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,
|
||||
.el-notification,
|
||||
.el-alert {
|
||||
border-radius: var(--app-radius-md);
|
||||
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-tree-select__popper .el-tree-node__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-tree-select__popper .el-select-dropdown__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-height: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-tree-select__popper .el-tree-node__expand-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.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,
|
||||
.el-select__wrapper,
|
||||
.el-date-editor,
|
||||
.el-range-editor,
|
||||
.el-input-number,
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
border-radius: var(--app-radius-md);
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus,
|
||||
.el-textarea__inner:focus,
|
||||
.el-select__wrapper.is-focus,
|
||||
.el-date-editor.is-focus,
|
||||
.el-range-editor.is-focus {
|
||||
box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.el-button {
|
||||
border-radius: var(--app-radius-md);
|
||||
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 {
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
// Tags and badges
|
||||
.el-tag {
|
||||
border-radius: var(--app-radius-md);
|
||||
}
|
||||
|
||||
// Cards, popovers, drawers
|
||||
.el-popover,
|
||||
.el-tooltip__popper,
|
||||
.el-popper {
|
||||
border-radius: var(--app-radius-md);
|
||||
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: 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: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table__row:hover td.el-table__cell {
|
||||
background-color: rgba(53, 109, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.el-tabs__header {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
border-radius: var(--app-radius-md);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.el-pagination .btn-prev,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .el-pager li {
|
||||
border-radius: var(--app-radius-sm);
|
||||
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);
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
.el-breadcrumb {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
+24
-269
@@ -1,275 +1,30 @@
|
||||
@use './variables.module.scss' as *;
|
||||
@use './mixin.scss';
|
||||
@use './transition.scss';
|
||||
@use './element-ui.scss';
|
||||
@use './sidebar.scss';
|
||||
@use './base/document';
|
||||
@use './layout/surface';
|
||||
@use './layout/sidebar/shell' as sidebar-shell;
|
||||
@use './layout/sidebar/menu';
|
||||
@use './layout/sidebar/collapsed';
|
||||
@use './layout/sidebar/responsive';
|
||||
@use './layout/sidebar/popper' as sidebar-popper;
|
||||
@use './components/legacy-layout';
|
||||
@use './components/legacy-utilities';
|
||||
@use './components/page-shell';
|
||||
@use './components/card-shell';
|
||||
@use './components/theme-helpers';
|
||||
@use './components/table-toolbar';
|
||||
@use './components/query-form';
|
||||
@use './components/search-panel';
|
||||
@use './vendors/element-plus/primitives';
|
||||
@use './vendors/element-plus/base';
|
||||
@use './vendors/element-plus/dialog';
|
||||
@use './vendors/element-plus/dropdown';
|
||||
@use './vendors/element-plus/form';
|
||||
@use './vendors/element-plus/feedback';
|
||||
@use './vendors/element-plus/popper' as element-popper;
|
||||
@use './vendors/element-plus/shell' as element-shell;
|
||||
@use './vendors/element-plus/navigation';
|
||||
@use './btn.scss';
|
||||
@use './ruoyi.scss';
|
||||
@use 'animate.css';
|
||||
@use 'element-plus/dist/index.css';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
background: var(--app-shell-bg);
|
||||
font-family:
|
||||
'MiSans',
|
||||
'HarmonyOS Sans SC',
|
||||
'PingFang SC',
|
||||
'Source Han Sans SC',
|
||||
'Noto Sans SC',
|
||||
'Hiragino Sans GB',
|
||||
'Microsoft YaHei',
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html.dark .svg-icon,
|
||||
html.dark svg {
|
||||
fill: var(--el-text-color-regular);
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.padding-content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pl-5 {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inlineBlock {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: ' ';
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
background: #eef1f6;
|
||||
padding: 8px 24px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: var(--app-radius-md);
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-family:
|
||||
'MiSans',
|
||||
'HarmonyOS Sans SC',
|
||||
'PingFang SC',
|
||||
'Source Han Sans SC',
|
||||
'Noto Sans SC',
|
||||
'Hiragino Sans GB',
|
||||
'Microsoft YaHei',
|
||||
sans-serif;
|
||||
color: #2c3e50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
a {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//main-container全局样式
|
||||
.app-container {
|
||||
padding: 16px;
|
||||
background: var(--app-surface-bg);
|
||||
border: 1px solid var(--app-surface-border);
|
||||
border-radius: var(--app-radius-lg);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
// search面板样式
|
||||
.panel,
|
||||
.search {
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: var(--app-radius-lg);
|
||||
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, border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
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 var(--el-border-color) inset;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
margin: 30px 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub-navbar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
transition: 600ms ease position;
|
||||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
|
||||
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.draft {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
}
|
||||
|
||||
.link-type,
|
||||
.link-type:focus {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
padding-bottom: 10px;
|
||||
|
||||
.filter-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
/* Shared page shells that are not tied to a specific component library. */
|
||||
|
||||
.app-container {
|
||||
padding: 16px;
|
||||
background: var(--app-surface-bg);
|
||||
border: 1px solid var(--app-surface-border);
|
||||
border-radius: var(--app-radius-lg);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
.panel,
|
||||
.search {
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: var(--app-radius-lg);
|
||||
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, border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
border-color: rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
/* Collapsed desktop sidebar behavior and compact trigger states. */
|
||||
|
||||
#app {
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 58px !important;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.sidebar-shell {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
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(--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: 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(--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: currentColor;
|
||||
}
|
||||
|
||||
> 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;
|
||||
}
|
||||
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
/* Menu hover, active states, and nested item styling. */
|
||||
|
||||
@use '../../variables.module.scss' as *;
|
||||
|
||||
#app {
|
||||
.sidebar-container {
|
||||
.theme-dark .submenu-title-noDropdown,
|
||||
.theme-dark .el-sub-menu__title {
|
||||
border-radius: var(--app-radius-md);
|
||||
margin: 3px 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
border-radius: var(--app-radius-md);
|
||||
margin: 3px 8px;
|
||||
color: var(--side-menu-text) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
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 - 16px) !important;
|
||||
border-radius: var(--app-radius-md);
|
||||
height: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&:not(.is-active):hover {
|
||||
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 {
|
||||
border-radius: var(--app-radius-md);
|
||||
height: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&.is-active {
|
||||
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 {
|
||||
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: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&.is-active {
|
||||
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 {
|
||||
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: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&.is-active {
|
||||
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 {
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/* Collapsed navigation poppers and popup menu refinements. */
|
||||
|
||||
.el-menu--vertical {
|
||||
& > .el-menu {
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
border-radius: var(--app-radius-sm);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/* Responsive sidebar behavior for mobile and transition disabling. */
|
||||
|
||||
@use '../../variables.module.scss' as *;
|
||||
|
||||
#app {
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(calc(-#{$base-sidebar-width} - 12px), 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/* Sidebar shell, base sizing, and main container offsets. */
|
||||
|
||||
@use '../../variables.module.scss' as *;
|
||||
|
||||
#app {
|
||||
.main-container {
|
||||
height: 100%;
|
||||
transition: margin-left 0.28s;
|
||||
margin-left: calc(#{$base-sidebar-width} + 12px);
|
||||
position: relative;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
-webkit-transition: width 0.28s;
|
||||
transition: width 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
background: transparent;
|
||||
height: calc(100vh - 24px);
|
||||
position: fixed;
|
||||
font-size: 0;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
border-right: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
.horizontal-collapse-transition {
|
||||
transition:
|
||||
0s width ease-in-out,
|
||||
0s padding-left ease-in-out,
|
||||
0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-menu--inline {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.menu-title {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-sub-menu {
|
||||
min-width: $base-sidebar-width !important;
|
||||
}
|
||||
}
|
||||
@@ -1,623 +0,0 @@
|
||||
@use './variables.module.scss' as *;
|
||||
|
||||
/**
|
||||
* 通用css样式布局处理
|
||||
* Copyright (c) 2019 ruoyi
|
||||
*/
|
||||
|
||||
/** 基础通用 **/
|
||||
.pt5 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pr5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.pb5 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mr5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.mb5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mr20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ml20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.el-dialog.scrollbar .el-dialog__body {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 70vh;
|
||||
padding: 14px 22px 4px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
.el-table__header-wrapper,
|
||||
.el-table__fixed-header-wrapper {
|
||||
th {
|
||||
word-break: break-word;
|
||||
background-color: $table-header-bg !important;
|
||||
color: $table-header-text-color;
|
||||
height: 40px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*='el-icon-'] + span {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 表单布局 **/
|
||||
.form-header {
|
||||
font-size: 15px;
|
||||
color: #6379bb;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 8px 10px 25px 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/** 表格布局 **/
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 18px;
|
||||
padding: 10px 0 0 !important;
|
||||
}
|
||||
|
||||
/* tree border */
|
||||
.tree-border {
|
||||
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) {
|
||||
.pagination-container .el-pagination > .el-pagination__jump {
|
||||
display: none !important;
|
||||
}
|
||||
.pagination-container .el-pagination > .el-pagination__sizes {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table .fixed-width .el-button--small {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
/** 表格更多操作下拉样式 */
|
||||
.el-table .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-table .el-dropdown,
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.list-group-striped > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 14px 16px 10px !important;
|
||||
min-height: auto;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
border-radius: var(--app-radius-lg);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
border-color: var(--app-surface-border);
|
||||
overflow: hidden;
|
||||
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);
|
||||
border-color: rgba(64, 158, 255, 0.16);
|
||||
}
|
||||
|
||||
.card-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* button color */
|
||||
.el-button--cyan.is-active,
|
||||
.el-button--cyan:active {
|
||||
background: #20b2aa;
|
||||
border-color: #20b2aa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--cyan:focus,
|
||||
.el-button--cyan:hover {
|
||||
background: #48d1cc;
|
||||
border-color: #48d1cc;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--cyan {
|
||||
background-color: #20b2aa;
|
||||
border-color: #20b2aa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* text color */
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #1c84c6;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #23c6c8;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #f8ac59;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #ed5565;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* image */
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-lg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar-upload-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 拖拽列样式 */
|
||||
.sortable-ghost {
|
||||
opacity: 0.8;
|
||||
color: #fff !important;
|
||||
background: #42b983 !important;
|
||||
}
|
||||
|
||||
/* 表格右侧工具栏样式 */
|
||||
.top-right-btn {
|
||||
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 {
|
||||
margin-left: 3px;
|
||||
}
|
||||
@@ -1,416 +0,0 @@
|
||||
@use './variables.module.scss' as *;
|
||||
|
||||
#app {
|
||||
.main-container {
|
||||
height: 100%;
|
||||
transition: margin-left 0.28s;
|
||||
margin-left: calc(#{$base-sidebar-width} + 12px);
|
||||
position: relative;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
-webkit-transition: width 0.28s;
|
||||
transition: width 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
background: transparent;
|
||||
height: calc(100vh - 24px);
|
||||
position: fixed;
|
||||
font-size: 0;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
border-right: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
transition:
|
||||
0s width ease-in-out,
|
||||
0s padding-left ease-in-out,
|
||||
0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-menu--inline {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.menu-title {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
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 .submenu-title-noDropdown,
|
||||
.theme-dark .el-sub-menu__title {
|
||||
border-radius: var(--app-radius-md);
|
||||
margin: 3px 8px;
|
||||
&:hover {
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
border-radius: var(--app-radius-md);
|
||||
margin: 3px 8px;
|
||||
color: var(--side-menu-text) !important;
|
||||
&:hover {
|
||||
background-color: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
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 - 16px) !important;
|
||||
border-radius: var(--app-radius-md);
|
||||
height: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
&:not(.is-active):hover {
|
||||
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 {
|
||||
border-radius: var(--app-radius-md);
|
||||
height: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&.is-active {
|
||||
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: 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: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&.is-active {
|
||||
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: 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: 40px;
|
||||
margin: 3px 8px;
|
||||
background: transparent !important;
|
||||
|
||||
&.is-active {
|
||||
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: var(--side-menu-hover-bg) !important;
|
||||
color: var(--side-menu-hover-text) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 收起菜单后的样式
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 58px !important;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.sidebar-shell {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
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(--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: 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(--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: currentColor;
|
||||
}
|
||||
|
||||
> 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;
|
||||
}
|
||||
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-sub-menu {
|
||||
min-width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
// mobile responsive
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(calc(-#{$base-sidebar-width} - 12px), 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// when menu collapsed
|
||||
.el-menu--vertical {
|
||||
& > .el-menu {
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 收起菜单后悬浮的菜单样式
|
||||
.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);
|
||||
}
|
||||
.el-menu-item{
|
||||
border-radius: var(--app-radius-sm);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/* CSS module exports preserved for JS/Vue consumers. */
|
||||
|
||||
@use './sass-vars' as *;
|
||||
|
||||
:export {
|
||||
menuColor: $base-menu-color;
|
||||
menuLightColor: $base-menu-light-color;
|
||||
menuColorActive: $base-menu-color-active;
|
||||
menuBackground: $base-menu-background;
|
||||
menuLightBackground: $base-menu-light-background;
|
||||
subMenuBackground: $base-sub-menu-background;
|
||||
subMenuHover: $base-sub-menu-hover;
|
||||
sideBarWidth: $base-sidebar-width;
|
||||
logoTitleColor: $base-logo-title-color;
|
||||
logoLightTitleColor: $base-logo-light-title-color;
|
||||
primaryColor: $color-primary;
|
||||
successColor: $color-success;
|
||||
dangerColor: $color-danger;
|
||||
infoColor: $color-info;
|
||||
warningColor: $color-warning;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/* Sass variables consumed by legacy modules and CSS module exports. */
|
||||
|
||||
$blue: #324157;
|
||||
$light-blue: #3a71a8;
|
||||
$red: #c03639;
|
||||
$pink: #e65d6e;
|
||||
$green: #30b08f;
|
||||
$tiffany: #4ab7bd;
|
||||
$yellow: #fec171;
|
||||
$panGreen: #30b08f;
|
||||
|
||||
$base-menu-color: var(--menuColor);
|
||||
$base-menu-hover: var(--menuHover);
|
||||
$base-menu-color-active: var(--menuActiveText);
|
||||
$base-menu-background: var(--menuBg);
|
||||
$base-logo-title-color: #ffffff;
|
||||
|
||||
$base-menu-light-color: rgba(0, 0, 0, 0.7);
|
||||
$base-menu-light-background: #ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
$base-sub-menu-background: var(--subMenuBg);
|
||||
$base-sub-menu-hover: var(--subMenuHover);
|
||||
$base-sub-menu-title-hover: var(--subMenuTitleHover);
|
||||
|
||||
$fixed-header-bg: var(--fixedHeaderBg);
|
||||
$table-header-bg: var(--tableHeaderBg);
|
||||
$table-header-text-color: var(--tableHeaderTextColor);
|
||||
|
||||
$color-primary: #409eff;
|
||||
$color-success: #67c23a;
|
||||
$color-warning: #e6a23c;
|
||||
$color-danger: #f56c6c;
|
||||
$color-info: #909399;
|
||||
|
||||
$--color-primary: $color-primary;
|
||||
$--color-success: $color-success;
|
||||
$--color-warning: $color-warning;
|
||||
$--color-danger: $color-danger;
|
||||
$--color-info: $color-info;
|
||||
|
||||
$base-sidebar-width: 200px;
|
||||
@@ -0,0 +1,194 @@
|
||||
/* Dark theme CSS variables and component token overrides. */
|
||||
|
||||
html.dark {
|
||||
--menuBg: #111827;
|
||||
--menuColor: #e5edf8;
|
||||
--menuActiveText: #f8fbff;
|
||||
--menuHover: rgba(85, 129, 255, 0.2);
|
||||
|
||||
--subMenuBg: #111827;
|
||||
--subMenuActiveText: #f8fbff;
|
||||
--subMenuHover: rgba(85, 129, 255, 0.18);
|
||||
--subMenuTitleHover: rgba(148, 163, 184, 0.12);
|
||||
|
||||
--fixedHeaderBg: #0f172a;
|
||||
--tableHeaderBg: var(--el-bg-color);
|
||||
--tableHeaderTextColor: var(--el-text-color);
|
||||
|
||||
.el-tree-node__content {
|
||||
--el-color-primary-light-9: #262727;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: #2b6bd3;
|
||||
--el-button-border-color: #3a7be8;
|
||||
--el-button-text-color: #eef4ff;
|
||||
--el-button-hover-bg-color: #3a7be8;
|
||||
--el-button-hover-border-color: #3a7be8;
|
||||
--el-button-active-bg-color: #255fb8;
|
||||
--el-button-active-border-color: #255fb8;
|
||||
}
|
||||
|
||||
.el-button--primary.is-plain {
|
||||
--el-button-bg-color: rgba(43, 107, 211, 0.12);
|
||||
--el-button-border-color: rgba(58, 123, 232, 0.5);
|
||||
--el-button-text-color: #dbe8ff;
|
||||
--el-button-hover-bg-color: rgba(58, 123, 232, 0.2);
|
||||
--el-button-hover-border-color: rgba(58, 123, 232, 0.7);
|
||||
--el-button-active-bg-color: rgba(43, 107, 211, 0.28);
|
||||
--el-button-active-border-color: rgba(43, 107, 211, 0.8);
|
||||
}
|
||||
|
||||
.el-button--success {
|
||||
--el-button-bg-color: #1f8a5a;
|
||||
--el-button-border-color: #29a46d;
|
||||
--el-button-text-color: #eefaf4;
|
||||
--el-button-hover-bg-color: #29a46d;
|
||||
--el-button-hover-border-color: #29a46d;
|
||||
--el-button-active-bg-color: #1b784f;
|
||||
--el-button-active-border-color: #1b784f;
|
||||
}
|
||||
|
||||
.el-button--success.is-plain {
|
||||
--el-button-bg-color: rgba(31, 138, 90, 0.12);
|
||||
--el-button-border-color: rgba(41, 164, 109, 0.5);
|
||||
--el-button-text-color: #dbf6e8;
|
||||
--el-button-hover-bg-color: rgba(41, 164, 109, 0.2);
|
||||
--el-button-hover-border-color: rgba(41, 164, 109, 0.7);
|
||||
--el-button-active-bg-color: rgba(31, 138, 90, 0.28);
|
||||
--el-button-active-border-color: rgba(31, 138, 90, 0.8);
|
||||
}
|
||||
|
||||
.el-button--warning {
|
||||
--el-button-bg-color: #b87922;
|
||||
--el-button-border-color: #d6953b;
|
||||
--el-button-text-color: #fff7e6;
|
||||
--el-button-hover-bg-color: #d6953b;
|
||||
--el-button-hover-border-color: #d6953b;
|
||||
--el-button-active-bg-color: #a56c1d;
|
||||
--el-button-active-border-color: #a56c1d;
|
||||
}
|
||||
|
||||
.el-button--warning.is-plain {
|
||||
--el-button-bg-color: rgba(184, 121, 34, 0.12);
|
||||
--el-button-border-color: rgba(214, 149, 59, 0.5);
|
||||
--el-button-text-color: #ffecc8;
|
||||
--el-button-hover-bg-color: rgba(214, 149, 59, 0.2);
|
||||
--el-button-hover-border-color: rgba(214, 149, 59, 0.7);
|
||||
--el-button-active-bg-color: rgba(184, 121, 34, 0.28);
|
||||
--el-button-active-border-color: rgba(184, 121, 34, 0.8);
|
||||
}
|
||||
|
||||
.el-button--danger {
|
||||
--el-button-bg-color: #b24a4a;
|
||||
--el-button-border-color: #d16060;
|
||||
--el-button-text-color: #ffecec;
|
||||
--el-button-hover-bg-color: #d16060;
|
||||
--el-button-hover-border-color: #d16060;
|
||||
--el-button-active-bg-color: #9c3f3f;
|
||||
--el-button-active-border-color: #9c3f3f;
|
||||
}
|
||||
|
||||
.el-button--danger.is-plain {
|
||||
--el-button-bg-color: rgba(178, 74, 74, 0.12);
|
||||
--el-button-border-color: rgba(209, 96, 96, 0.5);
|
||||
--el-button-text-color: #ffd6d6;
|
||||
--el-button-hover-bg-color: rgba(209, 96, 96, 0.2);
|
||||
--el-button-hover-border-color: rgba(209, 96, 96, 0.7);
|
||||
--el-button-active-bg-color: rgba(178, 74, 74, 0.28);
|
||||
--el-button-active-border-color: rgba(178, 74, 74, 0.8);
|
||||
}
|
||||
|
||||
.el-button--info {
|
||||
--el-button-bg-color: #4b5563;
|
||||
--el-button-border-color: #667085;
|
||||
--el-button-text-color: #f3f4f6;
|
||||
--el-button-hover-bg-color: #667085;
|
||||
--el-button-hover-border-color: #667085;
|
||||
--el-button-active-bg-color: #3f4753;
|
||||
--el-button-active-border-color: #3f4753;
|
||||
}
|
||||
|
||||
.el-button--info.is-plain {
|
||||
--el-button-bg-color: rgba(75, 85, 99, 0.16);
|
||||
--el-button-border-color: rgba(102, 112, 133, 0.55);
|
||||
--el-button-text-color: #e5e7eb;
|
||||
--el-button-hover-bg-color: rgba(102, 112, 133, 0.22);
|
||||
--el-button-hover-border-color: rgba(102, 112, 133, 0.75);
|
||||
--el-button-active-bg-color: rgba(75, 85, 99, 0.3);
|
||||
--el-button-active-border-color: rgba(75, 85, 99, 0.85);
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
--el-switch-on-color: var(--el-color-primary-dark-6);
|
||||
--el-switch-border-color: var(--el-color-primary-light-2);
|
||||
}
|
||||
|
||||
.el-tag--primary {
|
||||
--el-tag-bg-color: var(--el-color-primary-dark-6);
|
||||
--el-tag-border-color: var(--el-color-primary-light-2);
|
||||
}
|
||||
|
||||
.el-tag--success {
|
||||
--el-tag-bg-color: rgba(31, 138, 90, 0.18);
|
||||
--el-tag-border-color: rgba(41, 164, 109, 0.6);
|
||||
--el-tag-text-color: #c7f2df;
|
||||
}
|
||||
|
||||
.el-tag--warning {
|
||||
--el-tag-bg-color: rgba(184, 121, 34, 0.18);
|
||||
--el-tag-border-color: rgba(214, 149, 59, 0.6);
|
||||
--el-tag-text-color: #ffe6bb;
|
||||
}
|
||||
|
||||
.el-tag--danger {
|
||||
--el-tag-bg-color: rgba(178, 74, 74, 0.18);
|
||||
--el-tag-border-color: rgba(209, 96, 96, 0.6);
|
||||
--el-tag-text-color: #ffd0d0;
|
||||
}
|
||||
|
||||
.el-tag--info {
|
||||
--el-tag-bg-color: rgba(75, 85, 99, 0.18);
|
||||
--el-tag-border-color: rgba(102, 112, 133, 0.6);
|
||||
--el-tag-text-color: #e5e7eb;
|
||||
}
|
||||
|
||||
--tags-view-active-bg: var(--el-color-primary-dark-6);
|
||||
--tags-view-active-border-color: var(--el-color-primary-light-2);
|
||||
|
||||
--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-font-color: #98989e;
|
||||
--vxe-primary-color: #2c7ecf;
|
||||
--vxe-icon-background-color: #98989e;
|
||||
--vxe-table-font-color: #98989e;
|
||||
--vxe-table-resizable-color: #95969a;
|
||||
--vxe-table-header-background-color: #28282a;
|
||||
--vxe-table-body-background-color: #151518;
|
||||
--vxe-table-background-color: #4a5663;
|
||||
--vxe-table-border-width: 1px;
|
||||
--vxe-table-border-color: #37373a;
|
||||
--vxe-toolbar-background-color: #37373a;
|
||||
|
||||
--brder-color: #37373a;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/* Light theme CSS variables and shared design tokens. */
|
||||
|
||||
:root {
|
||||
--menuBg: #ffffff;
|
||||
--menuColor: #1f2937;
|
||||
--menuActiveText: #111827;
|
||||
--menuHover: rgba(64, 158, 255, 0.12);
|
||||
|
||||
--subMenuBg: #ffffff;
|
||||
--subMenuActiveText: #111827;
|
||||
--subMenuHover: rgba(64, 158, 255, 0.12);
|
||||
--subMenuTitleHover: rgba(64, 158, 255, 0.08);
|
||||
|
||||
--el-menu-base-level-padding: 12px;
|
||||
--el-menu-level-padding: 8px;
|
||||
--el-menu-item-height: 50px;
|
||||
|
||||
--fixedHeaderBg: #ffffff;
|
||||
--tableHeaderBg: #f8fafc;
|
||||
--tableHeaderTextColor: #475569;
|
||||
|
||||
--brder-color: #e8e8e8;
|
||||
|
||||
--tags-view-active-bg: var(--el-color-primary);
|
||||
--tags-view-active-border-color: var(--el-color-primary);
|
||||
|
||||
--app-radius-sm: 6px;
|
||||
--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: #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);
|
||||
|
||||
--el-border-radius-base: var(--app-radius-md);
|
||||
--el-border-radius-small: var(--app-radius-sm);
|
||||
--el-border-radius-round: 999px;
|
||||
--el-box-shadow-light: var(--app-shadow-sm);
|
||||
--el-box-shadow: var(--app-shadow-md);
|
||||
--el-bg-color-page: var(--app-shell-bg);
|
||||
}
|
||||
@@ -1,315 +1,5 @@
|
||||
// 全局SCSS变量
|
||||
:root {
|
||||
--menuBg: #ffffff;
|
||||
--menuColor: #1f2937;
|
||||
--menuActiveText: #111827;
|
||||
--menuHover: rgba(64, 158, 255, 0.12);
|
||||
@forward './tokens/sass-vars';
|
||||
|
||||
--subMenuBg: #ffffff;
|
||||
--subMenuActiveText: #111827;
|
||||
--subMenuHover: rgba(64, 158, 255, 0.12);
|
||||
--subMenuTitleHover: rgba(64, 158, 255, 0.08);
|
||||
|
||||
// 菜单栏缩进
|
||||
--el-menu-base-level-padding: 12px;
|
||||
--el-menu-level-padding: 8px;
|
||||
--el-menu-item-height: 50px;
|
||||
|
||||
--fixedHeaderBg: #ffffff;
|
||||
--tableHeaderBg: #f8fafc;
|
||||
--tableHeaderTextColor: #475569;
|
||||
|
||||
// ele
|
||||
--brder-color: #e8e8e8;
|
||||
|
||||
// 添加 tag 相关变量
|
||||
--tags-view-active-bg: var(--el-color-primary);
|
||||
--tags-view-active-border-color: var(--el-color-primary);
|
||||
|
||||
// Modern rounded style + soft shadows
|
||||
--app-radius-sm: 6px;
|
||||
--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: #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);
|
||||
--el-border-radius-small: var(--app-radius-sm);
|
||||
--el-border-radius-round: 999px;
|
||||
--el-box-shadow-light: var(--app-shadow-sm);
|
||||
--el-box-shadow: var(--app-shadow-md);
|
||||
--el-bg-color-page: var(--app-shell-bg);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--menuBg: #111827;
|
||||
--menuColor: #e5edf8;
|
||||
--menuActiveText: #f8fbff;
|
||||
--menuHover: rgba(85, 129, 255, 0.2);
|
||||
|
||||
--subMenuBg: #111827;
|
||||
--subMenuActiveText: #f8fbff;
|
||||
--subMenuHover: rgba(85, 129, 255, 0.18);
|
||||
--subMenuTitleHover: rgba(148, 163, 184, 0.12);
|
||||
|
||||
--fixedHeaderBg: #0f172a;
|
||||
--tableHeaderBg: var(--el-bg-color);
|
||||
--tableHeaderTextColor: var(--el-text-color);
|
||||
|
||||
// 覆盖ele 高亮当前行的标准暗色
|
||||
.el-tree-node__content {
|
||||
--el-color-primary-light-9: #262727;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: #2b6bd3;
|
||||
--el-button-border-color: #3a7be8;
|
||||
--el-button-text-color: #eef4ff;
|
||||
--el-button-hover-bg-color: #3a7be8;
|
||||
--el-button-hover-border-color: #3a7be8;
|
||||
--el-button-active-bg-color: #255fb8;
|
||||
--el-button-active-border-color: #255fb8;
|
||||
}
|
||||
|
||||
.el-button--primary.is-plain {
|
||||
--el-button-bg-color: rgba(43, 107, 211, 0.12);
|
||||
--el-button-border-color: rgba(58, 123, 232, 0.5);
|
||||
--el-button-text-color: #dbe8ff;
|
||||
--el-button-hover-bg-color: rgba(58, 123, 232, 0.2);
|
||||
--el-button-hover-border-color: rgba(58, 123, 232, 0.7);
|
||||
--el-button-active-bg-color: rgba(43, 107, 211, 0.28);
|
||||
--el-button-active-border-color: rgba(43, 107, 211, 0.8);
|
||||
}
|
||||
|
||||
.el-button--success {
|
||||
--el-button-bg-color: #1f8a5a;
|
||||
--el-button-border-color: #29a46d;
|
||||
--el-button-text-color: #eefaf4;
|
||||
--el-button-hover-bg-color: #29a46d;
|
||||
--el-button-hover-border-color: #29a46d;
|
||||
--el-button-active-bg-color: #1b784f;
|
||||
--el-button-active-border-color: #1b784f;
|
||||
}
|
||||
|
||||
.el-button--success.is-plain {
|
||||
--el-button-bg-color: rgba(31, 138, 90, 0.12);
|
||||
--el-button-border-color: rgba(41, 164, 109, 0.5);
|
||||
--el-button-text-color: #dbf6e8;
|
||||
--el-button-hover-bg-color: rgba(41, 164, 109, 0.2);
|
||||
--el-button-hover-border-color: rgba(41, 164, 109, 0.7);
|
||||
--el-button-active-bg-color: rgba(31, 138, 90, 0.28);
|
||||
--el-button-active-border-color: rgba(31, 138, 90, 0.8);
|
||||
}
|
||||
|
||||
.el-button--warning {
|
||||
--el-button-bg-color: #b87922;
|
||||
--el-button-border-color: #d6953b;
|
||||
--el-button-text-color: #fff7e6;
|
||||
--el-button-hover-bg-color: #d6953b;
|
||||
--el-button-hover-border-color: #d6953b;
|
||||
--el-button-active-bg-color: #a56c1d;
|
||||
--el-button-active-border-color: #a56c1d;
|
||||
}
|
||||
|
||||
.el-button--warning.is-plain {
|
||||
--el-button-bg-color: rgba(184, 121, 34, 0.12);
|
||||
--el-button-border-color: rgba(214, 149, 59, 0.5);
|
||||
--el-button-text-color: #ffecc8;
|
||||
--el-button-hover-bg-color: rgba(214, 149, 59, 0.2);
|
||||
--el-button-hover-border-color: rgba(214, 149, 59, 0.7);
|
||||
--el-button-active-bg-color: rgba(184, 121, 34, 0.28);
|
||||
--el-button-active-border-color: rgba(184, 121, 34, 0.8);
|
||||
}
|
||||
|
||||
.el-button--danger {
|
||||
--el-button-bg-color: #b24a4a;
|
||||
--el-button-border-color: #d16060;
|
||||
--el-button-text-color: #ffecec;
|
||||
--el-button-hover-bg-color: #d16060;
|
||||
--el-button-hover-border-color: #d16060;
|
||||
--el-button-active-bg-color: #9c3f3f;
|
||||
--el-button-active-border-color: #9c3f3f;
|
||||
}
|
||||
|
||||
.el-button--danger.is-plain {
|
||||
--el-button-bg-color: rgba(178, 74, 74, 0.12);
|
||||
--el-button-border-color: rgba(209, 96, 96, 0.5);
|
||||
--el-button-text-color: #ffd6d6;
|
||||
--el-button-hover-bg-color: rgba(209, 96, 96, 0.2);
|
||||
--el-button-hover-border-color: rgba(209, 96, 96, 0.7);
|
||||
--el-button-active-bg-color: rgba(178, 74, 74, 0.28);
|
||||
--el-button-active-border-color: rgba(178, 74, 74, 0.8);
|
||||
}
|
||||
|
||||
.el-button--info {
|
||||
--el-button-bg-color: #4b5563;
|
||||
--el-button-border-color: #667085;
|
||||
--el-button-text-color: #f3f4f6;
|
||||
--el-button-hover-bg-color: #667085;
|
||||
--el-button-hover-border-color: #667085;
|
||||
--el-button-active-bg-color: #3f4753;
|
||||
--el-button-active-border-color: #3f4753;
|
||||
}
|
||||
|
||||
.el-button--info.is-plain {
|
||||
--el-button-bg-color: rgba(75, 85, 99, 0.16);
|
||||
--el-button-border-color: rgba(102, 112, 133, 0.55);
|
||||
--el-button-text-color: #e5e7eb;
|
||||
--el-button-hover-bg-color: rgba(102, 112, 133, 0.22);
|
||||
--el-button-hover-border-color: rgba(102, 112, 133, 0.75);
|
||||
--el-button-active-bg-color: rgba(75, 85, 99, 0.3);
|
||||
--el-button-active-border-color: rgba(75, 85, 99, 0.85);
|
||||
}
|
||||
|
||||
.el-switch {
|
||||
--el-switch-on-color: var(--el-color-primary-dark-6);
|
||||
--el-switch-border-color: var(--el-color-primary-light-2);
|
||||
}
|
||||
|
||||
.el-tag--primary {
|
||||
--el-tag-bg-color: var(--el-color-primary-dark-6);
|
||||
--el-tag-border-color: var(--el-color-primary-light-2);
|
||||
}
|
||||
|
||||
.el-tag--success {
|
||||
--el-tag-bg-color: rgba(31, 138, 90, 0.18);
|
||||
--el-tag-border-color: rgba(41, 164, 109, 0.6);
|
||||
--el-tag-text-color: #c7f2df;
|
||||
}
|
||||
|
||||
.el-tag--warning {
|
||||
--el-tag-bg-color: rgba(184, 121, 34, 0.18);
|
||||
--el-tag-border-color: rgba(214, 149, 59, 0.6);
|
||||
--el-tag-text-color: #ffe6bb;
|
||||
}
|
||||
|
||||
.el-tag--danger {
|
||||
--el-tag-bg-color: rgba(178, 74, 74, 0.18);
|
||||
--el-tag-border-color: rgba(209, 96, 96, 0.6);
|
||||
--el-tag-text-color: #ffd0d0;
|
||||
}
|
||||
|
||||
.el-tag--info {
|
||||
--el-tag-bg-color: rgba(75, 85, 99, 0.18);
|
||||
--el-tag-border-color: rgba(102, 112, 133, 0.6);
|
||||
--el-tag-text-color: #e5e7eb;
|
||||
}
|
||||
|
||||
// 在深色模式下使用更深的颜色
|
||||
--tags-view-active-bg: var(--el-color-primary-dark-6);
|
||||
--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);
|
||||
--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;
|
||||
--vxe-icon-background-color: #98989e;
|
||||
--vxe-table-font-color: #98989e;
|
||||
--vxe-table-resizable-color: #95969a;
|
||||
--vxe-table-header-background-color: #28282a;
|
||||
--vxe-table-body-background-color: #151518;
|
||||
--vxe-table-background-color: #4a5663;
|
||||
--vxe-table-border-width: 1px;
|
||||
--vxe-table-border-color: #37373a;
|
||||
--vxe-toolbar-background-color: #37373a;
|
||||
|
||||
// ele
|
||||
--brder-color: #37373a;
|
||||
}
|
||||
|
||||
// base color
|
||||
$blue: #324157;
|
||||
$light-blue: #3a71a8;
|
||||
$red: #c03639;
|
||||
$pink: #e65d6e;
|
||||
$green: #30b08f;
|
||||
$tiffany: #4ab7bd;
|
||||
$yellow: #fec171;
|
||||
$panGreen: #30b08f;
|
||||
|
||||
// 默认菜单主题风格
|
||||
$base-menu-color: var(--menuColor);
|
||||
$base-menu-hover: var(--menuHover);
|
||||
$base-menu-color-active: var(--menuActiveText);
|
||||
$base-menu-background: var(--menuBg);
|
||||
$base-logo-title-color: #ffffff;
|
||||
|
||||
$base-menu-light-color: rgba(0, 0, 0, 0.7);
|
||||
$base-menu-light-background: #ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
$base-sub-menu-background: var(--subMenuBg);
|
||||
$base-sub-menu-hover: var(--subMenuHover);
|
||||
$base-sub-menu-title-hover: var(--subMenuTitleHover);
|
||||
// 表单头背景色和标题颜色
|
||||
$fixed-header-bg: var(--fixedHeaderBg);
|
||||
$table-header-bg: var(--tableHeaderBg);
|
||||
$table-header-text-color: var(--tableHeaderTextColor);
|
||||
|
||||
$--color-primary: #409eff;
|
||||
$--color-success: #67c23a;
|
||||
$--color-warning: #e6a23c;
|
||||
$--color-danger: #f56c6c;
|
||||
$--color-info: #909399;
|
||||
|
||||
$base-sidebar-width: 200px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
menuColor: $base-menu-color;
|
||||
menuLightColor: $base-menu-light-color;
|
||||
menuColorActive: $base-menu-color-active;
|
||||
menuBackground: $base-menu-background;
|
||||
menuLightBackground: $base-menu-light-background;
|
||||
subMenuBackground: $base-sub-menu-background;
|
||||
subMenuHover: $base-sub-menu-hover;
|
||||
sideBarWidth: $base-sidebar-width;
|
||||
logoTitleColor: $base-logo-title-color;
|
||||
logoLightTitleColor: $base-logo-light-title-color;
|
||||
primaryColor: $--color-primary;
|
||||
successColor: $--color-success;
|
||||
dangerColor: $--color-danger;
|
||||
infoColor: $--color-info;
|
||||
warningColor: $--color-warning;
|
||||
}
|
||||
@use './tokens/theme';
|
||||
@use './tokens/theme-dark';
|
||||
@use './tokens/exports';
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
/* Baseline Element Plus tweaks reused by the rest of the overrides. */
|
||||
|
||||
.el-collapse {
|
||||
.collapse__title {
|
||||
font-weight: 600;
|
||||
padding: 0 8px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
input[type='file'] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cell {
|
||||
.el-tag {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.small-padding {
|
||||
.cell {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
.el-button--mini {
|
||||
padding: 7px 10px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-col {
|
||||
.cell {
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
|
||||
.el-tag {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
/* Dialog and upload-related overlays. */
|
||||
|
||||
.el-overlay {
|
||||
overflow: hidden;
|
||||
background: var(--app-overlay-mask);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
.el-overlay-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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: 18px 20px 12px !important;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: calc(90vh - 111px) !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-dialog__footer .el-button {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-dialog__footer .dialog-footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* Dropdown and inline menu helpers. */
|
||||
|
||||
.el-dropdown-menu {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.el-range-editor.el-input__inner {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
.el-range-separator {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.el-menu--collapse > div > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-dropdown .el-dropdown-link {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
/* Toast, alert, and message-box feedback components. */
|
||||
|
||||
.el-message-box .el-message-box__message {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
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,
|
||||
.el-notification,
|
||||
.el-alert {
|
||||
border-radius: var(--app-radius-md);
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* Form controls and generic rounded inputs. */
|
||||
|
||||
.el-form--inline .el-form-item__label {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.el-form--inline .el-select {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.el-form--inline .el-input {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.el-form--inline .el-date-editor {
|
||||
width: 308px;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner,
|
||||
.el-select__wrapper,
|
||||
.el-date-editor,
|
||||
.el-range-editor,
|
||||
.el-input-number,
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
border-radius: var(--app-radius-md);
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.el-input__wrapper.is-focus,
|
||||
.el-textarea__inner:focus,
|
||||
.el-select__wrapper.is-focus,
|
||||
.el-date-editor.is-focus,
|
||||
.el-range-editor.is-focus {
|
||||
box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: var(--app-radius-md);
|
||||
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 {
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
border-radius: var(--app-radius-md);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* Navigation and collection views: tables, tabs, pagination, breadcrumb. */
|
||||
|
||||
.el-table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__body-wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table__row:hover td.el-table__cell {
|
||||
background-color: rgba(53, 109, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
border-radius: var(--app-radius-md);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.el-pagination .btn-prev,
|
||||
.el-pagination .btn-next,
|
||||
.el-pagination .el-pager li {
|
||||
border-radius: var(--app-radius-sm);
|
||||
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);
|
||||
}
|
||||
|
||||
.el-breadcrumb {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
+247
@@ -0,0 +1,247 @@
|
||||
/* Popper-backed widgets: dropdowns, date pickers, popovers, autocomplete. */
|
||||
|
||||
.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-tree-select__popper .el-tree-node__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-tree-select__popper .el-select-dropdown__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-height: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-tree-select__popper .el-tree-node__expand-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.el-popover,
|
||||
.el-tooltip__popper,
|
||||
.el-popper {
|
||||
border-radius: var(--app-radius-md);
|
||||
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;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/* Shared Element Plus primitives used across multiple component overrides. */
|
||||
|
||||
.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 var(--el-border-color) inset;
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
/* Drawers, loading masks, descriptions, trees, and empty states. */
|
||||
|
||||
.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: 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-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-loading-mask {
|
||||
background: rgba(6, 11, 22, 0.7);
|
||||
}
|
||||
}
|
||||
@@ -259,64 +259,11 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.role-select-shell {
|
||||
gap: 12px;
|
||||
}
|
||||
@use '@/assets/styles/components/selector-dialog' as selectorDialog;
|
||||
|
||||
.selector-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.selector-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
max-width: min(100%, 520px);
|
||||
}
|
||||
|
||||
.selector-tags :deep(.el-tag) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.role-select-dialog :deep(.el-dialog__body) {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.selector-table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-table--render-default) {
|
||||
border-radius: 10px;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-header--column) {
|
||||
background: var(--tableHeaderBg);
|
||||
color: var(--tableHeaderTextColor);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-body--column),
|
||||
.selector-table :deep(.vxe-header--column) {
|
||||
border-color: var(--app-surface-border);
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-body--row.row--hover),
|
||||
.selector-table :deep(.vxe-body--row:hover) {
|
||||
background-color: rgba(53, 109, 255, 0.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.selector-tags {
|
||||
justify-content: flex-start;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@include selectorDialog.shell-gap('.role-select-shell');
|
||||
@include selectorDialog.card-shell;
|
||||
@include selectorDialog.selector-header-tags;
|
||||
@include selectorDialog.dialog-body-padding('role-select-dialog');
|
||||
@include selectorDialog.selector-table;
|
||||
</style>
|
||||
|
||||
@@ -328,19 +328,18 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-select-shell,
|
||||
.user-select-main {
|
||||
gap: 12px;
|
||||
}
|
||||
@use '@/assets/styles/components/selector-dialog' as selectorDialog;
|
||||
|
||||
@include selectorDialog.shell-gap('.user-select-shell', '.user-select-main');
|
||||
@include selectorDialog.card-shell;
|
||||
@include selectorDialog.selector-header-tags(992px);
|
||||
@include selectorDialog.dialog-body-padding('user-select-dialog');
|
||||
@include selectorDialog.selector-table;
|
||||
|
||||
.selector-layout {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.selector-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selector-side-card {
|
||||
min-height: 100%;
|
||||
}
|
||||
@@ -353,60 +352,9 @@ defineExpose({
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.selector-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
max-width: min(100%, 520px);
|
||||
}
|
||||
|
||||
.selector-tags :deep(.el-tag) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.user-select-dialog :deep(.el-dialog__body) {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.selector-table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-table--render-default) {
|
||||
border-radius: 10px;
|
||||
color: var(--app-text-title);
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-header--column) {
|
||||
background: var(--tableHeaderBg);
|
||||
color: var(--tableHeaderTextColor);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-body--column),
|
||||
.selector-table :deep(.vxe-header--column) {
|
||||
border-color: var(--app-surface-border);
|
||||
}
|
||||
|
||||
.selector-table :deep(.vxe-body--row.row--hover),
|
||||
.selector-table :deep(.vxe-body--row:hover) {
|
||||
background-color: rgba(53, 109, 255, 0.05);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.selector-tree {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.selector-tags {
|
||||
justify-content: flex-start;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div class="p-2 page-shell demo-demo-page">
|
||||
<div class="search-wrap">
|
||||
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
|
||||
<template #header>
|
||||
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
|
||||
<div><h3>筛选条件</h3></div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
|
||||
<el-form-item label="key键" prop="testKey">
|
||||
<el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
<el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
|
||||
<template #header>
|
||||
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
|
||||
<div><h3>筛选条件</h3></div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
|
||||
<el-form-item label="key键" prop="testKey">
|
||||
<el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
<el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-card shadow="hover" class="table-panel">
|
||||
<template #header>
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<div class="p-2 page-shell demo-tree-page">
|
||||
<div class="search-wrap">
|
||||
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
|
||||
<template #header>
|
||||
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
|
||||
<div><h3>筛选条件</h3></div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
|
||||
<el-form-item label="树节点名" prop="treeName">
|
||||
<el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
|
||||
<template #header>
|
||||
<div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
|
||||
<div><h3>筛选条件</h3></div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
|
||||
<el-form-item label="树节点名" prop="treeName">
|
||||
<el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-card shadow="hover" class="table-panel">
|
||||
<template #header>
|
||||
|
||||
@@ -215,23 +215,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -135,17 +135,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -269,23 +269,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -265,23 +265,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -330,23 +330,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -562,10 +562,9 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
@include pageShell.table-crud-page;
|
||||
|
||||
.data-table {
|
||||
.menu-name-cell {
|
||||
@@ -578,19 +577,6 @@ onMounted(() => {
|
||||
.menu-name-text {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -253,23 +253,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -349,23 +349,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -336,23 +336,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -374,33 +374,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.content-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dept-tree {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.tree-table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -508,23 +508,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -143,15 +143,12 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-user-shell {
|
||||
gap: 12px;
|
||||
}
|
||||
@use '@/assets/styles/components/selector-dialog' as selectorDialog;
|
||||
|
||||
@include selectorDialog.shell-gap('.select-user-shell');
|
||||
@include selectorDialog.dialog-body-padding('select-user-dialog');
|
||||
|
||||
.select-user-card :deep(.el-card__body) {
|
||||
padding: 14px 16px !important;
|
||||
}
|
||||
|
||||
.select-user-dialog :deep(.el-dialog__body) {
|
||||
padding-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -703,33 +703,7 @@ async function handleDeptChange(value: number | string) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.content-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dept-tree {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@include pageShell.tree-table-crud-page;
|
||||
</style>
|
||||
|
||||
@@ -255,19 +255,9 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@use '@/assets/styles/components/page-shell' as pageShell;
|
||||
|
||||
.data-table {
|
||||
:deep(.el-button.is-link) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
}
|
||||
}
|
||||
@include pageShell.table-crud-page;
|
||||
|
||||
.el-tab-pane {
|
||||
background-color: #282c34;
|
||||
@@ -275,10 +265,4 @@ onMounted(() => {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.toolbar-shell {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user