解决更多菜单的全局样式污染冲突问题

gassafety-web/src/assets/styles/sidebar.scss

 #app {
-
   .main-container {
     min-height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left 0.28s;
     margin-left: $sideBarWidth;
     position: relative;
   }
 
   .sidebar-container {
-    -webkit-transition: width .28s;
+    -webkit-transition: width 0.28s;
     transition: width 0.28s;
     width: $sideBarWidth !important;
-    background-color: #053B6A;
+    background-color: #053b6a;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -20,28 +19,44 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    .el-menu-item{
+    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    .el-menu-item {
       padding: 0px !important;
       margin-top: 5px;
       height: 84px;
       line-height: 30px !important;
       text-align: center;
-      .svg-icon{
+      .svg-icon {
         margin-top: 10px;
         font-size: 30px;
         // width: 30px !important;
       }
-      
     }
-    reset element-ui css
-    .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    reset element-ui css .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
     }
 
     .scrollbar-wrapper {
       overflow-x: hidden !important;
+      .el-menu-item:focus,
+      .is-active {
+        outline: none;
+        // background-image: url(/static/img/item-background.0ec28f27.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        /* background: rgba(0, 0, 0, 0); */
+        color: #31eaea !important;
+      }
+      .el-menu-item:hover {
+        outline: none;
+        // background-image: url(/static/img/item-background.0ec28f27.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        /* background: rgba(0, 0, 0, 0); */
+        color: #31eaea !important;
+      }
     }
 
     .el-scrollbar__bar.is-vertical {
@@ -73,13 +88,14 @@
     }
 
     .el-menu {
-      background-color: #053B6A;
+      background-color: #053b6a;
       border: none;
       height: 100%;
       width: 100% !important;
     }
 
-    .el-menu-item, .el-submenu__title {
+    .el-menu-item,
+    .el-submenu__title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       // white-space: nowrap !important;
@@ -97,7 +113,7 @@
       color: #fff !important;
     }
 
-    & .nest-menu .el-submenu>.el-submenu__title,
+    & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
 
@@ -106,9 +122,9 @@
       }
     }
 
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+    & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: #053B6A !important;
+      background-color: #053b6a !important;
 
       &:hover {
         background-color: rgba(0, 0, 0, 0.06) !important;
@@ -141,20 +157,19 @@
     .el-submenu {
       overflow: hidden;
 
-      &>.el-submenu__title {
+      & > .el-submenu__title {
         padding: 0 0 !important;
 
         .svg-icon {
           margin-left: 20px;
         }
-
       }
     }
 
     .el-menu--collapse {
       .el-submenu {
-        &>.el-submenu__title {
-          &>span {
+        & > .el-submenu__title {
+          & > span {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -177,7 +192,7 @@
     }
 
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform 0.28s;
       width: $sideBarWidth !important;
     }
 
@@ -191,7 +206,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -201,13 +215,13 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  & > .el-menu {
     .svg-icon {
       margin-right: 16px;
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .nest-menu .el-submenu > .el-submenu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
@@ -216,7 +230,7 @@
   }
 
   // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 

gassafety-web/src/components/SizeSelect/index.vue

@@ -4,9 +4,13 @@
       <svg-icon class-name="size-icon" icon-class="size" />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
-        {{
-          item.label }}
+      <el-dropdown-item
+        v-for="item of sizeOptions"
+        :key="item.value"
+        :disabled="size === item.value"
+        :command="item.value"
+      >
+        {{ item.label }}
       </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
@@ -17,41 +21,40 @@ export default {
   data() {
     return {
       sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
-      ]
-    }
+        { label: "Default", value: "default" },
+        { label: "Medium", value: "medium" },
+        { label: "Small", value: "small" },
+        { label: "Mini", value: "mini" },
+      ],
+    };
   },
   computed: {
     size() {
-      return this.$store.getters.size
-    }
+      return this.$store.getters.size;
+    },
   },
   methods: {
     handleSetSize(size) {
-      this.$ELEMENT.size = size
-      this.$store.dispatch('app/setSize', size)
-      this.refreshView()
+      this.$ELEMENT.size = size;
+      this.$store.dispatch("app/setSize", size);
+      this.refreshView();
       this.$message({
-        message: 'Switch Size Success',
-        type: 'success'
-      })
+        message: "Switch Size Success",
+        type: "success",
+      });
     },
     refreshView() {
       // In order to make the cached page re-rendered
-      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
+      this.$store.dispatch("tagsView/delAllCachedViews", this.$route);
 
-      const { fullPath } = this.$route
+      const { fullPath } = this.$route;
 
       this.$nextTick(() => {
         this.$router.replace({
-          path: '/redirect' + fullPath
-        })
-      })
-    }
-  }
-
-}
+          path: "/redirect" + fullPath,
+        });
+      });
+    },
+  },
+};
 </script>

