sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source 
Former-commit-id: 8e98a0b4b2edb656220d9af244c018c7378eee8e
Former-commit-id: 2b5a9bbde5dcc2789167635fb047ac5456d2905c
Former-commit-id: 5a85965e717c200bfde3d06551413035018579d7
This commit is contained in:
liyang
2018-06-11 13:29:06 +08:00
parent 9ce24ca952
commit 425bfaf14d
5 changed files with 83 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/assets/style/theme/d2admin/index.scss → src/assets/style/theme/d2/index.scss
View File

@@ -1,44 +1,10 @@
@import '../theme.scss'; @import '../theme.scss';
@import './setting.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);
.theme-#{$theme-name} { .theme-#{$theme-name} {
.layout-main { .layout-main {
background-color: $theme-bg-color; background-color: $theme-bg-color;
// background-image: url($theme-bg-image);
background-size: cover;
background-position: center;
} }
// 菜单项目 // 菜单项目
@mixin theme-menu-hover-style { @mixin theme-menu-hover-style {
@@ -63,6 +29,8 @@ $theme-aside-item-background-color-active: rgba(#000, .05);
// [组件] d2-container-full // [组件] d2-container-full
.d2-container-full { .d2-container-full {
border: $theme-container-border;
border-bottom: none;
.d2-container-full__header { .d2-container-full__header {
border-bottom: $theme-container-border; border-bottom: $theme-container-border;
} }
@@ -79,9 +47,10 @@ $theme-aside-item-background-color-active: rgba(#000, .05);
// 切换按钮 // 切换按钮
.toggle-aside-btn { .toggle-aside-btn {
i { i {
color: $theme-header-text-color; color: $theme-header-item-color;
background-color: $theme-header-item-background-color;
&:hover { &: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 {
.el-menu-item { .el-menu-item {
transition: border-top-color 0s; transition: border-top-color 0s;
color: $theme-header-text-color; color: $theme-header-item-color;
background-color: $theme-header-item-background-color;
&:hover { &:hover {
color: $theme-header-item-color-hover;
background-color: $theme-header-item-background-color-hover; background-color: $theme-header-item-background-color-hover;
} }
&:focus { &:focus {
color: $theme-header-item-color-focus;
background-color: $theme-header-item-background-color-focus; background-color: $theme-header-item-background-color-focus;
} }
&.is-active { &.is-active {
color: $theme-header-item-color-active;
background-color: $theme-header-item-background-color-active; background-color: $theme-header-item-background-color-active;
} }
} }
.el-submenu { .el-submenu {
.el-submenu__title { .el-submenu__title {
transition: border-top-color 0s; 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 { .el-submenu__icon-arrow {
color: $theme-header-text-color; color: $theme-header-item-color;
} }
&:hover { &:hover {
color: $theme-header-item-color-hover;
background-color: $theme-header-item-background-color-hover; background-color: $theme-header-item-background-color-hover;
} }
&:focus { &:focus {
color: $theme-header-item-color-focus;
background-color: $theme-header-item-background-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 { .d2-header-right {
.btn-text { .btn-text {
color: $theme-header-text-color; color: $theme-header-item-color;
&.can-hover { &.can-hover {
&:hover { &:hover {
color: $theme-header-item-color-hover;
background-color: $theme-header-item-background-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 {
.el-menu-item { .el-menu-item {
color: $theme-aside-text-color; color: $theme-aside-item-color;
background-color: $theme-aside-item-background-color;
i { i {
color: $theme-aside-text-color; color: $theme-aside-item-color;
} }
&:hover { &:hover {
color: $theme-aside-item-color-hover;
background-color: $theme-aside-item-background-color-hover; background-color: $theme-aside-item-background-color-hover;
} }
&:focus { &:focus {
color: $theme-aside-item-color-focus;
background-color: $theme-aside-item-background-color-focus; background-color: $theme-aside-item-background-color-focus;
} }
&.is-active { &.is-active {
color: $theme-aside-item-color-active;
background-color: $theme-aside-item-background-color-active; background-color: $theme-aside-item-background-color-active;
} }
} }
} }
.el-submenu { .el-submenu {
.el-submenu__title { .el-submenu__title {
color: $theme-aside-text-color; color: $theme-aside-item-color;
background-color: $theme-aside-item-background-color;
i { i {
color: $theme-aside-text-color; color: $theme-aside-item-color;
} }
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
color: $theme-aside-text-color; color: $theme-aside-item-color;
} }
&:hover { &:hover {
color: $theme-aside-item-color-hover;
background-color: $theme-aside-item-background-color-hover; background-color: $theme-aside-item-background-color-hover;
} }
} }

38
src/assets/style/theme/d2/setting.scss Normal file
View File

@@ -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);

14
src/components/core/d2-layout-main/components/-header-right/components/-theme.vue
View File

@@ -22,6 +22,7 @@
</template> </template>
<script> <script>
import { mapState, mapMutations } from 'vuex'
export default { export default {
data () { data () {
return { return {
@@ -41,6 +42,19 @@ export default {
border: true border: true
} }
} }
},
computed: {
...mapState({
themeName: state => state.theme.themeName
})
},
methods: {
...mapMutations([
'setTheme'
])
},
mounted () {
this.setTheme('d2')
} }
} }
</script> </script>

5
src/components/core/d2-layout-main/index.vue
View File

@@ -44,15 +44,12 @@ export default {
// [侧边栏宽度] 折叠状态 // [侧边栏宽度] 折叠状态
asideWidthCollapse: '65px' asideWidthCollapse: '65px'
} }
},
mounted () {
document.body.className = 'theme-star'
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
// 主题 // 主题
@import '~@/assets/style/theme/d2admin/index.scss'; @import '~@/assets/style/theme/d2/index.scss';
@import '~@/assets/style/theme/star/index.scss'; @import '~@/assets/style/theme/star/index.scss';
</style> </style>

1
src/store/modules/theme.js
View File

@@ -6,6 +6,7 @@ export default {
// 设置主题 // 设置主题
setTheme (state, themeName) { setTheme (state, themeName) {
state.themeName = themeName state.themeName = themeName
document.body.className = `theme-${state.themeName}`
} }
} }
} }