From de03cda45e8c890fb7da409c757ef50638bbc59c Mon Sep 17 00:00:00 2001 From: lyt-Top <1105290566@qq.com> Date: Sun, 10 Jan 2021 23:59:43 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.01.11:=E6=96=B0=E5=A2=9E=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E9=85=8D=E7=BD=AE=E5=B8=83=E5=B1=80=E5=88=87=E6=8D=A2?= =?UTF-8?q?'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue-admin-wonderful-next/src/store/index.ts | 5 +- vue-admin-wonderful-next/src/theme/app.scss | 14 +- .../src/theme/common/var.scss | 4 + .../src/theme/element.scss | 7 + .../src/utils/themeConfig.ts | 5 +- .../src/views/layout/component/aside.vue | 53 ++++++- .../views/layout/component/columnsAside.vue | 131 ++++++++++++++++++ .../src/views/layout/component/header.vue | 11 +- .../src/views/layout/component/main.vue | 9 +- .../src/views/layout/index.vue | 45 +++++- .../src/views/layout/logo/index.vue | 39 +++++- .../src/views/layout/main/classic.vue | 23 +++ .../src/views/layout/main/columns.vue | 37 +++++ .../src/views/layout/{ => main}/defaults.vue | 22 +-- .../src/views/layout/main/transverse.vue | 17 +++ .../layout/navBars/breadcrumb/breadcrumb.vue | 5 +- .../views/layout/navBars/breadcrumb/index.vue | 71 +++++++++- .../layout/navBars/breadcrumb/setings.vue | 102 ++++++++++++-- .../views/layout/navBars/breadcrumb/user.vue | 3 + .../src/views/layout/navBars/index.vue | 14 +- .../layout/navBars/tagsView/tagsView.vue | 6 +- .../src/views/layout/navMenu/horizontal.vue | 60 ++++++++ 22 files changed, 621 insertions(+), 62 deletions(-) create mode 100644 vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue create mode 100644 vue-admin-wonderful-next/src/views/layout/main/classic.vue create mode 100644 vue-admin-wonderful-next/src/views/layout/main/columns.vue rename vue-admin-wonderful-next/src/views/layout/{ => main}/defaults.vue (53%) create mode 100644 vue-admin-wonderful-next/src/views/layout/main/transverse.vue create mode 100644 vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts index 7d0b1b8..1dd83f5 100644 --- a/vue-admin-wonderful-next/src/store/index.ts +++ b/vue-admin-wonderful-next/src/store/index.ts @@ -11,8 +11,10 @@ export interface RootStateTypes { danger: string, topBar: string, menuBar: string, + columnsMenuBar: string, topBarColor: string, menuBarColor: string, + columnsMenuBarColor: string, isTopBarColorGradual: boolean, isMenuBarColorGradual: boolean, isMenuBarColorHighlight: boolean, @@ -32,7 +34,8 @@ export interface RootStateTypes { isWartermark: boolean, wartermarkText: string, tagsStyle: string, - animation: string + animation: string, + layout: string } } diff --git a/vue-admin-wonderful-next/src/theme/app.scss b/vue-admin-wonderful-next/src/theme/app.scss index cb19b88..cdb9c3a 100644 --- a/vue-admin-wonderful-next/src/theme/app.scss +++ b/vue-admin-wonderful-next/src/theme/app.scss @@ -45,22 +45,34 @@ body, } .el-main { padding: 0 !important; + overflow: hidden; } .el-scrollbar { width: 100%; } + .layout-el-aside-br-color { + border-top: 1px solid rgb(238, 238, 238); + border-right: 1px solid rgb(238, 238, 238); + } .layout-aside-width-default { - width: 240px !important; + width: 220px !important; transition: width 0.3s ease; } .layout-aside-width64 { width: 64px !important; transition: width 0.3s ease; } + .layout-aside-width1 { + width: 1px !important; + transition: width 0.3s ease; + } .layout-scrollbar { @extend .el-scrollbar; padding: 15px; } + .layout-mian-height-50 { + height: calc(100vh - 50px); + } } /* element plus 全局样式 diff --git a/vue-admin-wonderful-next/src/theme/common/var.scss b/vue-admin-wonderful-next/src/theme/common/var.scss index d44ba2d..6fbdcfc 100644 --- a/vue-admin-wonderful-next/src/theme/common/var.scss +++ b/vue-admin-wonderful-next/src/theme/common/var.scss @@ -60,8 +60,10 @@ $--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default; $--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default; $--bg-topBar: #ffffff; $--bg-menuBar: #29384d; +$--bg-columnsMenuBar: #6bb4ff; $--bg-topBarColor: #606266; $--bg-menuBarColor: #e6e6e6; +$--bg-columnsMenuBarColor: #e6e6e6; /* 赋值给:root ------------------------------- */ @@ -120,6 +122,8 @@ $--bg-menuBarColor: #e6e6e6; --color-danger-light-9: #{$--color-danger-light-9}; --bg-topBar: #{$--bg-topBar}; --bg-menuBar: #{$--bg-menuBar}; + --bg-columnsMenuBar: #{$--bg-columnsMenuBar}; --bg-topBarColor: #{$--bg-topBarColor}; --bg-menuBarColor: #{$--bg-menuBarColor}; + --bg-columnsMenuBarColor: #{$--bg-columnsMenuBarColor}; } diff --git a/vue-admin-wonderful-next/src/theme/element.scss b/vue-admin-wonderful-next/src/theme/element.scss index b8ff7d9..b2f51fa 100644 --- a/vue-admin-wonderful-next/src/theme/element.scss +++ b/vue-admin-wonderful-next/src/theme/element.scss @@ -717,6 +717,13 @@ .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title { color: set-color(primary); } +.el-menu.el-menu--horizontal { + border-bottom: none !important; +} +.el-menu--horizontal > .el-menu-item, +.el-menu--horizontal > .el-submenu .el-submenu__title { + color: var(--bg-menuBarColor); +} // 外部链接时 .el-menu-item a, .el-menu-item a:hover, diff --git a/vue-admin-wonderful-next/src/utils/themeConfig.ts b/vue-admin-wonderful-next/src/utils/themeConfig.ts index c0def4d..78a1d40 100644 --- a/vue-admin-wonderful-next/src/utils/themeConfig.ts +++ b/vue-admin-wonderful-next/src/utils/themeConfig.ts @@ -8,8 +8,10 @@ export default { danger: "#f56c6c", topBar: "#ffffff", menuBar: "#29384d", + columnsMenuBar: '#6BB4FF', topBarColor: "#606266", menuBarColor: "#e6e6e6", + columnsMenuBarColor: '#e6e6e6', isTopBarColorGradual: false, isMenuBarColorGradual: false, isMenuBarColorHighlight: false, @@ -29,5 +31,6 @@ export default { isWartermark: false, wartermarkText: 'small@小柒', tagsStyle: 'tagsStyleOne', - animation: 'slideRight' + animation: 'slideRight', + layout: 'defaults' } \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/component/aside.vue b/vue-admin-wonderful-next/src/views/layout/component/aside.vue index 9418fbb..af9b1b9 100644 --- a/vue-admin-wonderful-next/src/views/layout/component/aside.vue +++ b/vue-admin-wonderful-next/src/views/layout/component/aside.vue @@ -1,6 +1,6 @@ + + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/component/header.vue b/vue-admin-wonderful-next/src/views/layout/component/header.vue index 7c8956d..e4a40a0 100644 --- a/vue-admin-wonderful-next/src/views/layout/component/header.vue +++ b/vue-admin-wonderful-next/src/views/layout/component/header.vue @@ -1,5 +1,5 @@ @@ -13,11 +13,14 @@ export default { components: { NavBarsIndex }, setup() { const store = useStore(); - const getThemeConfig = computed(() => { - return store.state.themeConfig; + // 设置 header 的高度 + const setHeaderHeight = computed(() => { + let { isTagsview, layout } = store.state.themeConfig; + if (isTagsview && layout !== "classic") return "84px"; + else return "50px"; }); return { - getThemeConfig, + setHeaderHeight, }; }, }; diff --git a/vue-admin-wonderful-next/src/views/layout/component/main.vue b/vue-admin-wonderful-next/src/views/layout/component/main.vue index 2cc46b5..0be83c9 100644 --- a/vue-admin-wonderful-next/src/views/layout/component/main.vue +++ b/vue-admin-wonderful-next/src/views/layout/component/main.vue @@ -1,7 +1,7 @@ \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue index d332855..e14799f 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue @@ -1,8 +1,8 @@