no message
Former-commit-id: af2fac8d32b8c8e1d9fbbedd6a86e20b76a59e7a [formerly af2fac8d32b8c8e1d9fbbedd6a86e20b76a59e7a [formerly af2fac8d32b8c8e1d9fbbedd6a86e20b76a59e7a [formerly af2fac8d32b8c8e1d9fbbedd6a86e20b76a59e7a [formerly 8190b68931a7ee45c0aad51d088b55bdbba0616c [formerly e9f465000bb8191da0802fb14745255ecd0f23f3]]]]] Former-commit-id: e419e25b82c6491c5eef85a3092fced9a23a218c Former-commit-id: 825c3e2fcc08e9a7ccf7c020479d35d743c5feba Former-commit-id: f2ed57e49c0eb684c2c87c934c4dc4186b40cf62 [formerly 8850b09180cded84d562004ce7ad55cb82aa63d2] Former-commit-id: 85ef46ff4656cec63beb187e3d0f7139e9da444f Former-commit-id: 87c5106346238ed013c34775ebab904504b105db Former-commit-id: f2ef9a94282af2446fabc4476573e89cab847850 Former-commit-id: 34fbb4bdef4a0b5a127be823b0f4e1400f86d6db Former-commit-id: f405dfcecf2056781edf17e90b51fb1a37be16fb
This commit is contained in:
liyang
@@ -1,377 +0,0 @@
|
|||||||
// 主题公用
|
|
||||||
.layout-main-group {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 每个主题特有的设置
|
|
||||||
|
|
||||||
.theme-#{$theme-name} {
|
|
||||||
|
|
||||||
// 背景图片和遮罩
|
|
||||||
.layout-main-group {
|
|
||||||
background-color: $theme-bg-color;
|
|
||||||
.layout-main-mask {
|
|
||||||
background-color: $theme-bg-mask;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 菜单项目
|
|
||||||
@mixin theme-menu-hover-style {
|
|
||||||
color: $theme-menu-item-color-hover;
|
|
||||||
i.fa {
|
|
||||||
color: $theme-menu-item-color-hover;
|
|
||||||
}
|
|
||||||
background-color: $theme-menu-item-background-color-hover;
|
|
||||||
}
|
|
||||||
.el-submenu__title {
|
|
||||||
@extend %unable-select;
|
|
||||||
i.fa { margin-right: 5px; }
|
|
||||||
}
|
|
||||||
.el-menu-item {
|
|
||||||
@extend %unable-select;
|
|
||||||
i.fa { margin-right: 5px; }
|
|
||||||
}
|
|
||||||
.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-container-full
|
|
||||||
.d2-container-full {
|
|
||||||
border: $theme-container-border-outer;
|
|
||||||
border-bottom: none;
|
|
||||||
background-color: $theme-container-background-color;
|
|
||||||
.d2-container-full__header {
|
|
||||||
border-bottom: $theme-container-border-inner;
|
|
||||||
background-color: $theme-container-header-footer-background-color;
|
|
||||||
}
|
|
||||||
.d2-container-full__footer {
|
|
||||||
border-top: $theme-container-border-inner;
|
|
||||||
background-color: $theme-container-header-footer-background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// [组件] d2-container-card
|
|
||||||
.d2-container-card {
|
|
||||||
border: $theme-container-border-outer;
|
|
||||||
background-color: $theme-container-background-color;
|
|
||||||
.el-card__header {
|
|
||||||
border-bottom: $theme-container-border-inner;
|
|
||||||
background-color: $theme-container-header-footer-background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 顶栏
|
|
||||||
.el-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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// [布局] 顶栏下面
|
|
||||||
.el-container {
|
|
||||||
// 侧边栏
|
|
||||||
.el-aside {
|
|
||||||
// 菜单为空的时候显示的信息
|
|
||||||
.menu-empty {
|
|
||||||
background-color: $theme-aside-menu-empty-background-color;
|
|
||||||
i {
|
|
||||||
color: $theme-aside-menu-empty-icon-color;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
color: $theme-aside-menu-empty-text-color;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: $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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1
src/assets/style/theme/theme.scss.REMOVED.git-id
Normal file
1
src/assets/style/theme/theme.scss.REMOVED.git-id
Normal file
@@ -0,0 +1 @@
|
|||||||
|
77933b866fa9de6f14818a47bca59e5f3b88a628
|
||||||
@@ -28,9 +28,14 @@
|
|||||||
</el-aside>
|
</el-aside>
|
||||||
<!-- 主体 -->
|
<!-- 主体 -->
|
||||||
<el-main>
|
<el-main>
|
||||||
<transition name="fade-transverse">
|
<div class="d2-layout-main-header">
|
||||||
<router-view/>
|
<d2-multiple-page-control></d2-multiple-page-control>
|
||||||
</transition>
|
</div>
|
||||||
|
<div class="d2-layout-main-body">
|
||||||
|
<transition name="fade-transverse">
|
||||||
|
<router-view/>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-container>
|
</el-container>
|
||||||
|
|||||||
26
src/components/core/d2-multiple-page-control/index.vue
Normal file
26
src/components/core/d2-multiple-page-control/index.vue
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<el-tabs
|
||||||
|
class="d2-multiple-page-control"
|
||||||
|
v-model="activeName2"
|
||||||
|
type="card"
|
||||||
|
@tab-click="handleClick">
|
||||||
|
<el-tab-pane label="用户管理" name="first"></el-tab-pane>
|
||||||
|
<el-tab-pane label="配置管理" name="second"></el-tab-pane>
|
||||||
|
<el-tab-pane label="角色管理" name="third"></el-tab-pane>
|
||||||
|
<el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
activeName2: 'first'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick (tab, event) {
|
||||||
|
console.log(tab, event)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -3,14 +3,15 @@ import Vue from 'vue'
|
|||||||
import { GridLayout, GridItem } from 'vue-grid-layout'
|
import { GridLayout, GridItem } from 'vue-grid-layout'
|
||||||
import SplitPane from 'vue-splitpane'
|
import SplitPane from 'vue-splitpane'
|
||||||
|
|
||||||
// 主容器 这个必须要同步注册
|
|
||||||
import d2Container from '@/components/core/d2-container'
|
import d2Container from '@/components/core/d2-container'
|
||||||
|
import d2MultiplePageControl from '@/components/core/d2-multiple-page-control'
|
||||||
|
|
||||||
Vue.component('d2-grid-layout', GridLayout)
|
Vue.component('d2-grid-layout', GridLayout)
|
||||||
Vue.component('d2-grid-item', GridItem)
|
Vue.component('d2-grid-item', GridItem)
|
||||||
Vue.component('SplitPane', SplitPane)
|
Vue.component('SplitPane', SplitPane)
|
||||||
|
|
||||||
Vue.component('d2-container', d2Container)
|
Vue.component('d2-container', d2Container)
|
||||||
|
Vue.component('d2-multiple-page-control', d2MultiplePageControl)
|
||||||
Vue.component('d2-count-up', () => import('@/components/core/d2-count-up'))
|
Vue.component('d2-count-up', () => import('@/components/core/d2-count-up'))
|
||||||
Vue.component('d2-highlight', () => import('@/components/core/d2-highlight'))
|
Vue.component('d2-highlight', () => import('@/components/core/d2-highlight'))
|
||||||
Vue.component('d2-icon', () => import('@/components/core/d2-icon'))
|
Vue.component('d2-icon', () => import('@/components/core/d2-icon'))
|
||||||
|
|||||||
Reference in New Issue
Block a user