选中样式调整

src/page/index/top/top-menu.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <el-menu class="top-menu" :default-active="activeIndex" mode="horizontal" text-color="#333" ellipsis
+    <el-menu class="top-menu custom-menu" :default-active="activeIndex" mode="horizontal"  ellipsis
-      style="width: 900px">
+      style="width: 900px" >
       <!-- <el-menu-item index="0" @click="openHome(itemHome)">
       <template #title>
         <i :class="itemHome.source" style="padding-right: 5px"></i>
@@ -78,19 +78,19 @@ export default {
   methods: {
     openMenu(item) {
       console.log('item------------------------', item)
-      if(this.setting.styleRadio == '3'||this.setting.styleRadio == '4'){
+      if (this.setting.styleRadio == '3' || this.setting.styleRadio == '4') {
-         this.index.openMenu2(item);
+        this.index.openMenu2(item);
-      }else{
+      } else {
-         this.index.openMenu(item);
+        this.index.openMenu(item);
       }
-     
+
       this.$store.commit('SET_ACTIVE_INDEX', item.id + '');
     },
     openHome(itemHome) {
       // if(this.setting.styleRadio == '3'){
       //    this.index.openMenu2(item);
       // }else{
-         this.index.openMenu(item);
+      this.index.openMenu(item);
       // }
       this.$router.push(this.tagWel);
     },
@@ -147,4 +147,26 @@ export default {
     }
   }
 }
-</style>
+
+// :deep(.el-menu--horizontal>.el-menu-item.is-active) {
+//   background-color: #dceeff !important;
+// }
+.custom-menu .el-menu-item.is-active {
+  background-color: #f3f3f3 !important; /* 修改选中项的背景色 */
+}
+
+/* 如果需要修改选中时span标签的文字颜色，可以嵌套样式 */
+.el-menu-item.is-active span {
+  color: #fff !important;
+}
+
+
+:deep(.el-menu-item.is-active i) {
+  color: #06f !important;
+}
+
+:deep(.el-menu-item.is-active span) {
+  color: #06f !important;
+}
+
+</style>

src/styles/element-ui.scss

@@ -37,7 +37,7 @@
 
 
 .el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
-  background-color: transparent !important;
+  background-color: transparent ;
 }
 
 .el-collapse-item__header {