no message
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
199
src/assets/style/theme/theme-base.scss
Normal file
199
src/assets/style/theme/theme-base.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user