gassafety-web/src/components/TopNav/index.vue

@@ -20,10 +20,16 @@
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu index="more" v-if="topMenus.length > visibleNumber">
+    <!-- <div> -->
+    <el-submenu
+      class="onlyNavTio"
+      index="more"
+      v-if="topMenus.length > visibleNumber"
+    >
       <template slot="title">更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item
+          class="navTopBar"
           :index="item.path"
           :key="index"
           v-if="index >= visibleNumber"
@@ -32,6 +38,7 @@
         >
       </template>
     </el-submenu>
+    <!-- </div> -->
   </el-menu>
 </template>
 
@@ -225,6 +232,45 @@ export default {
   }
 }
 
+// 》〉》〉》导航的样式调整
+.navTopBar {
+  // background-color: red !important;
+  width: 110px !important;
+  background-color: #053b6a !important;
+  text-align: center !important;
+  color: #fff !important;
+  &:hover {
+    color: #fff !important;
+    outline: none;
+    background-image: url("../../assets/logo/item-background.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    /* background: rgba(0, 0, 0, 0); */
+    color: #31eaea !important;
+  }
+}
+
+.navTopBar:focus,
+.navTopBar.is-active {
+  outline: none;
+  background-image: url("../../assets/logo/item-background.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  /* background: rgba(0, 0, 0, 0); */
+  color: #31eaea !important;
+}
+.el-menu--popup {
+  z-index: 100;
+  min-width: 120px;
+  border: none;
+  padding: 5px;
+  border-radius: 2px;
+  -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  background-color: #053b6a;
+}
+// 》〉》〉》导航的样式
+
 .el-menu--horizontal > .el-menu-item.is-active {
   border-bottom: 3px solid #{"var(--theme)"};
   /* box-shadow: inset 2px 2px 20px #5CD9D4; */
@@ -235,8 +281,8 @@ export default {
 .el-menu--horizontal > .el-submenu .el-submenu__title {
   height: 50px !important;
   line-height: 50px !important;
-  border:none !important;
-  margin-left:15px;
+  border: none !important;
+  margin-left: 15px;
 }
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
@@ -258,7 +304,7 @@ export default {
     rgba(0, 0, 0, 0) 100%
   );
 }
-.submenu-title-noDropdown{
+.submenu-title-noDropdown {
   color: rgb(5 59 106) !important;
   font-weight: 900 !important;
 }

gassafety-web/src/layout/components/Sidebar/SidebarItem.vue

 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+    <template
+      v-if="
+        hasOneShowingChild(item.children, item) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        !item.alwaysShow
+      "
+    >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"/><br>
+        <el-menu-item
+          :index="resolvePath(onlyOneChild.path)"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <item
+            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+          /><br />
           <!-- <item :title="onlyOneChild.meta.title" /> -->
-          {{onlyOneChild.meta.title}}
+          {{ onlyOneChild.meta.title }}
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+    <el-submenu
+      v-else
+      ref="subMenu"
+      :index="resolvePath(item.path)"
+      popper-append-to-body
+    >
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+        <item
+          v-if="item.meta"
+          :icon="item.meta && item.meta.icon"
+          :title="item.meta.title"
+        />
       </template>
       <sidebar-item
         v-for="child in item.children"
@@ -27,135 +47,142 @@
 </template>
 
 <script>
-import path from 'path'
-import { isExternal } from '@/utils/validate'
-import Item from './Item'
-import AppLink from './Link'
-import FixiOSBug from './FixiOSBug'
+import path from "path";
+import { isExternal } from "@/utils/validate";
+import Item from "./Item";
+import AppLink from "./Link";
+import FixiOSBug from "./FixiOSBug";
 
 export default {
-  name: 'SidebarItem',
+  name: "SidebarItem",
   components: { Item, AppLink },
   mixins: [FixiOSBug],
   props: {
     // route object
     item: {
       type: Object,
-      required: true
+      required: true,
     },
     isNest: {
       type: Boolean,
-      default: false
+      default: false,
     },
     basePath: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
   },
   data() {
-    this.onlyOneChild = null
-    return {}
+    this.onlyOneChild = null;
+    return {};
   },
   methods: {
     hasOneShowingChild(children = [], parent) {
       if (!children) {
         children = [];
       }
-      const showingChildren = children.filter(item => {
+      const showingChildren = children.filter((item) => {
         if (item.hidden) {
-          return false
+          return false;
         } else {
           // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
+          this.onlyOneChild = item;
+          return true;
         }
-      })
+      });
 
       // When there is only one child router, the child router is displayed by default
       if (showingChildren.length === 1) {
-        return true
+        return true;
       }
 
       // Show parent if there are no child router to display
       if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
+        this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
+        return true;
       }
 
-      return false
+      return false;
     },
     resolvePath(routePath) {
       if (isExternal(routePath)) {
-        return routePath
+        return routePath;
       }
       if (isExternal(this.basePath)) {
-        return this.basePath
-      }
-      return path.resolve(this.basePath, routePath)
+        return this.basePath;
       }
-  }
-}
+      return path.resolve(this.basePath, routePath);
+    },
+  },
+};
 </script>
 <style lang="scss">
