菜单样式修改

src/assets/styles/leftMenu.scss

@@ -21,8 +21,9 @@
     /deep/ .el-submenu__title:hover{
       background-color:#ecf5ff !important;
     }
-    /deep/ .el-menu.el-menu--inline li{padding-left:63px !important;}
+    /* /deep/ .el-menu.el-menu--inline li{padding-left:50px !important;} */
     /deep/ .el-submenu__icon-arrow{font-size:15px;}
+    /deep/ .el-submenu .el-menu {padding-left: 22px;}
   }
 
 }

src/views/ryda/leftMenu.vue

@@ -16,7 +16,7 @@
       background-color="#fff"
       text-color="#545c64"
     >
-            <div v-for="item in leftMenu" :key="item.index" class="three_children">
+      <div v-for="item in leftMenu" :key="item.index">
         <!--没有子级菜单的情况-->
         <el-menu-item
           :index="item.index"
@@ -26,46 +26,53 @@
           <i :class="item.className"></i>
           <span slot="title">{{ item.label }}</span>
         </el-menu-item>
-                <el-submenu :index="item.index" v-else>
+        <div v-else class="three_children" style="color:#fff">
+          <el-submenu :index="item.index">
             <template slot="title">
               <i :class="item.className"></i>
               <span>{{ item.label }}</span>
             </template>
-                    <el-menu-item :index="item2.index" :name="item2.index" v-for="(item2,index2) in item.children" :key="index2"><i :class="item2.className"></i>{{item2.label}}</el-menu-item>
+            <el-menu-item
+              :index="item2.index"
+              :name="item2.index"
+              v-for="(item2, index2) in item.children"
+              :key="index2"
+              ><i :class="item2.className"><span>{{ item2.label }}</span></i></el-menu-item
+            >
           </el-submenu>
         </div>
-
+      </div>
     </el-menu>
     <!--<img src="../assets/img/leftMenuCover.png" style="width:180px;margin-left: 10px;" v-show="isCollapse==false">-->
   </div>
 </template>
 
 <script>
-    import "@/assets/styles/font-awesome.min.css";
-    export default {
+import "@/assets/styles/font-awesome.min.css";
+export default {
   name: "leftMenu",
   props: {
     propLeftMenu: {
       type: Array,
-                default: () => []
+      default: () => [],
     },
-            sidebarItemName: String
+    sidebarItemName: String,
   },
   data() {
     return {
       isCollapse: false,
       leftMenu: this.propLeftMenu,
-                currentBar: '1',
-                csidebarItemName:this.sidebarItemName
+      currentBar: "1",
+      csidebarItemName: this.sidebarItemName,
     };
   },
   watch: {
     sidebarItemName(val) {
-                if(val=='ykpgbg'||val=='fwrz'){
-                    this.csidebarItemName="dwfwyktj";
-                }
+      if (val == "ykpgbg" || val == "fwrz") {
+        this.csidebarItemName = "dwfwyktj";
       }
     },
+  },
   methods: {
     handleMenuOpen(key, keyPath) {
       console.log(key, keyPath);
@@ -75,34 +82,47 @@
     },
     changeSidebar(index) {
       this.$emit("changeSidebarIndex", index, this.leftMenu);
-            }
+    },
   },
   mounted() {
     let self = this;
-            if(self.csidebarItemName=='dlrz'||self.csidebarItemName=='gnsyrz'||self.csidebarItemName=='gnfwtj'||self.csidebarItemName=='ldfwrz'){//访问运控菜单
-                let index = self.leftMenu.findIndex(item => item.id == 'fwyk');
-                self.leftMenu[index].children.forEach(item2 => {
-                    if(item2.id == self.csidebarItemName){
-                        self.currentBar = (item2.index).toString();
+    if (
+      self.csidebarItemName == "dlrz" ||
+      self.csidebarItemName == "gnsyrz" ||
+      self.csidebarItemName == "gnfwtj" ||
+      self.csidebarItemName == "ldfwrz"
+    ) {
+      //访问运控菜单
+      let index = self.leftMenu.findIndex((item) => item.id == "fwyk");
+      self.leftMenu[index].children.forEach((item2) => {
+        if (item2.id == self.csidebarItemName) {
+          self.currentBar = item2.index.toString();
         }
       });
-            }else{
-                if(self.csidebarItemName=='ykpgbg'||self.csidebarItemName=='fwrz'){
-                    self.csidebarItemName="dwfwyktj";
+    } else {
+      if (
+        self.csidebarItemName == "ykpgbg" ||
+        self.csidebarItemName == "fwrz"
+      ) {
+        self.csidebarItemName = "dwfwyktj";
       }
-                let index = self.leftMenu.findIndex(item => item.id == self.csidebarItemName);
+      let index = self.leftMenu.findIndex(
+        (item) => item.id == self.csidebarItemName
+      );
       self.currentBar = (index + 1).toString();
     }
-        }
-    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-    @import "../../assets/styles/leftMenu.scss";
+@import "../../assets/styles/leftMenu.scss";
 
-    .leftMenu .el-menu /deep/ .el-menu-item{padding-left:60px !important;font-size:16px  !important;}
-    body .leftMenu /deep/ .el-menu-item:hover {
+.leftMenu .el-menu /deep/ .el-menu-item {
+  padding-left: 60px !important;
+  font-size: 16px !important;
+}
+body .leftMenu /deep/ .el-menu-item:hover {
   background: transparent !important;
-    }
-    .three_children /deep/ .el-submenu__title{padding-left:0px !important;}
+}
 </style>