提交 1cddb789 authored 作者: lidongxu's avatar lidongxu

Merge branch 'ap' into dev

...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
} }
// 重写 el-table 的 loading-mask 加载进度蒙层 // 重写 el-table 的 loading-mask 加载进度蒙层
.el-loading-mask{ .el-loading-mask {
z-index: 1 !important; z-index: 1 !important;
} }
...@@ -161,4 +161,55 @@ ...@@ -161,4 +161,55 @@
.el-table { .el-table {
--el-table-border: 2px solid var(--el-table-border-color) !important; --el-table-border: 2px solid var(--el-table-border-color) !important;
}
// 暗黑模式下 elementPlus 组件样式修复覆盖
html.dark {
/* 表格样式覆盖 */
.el-table {
--el-table-header-bg-color: var(--el-bg-color-overlay) !important;
--el-table-header-text-color: var(--el-text-color-regular) !important;
--el-table-border-color: var(--el-border-color-light) !important;
--el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
color: var(--el-text-color-regular, #515a6e);
}
}
}
/* 树组件高亮样式覆盖 */
.el-tree {
.el-tree-node.is-current>.el-tree-node__content {
background-color: var(--el-bg-color-overlay) !important;
color: var(--el-color-primary);
}
.el-tree-node__content:hover {
background-color: var(--el-bg-color-overlay);
}
}
/* 下拉菜单样式覆盖 */
.el-dropdown-menu__item:not(.is-disabled):focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: var(--navbar-hover) !important;
}
/* blockquote样式覆盖 */
blockquote {
background-color: var(--blockquote-bg) !important;
border-left-color: var(--blockquote-border) !important;
color: var(--blockquote-text) !important;
}
/* 时间表达式标题样式覆盖 */
.popup-result .title {
background: var(--cron-border);
}
} }
\ No newline at end of file
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
@import './ruoyi.scss'; @import './ruoyi.scss';
@import './vant.scss'; @import './vant.scss';
@import './font-size.scss'; @import './font-size.scss';
@import './plugins/splitpanes.scss';
body { body {
height: 100%; height: 100%;
......
/* 分割窗格覆盖 */
.splitpanes {
background-color: var(--splitpanes-bg);
.splitpanes__pane {
background-color: var(--splitpanes-bg);
border-color: var(--splitpanes-border);
}
.splitpanes__splitter {
background-color: var(--splitpanes-splitter-bg);
border-color: var(--splitpanes-border);
&:hover {
background-color: var(--splitpanes-splitter-hover-bg);
}
&:before,
&:after {
background-color: var(--splitpanes-border);
}
}
}
\ No newline at end of file
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
} }
.sidebarHide { .sidebarHide {
margin-left: 0!important; margin-left: 0 !important;
} }
.sidebar-container { .sidebar-container {
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
...@@ -69,7 +69,8 @@ ...@@ -69,7 +69,8 @@
width: 100% !important; width: 100% !important;
} }
.el-menu-item, .menu-title { .el-menu-item,
.menu-title {
overflow: hidden !important; overflow: hidden !important;
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; white-space: nowrap !important;
...@@ -87,7 +88,7 @@ ...@@ -87,7 +88,7 @@
} }
} }
& .theme-dark .is-active > .el-sub-menu__title { & .theme-dark .is-active>.el-sub-menu__title {
color: $base-menu-color-active !important; color: $base-menu-color-active !important;
} }
...@@ -155,6 +156,7 @@ ...@@ -155,6 +156,7 @@
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
} }
&>i { &>i {
height: 0; height: 0;
width: 0; width: 0;
...@@ -235,3 +237,34 @@ ...@@ -235,3 +237,34 @@
} }
} }
} }
// 暗黑模式样式覆盖
html.dark {
// 侧边栏菜单覆盖
.sidebar-container {
.el-menu-item,
.menu-title {
color: var(--el-text-color-regular);
}
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item {
background-color: var(--el-bg-color) !important;
}
}
/* 顶部栏栏菜单覆盖 */
.el-menu--horizontal {
.el-menu-item {
&:not(.is-disabled) {
&:hover,
&:focus {
background-color: var(--navbar-hover) !important;
}
}
}
}
}
\ No newline at end of file
// 颜色变量
// base color // base color
$blue: #324157; $blue: #324157;
$light-blue: #333c46; $light-blue: #333c46;
...@@ -41,6 +39,7 @@ $--color-warning: #E6A23C; ...@@ -41,6 +39,7 @@ $--color-warning: #E6A23C;
$--color-danger: #F56C6C; $--color-danger: #F56C6C;
$--color-info: #909399; $--color-info: #909399;
// 导出变量给其他模块使用
:export { :export {
menuText: $menuText; menuText: $menuText;
menuActiveText: $menuActiveText; menuActiveText: $menuActiveText;
...@@ -68,33 +67,33 @@ $--color-info: #909399; ...@@ -68,33 +67,33 @@ $--color-info: #909399;
colorInfo: $--color-info; colorInfo: $--color-info;
} }
// CSS变量定义 /*************** CSS变量定义 ***************/
/* 亮色模式变量 */ /* 亮色模式变量 */
:root {
--sidebar-bg: #{$menuBg};
--sidebar-text: #{$menuText};
--menu-hover: #{$menuHover};
--main-color: #{$mainColor};
--navbar-bg: #ffffff;
--navbar-text: #303133;
/* splitpanes default-theme 变量 */
--splitpanes-default-bg: #ffffff;
}
html { html {
--el-gray-1: rgba(0, 0, 0, 0.45); --el-gray-1: rgba(0, 0, 0, 0.45);
--el-gray-2: #666666; --el-gray-2: #666666;
--el-gray-3: rgb(235, 235, 235); --el-gray-3: rgb(235, 235, 235);
// 表格变量
--el-timeout-row: rgb(235, 235, 235);
/* 主页背景 */ // 页面背景
.app-main { --el-bg-color: #f1f3f8; // 主要页面背景颜色
background-color: #f1f3f8 !important; --main-color: #{$mainColor}; // (移动端)主要页面背景颜色
}
// 表格相关
--el-timeout-row: rgb(235, 235, 235); // 表格过期行颜色
--el-background-editor-cell: #b2ddef; // 表格编辑单元格背景颜色
// 侧边栏
--sidebar-bg: #{$menuBg}; // 侧边栏
--sidebar-text: #{$menuText}; // 侧边栏文字
--menu-hover: #{$menuHover}; // 侧边栏菜单悬停
// 顶部导航
--navbar-bg: #ffffff; // 顶部导航栏
--navbar-text: #303133; // 顶部导航栏文字
// splitpanes 默认背景颜色
--splitpanes-default-bg: #ffffff;
} }
/* 暗黑模式变量 */ /* 暗黑模式变量 */
...@@ -102,28 +101,35 @@ html.dark { ...@@ -102,28 +101,35 @@ html.dark {
--el-gray-1: white; --el-gray-1: white;
--el-gray-2: white; --el-gray-2: white;
--el-gray-3: #1d1e1f; --el-gray-3: #1d1e1f;
--el-timeout-row: rgb(58, 58, 58);
/* 默认通用 */ // 页面背景
--el-bg-color: #141414; --el-bg-color: #141414;
--el-bg-color-overlay: #1d1e1f;
--el-text-color-primary: #ffffff;
--el-text-color-regular: #d0d0d0;
--el-border-color: #434343;
--el-border-color-light: #434343;
/* 侧边栏 */ // 表格相关
--el-timeout-row: rgb(58, 58, 58);
// 侧边栏
--sidebar-bg: #141414; --sidebar-bg: #141414;
--sidebar-text: #ffffff; --sidebar-text: #ffffff;
--menu-hover: #2d2d2d; --menu-hover: #2d2d2d;
--menu-active-text: #{$menuActiveText}; --menu-active-text: #{$menuActiveText};
/* 顶部导航栏 */ // 顶部导航栏
--navbar-bg: #141414; --navbar-bg: #141414;
--navbar-text: #ffffff; --navbar-text: #ffffff;
--navbar-hover: #141414; --navbar-hover: #141414;
/* 标签栏 */ // splitpanes default-theme 暗黑模式变量
--splitpanes-default-bg: #141414;
/*************** 亮模式默认,暗黑模式需要覆盖的变量 ***************/
--el-bg-color-overlay: #1d1e1f;
--el-text-color-primary: #ffffff;
--el-text-color-regular: #d0d0d0;
--el-border-color: #434343;
--el-border-color-light: #434343;
// 标签栏
--tags-bg: #141414; --tags-bg: #141414;
--tags-item-bg: #1d1e1f; --tags-item-bg: #1d1e1f;
--tags-item-border: #303030; --tags-item-border: #303030;
...@@ -131,123 +137,20 @@ html.dark { ...@@ -131,123 +137,20 @@ html.dark {
--tags-item-hover: #2d2d2d; --tags-item-hover: #2d2d2d;
--tags-close-hover: #64666a; --tags-close-hover: #64666a;
/* splitpanes 组件暗黑模式变量 */ // splitpanes 组件暗黑模式变量
--splitpanes-bg: #141414; --splitpanes-bg: #141414;
--splitpanes-border: #303030; --splitpanes-border: #303030;
--splitpanes-splitter-bg: #1d1e1f; --splitpanes-splitter-bg: #1d1e1f;
--splitpanes-splitter-hover-bg: #2d2d2d; --splitpanes-splitter-hover-bg: #2d2d2d;
/* blockquote 暗黑模式变量 */ // blockquote 暗黑模式变量
--blockquote-bg: #1d1e1f; --blockquote-bg: #1d1e1f;
--blockquote-border: #303030; --blockquote-border: #303030;
--blockquote-text: #d0d0d0; --blockquote-text: #d0d0d0;
/* Cron 时间表达式 模式变量 */ // Cron 时间表达式 模式变量
--cron-border: #303030; --cron-border: #303030;
/* splitpanes default-theme 暗黑模式变量 */
--splitpanes-default-bg: #141414;
/* 侧边栏菜单覆盖 */
.sidebar-container {
.el-menu-item,
.menu-title {
color: var(--el-text-color-regular);
}
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item {
background-color: var(--el-bg-color) !important;
}
}
/* 顶部栏栏菜单覆盖 */
.el-menu--horizontal {
.el-menu-item {
&:not(.is-disabled) {
&:hover,
&:focus {
background-color: var(--navbar-hover) !important;
}
}
}
}
/* 分割窗格覆盖 */
.splitpanes {
background-color: var(--splitpanes-bg);
.splitpanes__pane {
background-color: var(--splitpanes-bg);
border-color: var(--splitpanes-border);
}
.splitpanes__splitter {
background-color: var(--splitpanes-splitter-bg);
border-color: var(--splitpanes-border);
&:hover {
background-color: var(--splitpanes-splitter-hover-bg);
}
&:before,
&:after {
background-color: var(--splitpanes-border);
}
}
}
/* 表格样式覆盖 */
.el-table {
--el-table-header-bg-color: var(--el-bg-color-overlay) !important;
--el-table-header-text-color: var(--el-text-color-regular) !important;
--el-table-border-color: var(--el-border-color-light) !important;
--el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
color: var(--el-text-color-regular, #515a6e);
}
}
}
/* 树组件高亮样式覆盖 */
.el-tree {
.el-tree-node.is-current>.el-tree-node__content {
background-color: var(--el-bg-color-overlay) !important;
color: var(--el-color-primary);
}
.el-tree-node__content:hover {
background-color: var(--el-bg-color-overlay);
}
}
/* 下拉菜单样式覆盖 */
.el-dropdown-menu__item:not(.is-disabled):focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: var(--navbar-hover) !important;
}
/* blockquote样式覆盖 */
blockquote {
background-color: var(--blockquote-bg) !important;
border-left-color: var(--blockquote-border) !important;
color: var(--blockquote-text) !important;
}
/* 时间表达式标题样式覆盖 */
.popup-result .title {
background: var(--cron-border);
}
/* 主页背景 */
.app-main {
background-color: #141414 !important;
}
} }
\ No newline at end of file
...@@ -156,10 +156,11 @@ const getTableList = () => { ...@@ -156,10 +156,11 @@ const getTableList = () => {
<style scoped <style scoped
lang="scss"> lang="scss">
/* 工具栏 */ /* 工具栏 */
.el-row{ .el-row {
.el-form-item{ .el-form-item {
.tip-title{ .tip-title {
font-size: 32px; font-size: 32px;
color: red; color: red;
margin-left: 50px; margin-left: 50px;
...@@ -211,16 +212,18 @@ const getTableList = () => { ...@@ -211,16 +212,18 @@ const getTableList = () => {
.el-select { .el-select {
width: 100% !important; width: 100% !important;
padding: 10px; padding: 10px;
background-color: var(--el-background-editor-cell);
} }
.el-input { .el-input {
padding: 10px; padding: 10px;
background-color: var(--el-background-editor-cell);
} }
.date-picker { .date-picker {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
background-color: rgb(227, 136, 136); background-color: var(--el-background-editor-cell);
::v-deep(.el-input) { ::v-deep(.el-input) {
width: 100%; width: 100%;
......
...@@ -1211,10 +1211,5 @@ ...@@ -1211,10 +1211,5 @@
} }
} }
.el-select{
background-color: rgb(227, 136, 136);
}
.el-input{
background-color: rgb(227, 136, 136);
}
</style> </style>
\ No newline at end of file
...@@ -968,15 +968,4 @@ ...@@ -968,15 +968,4 @@
} }
} }
.el-select {
background-color: rgb(227, 136, 136);
}
.el-input {
background-color: rgb(227, 136, 136);
}
.date-picker{
background-color: rgb(227, 136, 136);
}
</style> </style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论