From 82a759b4c1dc81b0c78e13af19091c5a5012dd84 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 03 一月 2023 16:50:12 +0800
Subject: [PATCH] 1.优化浅色侧边栏bug
---
src/layout/components/Navbar.vue | 1
src/layout/index.vue | 41 +++++++++++++++-----
src/settings.js | 2
src/styles/variables.scss | 4 +
src/layout/components/Sidebar/index.vue | 14 ++++--
5 files changed, 44 insertions(+), 18 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 47c2260..27aa23e 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -11,7 +11,6 @@
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
-
<breadcrumb
class="breadcrumb-container"
:style="{marginLeft:$store.state.settings.menuIsHorizontal?'20px':''}"
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 48276e9..cf71e45 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -5,8 +5,8 @@
<div
v-if="$store.state.app.sidebar.opened&&!$store.state.settings.menuIsHorizontal"
- :class="{'leftBackgroundColorValue':$store.state.settings.leftBackgroundColorValue,
- 'leftBackgroundLogo':$store.state.settings.leftBackgroundColorValue}"
+ :class="{'leftBackgroundColorValue':!$store.state.settings.leftBackgroundColorValue,
+ 'leftBackgroundLogo':!$store.state.settings.leftBackgroundColorValue}"
class="layoutLogo"
/>
@@ -15,8 +15,8 @@
v-if="!$store.state.settings.menuIsHorizontal"
:default-active="activeMenu"
:collapse="isCollapse"
- :background-color="$store.state.settings.leftBackgroundColorValue?'#f8f8fa':variables.menuBg"
- :text-color="$store.state.settings.leftBackgroundColorValue?`rgb(48, 65, 86,0.8)`:variables.menuText"
+ :background-color="!$store.state.settings.leftBackgroundColorValue?'#f8f8fa':variables.menuBg"
+ :text-color="!$store.state.settings.leftBackgroundColorValue?`rgb(48, 65, 86,0.8)`:variables.menuText"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
:unique-opened="false"
@@ -89,9 +89,13 @@
return this.$store.state.settings.sidebarLogo
},
variables() {
- // console.log(variables, 2333)
+ console.log(variables, 2333)
// 鍏堣緭鍑鸿繖涓獀ariables鍊� 鐒跺悗淇敼鍏跺睘鎬у��
variables.menuActiveText = this.$store.state.settings.theme
+ console.log(!this.$store.state.settings.menuIsHorizontal && !this.$store.state.settings.leftBackgroundColorValue, 1)
+ if ((!this.$store.state.settings.menuIsHorizontal && !this.$store.state.settings.leftBackgroundColorValue)) {
+ variables.menuHover = '#eee'
+ }
return variables
},
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3add521..ef496af 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,23 +1,40 @@
<template>
<div :class="classObj" class="app-wrapper">
- <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+ <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+
+ <!-- <sidebar-->
+ <!-- :class="$store.state.settings.menuIsHorizontal?-->
+ <!-- 'sidebar-container-sideBarWidthIsMenuHorizontal':-->
+ <!-- !$store.state.settings.leftBackgroundColorValue&&sidebar.opened?-->
+ <!-- 'sidebar-container-leftBackgroundColorValue':-->
+ <!-- 'sidebar-container'"-->
+ <!-- />-->
+
+ <!--1.褰撲负妯悜鑿滃崟鏃�-->
<sidebar
- :class="$store.state.settings.menuIsHorizontal?
- 'sidebar-container-sideBarWidthIsMenuHorizontal':
- $store.state.settings.leftBackgroundColorValue?
- 'sidebar-container-leftBackgroundColorValue':
- 'sidebar-container'"
+ v-if="$store.state.settings.menuIsHorizontal"
+ class="sidebar-container-sideBarWidthIsMenuHorizontal"
+ />
+ <!-- 2.褰撲负绔栧悜鑿滃崟涓斾负娣辫壊鑳屾櫙鑹叉椂-->
+ <sidebar
+ v-else-if="!$store.state.settings.menuIsHorizontal&&$store.state.settings.leftBackgroundColorValue"
+ class="sidebar-container"
+ />
+ <!-- 3.褰撲负绔栧悜鑿滃崟涓斾负娴呰壊鑳屾櫙鑹叉椂-->
+ <sidebar
+ v-else-if="!$store.state.settings.menuIsHorizontal&&!$store.state.settings.leftBackgroundColorValue"
+ :class="sidebar.opened?'sidebar-container-leftBackgroundColorValue':'sidebar-container sidebarContainer'"
/>
<div
:class="$store.state.settings.menuIsHorizontal?'main-container-sideBarWidthIsMenuHorizontal': 'main-container'"
>
<div :class="{'fixed-header':fixedHeader}">
- <navbar/>
- <tags-view v-if="needTagsView"/>
+ <navbar />
+ <tags-view v-if="needTagsView" />
</div>
- <app-main/>
+ <app-main />
<right-panel v-if="showSettings">
- <settings/>
+ <settings />
</right-panel>
</div>
</div>
@@ -78,6 +95,10 @@
//@import "~@/styles/element-variables.scss";
+.sidebarContainer {
+ background-color: #f8f8fa !important;
+}
+
.app-wrapper {
@include clearfix;
position: relative;
diff --git a/src/settings.js b/src/settings.js
index e0797d1..1b3876e 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -30,7 +30,7 @@
menuIsHorizontal: false, // 鑿滃崟鏄惁鏄í灞�
- leftBackgroundColorValue: false, // 宸︿晶鏍忚儗鏅鑹�
+ leftBackgroundColorValue: true, // 宸︿晶鏍忚儗鏅鑹�
animationType: 'fade-transform'// 鍔ㄧ敾绫诲瀷 鍒濆绫诲瀷:fade-transform
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f7dac18..09a59ea 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -4,7 +4,9 @@
$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg: #304156;
-$menuHover: #263445;
+//$menuHover: #263445;
+//$menuHover: rgba(44, 63, 68, 0.75);
+$menuHover: rgba(105, 115, 130, 0.8);
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
--
Gitblit v1.9.3