菜单以及图标修复

1 year ago · 6b15ae13da
parent 9e90b47b90
commit 6b15ae13da
8 changed files with 161 additions and 28 deletions
--- a/src/assets/icons/svg/diy1.svg
+++ b/src/assets/icons/svg/diy1.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+
+</style>
+<path class="st0" d="M7.27,16h2.65H2.58c-1.1,0-1.86-0.9-1.7-2c0,0,0.19-1.11,0.57-3.34C1.62,9.57,2.5,8.67,3.41,8.67h0.47
+	c0.28,0,0.5,0.22,0.5,0.5c0,0.28-0.22,0.5-0.5,0.5H3.83c-0.67,0-1.31,0.65-1.43,1.45c-0.28,1.61-0.42,2.42-0.42,2.43
+	C1.86,14.35,2.41,15,3.21,15h4.06c0.28,0,0.5,0.22,0.5,0.5C7.77,15.78,7.55,16,7.27,16L7.27,16z M7.58,7.65c1.66,0,3-1.47,3-3.27
+	c0-1.82-1.34-3.28-3-3.28c-1.66,0-3,1.47-3,3.28C4.58,6.19,5.92,7.65,7.58,7.65L7.58,7.65z M7.58,8.74c-2.21,0-4-1.96-4-4.36
+	c0-2.42,1.79-4.38,4-4.38c2.21,0,4,1.96,4,4.38C11.57,6.78,9.78,8.74,7.58,8.74L7.58,8.74z M13.88,7.13c0.81,0,1.51,0.58,1.65,1.38
+	l0.19,1.07c0.08,0.48-0.05,0.98-0.37,1.36l-3.18,3.79c-0.59,0.71-1.64,0.8-2.35,0.21l-1.28-1.07c-0.71-0.59-0.8-1.64-0.21-2.35
+	l3.18-3.79c0.32-0.38,0.78-0.59,1.27-0.6L13.88,7.13z M12.8,8.14c-0.2,0-0.38,0.09-0.51,0.24l-3.18,3.79
+	c-0.24,0.28-0.2,0.7,0.08,0.94l1.28,1.07c0.28,0.24,0.7,0.2,0.94-0.08l3.18-3.79c0.13-0.15,0.18-0.35,0.15-0.54l-0.19-1.07
+	c-0.06-0.32-0.33-0.55-0.66-0.55L12.8,8.14z M13.05,10.23c-0.28,0-0.5-0.22-0.5-0.5c0-0.28,0.22-0.5,0.5-0.5
+	c0.28,0,0.5,0.22,0.5,0.5C13.55,10.01,13.33,10.23,13.05,10.23L13.05,10.23z M13.05,10.23"/>
+</svg>
--- a/src/assets/icons/svg/diy2.svg
+++ b/src/assets/icons/svg/diy2.svg
@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+
+</style>
+<g>
+	<path class="st0" d="M14.51,6.19c0-2.68-1.73-4.91-3.96-4.91c-0.62,0-1.21,0.17-1.75,0.5l-0.01,0C7.97,0.69,6.8,0,5.48,0
+		C2.93,0,0.94,2.56,0.94,5.64c0,3.02,1.9,5.53,4.37,5.64c0.42,0.3,0.61,0.61,0.63,0.94l0,0.01l-0.01,0l-0.01,0.01l-0.01,0
+		l-0.01,0.01l-0.01,0l-0.01,0.01l-0.01,0.01l-0.01,0.01l-0.01,0.01l-0.01,0l-0.01,0.01l-0.01,0l-0.01,0L5.79,12.3l-0.02,0.01
+		l-0.02,0.01l-0.02,0.01L5.7,12.34l-0.03,0.01l-0.04,0.01l-0.04,0.01l-0.05,0.02l-0.06,0.02l-0.05,0.02l-0.15,0.05L5.21,12.5
+		l-0.04,0.01l-0.04,0.01L5.1,12.54l-0.04,0.01l-0.03,0.01L5,12.57l-0.03,0.01l-0.02,0.01L4.92,12.6c-0.17,0.07-0.31,0.14-0.44,0.23
+		c-0.39,0.27-0.57,0.69-0.45,1.16c0.12,0.47,0.43,0.88,0.9,1.22c0.36,0.26,0.83,0.48,1.4,0.67l0.05,0.02
+		c0.04,0.01,0.08,0.03,0.12,0.04l0.05,0.01c0.03,0.01,0.07,0.02,0.1,0.03c0.32,0.09,0.66-0.08,0.76-0.39
+		c0.1-0.31-0.08-0.63-0.4-0.73l-0.03-0.01c-1.06-0.32-1.62-0.7-1.74-1.09l0,0l0.01-0.01c0.01-0.01,0.03-0.01,0.04-0.02l0.01,0
+		l0.01,0l0.01,0l0.02-0.01l0.01,0l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.03-0.01l0.03-0.01l0.03-0.01l0.04-0.01l0.05-0.02
+		l0.04-0.01l0.05-0.02l0.13-0.04l0.08-0.03l0.05-0.02l0.02-0.01l0.04-0.01l0.05-0.02l0.03-0.01l0.03-0.01l0.02-0.01l0.03-0.01
+		l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01
+		l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01
+		c0.36-0.22,0.58-0.54,0.58-0.96c0-0.44-0.13-0.84-0.39-1.2c0.53-0.19,1.01-0.5,1.44-0.9c0.63,0.57,1.38,0.9,2.19,0.94
+		c0.3,0.22,0.45,0.44,0.47,0.68l0,0l0,0l-0.01,0l-0.01,0.01l-0.01,0l-0.01,0.01l-0.01,0l-0.01,0l-0.02,0.01l-0.01,0l-0.02,0.01
+		l-0.02,0.01l-0.03,0.01l-0.02,0.01l-0.03,0.01l-0.02,0.01l-0.03,0.01l-0.04,0.01l-0.05,0.02l-0.17,0.05l-0.05,0.01L10.25,12
+		l-0.03,0.01l-0.02,0.01l-0.03,0.01l-0.03,0.01l-0.03,0.01l-0.03,0.01l-0.02,0.01c-0.15,0.06-0.28,0.12-0.39,0.2
+		c-0.36,0.25-0.53,0.64-0.41,1.08c0.11,0.43,0.38,0.79,0.81,1.09c0.38,0.27,0.87,0.49,1.49,0.67c0.32,0.09,0.66-0.08,0.76-0.39
+		c0.1-0.31-0.08-0.63-0.4-0.73c-0.01,0-0.03-0.01-0.04-0.01l-0.04-0.01l-0.04-0.01l-0.02-0.01l-0.04-0.01
+		c-0.02-0.01-0.04-0.01-0.06-0.02l-0.04-0.01c-0.02-0.01-0.05-0.02-0.07-0.03l-0.04-0.01c-0.02-0.01-0.05-0.02-0.07-0.03l-0.03-0.01
+		c-0.26-0.1-0.48-0.21-0.64-0.33l-0.01-0.01c-0.16-0.11-0.25-0.22-0.3-0.33l0,0l0.01,0l0.01,0l0.02-0.01l0.01,0l0.02-0.01l0.02-0.01
+		l0.03-0.01l0.03-0.01l0.02-0.01l0.03-0.01l0.03-0.01l0.03-0.01l0.05-0.02l0.15-0.05L10.95,13l0.04-0.01l0.04-0.01l0.04-0.01
+		l0.03-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.03-0.01l0.03-0.01
+		l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.01,0l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01
+		c0.33-0.2,0.54-0.5,0.54-0.89c0-0.36-0.1-0.69-0.29-1C13.39,10.22,14.51,8.35,14.51,6.19z M5.48,10.12c-1.79,0-3.32-1.97-3.32-4.48
+		c0-2.5,1.53-4.48,3.32-4.48c1.79,0,3.32,1.97,3.32,4.48C8.8,8.15,7.27,10.12,5.48,10.12z M10.54,9.94c-0.56,0-1.09-0.23-1.56-0.67
+		L8.98,9.27c0,0-0.01-0.01-0.01-0.01c0.65-0.98,1.04-2.25,1.04-3.61c0-1.04-0.22-2.01-0.62-2.86c0.02-0.01,0.03-0.02,0.05-0.03
+		l0.02-0.01c0.34-0.2,0.71-0.31,1.09-0.31c1.47,0,2.75,1.65,2.75,3.75C13.29,8.29,12.02,9.94,10.54,9.94z"/>
+	<path class="st0" d="M6.52,5.84c0,0.52-0.14,1-0.38,1.34C5.94,7.48,5.7,7.62,5.48,7.62l-0.01,0c-0.33,0.01-0.6,0.26-0.6,0.58
+		c0,0.32,0.27,0.58,0.61,0.58c0.66,0,1.26-0.36,1.67-0.95c0.38-0.54,0.59-1.25,0.59-2c0-0.32-0.27-0.58-0.61-0.58
+		C6.79,5.26,6.52,5.52,6.52,5.84z"/>
+</g>
+</svg>
--- a/src/assets/icons/svg/diy3.svg
+++ b/src/assets/icons/svg/diy3.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+</style>
+<path class="st0" d="M10.77,5.49c-0.28,0-0.5,0.22-0.5,0.5c0,0.28,0.22,0.5,0.5,0.5h1.33c0.28,0,0.5-0.22,0.5-0.5
+	c0-0.28-0.22-0.5-0.5-0.5H10.77z M10.77,8.14c-0.28,0-0.5,0.22-0.5,0.5s0.22,0.5,0.5,0.5h1c0.28,0,0.5-0.22,0.5-0.5
+	s-0.22-0.5-0.5-0.5H10.77z M5.55,6.82c0,0.77,0.44,1.47,1.14,1.8l-1.4,3.15l0.78-0.52l0.13,0.93l1.48-3.32l1.47,3.31l0.13-0.93
+	l0.78,0.52L8.61,8.5c0.93-0.59,1.2-1.82,0.61-2.75S7.4,4.54,6.47,5.13C5.9,5.5,5.55,6.13,5.55,6.82z M8.54,6.82c0,0.55-0.45,1-1,1
+	s-1-0.45-1-1s0.45-1,1-1S8.54,6.26,8.54,6.82z"/>
+<path class="st0" d="M2.06,15.29c-0.88,0-1.6-0.71-1.6-1.6V1.64c0-0.88,0.71-1.6,1.6-1.6c0,0,0,0,0,0h8.51c0.88,0,1.6,0.71,1.6,1.6
+	v4.8c0.06-0.01,0.12-0.01,0.18-0.01h1.42c0.69,0,1.24,0.56,1.24,1.24v6.03c0,0.88-0.71,1.6-1.6,1.6c0,0,0,0,0,0H2.06z M1.53,1.64
+	v12.06c0,0.29,0.24,0.53,0.53,0.53h9.04V1.64c0-0.29-0.24-0.53-0.53-0.53H2.06C1.76,1.11,1.53,1.34,1.53,1.64z M12.16,7.67v6.56
+	h1.24c0.29,0,0.53-0.24,0.53-0.53V7.67c0-0.1-0.08-0.18-0.18-0.18l0,0h-1.42C12.24,7.49,12.16,7.57,12.16,7.67L12.16,7.67
+	L12.16,7.67z"/>
+</svg>
--- a/src/assets/icons/svg/diy4.svg
+++ b/src/assets/icons/svg/diy4.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+</style>
+<path class="st0" d="M2.95,0C1.36,0,0.07,1.29,0.07,2.89l0,0v8.08c0,1.59,1.29,2.89,2.89,2.89l0,0h1.15v1.15
+	c0,0.32,0.26,0.58,0.58,0.58c0.07,0,0.15-0.01,0.21-0.04l2.67-1.07l2.67,1.07c0.3,0.12,0.63-0.03,0.75-0.32
+	c0.03-0.07,0.04-0.14,0.04-0.21v-1.15h1.15c1.59,0,2.89-1.29,2.89-2.89l0,0V2.89c0-1.59-1.29-2.89-2.89-2.89l0,0
+	C12.19,0,2.95,0,2.95,0z M4.11,10.74v1.96H2.95c-0.96,0-1.73-0.78-1.73-1.73l0,0V2.89c0-0.96,0.78-1.73,1.73-1.73h9.24
+	c0.96,0,1.73,0.78,1.73,1.73v0v8.08c0,0.96-0.78,1.73-1.73,1.73c0,0,0,0,0,0h-1.15v-1.96c1.15-1.91,0.53-4.4-1.38-5.55
+	s-4.4-0.53-5.55,1.38C3.34,7.86,3.34,9.46,4.11,10.74z M5.26,10.39c-0.96-1.28-0.7-3.09,0.58-4.04s3.09-0.7,4.04,0.58
+	c0.77,1.03,0.77,2.44,0,3.46c-0.54,0.73-1.4,1.16-2.31,1.15C6.66,11.55,5.81,11.12,5.26,10.39z M5.26,11.98
+	c0.68,0.47,1.48,0.73,2.31,0.72c0.83,0,1.63-0.25,2.31-0.72v2.18l-1.99-0.8c-0.21-0.08-0.44-0.08-0.64,0l-1.99,0.8V11.98z
+	 M4.11,2.31c-0.32,0-0.58,0.26-0.58,0.58c0,0.32,0.26,0.58,0.58,0.58h6.93c0.32,0,0.58-0.26,0.58-0.58c0-0.32-0.26-0.58-0.58-0.58
+	c0,0,0,0,0,0C11.04,2.31,4.11,2.31,4.11,2.31z"/>
+</svg>
--- a/src/assets/icons/svg/diy5.svg
+++ b/src/assets/icons/svg/diy5.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+
+</style>
+<polygon class="st1" points="15.35,14.78 13.58,12.34 11.94,12.29 13.75,14.78 2.04,14.78 3.85,12.29 2.25,12.34 0.44,14.78 
+	0.44,16 15.35,16 "/>
+<path class="st1" d="M7.69,3.58c-1.31,0-2.4,1.09-2.4,2.4c0,1.31,1.05,2.4,2.4,2.4s2.4-1.09,2.4-2.4C10.09,4.63,8.99,3.58,7.69,3.58
+	z M7.69,7.2c-0.67,0-1.22-0.55-1.22-1.22c0-0.67,0.55-1.22,1.22-1.22s1.22,0.55,1.22,1.22C8.91,6.65,8.36,7.2,7.69,7.2z"/>
+<path class="st1" d="M3.6,10.48C3.6,10.48,3.6,10.53,3.6,10.48l4.08,4.08l0.08-0.08l4-4c1.22-1.09,1.98-2.69,1.98-4.46
+	C13.75,2.69,11.01,0,7.69,0S1.67,2.69,1.67,6.06C1.67,7.79,2.38,9.39,3.6,10.48z M3.05,6.02c0-2.57,2.11-4.67,4.67-4.67
+	s4.67,2.11,4.67,4.67c0,1.39-0.63,2.65-1.6,3.49l-3.07,3.07L4.65,9.52L4.61,9.47C3.69,8.63,3.05,7.41,3.05,6.02z"/>
+</svg>
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@ -24,8 +24,8 @@
    left: 0;
    z-index: 1001;
    overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    // -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    // box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);

    // reset element-ui css
    .horizontal-collapse-transition {
@ -73,6 +73,11 @@

    .el-menu-item,
    .el-submenu__title {
+      font-size: 14px !important;
+      font-family: "Alibaba-PuHuiTi-Regular";
+
+      height: 50px !important;
+      line-height: 50px;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
@ -82,6 +87,7 @@
    .submenu-title-noDropdown,
    .el-submenu__title {
      &:hover {
+        border-radius: 5px !important;
        color: #f8414d !important;
        background-color: rgba(255, 72, 83, 0.2) !important;
      }
@ -89,6 +95,8 @@

    & .theme-dark .is-active > .el-submenu__title {
      // color: $base-menu-color-active !important;
+      border-radius: 5px !important;
+
      color: #fff !important;
      background-color: #f23f4a !important;
    }
@ -111,9 +119,12 @@
    & .theme-dark .el-submenu .el-menu-item {
      // background-color: $base-sub-menu-background !important;
      background-color: #faf7f7 !important;
+      height: 50px !important;
+      line-height: 50px !important;

      &:hover {
        // background-color: $base-sub-menu-hover !important;
+        border-radius: 5px !important;
        color: #f8414d !important;
        background-color: rgba(255, 72, 83, 0.2) !important;
      }
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@ -5,7 +5,11 @@
    @select="handleSelect"
  >
    <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
+      <el-menu-item
+        :style="{ '--theme': theme }"
+        :index="item.path"
+        :key="index"
+        v-if="index < visibleNumber"
        ><svg-icon
          v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
          :icon-class="item.meta.icon"
@ -15,7 +19,11 @@
    </template>

    <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+    <el-submenu
+      :style="{ '--theme': theme }"
+      index="more"
+      v-if="topMenus.length > visibleNumber"
+    >
      <template slot="title">更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <el-menu-item
@ -34,7 +42,7 @@
 import { constantRoutes } from "@/router";

 // 隐藏侧边栏路由
-const hideList = ['/index', '/user/profile'];
+const hideList = ["/index", "/user/profile"];

 export default {
  data() {
@ -42,7 +50,7 @@ export default {
      // 顶部栏初始数
      visibleNumber: 5,
      // 当前激活菜单的 index
-      currentIndex: undefined
+      currentIndex: undefined,
    };
  },
  computed: {
@ -56,9 +64,9 @@ export default {
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === "/") {
-              topMenus.push(menu.children[0]);
+            topMenus.push(menu.children[0]);
          } else {
-              topMenus.push(menu);
+            topMenus.push(menu);
          }
        }
      });
@ -74,11 +82,12 @@ export default {
      this.routers.map((router) => {
        for (var item in router.children) {
          if (router.children[item].parentPath === undefined) {
-            if(router.path === "/") {
+            if (router.path === "/") {
              router.children[item].path = "/" + router.children[item].path;
            } else {
-              if(!this.ishttp(router.children[item].path)) {
-                router.children[item].path = router.path + "/" + router.children[item].path;
+              if (!this.ishttp(router.children[item].path)) {
+                router.children[item].path =
+                  router.path + "/" + router.children[item].path;
              }
            }
            router.children[item].parentPath = router.path;
@ -92,25 +101,29 @@ export default {
    activeMenu() {
      const path = this.$route.path;
      let activePath = path;
-      if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
+      if (
+        path !== undefined &&
+        path.lastIndexOf("/") > 0 &&
+        hideList.indexOf(path) === -1
+      ) {
        const tmpPath = path.substring(1, path.length);
        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
        if (!this.$route.meta.link) {
-          this.$store.dispatch('app/toggleSideBarHide', false);
+          this.$store.dispatch("app/toggleSideBarHide", false);
        }
-      } else if(!this.$route.children) {
+      } else if (!this.$route.children) {
        activePath = path;
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
      }
      this.activeRoutes(activePath);
      return activePath;
    },
  },
  beforeMount() {
-    window.addEventListener('resize', this.setVisibleNumber)
+    window.addEventListener("resize", this.setVisibleNumber);
  },
  beforeDestroy() {
-    window.removeEventListener('resize', this.setVisibleNumber)
+    window.removeEventListener("resize", this.setVisibleNumber);
  },
  mounted() {
    this.setVisibleNumber();
@ -124,24 +137,24 @@ export default {
    // 菜单选择事件
    handleSelect(key, keyPath) {
      this.currentIndex = key;
-      const route = this.routers.find(item => item.path === key);
+      const route = this.routers.find((item) => item.path === key);
      if (this.ishttp(key)) {
        // http(s):// 路径新窗口打开
        window.open(key, "_blank");
      } else if (!route || !route.children) {
        // 没有子路由路径内部打开
-        const routeMenu = this.childrenMenus.find(item => item.path === key);
+        const routeMenu = this.childrenMenus.find((item) => item.path === key);
        if (routeMenu && routeMenu.query) {
          let query = JSON.parse(routeMenu.query);
          this.$router.push({ path: key, query: query });
        } else {
          this.$router.push({ path: key });
        }
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
      } else {
        // 显示左侧联动菜单
        this.activeRoutes(key);
-        this.$store.dispatch('app/toggleSideBarHide', false);
+        this.$store.dispatch("app/toggleSideBarHide", false);
      }
    },
    // 当前激活的路由
@ -154,15 +167,15 @@ export default {
          }
        });
      }
-      if(routes.length > 0) {
+      if (routes.length > 0) {
        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
      } else {
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
      }
    },
    ishttp(url) {
-      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
-    }
+      return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
+    },
  },
 };
 </script>
@ -177,8 +190,9 @@ export default {
  margin: 0 10px !important;
 }

-.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
-  border-bottom: 2px solid #{'var(--theme)'} !important;
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  border-bottom: 2px solid #{"var(--theme)"} !important;
  color: #303133;
 }

--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -107,7 +107,8 @@ export default {
    .left-sidebar {
      height: 100%;
      background: url("~@/assets/images/sidebar.png");
-      background-size: cover;
+      background-size: 100% 100%;
+      padding: 20px;
    }
    .right-page {
      background: #f5f5f5;