From 444214d448757d7ad1b30ebd0b66fbae825e1311 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Mon, 11 Jun 2018 10:41:42 +0800 Subject: [PATCH] no message Former-commit-id: 5e50d6b200ff2da546a94c7261335d163877685d Former-commit-id: 72b2a0609e3cc724fe20b706ca42bf0930b33fd9 Former-commit-id: 359c3c40ba7e34c90c2b8293482ebe73fdb9fd56 --- src/assets/style/theme/star/index.scss | 97 +++++++++++++------- src/assets/style/theme/theme.scss | 2 +- src/components/core/d2-container/index.vue | 2 +- src/components/core/d2-layout-main/index.vue | 2 +- 4 files changed, 68 insertions(+), 35 deletions(-) diff --git a/src/assets/style/theme/star/index.scss b/src/assets/style/theme/star/index.scss index e349c479..7b8f0b89 100644 --- a/src/assets/style/theme/star/index.scss +++ b/src/assets/style/theme/star/index.scss @@ -1,12 +1,36 @@ @import '../theme.scss'; +// 主题名称 $theme-name: 'star'; +// 主题背景颜色 $theme-bg-color: #EFF4F8; +// 主题背景图片 $theme-bg-image: '/static/image/bg/star.jpg'; -$theme-container-border-color: #d8dfea; +// container组件的边框 +$theme-container-border: 1px solid #d8dfea; +// 顶栏和侧边栏中展开的菜单 hover 状态下的文字和图标颜色 +$theme-menu-item-color-hover: #FFF; +// 顶栏和侧边栏中展开的菜单 hover 状态下的背景颜色 +$theme-menu-item-background-color-hover: #187181; +// 顶栏上的文字颜色 +$theme-header-text-color: #FFF; +// 顶栏上的项目在 hover 时的背景颜色 +$theme-header-item-background-color-hover: rgba(#FFF, .3); +// 顶栏上的项目在 focus 时的背景颜色 +$theme-header-item-background-color-focus: rgba(#FFF, .3); +// 顶栏上的项目在 active 时的背景颜色 +$theme-header-item-background-color-active: rgba(#000, .3); +// 侧边栏上的文字颜色 +$theme-aside-text-color: #FFF; +// 侧边栏上的项目在 hover 时的背景颜色 +$theme-aside-item-background-color-hover: rgba(#FFF, .3); +// 顶栏上的项目在 focus 时的背景颜色 +$theme-aside-item-background-color-focus: rgba(#FFF, .3); +// 侧边栏上的项目在 active 时的背景颜色 +$theme-aside-item-background-color-active: rgba(#000, .3); .theme-#{$theme-name} { - .theme { + .layout-main { background-color: $theme-bg-color; background-image: url($theme-bg-image); background-size: cover; @@ -14,7 +38,11 @@ $theme-container-border-color: #d8dfea; } // 菜单项目 @mixin theme-menu-hover-style { - background-color: #eff4f8; + color: $theme-menu-item-color-hover; + i { + color: $theme-menu-item-color-hover; + } + background-color: $theme-menu-item-background-color-hover; } .el-submenu__title:hover { @include theme-menu-hover-style; @@ -28,23 +56,28 @@ $theme-container-border-color: #d8dfea; .el-menu--horizontal .el-menu .el-submenu__title:hover { @include theme-menu-hover-style; } + // [组件] d2-container-full .d2-container-full { .d2-container-full__header { - border-bottom: 1px solid $theme-container-border-color; + border-bottom: $theme-container-border; } .d2-container-full__footer { - border-top: 1px solid $theme-container-border-color; + border-top: $theme-container-border; } } + // [组件] d2-container-card + .d2-container-card { + border: $theme-container-border; + } // 顶栏 .el-header { // 切换按钮 .toggle-aside-btn { i { - color: #FFF; + color: $theme-header-text-color; &:hover { - color: #FFF; + color: $theme-header-text-color; } } } @@ -52,29 +85,29 @@ $theme-container-border-color: #d8dfea; .el-menu { .el-menu-item { transition: border-top-color 0s; - color: #FFF; + color: $theme-header-text-color; &:hover { - background-color: rgba(#FFF, .3); + background-color: $theme-header-item-background-color-hover; } &:focus { - background-color: rgba(#FFF, .3); + background-color: $theme-header-item-background-color-focus; } &.is-active { - background-color: rgba(#000, .3); + background-color: $theme-header-item-background-color-active; } } .el-submenu { .el-submenu__title { transition: border-top-color 0s; - color: #FFF; + color: $theme-header-text-color; + .el-submenu__icon-arrow { + color: $theme-header-text-color; + } &:hover { - background-color: rgba(#FFF, .3); + background-color: $theme-header-item-background-color-hover; } &:focus { - background-color: rgba(#FFF, .3); - } - .el-submenu__icon-arrow { - color: #FFF; + background-color: $theme-header-item-background-color-focus; } } } @@ -82,9 +115,9 @@ $theme-container-border-color: #d8dfea; // 顶栏右侧 .d2-header-right { .btn-text { - color: #FFF; + color: $theme-header-text-color; &:hover { - background-color: rgba(#FFF, .1); + background-color: $theme-header-item-background-color-hover; } } } @@ -96,32 +129,32 @@ $theme-container-border-color: #d8dfea; // [菜单] 正常状态 .el-menu { .el-menu-item { - color: #FFF; + color: $theme-aside-text-color; + i { + color: $theme-aside-text-color; + } &:hover { - background-color: rgba(#FFF, .3); + background-color: $theme-aside-item-background-color-hover; } &:focus { - background-color: rgba(#FFF, .3); - } - i { - color: #FFF; + background-color: $theme-aside-item-background-color-focus; } &.is-active { - background-color: rgba(#000, .3); + background-color: $theme-aside-item-background-color-active; } } } .el-submenu { .el-submenu__title { - color: #FFF; - &:hover { - background-color: rgba(#FFF, .3); - } + color: $theme-aside-text-color; i { - color: #FFF; + color: $theme-aside-text-color; } .el-submenu__icon-arrow { - color: #FFF; + color: $theme-aside-text-color; + } + &:hover { + background-color: $theme-aside-item-background-color-hover; } } } diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss index 3f1af9ed..7d46d1aa 100644 --- a/src/assets/style/theme/theme.scss +++ b/src/assets/style/theme/theme.scss @@ -1,7 +1,7 @@ @import '~@/assets/style/public.scss'; // 主题公用 -.theme { +.layout-main { height: 100vh; width: 100vw; // [布局] 顶栏 diff --git a/src/components/core/d2-container/index.vue b/src/components/core/d2-container/index.vue index 71bb2f08..55a7e549 100644 --- a/src/components/core/d2-container/index.vue +++ b/src/components/core/d2-container/index.vue @@ -1,7 +1,7 @@