diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 119c1c0..cd9e09e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1372,7 +1372,7 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001423 + caniuse-lite: 1.0.30001425 electron-to-chromium: 1.4.284 node-releases: 2.0.6 update-browserslist-db: 1.0.10_browserslist@4.21.4 @@ -1419,8 +1419,8 @@ packages: engines: {node: '>=10'} dev: true - /caniuse-lite/1.0.30001423: - resolution: {integrity: sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ==} + /caniuse-lite/1.0.30001425: + resolution: {integrity: sha512-/pzFv0OmNG6W0ym80P3NtapU0QEiDS3VuYAZMGoLLqiC7f6FJFe1MjpQDREGApeenD9wloeytmVDj+JLXPC6qw==} dev: true /chalk/1.1.3: diff --git a/src/styles/theme/core/index.scss b/src/styles/theme/core/index.scss index ab3233e..e33087e 100644 --- a/src/styles/theme/core/index.scss +++ b/src/styles/theme/core/index.scss @@ -3,5 +3,6 @@ @import "./login.scss"; @import "./error-page.scss"; @import "./element-plus.scss"; + @import "./vxe-table.scss"; @import "./other.scss"; } diff --git a/src/styles/theme/core/vxe-table.scss b/src/styles/theme/core/vxe-table.scss new file mode 100644 index 0000000..9c2a8c3 --- /dev/null +++ b/src/styles/theme/core/vxe-table.scss @@ -0,0 +1,48 @@ +/** + * VxeTable CSS 变量 + * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/variable.scss + */ + +/** font */ +$vxe-font-color: $font-color; + +/** color */ +// $vxe-primary-color: $active-theme-bg-color; +// $vxe-success-color: $active-theme-bg-color; + +/** table */ +$vxe-table-font-color: $font-color; +$vxe-table-border-color: $border-color; +$vxe-table-header-background-color: lighten($theme-bg-color, 4%); +$vxe-table-body-background-color: lighten($theme-bg-color, 4%); +$vxe-table-row-hover-background-color: lighten($theme-bg-color, 8%); +$vxe-table-checkbox-range-background-color: lighten($theme-bg-color, 8%); +$vxe-table-row-current-background-color: lighten($theme-bg-color, 8%); +$vxe-table-row-hover-current-background-color: lighten($theme-bg-color, 8%); + +/** toolbar */ +$vxe-toolbar-background-color: $theme-bg-color; + +/** pager */ +$vxe-pager-background-color: lighten($theme-bg-color, 4%); + +/** modal */ +$vxe-modal-header-background-color: $theme-bg-color; +$vxe-modal-body-background-color: $theme-bg-color; +$vxe-modal-border-color: $border-color; + +/** button */ +$vxe-button-default-background-color: lighten($theme-bg-color, 8%); + +/** input */ +$vxe-input-background-color: lighten($theme-bg-color, 8%); +$vxe-input-panel-background-color: lighten($theme-bg-color, 8%); + +/** form */ +$vxe-form-background-color: lighten($theme-bg-color, 4%); + +/** select */ +$vxe-select-option-hover-background-color: lighten($theme-bg-color, 8%); +$vxe-select-panel-background-color: lighten($theme-bg-color, 4%); + +@import "vxe-table/styles/index.scss"; diff --git a/src/styles/theme/dark-blue/element-plus.css b/src/styles/theme/dark-blue/element-plus.css index 909a14e..d528921 100644 --- a/src/styles/theme/dark-blue/element-plus.css +++ b/src/styles/theme/dark-blue/element-plus.css @@ -1,19 +1,19 @@ /** - * dark-blue 主题下的 Element Plus CSS 变量 + * dark-blue 主题下的 ElementPlus CSS 变量 * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss */ html.dark-blue { - /* color */ + /** color */ --el-color-primary: #01efb7bb; --el-color-success: #01efb7bb; - /* text-color */ + /** text-color */ --el-text-color-primary: rgba(255, 255, 255, 0.8); --el-text-color-regular: rgba(255, 255, 255, 0.8); --el-text-color-secondary: rgba(255, 255, 255, 0.8); --el-text-color-placeholder: rgba(255, 255, 255, 0.8); --el-text-color-disabled: rgba(255, 255, 255, 0.3); - /* border-color */ + /** border-color */ --el-border-color: #01efb755; --el-border-color-light: #01efb755; --el-border-color-lighter: #01efb755; @@ -21,7 +21,7 @@ html.dark-blue { --el-fill-color: #01efb710; --el-fill-color-light: #01efb710; --el-fill-color-blank: #031e47; - /* bg-color */ + /** bg-color */ --el-bg-color: #021633; --el-bg-color-overlay: #021633; /** mask */ diff --git a/src/styles/theme/dark-blue/variables.scss b/src/styles/theme/dark-blue/variables.scss index 3b29ad7..a99d383 100644 --- a/src/styles/theme/dark-blue/variables.scss +++ b/src/styles/theme/dark-blue/variables.scss @@ -7,7 +7,7 @@ $theme-bg-color: #021633; // active 状态下主题背景颜色 $active-theme-bg-color: var(--el-color-primary); // 默认文字颜色 -$font-color: #ffffffee; +$font-color: rgba(255, 255, 255, 0.8); // active 状态下文字颜色 $active-font-color: #fff; // hover 状态下文字颜色 diff --git a/src/styles/vxe-table.scss b/src/styles/vxe-table.scss index 846e1c8..0a38600 100644 --- a/src/styles/vxe-table.scss +++ b/src/styles/vxe-table.scss @@ -4,28 +4,28 @@ // 表单 &--form-wrapper { .vxe-form { - padding: 10px 20px; - margin-bottom: 20px; + padding: 10px 20px !important; + margin-bottom: 20px !important; } } // 工具栏 &--toolbar-wrapper { .vxe-toolbar { - padding: 20px; + padding: 20px !important; } } // 分页 &--pager-wrapper { .vxe-pager { - height: 70px; + height: 70px !important; &--wrapper { @media screen and (max-width: 750px) { .vxe-pager--total, .vxe-pager--sizes, .vxe-pager--jump { - display: none; + display: none !important; } } } diff --git a/src/views/table/vxe-table/tsx/RoleColumnSolts.tsx b/src/views/table/vxe-table/tsx/RoleColumnSolts.tsx index 7457c11..708b8a6 100644 --- a/src/views/table/vxe-table/tsx/RoleColumnSolts.tsx +++ b/src/views/table/vxe-table/tsx/RoleColumnSolts.tsx @@ -4,7 +4,7 @@ const solts: VxeColumnPropTypes.Slots = { default: ({ row, column }) => { const cellValue = row[column.field] const type = cellValue === "admin" ? "" : "warning" - return [{cellValue}] + return [{cellValue}] } }