diff --git a/src/assets/style/theme/imgs/theme10-left.png b/src/assets/style/theme/imgs/theme10-left.png new file mode 100644 index 0000000..4046617 Binary files /dev/null and b/src/assets/style/theme/imgs/theme10-left.png differ diff --git a/src/assets/style/theme/imgs/theme10-top.png b/src/assets/style/theme/imgs/theme10-top.png new file mode 100644 index 0000000..3b78301 Binary files /dev/null and b/src/assets/style/theme/imgs/theme10-top.png differ diff --git a/src/assets/style/theme/imgs/theme2-left.png b/src/assets/style/theme/imgs/theme2-left.png index 9524d00..dc02441 100644 Binary files a/src/assets/style/theme/imgs/theme2-left.png and b/src/assets/style/theme/imgs/theme2-left.png differ diff --git a/src/assets/style/theme/imgs/theme2-top.png b/src/assets/style/theme/imgs/theme2-top.png index 640e2ca..8a44830 100644 Binary files a/src/assets/style/theme/imgs/theme2-top.png and b/src/assets/style/theme/imgs/theme2-top.png differ diff --git a/src/assets/style/theme/imgs/theme3-left.png b/src/assets/style/theme/imgs/theme3-left.png index ce8efa2..3779cf1 100644 Binary files a/src/assets/style/theme/imgs/theme3-left.png and b/src/assets/style/theme/imgs/theme3-left.png differ diff --git a/src/assets/style/theme/imgs/theme3-top.png b/src/assets/style/theme/imgs/theme3-top.png index 0fa9370..108f3ff 100644 Binary files a/src/assets/style/theme/imgs/theme3-top.png and b/src/assets/style/theme/imgs/theme3-top.png differ diff --git a/src/assets/style/theme/imgs/theme4-left.png b/src/assets/style/theme/imgs/theme4-left.png index 5331b84..0cee473 100644 Binary files a/src/assets/style/theme/imgs/theme4-left.png and b/src/assets/style/theme/imgs/theme4-left.png differ diff --git a/src/assets/style/theme/imgs/theme4-top.png b/src/assets/style/theme/imgs/theme4-top.png index 5c8031a..d2e6d8e 100644 Binary files a/src/assets/style/theme/imgs/theme4-top.png and b/src/assets/style/theme/imgs/theme4-top.png differ diff --git a/src/assets/style/theme/imgs/theme5-left.png b/src/assets/style/theme/imgs/theme5-left.png index 1fb093d..8a1ec2e 100644 Binary files a/src/assets/style/theme/imgs/theme5-left.png and b/src/assets/style/theme/imgs/theme5-left.png differ diff --git a/src/assets/style/theme/imgs/theme5-top.png b/src/assets/style/theme/imgs/theme5-top.png index 526fc1b..c8c2c68 100644 Binary files a/src/assets/style/theme/imgs/theme5-top.png and b/src/assets/style/theme/imgs/theme5-top.png differ diff --git a/src/assets/style/theme/imgs/theme6-left.png b/src/assets/style/theme/imgs/theme6-left.png index 02b0ca1..5331b84 100644 Binary files a/src/assets/style/theme/imgs/theme6-left.png and b/src/assets/style/theme/imgs/theme6-left.png differ diff --git a/src/assets/style/theme/imgs/theme6-top.png b/src/assets/style/theme/imgs/theme6-top.png index 7aaa90b..5c8031a 100644 Binary files a/src/assets/style/theme/imgs/theme6-top.png and b/src/assets/style/theme/imgs/theme6-top.png differ diff --git a/src/assets/style/theme/imgs/theme7-left.png b/src/assets/style/theme/imgs/theme7-left.png index 2f9b217..22d9f2b 100644 Binary files a/src/assets/style/theme/imgs/theme7-left.png and b/src/assets/style/theme/imgs/theme7-left.png differ diff --git a/src/assets/style/theme/imgs/theme7-top.png b/src/assets/style/theme/imgs/theme7-top.png index f095f07..51410fd 100644 Binary files a/src/assets/style/theme/imgs/theme7-top.png and b/src/assets/style/theme/imgs/theme7-top.png differ diff --git a/src/assets/style/theme/imgs/theme8-left.png b/src/assets/style/theme/imgs/theme8-left.png index e2f064f..7909648 100644 Binary files a/src/assets/style/theme/imgs/theme8-left.png and b/src/assets/style/theme/imgs/theme8-left.png differ diff --git a/src/assets/style/theme/imgs/theme8-top.png b/src/assets/style/theme/imgs/theme8-top.png index 4f1a505..6999ed0 100644 Binary files a/src/assets/style/theme/imgs/theme8-top.png and b/src/assets/style/theme/imgs/theme8-top.png differ diff --git a/src/assets/style/theme/imgs/theme9-left.png b/src/assets/style/theme/imgs/theme9-left.png new file mode 100644 index 0000000..13a69fc Binary files /dev/null and b/src/assets/style/theme/imgs/theme9-left.png differ diff --git a/src/assets/style/theme/imgs/theme9-top.png b/src/assets/style/theme/imgs/theme9-top.png new file mode 100644 index 0000000..572d0f5 Binary files /dev/null and b/src/assets/style/theme/imgs/theme9-top.png differ diff --git a/src/assets/style/theme/lng-theme.less b/src/assets/style/theme/lng-theme.less index 8b1798a..4c61a75 100644 --- a/src/assets/style/theme/lng-theme.less +++ b/src/assets/style/theme/lng-theme.less @@ -21,6 +21,10 @@ margin-left: 0 !important; } + .vben-app-logo__title{ + color: var(--text-color) !important; + } + .vben-layout-header-left { .vben-layout-header-trigger{ @@ -165,56 +169,9 @@ } } -/** - * 主题2 - */ + .lng-theme-theme2 { - .vben-layout-sideBar { - background: unset !important; - background-image: url('/@/assets/style/theme/imgs/theme2-left.png') !important; - background-size: 100% 100% !important; - } - - .ant-layout-header{ - background: unset !important; - background-image: url('/@/assets/style/theme/imgs/theme2-top.png') !important; - background-size: 100% 100% !important; - } - -} -/** - * 主题3 - */ -.lng-theme-theme3 { - - .vben-layout-sideBar { - background: unset !important; - background-image: url('/@/assets/style/theme/imgs/theme3-left.png') !important; - background-size: 100% 100% !important; - } - - .ant-layout-header{ - background: unset !important; - background-image: url('/@/assets/style/theme/imgs/theme3-top.png') !important; - background-size: 100% 100% !important; - } - -} -/** - * 主题4 - */ -.lng-theme-theme4 { - - .vben-layout-sideBar { - background: unset !important; - background-image: url('/@/assets/style/theme/imgs/theme4-left.png') !important; - background-size: 100% 100% !important; - } - - /** - * 左边菜单主题 - */ .lng-menu { .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ background: unset !important; @@ -231,6 +188,78 @@ color: var(--text-color) !important; } + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme2-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme2-top.png') !important; + background-size: 100% 100% !important; + } + +} + +.lng-theme-theme3 { + + .lng-menu { + .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ + background: unset !important; + color: #000 !important; + + .vben-menu-submenu-title-active:not(.vben-menu-submenu){ + color: #fff !important; + background-color: rgba(0, 0, 0, 0.4) !important; + } + } + } + + .ant-menu-title-content{ + color: var(--text-color) !important; + } + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme3-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme3-top.png') !important; + background-size: 100% 100% !important; + } + +} + +.lng-theme-theme4 { + + + + .lng-menu { + .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ + background: unset !important; + color: #000 !important; + + .vben-menu-submenu-title-active:not(.vben-menu-submenu){ + color: #fff !important; + background-color: rgba(0, 0, 0, 0.4) !important; + } + } + } + + .ant-menu-title-content{ + color: var(--text-color) !important; + } + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme4-left.png') !important; + background-size: 100% 100% !important; + } + .ant-layout-header{ background: unset !important; background-image: url('/@/assets/style/theme/imgs/theme4-top.png') !important; @@ -238,11 +267,29 @@ } } -/** - * 主题5 - */ + .lng-theme-theme5 { + .vben-app-logo__title{ + color: var(--text-color) !important; + } + + .lng-menu { + .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ + background: unset !important; + color: #000 !important; + + .vben-menu-submenu-title-active:not(.vben-menu-submenu){ + color: #fff !important; + background-color: rgba(0, 0, 0, 0.4) !important; + } + } + } + + .ant-menu-title-content{ + color: var(--text-color) !important; + } + .vben-layout-sideBar { background: unset !important; background-image: url('/@/assets/style/theme/imgs/theme5-left.png') !important; @@ -256,11 +303,25 @@ } } -/** - * 主题6 - */ + .lng-theme-theme6 { + .lng-menu { + .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ + background: unset !important; + color: #000 !important; + + .vben-menu-submenu-title-active:not(.vben-menu-submenu){ + color: #fff !important; + background-color: rgba(0, 0, 0, 0.4) !important; + } + } + } + + .ant-menu-title-content{ + color: var(--text-color) !important; + } + .vben-layout-sideBar { background: unset !important; background-image: url('/@/assets/style/theme/imgs/theme6-left.png') !important; @@ -274,14 +335,10 @@ } } -/** - * 主题7 - */ + + .lng-theme-theme7 { - /** - * 左边菜单主题 - */ .lng-menu { .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ background: unset !important; @@ -311,14 +368,9 @@ } } -/** - * 主题8 - */ + .lng-theme-theme8 { - /** - * 左边菜单主题 - */ .lng-menu { .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ background: unset !important; @@ -348,3 +400,57 @@ } } + +/** + * 主题9 + */ +.lng-theme-theme9 { + + .lng-menu { + .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ + background: unset !important; + color: #000 !important; + + .vben-menu-submenu-title-active:not(.vben-menu-submenu){ + color: #fff !important; + background-color: rgba(0, 0, 0, 0.4) !important; + } + } + } + + .ant-menu-title-content{ + color: var(--text-color); + } + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme9-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme9-top.png') !important; + background-size: 100% 100% !important; + } + +} + +/** + * 主题10 + */ +.lng-theme-theme10 { + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme10-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme10-top.png') !important; + background-size: 100% 100% !important; + } + +} diff --git a/src/utils/theme.ts b/src/utils/theme.ts index 9ce3bf3..93a9d6c 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -32,17 +32,19 @@ export const ThemeType = { PRIMARY: new ThemeInfo('PRIMARY', { class: 'lng-theme-primary', borderColor: '#0960bd', backColor: '#0960bd', textColor: '#fff', hoverBackColor: '#0960bd',hoverTextColor: '#fff', activeBackColor: '#004496', activeTextColor: '#fff' }), LIGHT: new ThemeInfo('LIGHT', { class: 'lng-theme-light', borderColor: '#01768C', backColor: '#01768C', textColor: '#fff', hoverBackColor: '#00889D',hoverTextColor: '#fff', activeBackColor: '#005B6E', activeTextColor: '#fff' }), THEME1: new ThemeInfo('THEME1', { class: 'lng-theme-theme1', borderColor: '#2070B5', backColor: '#2070B5', textColor: '#fff', hoverBackColor: '#10A4C0',hoverTextColor: '#fff', activeBackColor: '#059ABA', activeTextColor: '#fff' }), - THEME2: new ThemeInfo('THEME2', { class: 'lng-theme-theme2', borderColor: '#6834D2', backColor: '#6834D2', textColor: '#fff', hoverBackColor: '#0487D1',hoverTextColor: '#fff', activeBackColor: '#7330CD', activeTextColor: '#fff' }), - THEME3: new ThemeInfo('THEME3', { class: 'lng-theme-theme3', borderColor: '#2451C3', backColor: '#2451C3', textColor: '#fff', hoverBackColor: '#0498DE',hoverTextColor: '#fff', activeBackColor: '#056CC4', activeTextColor: '#fff' }), - THEME4: new ThemeInfo('THEME4', { class: 'lng-theme-theme4', borderColor: '#6bb836', backColor: '#6bb836', textColor: '#000', hoverBackColor: '#A2DE79',hoverTextColor: '#000', activeBackColor: '#A2DE79', activeTextColor: '#000' }), - THEME5: new ThemeInfo('THEME5', { class: 'lng-theme-theme5', borderColor: '#0B0023', backColor: '#0B0023', textColor: '#fff', hoverBackColor: '#7A0589',hoverTextColor: '#fff', activeBackColor: '#4A0353', activeTextColor: '#fff' }), - THEME6: new ThemeInfo('THEME6', { class: 'lng-theme-theme6', borderColor: '#02311F', backColor: '#02311F', textColor: '#fff', hoverBackColor: '#007261',hoverTextColor: '#fff', activeBackColor: '#00553D', activeTextColor: '#fff' }), + THEME2: new ThemeInfo('THEME2', { class: 'lng-theme-theme2', borderColor: '#0B4A99', backColor: '#0B4A99', textColor: '#000', hoverBackColor: '#1664A7',hoverTextColor: '#000', activeBackColor: '#127498', activeTextColor: '#000' }), + THEME3: new ThemeInfo('THEME3', { class: 'lng-theme-theme3', borderColor: '#82B802', backColor: '#82B802', textColor: '#000', hoverBackColor: '#B5D783',hoverTextColor: '#000', activeBackColor: '#568A02', activeTextColor: '#000' }), + THEME4: new ThemeInfo('THEME4', { class: 'lng-theme-theme4', borderColor: '#406872', backColor: '#406872', textColor: '#000', hoverBackColor: '#3BA5C1',hoverTextColor: '#000', activeBackColor: '#416961', activeTextColor: '#000' }), + THEME5: new ThemeInfo('THEME5', { class: 'lng-theme-theme5', borderColor: '#E05FB2', backColor: '#E05FB2', textColor: '#000', hoverBackColor: '#F0A4A6',hoverTextColor: '#000', activeBackColor: '#D1178E', activeTextColor: '#000' }), + THEME6: new ThemeInfo('THEME6', { class: 'lng-theme-theme6', borderColor: '#5AB712', backColor: '#5AB712', textColor: '#000', hoverBackColor: '#9DDB6C',hoverTextColor: '#000', activeBackColor: '#90DE55', activeTextColor: '#000' }), THEME7: new ThemeInfo('THEME7', { class: 'lng-theme-theme7', borderColor: '#35b3a9', backColor: '#35b3a9', textColor: '#000', hoverBackColor: '#C8FCF7',hoverTextColor: '#000', activeBackColor: '#67CBC4', activeTextColor: '#000' }), - THEME8: new ThemeInfo('THEME8', { class: 'lng-theme-theme8', borderColor: '#53779B', backColor: '#53779B', textColor: '#000', hoverBackColor: '#86A2BA',hoverTextColor: '#000', activeBackColor: '#6084A8', activeTextColor: '#000' }), + THEME8: new ThemeInfo('THEME8', { class: 'lng-theme-theme8', borderColor: '#BD2D18', backColor: '#BD2D18', textColor: '#000', hoverBackColor: '#ED7967',hoverTextColor: '#000', activeBackColor: '#D8503E', activeTextColor: '#000' }), + THEME9: new ThemeInfo('THEME9', { class: 'lng-theme-theme9', borderColor: '#3950E0', backColor: '#3950E0', textColor: '#000', hoverBackColor: '#5D71EA',hoverTextColor: '#000', activeBackColor: '#081FB7', activeTextColor: '#000' }), + THEME10: new ThemeInfo('THEME10', { class: 'lng-theme-theme10', borderColor: '#A5583E', backColor: '#A5583E', textColor: '#fff', hoverBackColor: '#D37658',hoverTextColor: '#fff', activeBackColor: '#DB4D1F', activeTextColor: '#fff' }), } -export const ThemeList = [ThemeType.PRIMARY, ThemeType.LIGHT,ThemeType.THEME1,ThemeType.THEME2, - ThemeType.THEME3,ThemeType.THEME5,ThemeType.THEME6,ThemeType.THEME4,ThemeType.THEME7,ThemeType.THEME8]; +export const ThemeList = [ThemeType.THEME1,ThemeType.THEME2,ThemeType.THEME3,ThemeType.THEME4,ThemeType.THEME5, + ThemeType.THEME6,ThemeType.THEME7,ThemeType.THEME8,ThemeType.THEME9,ThemeType.THEME10]; export class AppThemeType {