cli3改版基本完成
Former-commit-id: 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly fc66dcb2e437ff46b2c36ec1e3bcce71a6461250 [formerly b6451dc60d4c1e6006a9fcd380656d2023436e64]]]]] Former-commit-id: c791410cda91e2df1b9808bfb032f0d3d68106ef Former-commit-id: 0c5197800cfae6f27f7ab792c887fb25a73a23e0 Former-commit-id: 208a8e77c0fada6e9d191a7d495615ec2ef9704d [formerly af8c1367ed65b626196ac156c8521257cc804d60] Former-commit-id: 1fdb571cea6ed9dba9ea02f4ba6ebfb5d89e1b2f Former-commit-id: 774a145ae0694612edf988d9992ef797ddf4f21d Former-commit-id: 03fc24d70365836d60360aa24e24dc7cb4520b91 Former-commit-id: bba4fd5552fa42da029fd6b310f5ee48558d5508 Former-commit-id: 2de81d34fb07248965677e8a3866c13089fa95e7
This commit is contained in:
liyang
316
src/assets/style/theme/theme-base.scss
Normal file
316
src/assets/style/theme/theme-base.scss
Normal file
@@ -0,0 +1,316 @@
|
||||
// 整体框架结构
|
||||
.d2-layout-main-group {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// 背景上面的半透明遮罩
|
||||
.d2-layout-main-mask {
|
||||
@extend %full;
|
||||
}
|
||||
// 内容层
|
||||
.d2-layout-main-content {
|
||||
@extend %full;
|
||||
$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 {
|
||||
@extend %full;
|
||||
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 {
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-ms-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
filter: gray;
|
||||
}
|
||||
// 主体
|
||||
.d2-layout-main-content {
|
||||
// [布局] 顶栏
|
||||
.d2-theme-header {
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// [布局] 顶栏下面
|
||||
.d2-theme-container {
|
||||
// 侧边栏
|
||||
.d2-theme-container-aside {
|
||||
// [菜单] 正常状态
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 菜单为空的时候显示的信息
|
||||
.d2-layout-main-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 右下 主体
|
||||
.d2-theme-container-main {
|
||||
// 主体部分分为多页面控制器 和主体
|
||||
.d2-theme-container-main-header {
|
||||
// 多页面控制器
|
||||
.d2-multiple-page-control-group {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
.d2-multiple-page-control-content {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
.d2-multiple-page-control-content-inner {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
.d2-multiple-page-control {
|
||||
.el-tabs__header.is-top {
|
||||
margin: 0px;
|
||||
}
|
||||
.el-tabs__nav {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.d2-multiple-page-control-btn {
|
||||
position: relative;
|
||||
bottom: -1px;
|
||||
.el-dropdown {
|
||||
.el-button-group {
|
||||
.el-button:first-child {
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
.el-button:last-child {
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 主体
|
||||
.d2-theme-container-main-body {
|
||||
// 布局组件
|
||||
.container-component {
|
||||
@extend %full;
|
||||
overflow: hidden;
|
||||
// 填充式布局组件
|
||||
.d2-container-full {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.d2-container-full__header {
|
||||
padding: 20px;
|
||||
}
|
||||
.d2-container-full__body {
|
||||
flex-grow: 1;
|
||||
padding: 20px 20px;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
.d2-container-full__footer {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
// 填充式布局组件 - 滚动优化
|
||||
.d2-container-full-bs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.d2-container-full-bs__header {
|
||||
padding: 20px;
|
||||
}
|
||||
.d2-container-full-bs__body {
|
||||
flex-grow: 1;
|
||||
padding: 0px 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.d2-container-full-bs__footer {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
// 卡片布局组件
|
||||
.d2-container-card {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
// 隐形布局组件
|
||||
.d2-container-ghost {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
.d2-container-ghost-header {
|
||||
border-top: none;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user