From 425bfaf14d93eaac2ceca58eb42c530bcad73120 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Mon, 11 Jun 2018 13:29:06 +0800 Subject: [PATCH] no message Former-commit-id: 8e98a0b4b2edb656220d9af244c018c7378eee8e Former-commit-id: 2b5a9bbde5dcc2789167635fb047ac5456d2905c Former-commit-id: 5a85965e717c200bfde3d06551413035018579d7 --- .../style/theme/{d2admin => d2}/index.scss | 75 +++++++------------ src/assets/style/theme/d2/setting.scss | 38 ++++++++++ .../-header-right/components/-theme.vue | 14 ++++ src/components/core/d2-layout-main/index.vue | 5 +- src/store/modules/theme.js | 1 + 5 files changed, 83 insertions(+), 50 deletions(-) rename src/assets/style/theme/{d2admin => d2}/index.scss (60%) create mode 100644 src/assets/style/theme/d2/setting.scss diff --git a/src/assets/style/theme/d2admin/index.scss b/src/assets/style/theme/d2/index.scss similarity index 60% rename from src/assets/style/theme/d2admin/index.scss rename to src/assets/style/theme/d2/index.scss index 940e082e..07a192d7 100644 --- a/src/assets/style/theme/d2admin/index.scss +++ b/src/assets/style/theme/d2/index.scss @@ -1,44 +1,10 @@ @import '../theme.scss'; - -// 主题名称 -$theme-name: 'd2admin'; -// 主题背景颜色 -$theme-bg-color: #EFF4F8; -// 主题背景图片 -// $theme-bg-image: '/static/image/bg/star.jpg'; -// container组件的边框 -$theme-container-border: 1px solid #d8dfea; - -// 顶栏和侧边栏中展开的菜单 hover 状态下的文字和图标颜色 -$theme-menu-item-color-hover: #293849; -// 顶栏和侧边栏中展开的菜单 hover 状态下的背景颜色 -$theme-menu-item-background-color-hover: #F4F6F8; - -// 顶栏上的文字颜色 -$theme-header-text-color: #30312D; -// 顶栏上的项目在 hover 时的背景颜色 -$theme-header-item-background-color-hover: rgba(#000, .03); -// 顶栏上的项目在 focus 时的背景颜色 -$theme-header-item-background-color-focus: rgba(#000, .03); -// 顶栏上的项目在 active 时的背景颜色 -$theme-header-item-background-color-active: rgba(#000, .05); - -// 侧边栏上的文字颜色 -$theme-aside-text-color: #30312D; -// 侧边栏上的项目在 hover 时的背景颜色 -$theme-aside-item-background-color-hover: rgba(#000, .03); -// 顶栏上的项目在 focus 时的背景颜色 -$theme-aside-item-background-color-focus: rgba(#000, .03); -// 侧边栏上的项目在 active 时的背景颜色 -$theme-aside-item-background-color-active: rgba(#000, .05); +@import './setting.scss'; .theme-#{$theme-name} { .layout-main { background-color: $theme-bg-color; - // background-image: url($theme-bg-image); - background-size: cover; - background-position: center; } // 菜单项目 @mixin theme-menu-hover-style { @@ -63,6 +29,8 @@ $theme-aside-item-background-color-active: rgba(#000, .05); // [组件] d2-container-full .d2-container-full { + border: $theme-container-border; + border-bottom: none; .d2-container-full__header { border-bottom: $theme-container-border; } @@ -79,9 +47,10 @@ $theme-aside-item-background-color-active: rgba(#000, .05); // 切换按钮 .toggle-aside-btn { i { - color: $theme-header-text-color; + color: $theme-header-item-color; + background-color: $theme-header-item-background-color; &:hover { - color: $theme-header-text-color; + color: $theme-header-item-color-hover; } } } @@ -89,28 +58,35 @@ $theme-aside-item-background-color-active: rgba(#000, .05); .el-menu { .el-menu-item { transition: border-top-color 0s; - color: $theme-header-text-color; + color: $theme-header-item-color; + background-color: $theme-header-item-background-color; &:hover { + color: $theme-header-item-color-hover; background-color: $theme-header-item-background-color-hover; } &:focus { + color: $theme-header-item-color-focus; background-color: $theme-header-item-background-color-focus; } &.is-active { + color: $theme-header-item-color-active; background-color: $theme-header-item-background-color-active; } } .el-submenu { .el-submenu__title { transition: border-top-color 0s; - color: $theme-header-text-color; + color: $theme-header-item-color; + background-color: $theme-header-item-background-color; .el-submenu__icon-arrow { - color: $theme-header-text-color; + color: $theme-header-item-color; } &:hover { + color: $theme-header-item-color-hover; background-color: $theme-header-item-background-color-hover; } &:focus { + color: $theme-header-item-color-focus; background-color: $theme-header-item-background-color-focus; } } @@ -119,9 +95,10 @@ $theme-aside-item-background-color-active: rgba(#000, .05); // 顶栏右侧 .d2-header-right { .btn-text { - color: $theme-header-text-color; + color: $theme-header-item-color; &.can-hover { &:hover { + color: $theme-header-item-color-hover; background-color: $theme-header-item-background-color-hover; } } @@ -135,31 +112,37 @@ $theme-aside-item-background-color-active: rgba(#000, .05); // [菜单] 正常状态 .el-menu { .el-menu-item { - color: $theme-aside-text-color; + color: $theme-aside-item-color; + background-color: $theme-aside-item-background-color; i { - color: $theme-aside-text-color; + color: $theme-aside-item-color; } &:hover { + color: $theme-aside-item-color-hover; background-color: $theme-aside-item-background-color-hover; } &:focus { + color: $theme-aside-item-color-focus; background-color: $theme-aside-item-background-color-focus; } &.is-active { + color: $theme-aside-item-color-active; background-color: $theme-aside-item-background-color-active; } } } .el-submenu { .el-submenu__title { - color: $theme-aside-text-color; + color: $theme-aside-item-color; + background-color: $theme-aside-item-background-color; i { - color: $theme-aside-text-color; + color: $theme-aside-item-color; } .el-submenu__icon-arrow { - color: $theme-aside-text-color; + color: $theme-aside-item-color; } &:hover { + color: $theme-aside-item-color-hover; background-color: $theme-aside-item-background-color-hover; } } diff --git a/src/assets/style/theme/d2/setting.scss b/src/assets/style/theme/d2/setting.scss new file mode 100644 index 00000000..a5d64528 --- /dev/null +++ b/src/assets/style/theme/d2/setting.scss @@ -0,0 +1,38 @@ +// 主题名称 +$theme-name: 'd2'; +// 主题背景颜色 +$theme-bg-color: $color-bg; +// 主题背景图片 +// $theme-bg-image: '/static/image/bg/star.jpg'; +// container组件的边框 +$theme-container-border: 1px solid $color-border-1; + +// 顶栏和侧边栏中展开的菜单 hover 状态下 +$theme-menu-item-color-hover: #293849; +$theme-menu-item-background-color-hover: #ecf5ff; + +// 顶栏上的文字颜色 +$theme-header-item-color: $color-text-normal; +$theme-header-item-background-color: transparent; +// 顶栏上的项目在 hover 时 +$theme-header-item-color-hover: $color-text-main; +$theme-header-item-background-color-hover: rgba(#000, .02); +// 顶栏上的项目在 focus 时 +$theme-header-item-color-focus: $color-text-main; +$theme-header-item-background-color-focus: rgba(#000, .02); +// 顶栏上的项目在 active 时 +$theme-header-item-color-active: $color-text-main; +$theme-header-item-background-color-active: rgba(#000, .03); + +// 侧边栏上的文字颜色 +$theme-aside-item-color: $color-text-normal; +$theme-aside-item-background-color: transparent; +// 侧边栏上的项目在 hover 时 +$theme-aside-item-color-hover: $color-text-main; +$theme-aside-item-background-color-hover: rgba(#000, .02); +// 侧边栏上的项目在 focus 时 +$theme-aside-item-color-focus: $color-text-main; +$theme-aside-item-background-color-focus: rgba(#000, .02); +// 侧边栏上的项目在 active 时 +$theme-aside-item-color-active: $color-text-main; +$theme-aside-item-background-color-active: rgba(#000, .03); \ No newline at end of file diff --git a/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue b/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue index fb5e9ec7..5d479958 100644 --- a/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue +++ b/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue @@ -22,6 +22,7 @@ diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue index 7094e98c..94fd5a8f 100644 --- a/src/components/core/d2-layout-main/index.vue +++ b/src/components/core/d2-layout-main/index.vue @@ -44,15 +44,12 @@ export default { // [侧边栏宽度] 折叠状态 asideWidthCollapse: '65px' } - }, - mounted () { - document.body.className = 'theme-star' } } diff --git a/src/store/modules/theme.js b/src/store/modules/theme.js index 7da93b18..5cead18b 100644 --- a/src/store/modules/theme.js +++ b/src/store/modules/theme.js @@ -6,6 +6,7 @@ export default { // 设置主题 setTheme (state, themeName) { state.themeName = themeName + document.body.className = `theme-${state.themeName}` } } }