From c4ce78e00a49027d44e5cefd072a51e1c060b526 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Wed, 13 Jun 2018 13:53:28 +0800 Subject: [PATCH] no message Former-commit-id: f76d2e80b168cbf1b362ced3b89df57c61cc9aed [formerly f76d2e80b168cbf1b362ced3b89df57c61cc9aed [formerly f76d2e80b168cbf1b362ced3b89df57c61cc9aed [formerly f76d2e80b168cbf1b362ced3b89df57c61cc9aed [formerly f6478db9be9bc696f838c56fe08c176780ca5e79 [formerly c679c8b32e56f589ff89f666543f86ec9cf07e9f]]]]] Former-commit-id: 580e8b2d6a4d95c2eb951498d9ca2b2ed8c93780 Former-commit-id: f799d7c6c312533cff385ee44faf712d9dfa174a Former-commit-id: 9f3ff90ab8c93aa01d5cdfe2b50d476c1df517cf [formerly b1e7b373632ab0ea1f3a4b38f3b7f564419ab980] Former-commit-id: becea97b66a8af2612ac0e684064c7e260663334 Former-commit-id: 164c99025294b0247be219eb747256c7c40c5ae9 Former-commit-id: e965b1c96f04541ad7a81a8130c74e77d11bd30b Former-commit-id: 514fe3c9d9163cc42a611e60e27249affae066c0 Former-commit-id: b99a26f6981acfe76005175e7debab3087458eb3 --- src/assets/style/theme/d2/index.scss | 184 +------------- src/assets/style/theme/d2/setting.scss | 14 +- src/assets/style/theme/line/index.scss | 184 +------------- src/assets/style/theme/line/setting.scss | 4 +- src/assets/style/theme/star/index.scss | 184 +------------- src/assets/style/theme/star/setting.scss | 2 +- src/assets/style/theme/theme.scss | 224 +++++++++++++++++- .../theme/tomorrow-night-blue/index.scss | 184 +------------- .../theme/tomorrow-night-blue/setting.scss | 2 +- .../components/-menu-side/index.vue | 7 +- 10 files changed, 249 insertions(+), 740 deletions(-) diff --git a/src/assets/style/theme/d2/index.scss b/src/assets/style/theme/d2/index.scss index 62ac7a85..30f32ea1 100644 --- a/src/assets/style/theme/d2/index.scss +++ b/src/assets/style/theme/d2/index.scss @@ -1,183 +1,3 @@ -@import '../theme.scss'; +@import '~@/assets/style/public.scss'; @import './setting.scss'; - -.theme-#{$theme-name} { - - .layout-main { - background-color: $theme-bg-color; - // background-image: url($theme-bg-image); - } - // 菜单项目 - @mixin theme-menu-hover-style { - 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; - } - .el-menu-item:hover { - @include theme-menu-hover-style; - } - .el-menu--horizontal .el-menu-item:not(.is-disabled):hover { - @include theme-menu-hover-style; - } - .el-menu--horizontal .el-menu .el-submenu__title:hover { - @include theme-menu-hover-style; - } - - // [组件] d2-container-full - .d2-container-full { - border: $theme-container-border-outer; - border-bottom: none; - background-color: $theme-container-background-color; - .d2-container-full__header { - border-bottom: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - .d2-container-full__footer { - border-top: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - } - // [组件] d2-container-card - .d2-container-card { - border: $theme-container-border-outer; - background-color: $theme-container-background-color; - .el-card__header { - border-bottom: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - } - - // 顶栏 - .el-header { - // 切换按钮 - .toggle-aside-btn { - i { - color: $theme-header-item-color; - background-color: $theme-header-item-background-color; - &:hover { - color: $theme-header-item-color-hover; - } - } - } - // 顶栏菜单 - .el-menu { - .el-menu-item { - transition: border-top-color 0s; - 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-item-color; - background-color: $theme-header-item-background-color; - .el-submenu__icon-arrow { - color: $theme-header-item-color; - } - &:hover { - color: $theme-header-item-color-hover; - background-color: $theme-header-item-background-color-hover; - .el-submenu__icon-arrow { - color: $theme-header-item-color-hover; - } - } - &:focus { - color: $theme-header-item-color-focus; - background-color: $theme-header-item-background-color-focus; - .el-submenu__icon-arrow { - color: $theme-header-item-color-focus; - } - } - } - } - } - // 顶栏右侧 - .d2-header-right { - .btn-text { - color: $theme-header-item-color; - &.can-hover { - &:hover { - color: $theme-header-item-color-hover; - background-color: $theme-header-item-background-color-hover; - } - } - } - } - } - // [布局] 顶栏下面 - .el-container { - // 侧边栏 - .el-aside { - // [菜单] 正常状态 - .el-menu { - .el-menu-item { - color: $theme-aside-item-color; - background-color: $theme-aside-item-background-color; - i { - color: $theme-aside-item-color; - } - &:hover { - color: $theme-aside-item-color-hover; - background-color: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - } - &:focus { - color: $theme-aside-item-color-focus; - background-color: $theme-aside-item-background-color-focus; - i { - color: $theme-aside-item-color-focus; - } - } - &.is-active { - color: $theme-aside-item-color-active; - background-color: $theme-aside-item-background-color-active; - i { - color: $theme-aside-item-color-active; - } - } - } - } - .el-submenu { - .el-submenu__title { - color: $theme-aside-item-color; - background-color: $theme-aside-item-background-color; - i { - color: $theme-aside-item-color; - } - .el-submenu__icon-arrow { - color: $theme-aside-item-color; - } - &:hover { - color: $theme-aside-item-color-hover; - background-color: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - .el-submenu__icon-arrow { - color: $theme-aside-item-color-hover; - } - } - } - } - } - } -} \ No newline at end of file +@import '../theme.scss'; diff --git a/src/assets/style/theme/d2/setting.scss b/src/assets/style/theme/d2/setting.scss index 14d9f9be..81f96df0 100644 --- a/src/assets/style/theme/d2/setting.scss +++ b/src/assets/style/theme/d2/setting.scss @@ -1,9 +1,9 @@ // 主题名称 $theme-name: 'd2'; // 主题背景颜色 -$theme-bg-color: $color-bg; +$theme-bg-color: #f8f8f9; // 主题背景图片 -// $theme-bg-image: '/static/image/bg/xxx.jpg'; +$theme-bg-image: none; // container组件 $theme-container-background-color: rgba(#FFF, 1); @@ -39,4 +39,12 @@ $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 +$theme-aside-item-background-color-active: rgba(#000, .03); + +// 侧边栏菜单为空的时候显示的元素 +$theme-aside-menu-empty-icon-color: $color-text-normal; +$theme-aside-menu-empty-text-color: $color-text-normal; +$theme-aside-menu-empty-background-color: rgba(#000, .05); +$theme-aside-menu-empty-icon-color-hover: $color-text-main; +$theme-aside-menu-empty-text-color-hover: $color-text-main; +$theme-aside-menu-empty-background-color-hover: rgba(#000, .1); \ No newline at end of file diff --git a/src/assets/style/theme/line/index.scss b/src/assets/style/theme/line/index.scss index 12122665..30f32ea1 100644 --- a/src/assets/style/theme/line/index.scss +++ b/src/assets/style/theme/line/index.scss @@ -1,183 +1,3 @@ -@import '../theme.scss'; +@import '~@/assets/style/public.scss'; @import './setting.scss'; - -.theme-#{$theme-name} { - - .layout-main { - background-color: $theme-bg-color; - background-image: url($theme-bg-image); - } - // 菜单项目 - @mixin theme-menu-hover-style { - 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; - } - .el-menu-item:hover { - @include theme-menu-hover-style; - } - .el-menu--horizontal .el-menu-item:not(.is-disabled):hover { - @include theme-menu-hover-style; - } - .el-menu--horizontal .el-menu .el-submenu__title:hover { - @include theme-menu-hover-style; - } - - // [组件] d2-container-full - .d2-container-full { - border: $theme-container-border-outer; - border-bottom: none; - background-color: $theme-container-background-color; - .d2-container-full__header { - border-bottom: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - .d2-container-full__footer { - border-top: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - } - // [组件] d2-container-card - .d2-container-card { - border: $theme-container-border-outer; - background-color: $theme-container-background-color; - .el-card__header { - border-bottom: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - } - - // 顶栏 - .el-header { - // 切换按钮 - .toggle-aside-btn { - i { - color: $theme-header-item-color; - background-color: $theme-header-item-background-color; - &:hover { - color: $theme-header-item-color-hover; - } - } - } - // 顶栏菜单 - .el-menu { - .el-menu-item { - transition: border-top-color 0s; - 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-item-color; - background-color: $theme-header-item-background-color; - .el-submenu__icon-arrow { - color: $theme-header-item-color; - } - &:hover { - color: $theme-header-item-color-hover; - background-color: $theme-header-item-background-color-hover; - .el-submenu__icon-arrow { - color: $theme-header-item-color-hover; - } - } - &:focus { - color: $theme-header-item-color-focus; - background-color: $theme-header-item-background-color-focus; - .el-submenu__icon-arrow { - color: $theme-header-item-color-focus; - } - } - } - } - } - // 顶栏右侧 - .d2-header-right { - .btn-text { - color: $theme-header-item-color; - &.can-hover { - &:hover { - color: $theme-header-item-color-hover; - background-color: $theme-header-item-background-color-hover; - } - } - } - } - } - // [布局] 顶栏下面 - .el-container { - // 侧边栏 - .el-aside { - // [菜单] 正常状态 - .el-menu { - .el-menu-item { - color: $theme-aside-item-color; - background-color: $theme-aside-item-background-color; - i { - color: $theme-aside-item-color; - } - &:hover { - color: $theme-aside-item-color-hover; - background-color: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - } - &:focus { - color: $theme-aside-item-color-focus; - background-color: $theme-aside-item-background-color-focus; - i { - color: $theme-aside-item-color-focus; - } - } - &.is-active { - color: $theme-aside-item-color-active; - background-color: $theme-aside-item-background-color-active; - i { - color: $theme-aside-item-color-active; - } - } - } - } - .el-submenu { - .el-submenu__title { - color: $theme-aside-item-color; - background-color: $theme-aside-item-background-color; - i { - color: $theme-aside-item-color; - } - .el-submenu__icon-arrow { - color: $theme-aside-item-color; - } - &:hover { - color: $theme-aside-item-color-hover; - background-color: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - .el-submenu__icon-arrow { - color: $theme-aside-item-color-hover; - } - } - } - } - } - } -} \ No newline at end of file +@import '../theme.scss'; diff --git a/src/assets/style/theme/line/setting.scss b/src/assets/style/theme/line/setting.scss index acd1b0b5..f1d2b47e 100644 --- a/src/assets/style/theme/line/setting.scss +++ b/src/assets/style/theme/line/setting.scss @@ -1,9 +1,9 @@ // 主题名称 $theme-name: 'line'; // 主题背景颜色 -$theme-bg-color: $color-bg; +$theme-bg-color: #f8f8f9; // 主题背景图片 -$theme-bg-image: '/static/image/bg/line-squashed.jpg'; +$theme-bg-image: url('/static/image/bg/line-squashed.jpg'); // container组件 $theme-container-background-color: rgba(#FFF, .8); diff --git a/src/assets/style/theme/star/index.scss b/src/assets/style/theme/star/index.scss index 12122665..30f32ea1 100644 --- a/src/assets/style/theme/star/index.scss +++ b/src/assets/style/theme/star/index.scss @@ -1,183 +1,3 @@ -@import '../theme.scss'; +@import '~@/assets/style/public.scss'; @import './setting.scss'; - -.theme-#{$theme-name} { - - .layout-main { - background-color: $theme-bg-color; - background-image: url($theme-bg-image); - } - // 菜单项目 - @mixin theme-menu-hover-style { - 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; - } - .el-menu-item:hover { - @include theme-menu-hover-style; - } - .el-menu--horizontal .el-menu-item:not(.is-disabled):hover { - @include theme-menu-hover-style; - } - .el-menu--horizontal .el-menu .el-submenu__title:hover { - @include theme-menu-hover-style; - } - - // [组件] d2-container-full - .d2-container-full { - border: $theme-container-border-outer; - border-bottom: none; - background-color: $theme-container-background-color; - .d2-container-full__header { - border-bottom: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - .d2-container-full__footer { - border-top: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - } - // [组件] d2-container-card - .d2-container-card { - border: $theme-container-border-outer; - background-color: $theme-container-background-color; - .el-card__header { - border-bottom: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - } - - // 顶栏 - .el-header { - // 切换按钮 - .toggle-aside-btn { - i { - color: $theme-header-item-color; - background-color: $theme-header-item-background-color; - &:hover { - color: $theme-header-item-color-hover; - } - } - } - // 顶栏菜单 - .el-menu { - .el-menu-item { - transition: border-top-color 0s; - 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-item-color; - background-color: $theme-header-item-background-color; - .el-submenu__icon-arrow { - color: $theme-header-item-color; - } - &:hover { - color: $theme-header-item-color-hover; - background-color: $theme-header-item-background-color-hover; - .el-submenu__icon-arrow { - color: $theme-header-item-color-hover; - } - } - &:focus { - color: $theme-header-item-color-focus; - background-color: $theme-header-item-background-color-focus; - .el-submenu__icon-arrow { - color: $theme-header-item-color-focus; - } - } - } - } - } - // 顶栏右侧 - .d2-header-right { - .btn-text { - color: $theme-header-item-color; - &.can-hover { - &:hover { - color: $theme-header-item-color-hover; - background-color: $theme-header-item-background-color-hover; - } - } - } - } - } - // [布局] 顶栏下面 - .el-container { - // 侧边栏 - .el-aside { - // [菜单] 正常状态 - .el-menu { - .el-menu-item { - color: $theme-aside-item-color; - background-color: $theme-aside-item-background-color; - i { - color: $theme-aside-item-color; - } - &:hover { - color: $theme-aside-item-color-hover; - background-color: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - } - &:focus { - color: $theme-aside-item-color-focus; - background-color: $theme-aside-item-background-color-focus; - i { - color: $theme-aside-item-color-focus; - } - } - &.is-active { - color: $theme-aside-item-color-active; - background-color: $theme-aside-item-background-color-active; - i { - color: $theme-aside-item-color-active; - } - } - } - } - .el-submenu { - .el-submenu__title { - color: $theme-aside-item-color; - background-color: $theme-aside-item-background-color; - i { - color: $theme-aside-item-color; - } - .el-submenu__icon-arrow { - color: $theme-aside-item-color; - } - &:hover { - color: $theme-aside-item-color-hover; - background-color: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - .el-submenu__icon-arrow { - color: $theme-aside-item-color-hover; - } - } - } - } - } - } -} \ No newline at end of file +@import '../theme.scss'; diff --git a/src/assets/style/theme/star/setting.scss b/src/assets/style/theme/star/setting.scss index b1376e6d..facebac8 100644 --- a/src/assets/style/theme/star/setting.scss +++ b/src/assets/style/theme/star/setting.scss @@ -3,7 +3,7 @@ $theme-name: 'star'; // 主题背景颜色 $theme-bg-color: #EFF4F8; // 主题背景图片 -$theme-bg-image: '/static/image/bg/star-squashed.jpg'; +$theme-bg-image: url('/static/image/bg/star-squashed.jpg'); // container组件 $theme-container-background-color: rgba(#FFF, .9); diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss index 17c418d2..3795e6bc 100644 --- a/src/assets/style/theme/theme.scss +++ b/src/assets/style/theme/theme.scss @@ -1,5 +1,3 @@ -@import '~@/assets/style/public.scss'; - // 主题公用 .layout-main { height: 100vh; @@ -93,6 +91,26 @@ } } } + // 菜单为空的时候显示的信息 + .menu-empty { + height: 160px; + margin: 10px; + margin-top: 0px; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + cursor: pointer; + user-select: none; + i { + font-size: 30px; + margin-bottom: 10px; + } + span { + font-size: 14px; + } + } // [菜单] 折叠状态 .el-menu--collapse { background-color: transparent; @@ -143,3 +161,205 @@ } } } + +// 每个主题特有的设置 + +.theme-#{$theme-name} { + + .layout-main { + background-color: $theme-bg-color; + background-image: $theme-bg-image; + } + // 菜单项目 + @mixin theme-menu-hover-style { + 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; + } + .el-menu-item:hover { + @include theme-menu-hover-style; + } + .el-menu--horizontal .el-menu-item:not(.is-disabled):hover { + @include theme-menu-hover-style; + } + .el-menu--horizontal .el-menu .el-submenu__title:hover { + @include theme-menu-hover-style; + } + + // [组件] d2-container-full + .d2-container-full { + border: $theme-container-border-outer; + border-bottom: none; + background-color: $theme-container-background-color; + .d2-container-full__header { + border-bottom: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; + } + .d2-container-full__footer { + border-top: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; + } + } + // [组件] d2-container-card + .d2-container-card { + border: $theme-container-border-outer; + background-color: $theme-container-background-color; + .el-card__header { + border-bottom: $theme-container-border-inner; + background-color: $theme-container-header-footer-background-color; + } + } + + // 顶栏 + .el-header { + // 切换按钮 + .toggle-aside-btn { + i { + color: $theme-header-item-color; + background-color: $theme-header-item-background-color; + &:hover { + color: $theme-header-item-color-hover; + } + } + } + // 顶栏菜单 + .el-menu { + .el-menu-item { + transition: border-top-color 0s; + 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-item-color; + background-color: $theme-header-item-background-color; + .el-submenu__icon-arrow { + color: $theme-header-item-color; + } + &:hover { + color: $theme-header-item-color-hover; + background-color: $theme-header-item-background-color-hover; + .el-submenu__icon-arrow { + color: $theme-header-item-color-hover; + } + } + &:focus { + color: $theme-header-item-color-focus; + background-color: $theme-header-item-background-color-focus; + .el-submenu__icon-arrow { + color: $theme-header-item-color-focus; + } + } + } + } + } + // 顶栏右侧 + .d2-header-right { + .btn-text { + color: $theme-header-item-color; + &.can-hover { + &:hover { + color: $theme-header-item-color-hover; + background-color: $theme-header-item-background-color-hover; + } + } + } + } + } + // [布局] 顶栏下面 + .el-container { + // 侧边栏 + .el-aside { + // 菜单为空的时候显示的信息 + .menu-empty { + background-color: $theme-aside-menu-empty-background-color; + i { + color: $theme-aside-menu-empty-icon-color; + } + span { + color: $theme-aside-menu-empty-text-color; + } + &:hover { + background-color: $theme-aside-menu-empty-background-color-hover; + i { + color: $theme-aside-menu-empty-icon-color-hover; + } + span { + color: $theme-aside-menu-empty-text-color-hover; + } + } + } + // [菜单] 正常状态 + .el-menu { + .el-menu-item { + color: $theme-aside-item-color; + background-color: $theme-aside-item-background-color; + i { + color: $theme-aside-item-color; + } + &:hover { + color: $theme-aside-item-color-hover; + background-color: $theme-aside-item-background-color-hover; + i { + color: $theme-aside-item-color-hover; + } + } + &:focus { + color: $theme-aside-item-color-focus; + background-color: $theme-aside-item-background-color-focus; + i { + color: $theme-aside-item-color-focus; + } + } + &.is-active { + color: $theme-aside-item-color-active; + background-color: $theme-aside-item-background-color-active; + i { + color: $theme-aside-item-color-active; + } + } + } + } + .el-submenu { + .el-submenu__title { + color: $theme-aside-item-color; + background-color: $theme-aside-item-background-color; + i { + color: $theme-aside-item-color; + } + .el-submenu__icon-arrow { + color: $theme-aside-item-color; + } + &:hover { + color: $theme-aside-item-color-hover; + background-color: $theme-aside-item-background-color-hover; + i { + color: $theme-aside-item-color-hover; + } + .el-submenu__icon-arrow { + color: $theme-aside-item-color-hover; + } + } + } + } + } + } +} diff --git a/src/assets/style/theme/tomorrow-night-blue/index.scss b/src/assets/style/theme/tomorrow-night-blue/index.scss index 62ac7a85..30f32ea1 100644 --- a/src/assets/style/theme/tomorrow-night-blue/index.scss +++ b/src/assets/style/theme/tomorrow-night-blue/index.scss @@ -1,183 +1,3 @@ -@import '../theme.scss'; +@import '~@/assets/style/public.scss'; @import './setting.scss'; - -.theme-#{$theme-name} { - - .layout-main { - background-color: $theme-bg-color; - // background-image: url($theme-bg-image); - } - // 菜单项目 - @mixin theme-menu-hover-style { - 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; - } - .el-menu-item:hover { - @include theme-menu-hover-style; - } - .el-menu--horizontal .el-menu-item:not(.is-disabled):hover { - @include theme-menu-hover-style; - } - .el-menu--horizontal .el-menu .el-submenu__title:hover { - @include theme-menu-hover-style; - } - - // [组件] d2-container-full - .d2-container-full { - border: $theme-container-border-outer; - border-bottom: none; - background-color: $theme-container-background-color; - .d2-container-full__header { - border-bottom: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - .d2-container-full__footer { - border-top: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - } - // [组件] d2-container-card - .d2-container-card { - border: $theme-container-border-outer; - background-color: $theme-container-background-color; - .el-card__header { - border-bottom: $theme-container-border-inner; - background-color: $theme-container-header-footer-background-color; - } - } - - // 顶栏 - .el-header { - // 切换按钮 - .toggle-aside-btn { - i { - color: $theme-header-item-color; - background-color: $theme-header-item-background-color; - &:hover { - color: $theme-header-item-color-hover; - } - } - } - // 顶栏菜单 - .el-menu { - .el-menu-item { - transition: border-top-color 0s; - 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-item-color; - background-color: $theme-header-item-background-color; - .el-submenu__icon-arrow { - color: $theme-header-item-color; - } - &:hover { - color: $theme-header-item-color-hover; - background-color: $theme-header-item-background-color-hover; - .el-submenu__icon-arrow { - color: $theme-header-item-color-hover; - } - } - &:focus { - color: $theme-header-item-color-focus; - background-color: $theme-header-item-background-color-focus; - .el-submenu__icon-arrow { - color: $theme-header-item-color-focus; - } - } - } - } - } - // 顶栏右侧 - .d2-header-right { - .btn-text { - color: $theme-header-item-color; - &.can-hover { - &:hover { - color: $theme-header-item-color-hover; - background-color: $theme-header-item-background-color-hover; - } - } - } - } - } - // [布局] 顶栏下面 - .el-container { - // 侧边栏 - .el-aside { - // [菜单] 正常状态 - .el-menu { - .el-menu-item { - color: $theme-aside-item-color; - background-color: $theme-aside-item-background-color; - i { - color: $theme-aside-item-color; - } - &:hover { - color: $theme-aside-item-color-hover; - background-color: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - } - &:focus { - color: $theme-aside-item-color-focus; - background-color: $theme-aside-item-background-color-focus; - i { - color: $theme-aside-item-color-focus; - } - } - &.is-active { - color: $theme-aside-item-color-active; - background-color: $theme-aside-item-background-color-active; - i { - color: $theme-aside-item-color-active; - } - } - } - } - .el-submenu { - .el-submenu__title { - color: $theme-aside-item-color; - background-color: $theme-aside-item-background-color; - i { - color: $theme-aside-item-color; - } - .el-submenu__icon-arrow { - color: $theme-aside-item-color; - } - &:hover { - color: $theme-aside-item-color-hover; - background-color: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - .el-submenu__icon-arrow { - color: $theme-aside-item-color-hover; - } - } - } - } - } - } -} \ No newline at end of file +@import '../theme.scss'; diff --git a/src/assets/style/theme/tomorrow-night-blue/setting.scss b/src/assets/style/theme/tomorrow-night-blue/setting.scss index 9c440294..18c392e5 100644 --- a/src/assets/style/theme/tomorrow-night-blue/setting.scss +++ b/src/assets/style/theme/tomorrow-night-blue/setting.scss @@ -3,7 +3,7 @@ $theme-name: 'tomorrow-night-blue'; // 主题背景颜色 $theme-bg-color: #002147; // 主题背景图片 -// $theme-bg-image: '/static/image/bg/xxx.jpg'; +$theme-bg-image: none; // container组件 $theme-container-background-color: #FFF; diff --git a/src/components/core/d2-layout-main/components/-menu-side/index.vue b/src/components/core/d2-layout-main/components/-menu-side/index.vue index dec1a632..274f2604 100644 --- a/src/components/core/d2-layout-main/components/-menu-side/index.vue +++ b/src/components/core/d2-layout-main/components/-menu-side/index.vue @@ -9,9 +9,10 @@ - +
+ + 当前目录没有菜单 +