修改title偏移的问题。

src/layout/components/Sidebar/Item.vue

@@ -1,13 +1,15 @@
 <template>
-  <div>
+  <span>
     <template v-if="icon.includes('el-icon')">
       <i :class="[icon, 'sub-el-icon']" />
-      <!-- <svg-icon :icon-class="icon" /> -->
+    </template>
+    <template v-else>
+      <svg-icon :icon-class="icon" />
     </template>
     <template v-if="title">
-      <span slot="title">{{ title }}</span>
+      <span slot="title" style="padding-left: 5px;">{{ title }}</span>
     </template>
-  </div>
+  </span>
 </template>
 <script>
 export default {

src/router/index.js

@@ -51,7 +51,7 @@ export const constantRoutes = [
       path: 'dashboard',
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index'),
-      meta: { title: 'Dashboard', icon: 'el-icon-s-help' }
+      meta: { title: 'Dashboard', icon: 'dashboard' }
     }]
   },
 
@@ -66,13 +66,13 @@ export const constantRoutes = [
         path: 'table',
         name: 'Table',
         component: () => import('@/views/table/index'),
-        meta: { title: 'Table', icon: 'el-icon-s-help' }
+        meta: { title: 'Table', icon: 'table' }
       },
       {
         path: 'tree',
         name: 'Tree',
         component: () => import('@/views/tree/index'),
-        meta: { title: 'Tree', icon: 'el-icon-s-help' }
+        meta: { title: 'Tree', icon: 'tree' }
       }
     ]
   },
@@ -85,7 +85,7 @@ export const constantRoutes = [
         path: 'index',
         name: 'Form',
         component: () => import('@/views/form/index'),
-        meta: { title: 'Form', icon: 'el-icon-s-help' }
+        meta: { title: 'Form', icon: 'form' }
       }
     ]
   },
@@ -97,7 +97,7 @@ export const constantRoutes = [
     name: 'Nested',
     meta: {
       title: 'Nested',
-      icon: 'el-icon-s-help'
+      icon: 'nested'
     },
     children: [
       {
@@ -155,7 +155,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
-        meta: { title: 'External Link', icon: 'el-icon-s-help' }
+        meta: { title: 'External Link', icon: 'link' }
       }
     ]
   },

src/styles/sidebar.scss

@@ -58,7 +58,7 @@
     }
 
     .sub-el-icon {
-      margin-right: 17px;
+      margin-right: 12px;
       margin-left: -2px;
     }
 
@@ -100,7 +100,7 @@
       margin-left: 54px;
     }
 
-     & > .submenu-title-noDropdown {
+    & > .submenu-title-noDropdown {
       padding: 0 !important;
       position: relative;
 
@@ -108,27 +108,27 @@
         padding: 0 !important;
 
         .svg-icon {
-          margin-left: 18px;
+          margin-left: 20px;
         }
 
         .sub-el-icon {
-          margin-left: 18px;
+          margin-left: 19px;
         }
       }
     }
 
-    .el-submenu {
+    & > .el-submenu {
       overflow: hidden;
 
       & > .el-submenu__title {
         padding: 0 !important;
 
         .svg-icon {
-          margin-left: 18px;
+          margin-left: 20px;
         }
 
         .sub-el-icon {
-          margin-left: 18px;
+          margin-left: 19px;
         }
 
         .el-submenu__icon-arrow {
@@ -137,7 +137,7 @@
       }
     }
 
-    .el-menu--collapse {
+    & > .el-menu--collapse {
       .el-submenu {
         & > .el-submenu__title {
           & > span {
@@ -189,7 +189,6 @@
   & > .el-menu {
     .svg-icon {
       margin-right: 16px;
-      margin-left: -2px;
     }
     .sub-el-icon {
       margin-right: 12px;