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

no message

Browse Source 
Former-commit-id: f15181110a6aabe756ed7f711300b192c79293c8
Former-commit-id: 6be9466105e3c289072e3a0db5b1e3f0546d8714
Former-commit-id: a0c01f525426116840ad39a7f130b5f77ebefbc4
Former-commit-id: ad062fd56a932e7ebe644626f966348b53246641
This commit is contained in:
liyang
2018-06-12 00:08:48 +08:00
parent 65be076b27
commit 0a640f3a18
10 changed files with 207 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/assets/style/theme/line/index.scss Normal file
View File

@@ -0,0 +1,157 @@
@import '../theme.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;
.d2-container-full__header {
border-bottom: $theme-container-border-inner;
}
.d2-container-full__footer {
border-top: $theme-container-border-inner;
}
}
// [组件] d2-container-card
.d2-container-card {
border: $theme-container-border-outer;
.el-card__header {
border-bottom: $theme-container-border-inner;
}
}
// 顶栏
.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;
}
&:focus {
color: $theme-header-item-color-focus;
background-color: $theme-header-item-background-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;
}
&: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-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;
}
}
}
}
}
}

39
src/assets/style/theme/line/setting.scss Normal file
View File

@@ -0,0 +1,39 @@
// 主题名称
$theme-name: 'line';
// 主题背景颜色
$theme-bg-color: $color-bg;
// 主题背景图片
$theme-bg-image: '/static/image/bg/line-squashed.jpg';
// container组件的边框
$theme-container-border-inner: 1px solid $color-border-2;
$theme-container-border-outer: 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);

2
src/assets/style/theme/star/setting.scss
View File

@@ -3,7 +3,7 @@ $theme-name: 'star';
// 主题背景颜色
$theme-bg-color: #EFF4F8;
// 主题背景图片
$theme-bg-image: '/static/image/bg/star.jpg';
$theme-bg-image: '/static/image/bg/star-squashed.jpg';
// container组件的边框
$theme-container-border-inner: 1px solid $color-border-2;
$theme-container-border-outer: none;

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

@@ -66,5 +66,6 @@ export default {
<style lang="scss">
// 主题
@import '~@/assets/style/theme/d2/index.scss';
@import '~@/assets/style/theme/line/index.scss';
@import '~@/assets/style/theme/star/index.scss';
</style>

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

@@ -8,6 +8,11 @@ export default {
value: 'd2',
preview: '/static/image/theme/d2/preview@2x.png'
},
{
name: '简约线条',
value: 'line',
preview: '/static/image/theme/line/preview@2x.png'
},
{
name: '流星',
value: 'star',