-  #app .sidebar-container .submenu-title-noDropdown:hover, #app .sidebar-container .el-submenu__title:hover {
+#app .sidebar-container .submenu-title-noDropdown:hover,
+#app .sidebar-container .el-submenu__title:hover {
   /* box-shadow: inset 2px 2px 20px #5CD9D4; */
   background: rgba(0, 0, 0, 0);
 }
-#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
+#app .sidebar-container .el-menu-item,
+#app .sidebar-container .el-submenu__title {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   background: rgba(0, 0, 0, 0);
 }
-.el-menu-item:hover {
+// 顶部导航的样式
+.navbar {
+  .el-menu-item:hover {
     outline: none;
     background-image: url("../../../assets/logo/item-background.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     /* background: rgba(0, 0, 0, 0); */
-    color: #31EAEA !important;
-}
-.el-menu-item:focus,.is-active  {
+    color: #31eaea !important;
+  }
+  .el-menu-item:focus,
+  .is-active {
     outline: none;
     background-image: url("../../../assets/logo/item-background.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     /* background: rgba(0, 0, 0, 0); */
-    color: #31EAEA !important;
-}
-.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+    color: #31eaea !important;
+  }
+  .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
     background-color: rgba(0, 0, 0, 0);
     color: #fff;
     background-image: url("../../../assets/logo/item-background.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
-}
-.el-menu--horizontal > .el-submenu .el-submenu__title {
+  }
+  .el-menu--horizontal > .el-submenu .el-submenu__title {
     height: 50px !important;
     line-height: 50px !important;
     margin-top: 15px;
     font-size: 22px;
     font-weight: 600;
     color: #fff;
-}
-.el-menu--horizontal > .el-submenu:focus .el-submenu__title, .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
+  }
+  .el-menu--horizontal > .el-submenu:focus .el-submenu__title,
+  .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
     color: #fff;
-}
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  }
+  .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom: 0px solid;
     color: #fff;
-}
-.el-submenu__title i {
+  }
+  .el-submenu__title i {
     color: #fff;
-}
-.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
-    background-color: #053B6A;
+  }
+  .el-menu--horizontal .el-menu .el-menu-item,
+  .el-menu--horizontal .el-menu .el-submenu__title {
+    background-color: #053b6a;
     float: none;
     height: 36px;
     line-height: 36px;
     padding: 0;
     color: #fff;
-}
-.el-menu--popup {
+  }
+  .el-menu--popup {
     z-index: 100;
     min-width: 120px;
     border: none;
@@ -163,6 +190,9 @@ export default {
     border-radius: 2px;
     -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
     box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-    background-color: #053B6A;
+    background-color: #053b6a;
+  }
 }
+// 》〉》〉》〉顶部导航的样式
+
 </style>
\ No newline at end of file

gassafety-web/src/utils/gaodeMapView.js

@@ -117,6 +117,7 @@ class gaodeMap {
       if (this.handleInfoWindowOpenFunc) {
         this.handleInfoWindowOpenFunc();
         this.handleInfoWindowOpenFunc = null;
+        this.leftListClick=false;
       }
 
       // 刚进入页面的时候只调用一次，让左侧的抽屉在地图移动完之后显示