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: acc0a1177f6b891c972f7cda132d21173a58619c [formerly acc0a1177f6b891c972f7cda132d21173a58619c [formerly acc0a1177f6b891c972f7cda132d21173a58619c [formerly acc0a1177f6b891c972f7cda132d21173a58619c [formerly 82d458525ffb34575a2775f467bdcfa4601b3f2c [formerly e96d2961ae227727a596e8746e08bfbf8a03d697]]]]]
Former-commit-id: 59b2fad2530184f0151159ea74857ad4b6cde2eb
Former-commit-id: a26a9ec02c2fb0ae612debfd1491bf9e89f6aa28
Former-commit-id: b5d244fcb513afa0d73ba7097dbed11b80d5431c [formerly 7c1f3140d165825e931e41cf2c18f6f658585f0d]
Former-commit-id: ea009a9a31b1eb60ea651c8fda869dd6f95a5d13
Former-commit-id: ad0daceebff1c30945c591bc1926fc52704759d4
Former-commit-id: 8858def52060abf76f8b93f53ef7d5a1d5dd2149
Former-commit-id: 92246e948cb63455d6137cd77b0784c709b7e71b
Former-commit-id: c3c2ebb30f00bb6163bc1f6be13456eec025e7c0
This commit is contained in:
liyang
2018-06-30 00:38:16 +08:00
parent a860a61deb
commit cd2b7920bc
4 changed files with 471 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/style/theme/register.scss
View File

@@ -1,3 +1,6 @@
@import '~@/assets/style/public.scss';
@import '~@/assets/style/theme/theme-base.scss';
@import '~@/assets/style/theme/d2/index.scss';
@import '~@/assets/style/theme/line/index.scss';
@import '~@/assets/style/theme/star/index.scss';

199
src/assets/style/theme/theme-base.scss Normal file
View File

