diff --git a/src/assets/style/theme/theme-base.scss b/src/assets/style/theme/theme-base.scss index ffed0627..86107cdc 100644 --- a/src/assets/style/theme/theme-base.scss +++ b/src/assets/style/theme/theme-base.scss @@ -301,13 +301,24 @@ } // 隐形布局组件 .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; + position: absolute; + top: 0px; + right: 20px; + bottom: 0px; + left: 0px; + display: flex; + flex-direction: column; + overflow: hidden; + .d2-container-ghost__header { + padding: 20px; + } + .d2-container-ghost__body { + flex-grow: 1; + overflow: auto; + position: relative; + } + .d2-container-ghost__footer { + padding: 20px; } } } diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss deleted file mode 100644 index edf3d6d2..00000000 --- a/src/assets/style/theme/theme.scss +++ /dev/null @@ -1,323 +0,0 @@ -// 每个主题特有的设置 -.theme-#{$theme-name} { - - // 背景图片和遮罩 - .d2-layout-header-aside-group { - background-color: $theme-bg-color; - .d2-layout-header-aside-mask { - background: $theme-bg-mask; - } - } - - // 菜单项目 - @mixin theme-menu-hover-style { - color: $theme-menu-item-color-hover; - i.fa { - color: $theme-menu-item-color-hover; - } - background: $theme-menu-item-background-color-hover; - } - %icon { - i.fa { - display: inline-block; - width: 15px; - text-align: center; - margin-right: 5px; - } - } - .el-submenu__title { - @extend %unable-select; - @extend %icon; - } - .el-menu-item { - @extend %unable-select; - @extend %icon; - } - .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-theme-header { - // 切换按钮 - .toggle-aside-btn { - i { - color: $theme-header-item-color; - background: $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: $theme-header-item-background-color; - i.fa { color: inherit; } - &:hover { - color: $theme-header-item-color-hover; - background: $theme-header-item-background-color-hover; - i.fa { color: inherit; } - } - &:focus { - color: $theme-header-item-color-focus; - background: $theme-header-item-background-color-focus; - i.fa { color: inherit; } - } - &.is-active { - color: $theme-header-item-color-active; - background: $theme-header-item-background-color-active; - i.fa { color: inherit; } - } - } - .el-submenu { - .el-submenu__title { - transition: border-top-color 0s; - color: $theme-header-item-color; - background: $theme-header-item-background-color; - i.fa { color: inherit; } - .el-submenu__icon-arrow { - color: $theme-header-item-color; - } - &:hover { - color: $theme-header-item-color-hover; - background: $theme-header-item-background-color-hover; - i.fa { color: inherit; } - .el-submenu__icon-arrow { - color: $theme-header-item-color-hover; - } - } - &:focus { - color: $theme-header-item-color-focus; - background: $theme-header-item-background-color-focus; - i.fa { color: inherit; } - .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: $theme-header-item-background-color-hover; - } - } - } - } - } - // [布局] 顶栏下面 - .d2-theme-container { - // 侧边栏 - .d2-theme-container-aside { - // 菜单为空的时候显示的信息 - .d2-layout-header-aside-menu-empty { - background: $theme-aside-menu-empty-background-color; - i { - color: $theme-aside-menu-empty-icon-color; - } - span { - color: $theme-aside-menu-empty-text-color; - } - &:hover { - background: $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: $theme-aside-item-background-color; - i { - color: $theme-aside-item-color; - } - &:hover { - color: $theme-aside-item-color-hover; - background: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - } - &:focus { - color: $theme-aside-item-color-focus; - background: $theme-aside-item-background-color-focus; - i { - color: $theme-aside-item-color-focus; - } - } - &.is-active { - color: $theme-aside-item-color-active; - background: $theme-aside-item-background-color-active; - i { - color: $theme-aside-item-color-active; - } - } - } - } - .el-submenu { - .el-submenu__title { - color: $theme-aside-item-color; - background: $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: $theme-aside-item-background-color-hover; - i { - color: $theme-aside-item-color-hover; - } - .el-submenu__icon-arrow { - color: $theme-aside-item-color-hover; - } - } - } - } - } - .d2-theme-container-main { - // 主体部分分为多页面控制器 和主体 - .d2-theme-container-main-header { - // 多页面控制器 - .d2-multiple-page-control { - .el-tabs__header.is-top { - border-bottom-color: $theme-multiple-page-control-border-color; - } - .el-tabs__nav { - border-color: $theme-multiple-page-control-border-color; - .el-tabs__item { - @extend %unable-select; - color: $theme-multiple-page-control-color; - background-color: $theme-multiple-page-control-background-color; - border-left-color: $theme-multiple-page-control-border-color; - &:first-child { - border-left: none; - &:hover { - padding: 0px 20px; - } - .el-icon-close { - display: none; - } - } - } - .el-tabs__item.is-active { - color: $theme-multiple-page-control-color-active; - background-color: $theme-multiple-page-control-background-color-active; - border-bottom-color: $theme-multiple-page-control-border-color-active; - } - } - %el-tabs__nav { - font-size: 20px; - } - .el-tabs__nav-prev { - @extend %el-tabs__nav; - color: $theme-multiple-page-control-nav-prev-color; - } - .el-tabs__nav-next { - @extend %el-tabs__nav; - 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 { - // 布局组件 - .container-component { - // [组件] - // d2-container-full 填充型 - .d2-container-full { - border: $theme-container-border-outer; - border-top: none; - border-bottom: none; - .d2-container-full__header { - border-bottom: $theme-container-border-inner; - background: $theme-container-header-footer-background-color; - } - .d2-container-full__body { - background: $theme-container-background-color; - } - .d2-container-full__footer { - border-top: $theme-container-border-inner; - background: $theme-container-header-footer-background-color; - } - } - // [组件] - // d2-container-full-bs 填充型 滚动优化 - .d2-container-full-bs { - border: $theme-container-border-outer; - border-top: none; - border-bottom: none; - .d2-container-full-bs__header { - border-bottom: $theme-container-border-inner; - background: $theme-container-header-footer-background-color; - } - .d2-container-full-bs__body { - background: $theme-container-background-color; - } - .d2-container-full-bs__footer { - border-top: $theme-container-border-inner; - background: $theme-container-header-footer-background-color; - } - } - // [组件] - // d2-container-card 卡片型 - .d2-container-card { - border: $theme-container-border-outer; - border-top: none; - background: transparent; - &>.el-card__header { - border-bottom: $theme-container-border-inner; - background: $theme-container-header-footer-background-color; - } - &>.el-card__body { - background: $theme-container-background-color; - } - } - // 隐形布局组件 - .d2-container-ghost { - .d2-container-ghost-header { - border: $theme-container-border-outer; - &>.el-card__body { - background: $theme-container-header-footer-background-color; - } - } - } - } - } - } - } -} diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id new file mode 100644 index 00000000..1f6c8548 --- /dev/null +++ b/src/assets/style/theme/theme.scss.REMOVED.git-id @@ -0,0 +1 @@ +9007ccbb78f811d506e941aa3ac902e2aca4b106 \ No newline at end of file diff --git a/src/components/core/d2-container/components/d2-container-ghost.vue b/src/components/core/d2-container/components/d2-container-ghost.vue new file mode 100644 index 00000000..64b37bf6 --- /dev/null +++ b/src/components/core/d2-container/components/d2-container-ghost.vue @@ -0,0 +1,13 @@ + diff --git a/src/components/core/d2-container/index.vue b/src/components/core/d2-container/index.vue index 191d4cc1..81029e31 100644 --- a/src/components/core/d2-container/index.vue +++ b/src/components/core/d2-container/index.vue @@ -6,12 +6,11 @@ -
- - - + + -
+ + @@ -33,6 +32,7 @@ import BScroll from 'better-scroll' // 组件 import d2ContainerFull from './components/d2-container-full.vue' import d2ContainerFullBs from './components/d2-container-full-bs.vue' +import d2ContainerGhost from './components/d2-container-ghost.vue' export default { name: 'd2-container', props: { @@ -51,7 +51,8 @@ export default { }, components: { 'd2-container-full': d2ContainerFull, - 'd2-container-full-bs': d2ContainerFullBs + 'd2-container-full-bs': d2ContainerFullBs, + 'd2-container-ghost': d2ContainerGhost }, data () { return { @@ -59,12 +60,12 @@ export default { } }, mounted () { - if (this.type === 'card' || this.type === 'ghost') { + if (this.type === 'card') { this.scrollInit() } }, beforeDestroy () { - if (this.type === 'card' || this.type === 'ghost') { + if (this.type === 'card') { this.scrollDestroy() } }, diff --git a/src/menu/modules/demo-components.js b/src/menu/modules/demo-components.js index b323cc62..e864604b 100644 --- a/src/menu/modules/demo-components.js +++ b/src/menu/modules/demo-components.js @@ -9,11 +9,12 @@ export default { title: '布局容器', icon: 'window-restore', children: [ - { path: `${pre}container/full`, title: '填满' }, - { path: `${pre}container/full-bs`, title: '填满 滚动优化' }, - { path: `${pre}container/card`, title: '卡片' }, + { path: `${pre}container/full`, title: '填充' }, + { path: `${pre}container/full-slot`, title: '填充 插槽' }, + { path: `${pre}container/full-bs`, title: '填充 滚动优化' }, { path: `${pre}container/ghost`, title: '隐形' }, - { path: `${pre}container/ghost-header`, title: '隐形带头部' } + { path: `${pre}container/ghost-slot`, title: '隐形 插槽' }, + { path: `${pre}container/card`, title: '卡片' } ] }, { diff --git a/src/pages/demo/components/container/card.vue b/src/pages/demo/components/container/card.vue index 4e5dcf98..62ea7260 100644 --- a/src/pages/demo/components/container/card.vue +++ b/src/pages/demo/components/container/card.vue @@ -6,7 +6,7 @@ diff --git a/src/pages/demo/components/container/full.vue b/src/pages/demo/components/container/full.vue index 0e1e620b..9753e171 100644 --- a/src/pages/demo/components/container/full.vue +++ b/src/pages/demo/components/container/full.vue @@ -1,17 +1,11 @@ diff --git a/src/pages/demo/components/container/ghost-slot.vue b/src/pages/demo/components/container/ghost-slot.vue new file mode 100644 index 00000000..279ccc2c --- /dev/null +++ b/src/pages/demo/components/container/ghost-slot.vue @@ -0,0 +1,20 @@ + + + diff --git a/src/pages/demo/components/container/ghost.vue b/src/pages/demo/components/container/ghost.vue index 7a19241d..db91bd57 100644 --- a/src/pages/demo/components/container/ghost.vue +++ b/src/pages/demo/components/container/ghost.vue @@ -1,13 +1,13 @@