diff --git a/package.json b/package.json index 3a03e5b..67c2324 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,8 @@ "vuedraggable": "4.1.0" }, "devDependencies": { + "@vicons/ionicons5": "^0.13.0", + "@vicons/utils": "^0.1.4", "@vitejs/plugin-vue": "5.2.4", "less": "^4.5.1", "mockjs": "^1.1.0", diff --git a/public/favicon.ico b/public/favicon.ico index e263760..da57547 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/assets/logo/logo.png b/src/assets/logo/logo.png index e263760..da57547 100644 Binary files a/src/assets/logo/logo.png and b/src/assets/logo/logo.png differ diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 54d7441..fa1c5ac 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -24,8 +24,9 @@ left: 0; z-index: 1001; overflow: hidden; - -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); - box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 2px 0 8px rgba(0, 168, 98, 0.15); + box-shadow: 2px 0 8px rgba(0, 168, 98, 0.15); + background: linear-gradient(180deg, #1a3a2e 0%, #153028 100%); // reset element-ui css .horizontal-collapse-transition { @@ -80,11 +81,13 @@ display: inline-block !important; } - // menu hover + // menu hover - 国家电网风格 .sub-menu-title-noDropdown, .el-sub-menu__title { &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background-color: rgba(0, 168, 98, 0.15) !important; + color: #00A862 !important; + transition: all 0.3s ease; } } @@ -97,7 +100,9 @@ min-width: vars.$base-sidebar-width !important; &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background-color: rgba(0, 168, 98, 0.15) !important; + color: #00A862 !important; + transition: all 0.3s ease; } } @@ -212,8 +217,10 @@ .nest-menu .el-sub-menu>.el-sub-menu__title, .el-menu-item { &:hover { - // you can use $sub-menuHover - background-color: rgba(0, 0, 0, 0.06) !important; + // 国家电网风格悬停效果 + background-color: rgba(0, 168, 98, 0.15) !important; + color: #00A862 !important; + transition: all 0.3s ease; } } diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index 8764e13..4579b69 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -1,39 +1,39 @@ -// base color -$blue: #324157; -$light-blue: #333c46; +// base color - 国家电网主题色 +$blue: #1a4d7a; +$light-blue: #2d6ba3; $red: #C03639; $pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; +$green: #00A862; // 国家电网主绿色 +$tiffany: #00B86C; // 国家电网辅助绿色 $yellow: #FEC171; -$panGreen: #30B08F; +$panGreen: #00C97A; // 国家电网亮绿色 -// 默认主题变量 -$menuText: #bfcbd9; -$menuActiveText: #409eff; -$menuBg: #304156; -$menuHover: #263445; +// 默认主题变量 - 国家电网深色侧边栏 +$menuText: #e8f5e9; +$menuActiveText: #00A862; // 国家电网主绿色 +$menuBg: #1a3a2e; // 深绿色背景 +$menuHover: #2d5a4a; // 悬停时的深绿色 -// 浅色主题theme-light +// 浅色主题theme-light - 国家电网浅色侧边栏 $menuLightBg: #ffffff; -$menuLightHover: #f0f1f5; +$menuLightHover: #e8f5e9; // 浅绿色悬停 $menuLightText: #303133; -$menuLightActiveText: #409EFF; +$menuLightActiveText: #00A862; // 国家电网主绿色 // 基础变量 $base-sidebar-width: 200px; $sideBarWidth: 200px; -// 菜单暗色变量 -$base-menu-color: #bfcbd9; -$base-menu-color-active: #f4f4f5; -$base-menu-background: #304156; -$base-sub-menu-background: #1f2d3d; -$base-sub-menu-hover: #001528; +// 菜单暗色变量 - 国家电网风格 +$base-menu-color: #e8f5e9; +$base-menu-color-active: #00A862; // 国家电网主绿色 +$base-menu-background: #1a3a2e; // 深绿色背景 +$base-sub-menu-background: #153028; // 更深绿色子菜单背景 +$base-sub-menu-hover: #2d5a4a; // 悬停时的深绿色 -// 组件变量 -$--color-primary: #409EFF; -$--color-success: #67C23A; +// 组件变量 - 国家电网主题色 +$--color-primary: #00A862; // 国家电网主绿色 +$--color-success: #00B86C; // 国家电网辅助绿色 $--color-warning: #E6A23C; $--color-danger: #F56C6C; $--color-info: #909399; @@ -65,16 +65,23 @@ $--color-info: #909399; colorInfo: $--color-info; } -// CSS变量定义 +// CSS变量定义 - 国家电网主题 :root { /* 亮色模式变量 */ --sidebar-bg: #{$menuBg}; --sidebar-text: #{$menuText}; --menu-hover: #{$menuHover}; + --menu-active-text: #{$menuActiveText}; --navbar-bg: #ffffff; --navbar-text: #303133; + /* 国家电网主题色 */ + --sgcc-primary: #00A862; + --sgcc-primary-light: #00B86C; + --sgcc-primary-dark: #008050; + --sgcc-gradient: linear-gradient(135deg, #00A862 0%, #00B86C 100%); + /* splitpanes default-theme 变量 */ --splitpanes-default-bg: #ffffff; diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index f903134..9fb87ef 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,60 +1,155 @@ diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 9acc406..113a6bc 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -83,16 +83,29 @@ const activeMenu = computed(() => { .el-menu-item, .el-sub-menu__title { &:hover { - background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; + background-color: rgba(0, 168, 98, 0.15) !important; + color: #00A862 !important; + transition: all 0.3s ease; } } .el-menu-item { color: v-bind(getMenuTextColor); + position: relative; &.is-active { - color: var(--menu-active-text, #409eff); - background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; + color: #00A862 !important; + background-color: rgba(0, 168, 98, 0.2) !important; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 3px; + background: linear-gradient(180deg, #00A862 0%, #00B86C 100%); + } } } diff --git a/src/main.js b/src/main.js index 7063bba..6c2b057 100644 --- a/src/main.js +++ b/src/main.js @@ -83,11 +83,27 @@ app.component('svg-icon', SvgIcon) directive(app) -// 使用element-plus 并且设置全局的大小 +// 使用element-plus 并且设置全局的大小和主题色 app.use(ElementPlus, { locale: locale, // 支持 large、default、small size: Cookies.get('size') || 'default', }) +// 设置 Element Plus 主题色为国家电网绿色（默认主题） +const style = document.createElement('style') +style.id = 'sgcc-theme-style' +style.textContent = ` + :root { + --el-color-primary: #00A862; + --el-color-primary-light-3: #33B97E; + --el-color-primary-light-5: #66CA9A; + --el-color-primary-light-7: #99DBB6; + --el-color-primary-light-8: #B3E6CC; + --el-color-primary-light-9: #CCF0DD; + --el-color-primary-dark-2: #008650; + } +` +document.head.appendChild(style) + app.mount('#app') diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js index 2913564..2d3d4f6 100644 --- a/src/store/modules/settings.js +++ b/src/store/modules/settings.js @@ -14,7 +14,7 @@ const useSettingsStore = defineStore( { state: () => ({ title: '', - theme: storageSetting.theme || '#409EFF', + theme: storageSetting.theme || '#00A862', // 国家电网主绿色 sideTheme: storageSetting.sideTheme || sideTheme, showSettings: showSettings, topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, diff --git a/src/views/login.vue b/src/views/login.vue index 8b64e6b..b993711 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -1,73 +1,113 @@ diff --git a/src/views/showComponents/showTable/index.vue b/src/views/showComponents/showTable/index.vue index 60b4de1..a1445b0 100644 --- a/src/views/showComponents/showTable/index.vue +++ b/src/views/showComponents/showTable/index.vue @@ -36,9 +36,9 @@ >