1.优化浅色侧边栏bug

loulijun2021

2023-01-03 82a759b4c1dc81b0c78e13af19091c5a5012dd84

 src/layout/index.vue

@@ -1,8 +1,33 @@
<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">

    <!--    <sidebar-->
    <!--      :class="$store.state.settings.menuIsHorizontal?-->
    <!--        'sidebar-container-sideBarWidthIsMenuHorizontal':-->
    <!--        !$store.state.settings.leftBackgroundColorValue&&sidebar.opened?-->
    <!--          'sidebar-container-leftBackgroundColorValue':-->
    <!--          'sidebar-container'"-->
    <!--    />-->

    <!--1.当为横向菜单时-->
    <sidebar
      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" />
@@ -68,11 +93,19 @@
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

//@import "~@/styles/element-variables.scss";

.sidebarContainer {
  background-color: #f8f8fa !important;
}

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  //color: #{$--color-primary};
  //background: #{$--color-primary};

  &.mobile.openSidebar {
    position: fixed;