1.优化浅色侧边栏bug

loulijun2021

2023-01-03 82a759b4c1dc81b0c78e13af19091c5a5012dd84

 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;