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

Merge pull request #15 from FairyEver/dev

Browse Source 
add a mask to the background image

Former-commit-id: 1292938f74c6efe6fcb1dcf0ba34ccde1e98bbcf [formerly faa0a404eebf3f71d95b5b118273cf6e0ad9b031] [formerly 1292938f74c6efe6fcb1dcf0ba34ccde1e98bbcf [formerly faa0a404eebf3f71d95b5b118273cf6e0ad9b031] [formerly 1292938f74c6efe6fcb1dcf0ba34ccde1e98bbcf [formerly faa0a404eebf3f71d95b5b118273cf6e0ad9b031] [formerly faa0a404eebf3f71d95b5b118273cf6e0ad9b031 [formerly 006bbdc66a1e215a19d41fb6592007a50ba219d8 [formerly 1d6120a961c30e4c67ccd90a4a149433e1a68546]]]]]
Former-commit-id: cd8b7913c71afc6a1c9ec00e924e876617afbc01
Former-commit-id: c087de348e1376a55df758ac4091c6caab894130
Former-commit-id: f4d3e647fc333b892c2986a5c26cd1f44144eaba [formerly 0863cac50508186777da5e18d8bc0e0a2ad52a1f]
Former-commit-id: 9e5b62dbc22efc125fd36cab51501236cd6230aa
Former-commit-id: 13329d53ba168aa6ca3c3b0e430b491e218bd697
Former-commit-id: b4cd818e2565885f5bd99699ba51d4059faa7281
Former-commit-id: d6c6660ab514fffc98db9023c7f8c738ebf6aeff
Former-commit-id: 36e9d86a733c2264845251394860d96e20332072
This commit is contained in:
李杨
2018-06-15 22:53:51 +08:00
committed by GitHub
parent d672fb84bc f9f3ca8991
commit 9c53bb82df
9 changed files with 44 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/.vuepress/config.js
View File

@@ -87,8 +87,7 @@ function sideBarComponents (title) {
'icon-select',
'icon-svg',
'icon',
'markdown',
'locally-valid'
'markdown'
]
}
]

19
docs/zh/components/locally-valid.md
View File

@@ -1,19 +0,0 @@
# 局部组件
局部组件是指在某个组件内注册的组件，它一般只在一个地方用到，全局无法访问
## D2MenuItem
::: tip 出现位置
src/components/core/MainLayout/components/SideMenu/index.vue
:::
该组件会根据数据渲染 `<el-menu-item>`
## D2Submenu
::: tip 出现位置
src/components/core/MainLayout/components/SideMenu/index.vue
:::
该组件会根据数据渲染 `<el-submenu>` 结构，并且在 `<el-submenu>` 中再次根据数据类型递归自身，最终生成 elementUI 的菜单组件结构，支持嵌套多级

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

@@ -4,6 +4,8 @@ $theme-name: 'd2';
$theme-bg-color: #f8f8f9;
// 主题背景图片
$theme-bg-image: none;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// container组件
$theme-container-background-color: rgba(#FFF, 1);

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

@@ -4,6 +4,8 @@ $theme-name: 'line';
$theme-bg-color: #f8f8f9;
// 主题背景图片
$theme-bg-image: url('/static/image/bg/line-squashed.jpg');
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// container组件
$theme-container-background-color: rgba(#FFF, .8);

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

@@ -4,6 +4,8 @@ $theme-name: 'star';
$theme-bg-color: #EFF4F8;
// 主题背景图片
$theme-bg-image: url('/static/image/bg/star-squashed.jpg');
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, .3);
// container组件
$theme-container-background-color: rgba(#FFF, .9);

373
src/assets/style/theme/theme.scss
View File

@@ -1,373 +0,0 @@
// 主题公用
.layout-main {
height: 100vh;
width: 100vw;
background-size: cover;
background-position: center;
position: relative;
// [布局] 顶栏
.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;
.el-menu-item {
@extend %unable-select;
border-bottom: none;
}
.el-submenu {
@extend %unable-select;
.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-right: 5px;
font-size: 20px;
}
}
}
.el-submenu {
@extend %unable-select;
.el-submenu__title {
i {
margin-right: 5px;
font-size: 20px;
}
.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;
}
}
// [组件] d2-container-full
.d2-container-full {
position: absolute;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
color: #303133;
&:hover {
box-shadow: none;
}
.d2-container-full__header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding: 18px 20px;
box-sizing: border-box;
}
.d2-container-full__body {
position: absolute;
padding: 20px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
}
.d2-container-full__footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
padding: 18px 20px;
box-sizing: border-box;
}
}
}
// 每个主题特有的设置
.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 {
@extend %unable-select;
}
.el-menu-item {
@extend %unable-select;
}
.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
src/assets/style/theme/theme.scss.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
76b231c8f2b45f72c095f47ab055fbebb41ff160

2
src/assets/style/theme/tomorrow-night-blue/setting.scss
View File

@@ -4,6 +4,8 @@ $theme-name: 'tomorrow-night-blue';
$theme-bg-color: #002147;
// 主题背景图片
$theme-bg-image: none;
// 主题背景图片遮罩
$theme-bg-mask: rgba(#000, 0);
// container组件
$theme-container-background-color: #FFF;

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

@@ -1,36 +1,39 @@
<template>
<el-container class="layout-main">
<!-- 顶栏 -->
<el-header>
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<img v-if="collapse" :src="`/static/image/theme/${themeName}/logo/icon-only.png`">
<img v-else :src="`/static/image/theme/${themeName}/logo/all.png`">
</div>
<div class="toggle-aside-btn" @click="collapse = !collapse">
<d2-icon name="bars"/>
</div>
<d2-layout-main-header-menu/>
<!-- 顶栏右侧 -->
<div class="d2-header-right">
<d2-layout-main-header-full-screen/>
<d2-layout-main-header-theme/>
<d2-layout-main-header-user/>
</div>
</el-header>
<!-- 下面 主体 -->
<el-container>
<!-- 主体 侧边栏 -->
<el-aside ref="aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<d2-layout-main-menu-side :collapse="collapse"/>
</el-aside>
<!-- 主体 -->
<el-main>
<transition name="fade-transverse">
<router-view/>
</transition>
</el-main>
<div class="layout-main-group">
<div class="layout-main-mask"></div>
<el-container class="layout-main">
<!-- 顶栏 -->
<el-header>
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<img v-if="collapse" :src="`/static/image/theme/${themeName}/logo/icon-only.png`">
<img v-else :src="`/static/image/theme/${themeName}/logo/all.png`">
</div>
<div class="toggle-aside-btn" @click="collapse = !collapse">
<d2-icon name="bars"/>
</div>
<d2-layout-main-header-menu/>
<!-- 顶栏右侧 -->
<div class="d2-header-right">
<d2-layout-main-header-full-screen/>
<d2-layout-main-header-theme/>
<d2-layout-main-header-user/>
</div>
</el-header>
<!-- 下面 主体 -->
<el-container>
<!-- 主体 侧边栏 -->
<el-aside ref="aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<d2-layout-main-menu-side :collapse="collapse"/>
</el-aside>
<!-- 主体 -->
<el-main>
<transition name="fade-transverse">
<router-view/>
</transition>
</el-main>
</el-container>
</el-container>
</el-container>
</div>
</template>
<script>