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
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../theme.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);
|
||||
$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);
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../theme.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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../theme.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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../theme.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;
|
||||
|
||||
@@ -9,9 +9,10 @@
|
||||
<d2-layout-main-menu-sub v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
<!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-menu-side-empty">
|
||||
没有菜单
|
||||
</div> -->
|
||||
<div v-if="menus.length === 0 && !collapse" class="menu-empty">
|
||||
<d2-icon name="hdd-o"/>
|
||||
<span>当前目录没有菜单</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user