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: 13af02b4d4c4033582b2762f14fbe8802ec5fc02 [formerly 13af02b4d4c4033582b2762f14fbe8802ec5fc02 [formerly 13af02b4d4c4033582b2762f14fbe8802ec5fc02 [formerly 13af02b4d4c4033582b2762f14fbe8802ec5fc02 [formerly b9712ed794d1db939f9b2bdbb67c8a69d71f89a8 [formerly b6115665f5243c3103684226e0bde661d55597f7]]]]]
Former-commit-id: e3cc9b0aad9cacee0133f5f4c85d43cde717cc9c
Former-commit-id: 63d819826ff2aeb0ca7a811f8b7ddfbe2df048d1
Former-commit-id: 7ebe1bb886125ee3de1c15cd5cbf14c392480af8 [formerly 8df52d9a84afa8e50895c9611ab439b58bfa1d90]
Former-commit-id: ccf6ecbd64a1a2fd5283effabd054bcebc799b6d
Former-commit-id: afde6581b46898bbb98e299ebd7194dc0577f934
Former-commit-id: 8278de89c188805da05d81e10c7aba77bb64c336
Former-commit-id: 89a57f2fae80b360ab76a9d3f2bc99540adaf519
Former-commit-id: 03bf8adadfa169fee5cb039818e415ceb92fd787
This commit is contained in:
liyang
2018-07-03 09:48:23 +08:00
parent 8edc35e4dc
commit 17b0294951
5 changed files with 98 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
design/d2-layout-main-group.xmind.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
f6ee530a7841eb687cae7821453739533292ddd6

120
src/assets/style/theme/theme-base.scss
View File

@@ -1,3 +1,82 @@
// 整体框架结构
.d2-layout-main-group {
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
// 背景上面的半透明遮罩
.d2-layout-main-mask {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
// 内容层
.d2-layout-main-content {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
$d2-theme-header-height: 60px;
.d2-theme-header {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: $d2-theme-header-height;
}
.d2-theme-container {
position: absolute;
top: $d2-theme-header-height;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
flex-direction: row;
.d2-theme-container-aside {
transition: width .3s;
flex-grow: 0;
position: relative;
.d2-layout-main-menu-side {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
}
}
.d2-theme-container-main {
flex-grow: 1;
padding: 0px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
.d2-theme-container-main-header {
flex-grow: 0;
}
.d2-theme-container-main-body {
flex-grow: 1;
margin-top: 1px;
position: relative;
}
}
}
}
}
// 主题公用
.d2-layout-main-group {
&.grayMode {
@@ -8,30 +87,10 @@
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;
}
// 主体
.el-container.d2-layout-main-content {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
.d2-layout-main-content {
// [布局] 顶栏
.el-header.d2-theme-header {
padding: 0px;
.d2-theme-header {
// logo区域
.logo-group {
transition: width .3s;
@@ -96,11 +155,9 @@
}
}
// [布局] 顶栏下面
.el-container.d2-theme-container {
.d2-theme-container {
// 侧边栏
.el-aside.d2-theme-container-aside {
transition: width .3s;
overflow: auto;
.d2-theme-container-aside {
// [菜单] 正常状态
.el-menu {
@extend %unable-select;
@@ -155,15 +212,9 @@
}
}
// 右下 主体
.el-main.d2-theme-container-main {
padding: 0px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
.d2-theme-container-main {
// 主体部分分为多页面控制器 和主体
.d2-theme-container-main-header {
flex-grow: 0;
// 多页面控制器
.d2-multiple-page-control-group {
display: flex;
@@ -203,9 +254,6 @@
}
// 主体
.d2-theme-container-main-body {
flex-grow: 1;
margin-top: 1px;
position: relative;
// 布局组件
.container-component {
// 卡片布局组件

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

@@ -115,9 +115,9 @@
}
}
// [布局] 顶栏下面
.el-container.d2-theme-container {
.d2-theme-container {
// 侧边栏
.el-aside.d2-theme-container-aside {
.d2-theme-container-aside {
// 菜单为空的时候显示的信息
.menu-empty {
background: $theme-aside-menu-empty-background-color;
@@ -191,7 +191,7 @@
}
}
}
.el-main.d2-theme-container-main {
.d2-theme-container-main {
// 主体部分分为多页面控制器 和主体
.d2-theme-container-main-header {
// 多页面控制器

9
src/components/core/d2-layout-main/components/-menu-side/index.vue
View File

@@ -78,12 +78,3 @@ export default {
}
}
</script>
<style lang="scss">
// TODO: 兼容火狐浏览器需要改这里
.d2-layout-main-menu-side {
position: relative;
height: 100%;
overflow: hidden;
}
</style>

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

@@ -6,9 +6,9 @@
<!-- 半透明遮罩 -->
<div class="d2-layout-main-mask"></div>
<!-- 主体内容 -->
<el-container class="d2-layout-main-content">
<div class="d2-layout-main-content">
<!-- 顶栏 -->
<el-header class="d2-theme-header">
<div class="d2-theme-header">
<div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<img v-if="collapse" :src="`${$assetsPublicPath}static/image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
<img v-else :src="`${$assetsPublicPath}static/image/theme/${themeActiveSetting.name}/logo/all.png`">
@@ -25,15 +25,15 @@
<d2-layout-main-header-theme/>
<d2-layout-main-header-user/>
</div>
</el-header>
</div>
<!-- 下面 主体 -->
<el-container class="d2-theme-container">
<div class="d2-theme-container">
<!-- 主体 侧边栏 -->
<el-aside ref="aside" class="d2-theme-container-aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<div ref="aside" class="d2-theme-container-aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<d2-layout-main-menu-side :collapse="collapse"/>
</el-aside>
</div>
<!-- 主体 -->
<el-main class="d2-theme-container-main">
<div class="d2-theme-container-main">
<div class="d2-theme-container-main-header">
<d2-multiple-page-control/>
</div>
@@ -47,9 +47,9 @@
<router-view v-if="!alive"/>
</transition>
</div>
</el-main>
</el-container>
</el-container>
</div>
</div>
</div>
</div>
</template>