@@ -0,0 +1,199 @@
// 主题公用
.layout-main-group {
&.grayMode {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
// 背景上面的半透明遮罩
.layout-main-mask {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
// 主体
.layout-main {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
// [布局] 顶栏
.el-header {
padding: 0px;
// logo区域
.logo-group {
transition: width .3s;
float: left;
text-align: center;
img {
height: 60px;
}
}
// 折叠侧边栏切换按钮
.toggle-aside-btn {
float: left;
height: 60px;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
@extend %unable-select;
i {
font-size: 20px;
margin-top: 4px;
}
}
// [菜单] 顶栏
.el-menu {
float: left;
border-bottom: none;
background-color: transparent;
%header-menu-item {
@extend %unable-select;
i.fa {
font-size: 16px;
margin-right: 4px;
}
}
.el-menu-item {
@extend %header-menu-item;
border-bottom: none;
}
.el-submenu {
@extend %header-menu-item;
.el-submenu__title {
border-bottom: none;
}
}
}
// 顶栏右侧的按钮
.d2-header-right {
float: right;
height: 60px;
display: flex;
align-items: center;
.btn-text {
padding: 14px 12px;
border-radius: 4px;
margin: 0px !important;
margin-left: 10px !important;
}
.el-dropdown {
@extend %unable-select;
}
}
}
// [布局] 顶栏下面
.el-container {
// 侧边栏
.el-aside {
transition: width .3s;
overflow: auto;
// [菜单] 正常状态
.el-menu {
@extend %unable-select;
background-color: transparent;
border-right: none;
.el-menu-item {
i {
margin-left: 4px;
margin-right: 5px;
font-size: 16px;
}
}
}
.el-submenu {
@extend %unable-select;
.el-submenu__title {
i {
margin-left: 4px;
margin-right: 5px;
font-size: 16px;
}
.el-submenu__icon-arrow {
margin-top: -10px;
}
}
}
// 菜单为空的时候显示的信息
.menu-empty {
height: 160px;
margin: 10px;
margin-top: 0px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@extend %unable-select;
i {
font-size: 30px;
margin-bottom: 10px;
}
span {
font-size: 14px;
}
}
// [菜单] 折叠状态
.el-menu--collapse {
background-color: transparent;
.el-submenu__title {
text-align: center;
}
}
}
// 右下 主体
.el-main {
padding: 0px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
// 主体部分分为多页面控制器 和主体
.d2-layout-main-header {
flex-grow: 0;
// 多页面控制器
.d2-multiple-page-control {
.el-tabs__header.is-top {
margin: 0px;
margin-right: 20px;
}
.el-tabs__nav {
overflow: hidden;
}
}
}
// 主体
.d2-layout-main-body {
flex-grow: 1;
position: relative;
// 布局组件
.container-component {
// 卡片布局组件
.d2-container-card {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
// 隐形布局组件 这个组件不建议在有多页面导航的时候使用 不美观
.d2-container-ghost {
margin-right: 20px;
margin-bottom: 20px;
}
}
}
}
}
}
}

269
src/assets/style/theme/theme.scss Normal file
View File

@@ -0,0 +1,269 @@
// 每个主题特有的设置
.theme-#{$theme-name} {
// 背景图片和遮罩
.layout-main-group {
background-color: $theme-bg-color;
.layout-main-mask {
background: $theme-bg-mask;
}
}
// 菜单项目
@mixin theme-menu-hover-style {
color: $theme-menu-item-color-hover;
i.fa {
color: $theme-menu-item-color-hover;
}
background: $theme-menu-item-background-color-hover;
}
.el-submenu__title {
@extend %unable-select;
i.fa { margin-right: 5px; }
}
.el-menu-item {
@extend %unable-select;
i.fa { margin-right: 5px; }
}
.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;
}
// 顶栏
.el-header {
// 切换按钮
.toggle-aside-btn {
i {
color: $theme-header-item-color;
background: $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: $theme-header-item-background-color;
i.fa { color: inherit; }
&:hover {
color: $theme-header-item-color-hover;
background: $theme-header-item-background-color-hover;
i.fa { color: inherit; }
}
&:focus {
color: $theme-header-item-color-focus;
background: $theme-header-item-background-color-focus;
i.fa { color: inherit; }
}
&.is-active {
color: $theme-header-item-color-active;
background: $theme-header-item-background-color-active;
i.fa { color: inherit; }
}
}
.el-submenu {
.el-submenu__title {
transition: border-top-color 0s;
color: $theme-header-item-color;
background: $theme-header-item-background-color;
i.fa { color: inherit; }
.el-submenu__icon-arrow {
color: $theme-header-item-color;
}
&:hover {
color: $theme-header-item-color-hover;
background: $theme-header-item-background-color-hover;
i.fa { color: inherit; }
.el-submenu__icon-arrow {
color: $theme-header-item-color-hover;
}
}
&:focus {
color: $theme-header-item-color-focus;
background: $theme-header-item-background-color-focus;
i.fa { color: inherit; }
.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: $theme-header-item-background-color-hover;
}
}
}
}
}
// [布局] 顶栏下面
.el-container {
// 侧边栏
.el-aside {
// 菜单为空的时候显示的信息
.menu-empty {
background: $theme-aside-menu-empty-background-color;
i {
color: $theme-aside-menu-empty-icon-color;
}
span {
color: $theme-aside-menu-empty-text-color;
}
&:hover {
background: $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: $theme-aside-item-background-color;
i {
color: $theme-aside-item-color;
}
&:hover {
color: $theme-aside-item-color-hover;
background: $theme-aside-item-background-color-hover;
i {
color: $theme-aside-item-color-hover;
}
}
&:focus {
color: $theme-aside-item-color-focus;
background: $theme-aside-item-background-color-focus;
i {
color: $theme-aside-item-color-focus;
}
}
&.is-active {
color: $theme-aside-item-color-active;
background: $theme-aside-item-background-color-active;
i {
color: $theme-aside-item-color-active;
}
}
}
}
.el-submenu {
.el-submenu__title {
color: $theme-aside-item-color;
background: $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: $theme-aside-item-background-color-hover;
i {
color: $theme-aside-item-color-hover;
}
.el-submenu__icon-arrow {
color: $theme-aside-item-color-hover;
}
}
}
}
}
.el-main {
// 主体部分分为多页面控制器 和主体
.d2-layout-main-header {
// 多页面控制器
.d2-multiple-page-control {
.el-tabs__header.is-top {
border-bottom-color: $theme-multiple-page-control-border-color;
}
.el-tabs__nav {
border-color: $theme-multiple-page-control-border-color;
.el-tabs__item {
color: $theme-multiple-page-control-color;
background-color: $theme-multiple-page-control-background-color;
border-left-color: $theme-multiple-page-control-border-color;
&:first-child {
border-left: none;
}
}
.el-tabs__item.is-active {
color: $theme-multiple-page-control-color-active;
background-color: $theme-multiple-page-control-background-color-active;
border-bottom-color: $theme-multiple-page-control-border-color-active;
}
}
%el-tabs__nav {
font-size: 20px;
}
.el-tabs__nav-prev {
@extend %el-tabs__nav;
color: $theme-multiple-page-control-nav-prev-color;
}
.el-tabs__nav-next {
@extend %el-tabs__nav;
color: $theme-multiple-page-control-nav-next-color;
}
}
}
// 主体
.d2-layout-main-body {
// 布局组件
.container-component {
// [组件] d2-container-full
.d2-container-full {
border: $theme-container-border-outer;
border-top: none;
border-bottom: none;
.d2-container-full__header {
border-bottom: $theme-container-border-inner;
background: $theme-container-header-footer-background-color;
}
.d2-container-full__body {
background: $theme-container-background-color;
}
.d2-container-full__footer {
border-top: $theme-container-border-inner;
background: $theme-container-header-footer-background-color;
}
}
// [组件] d2-container-card
.d2-container-card {
border: $theme-container-border-outer;
border-top: none;
background: transparent;
.el-card__header {
border-bottom: $theme-container-border-inner;
background: $theme-container-header-footer-background-color;
}
.el-card__body {
background: $theme-container-background-color;
}
}
}
}
}
}
}

1
src/assets/style/theme/theme.scss.REMOVED.git-id
View File

@@ -1 +0,0 @@
bb297fb7228fc3fc2f78d50a734fc279a0d04e7e