添加首页菜单与路由 并 修改出现问题的样式

src/assets/icons/svg/icon_home.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18"><defs><style>.a{fill:none;}.b{isolation:isolate;clip-path:url(#a);}.c{stroke-width:0.3px;}</style><clipPath id="a"><rect class="a" x="1" y="1" width="18" height="18"/></clipPath></defs><g class="b" transform="translate(-1 -1)"><path class="c" d="M90.956,93.145v-4.76A1.347,1.347,0,0,1,92.426,87.2H95.54a1.35,1.35,0,0,1,1.47,1.187v4.76h1.214a2.128,2.128,0,0,0,2.246-1.984V84.189L94.9,79.08a1.378,1.378,0,0,0-1.831,0L87.5,84.189v6.972a2.125,2.125,0,0,0,2.246,1.984Zm.865,0h4.325v-4.76c0-.2-.255-.394-.605-.394H92.426c-.353,0-.606.193-.606.394v4.76Zm9.515-8.163v6.179a2.959,2.959,0,0,1-3.111,2.777H89.741a2.957,2.957,0,0,1-3.111-2.777V84.982l-.559.513a.461.461,0,0,1-.612,0,.374.374,0,0,1,0-.561l7-6.415a2.3,2.3,0,0,1,3.054,0l7,6.415a.374.374,0,0,1,0,.561.461.461,0,0,1-.612,0l-.559-.513Z" transform="translate(-84.033 -75.939)"/></g></svg>
\ No newline at end of file

src/layout/Second/Sidebar/Item.vue

@@ -46,21 +46,26 @@ export default {
     line-height: 44px;
     margin: 0 20px 20px;
     user-select: none;
+
     &:hover {
       background: transparent !important;
     }
+
     & > .svg-icon {
       margin-right: 20px;
       stroke: #CADCFB;
     }
+
     .el-submenu__icon-arrow {
       font-weight: bold;
       font-size: 14px;
       color: #CADCFB;
     }
   }
+
   ::v-deep .el-menu {
     padding-bottom: 17px;
+
     &-item:nth-child(n + 2) {
       margin-top: 20px;
     }
@@ -70,6 +75,7 @@ export default {
 .is-active {
   ::v-deep .el-submenu__title {
     color: white !important;
+
     .el-submenu__icon-arrow {
       color: white;
     }
@@ -84,6 +90,45 @@ export default {
   }
 }
 
+// 一级菜单item的默认显示icon
+.el-menu {
+  & > &-item {
+    margin: 0 20px 20px;
+    .svg-icon {
+      display: inline;
+      margin-right: 20px;
+    }
+
+    span {
+      margin-left: 0;
+    }
+  }
+}
+
+// 子菜单item的默认不显示icon
+.el-menu--inline {
+  & > .el-menu-item {
+    .svg-icon {
+      display: none;
+      width: 8px;
+      height: 8px;
+      margin: {
+        left: 5px;
+        right: 25px;
+      };
+    }
+
+    span {
+      margin-left: 38px;
+    }
+    &:hover {
+      .svg-icon {
+        stroke: #387DF7;
+      }
+    }
+  }
+}
+
 .el-menu-item {
   padding: 0 20px !important;
   font-size: 14px;
@@ -91,30 +136,28 @@ export default {
   line-height: 44px;
   margin: 0 20px;
   border-radius: 22px;
+
   &:hover {
     background: transparent !important;
     color: #387DF7 !important;
   }
+
   .svg-icon {
-    display: none;
-    width: 8px;
-    height: 8px;
     stroke: #CADCFB;
-    margin: {
-      left: 5px;
-      right: 25px;
-    };
   }
+
   span {
-    margin-left: 38px;
     user-select: none;
   }
+
   &.is-active {
     background: #387DF7 !important;
     color: white !important;
+
     .svg-icon {
       display: inline;
     }
+
     span {
       margin-left: 0;
     }
@@ -122,5 +165,4 @@ export default {
 }
 
 
-
 </style>
\ No newline at end of file

src/router/index.js

 import Vue from "vue";
 import VueRouter from "vue-router";
+import { menuItemList, prefixBasePath } from "@/views/ProductIntroduction/menuInfo";
 
 Vue.use(VueRouter);
 
@@ -12,7 +13,12 @@ export default new VueRouter({
   routes: [
     {
       path: "/product-introduction/:pathInfo(.*)",
-      component: _ => import("@/views/ProductIntroduction"),
+      component: _ => import("@/views/ProductIntroduction")
+    },
+    {
+      path: "/second/index",
+      component: _ => import("@/layout/Second"),
+      props: { route: true, menuItemList, basePath: prefixBasePath }
     },
     {
       path: "/", // 程序启动默认路由

src/views/ProductIntroduction/Single.vue

@@ -96,6 +96,7 @@ export default {
 
     &-text {
       flex: 7738;
+      text-align: center;
     }
 
     &::before {