diff --git a/src/assets/style/theme/theme-base.scss b/src/assets/style/theme/theme-base.scss index 95ec8d2c..cf8423eb 100644 --- a/src/assets/style/theme/theme-base.scss +++ b/src/assets/style/theme/theme-base.scss @@ -165,19 +165,46 @@ .d2-theme-container-main-header { flex-grow: 0; // 多页面控制器 - .d2-multiple-page-control { - .el-tabs__header.is-top { - margin: 0px; - margin-right: 20px; + .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; + } + } + } } - .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 { flex-grow: 1; + margin-top: 1px; position: relative; // 布局组件 .container-component { diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss index b147ab7e..0ae8ba93 100644 --- a/src/assets/style/theme/theme.scss +++ b/src/assets/style/theme/theme.scss @@ -234,6 +234,16 @@ color: $theme-multiple-page-control-nav-next-color; } } + // 多页控制器的关闭控制 + .d2-multiple-page-control-btn { + .el-dropdown { + .el-button-group { + .el-button { + border-color: $theme-multiple-page-control-border-color; + } + } + } + } } // 主体 .d2-theme-container-main-body { diff --git a/src/components/core/d2-multiple-page-control/index.vue b/src/components/core/d2-multiple-page-control/index.vue index 86dbabee..7b32c9f7 100644 --- a/src/components/core/d2-multiple-page-control/index.vue +++ b/src/components/core/d2-multiple-page-control/index.vue @@ -1,18 +1,34 @@ - - - - + + + + + + + + + + + + + + 关闭左侧 + 关闭右侧 + 全部关闭 + + + +