关于修改 vue Element admin、若依， 等后台管理系统模板的一些全局样式问题：

关于修改 vue Element admin、若依， 等后台管理系统模板的一些全局样式问题：

1、修改左侧菜单和顶部（菜单）的背景色、把背景色改为炫酷的背景图。

1）上传图片 src/assets/images/menu-icon.png、 src/assets/images/navbar-bg.png
2）src/assets/styles/sidebar.scss（background-color: $base-menu-background;） 修改颜色属性，将background-color改为background
3）src/assets/styles/variables.module.scss  引入背景图，并将原背景图的值去掉

background: url('../../assets/images/navbar-bg.png') no-repeat 100% 100%;
background-size: cover;

4）src/layout/components/Sidebar/Logo.vue  这个里面的行内动态样式也要改一下属性
:style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> 改为：
:style="{ background: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">

2、修改子菜单鼠标移入背景

1）src/assets/styles/variables.module.scss  将原属性值设为none（$base-sub-menu-hover: none;）
2）src/assets/styles/sidebar.scss  直接在全局为其添加新的背景图样式，
.el-menu {
    border: none;
    height: 100%;
    width: 100% !important;
    a:hover{
      background: url(../images/hover-menu-bg.png) no-repeat 100% 100%;
      background-size: cover;
    }
  }
  3）src/layout/components/Sidebar/index.vue  进入菜单组件 修改行内属性:
  :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> 改为：
  :style="{ background: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,backgroundSize:'cover' }">
  由于背景色改为了深色，所以激活后的字体颜色要改为浅色 :active-text-color="theme" 改为：:active-text-color="'#fff'"

3、修改分页器背景色

 src/components/Pagination/index.vue 

 :deep(.is-background .el-pager li){
    background-color: #031e40;
    color: #fff;
    box-shadow: 0px 0px 0px 1px #0680cb;
   }
    :deep(.is-background .btn-prev){
    background-color: #031e40 !important;
    color: #fff;
    box-shadow: 0px 0px 0px 1px #0680cb;
   }
     :deep(.is-background .btn-next){
    background-color: #031e40 !important;
    color: #fff;
    box-shadow: 0px 0px 0px 1px #0680cb;
   }