代码提交

src/assets/images/alarm.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#333;}.b{clip-path:url(#a);}.c{fill:none;}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(20 100)"/></clipPath></defs><g class="b" transform="translate(-20 -100)"><g transform="translate(20 100)"><path class="c" d="M24,0V24H0V0ZM12.593,23.258l-.011,0-.071.035-.02,0-.014,0-.071-.035a.02.02,0,0,0-.024,0l0,.01-.017.428.005.02.01.013.1.074.015,0,.012,0,.1-.074.012-.016,0-.017-.017-.427a.021.021,0,0,0-.017-.018m.265-.113-.013,0-.185.093-.01.01,0,.011.018.43.005.012.008.007.2.093a.025.025,0,0,0,.029-.008l0-.014-.034-.614a.027.027,0,0,0-.02-.022m-.715,0a.023.023,0,0,0-.027.006l-.006.014-.034.614a.025.025,0,0,0,.017.024l.015,0,.2-.093.01-.008,0-.011.017-.43,0-.012-.01-.01Z"/><path class="a" d="M15.314,2a2,2,0,0,1,1.414.586l4.686,4.686A2,2,0,0,1,22,8.686v6.628a2,2,0,0,1-.586,1.414l-4.686,4.686A2,2,0,0,1,15.314,22H8.686a2,2,0,0,1-1.414-.586L2.586,16.728A2,2,0,0,1,2,15.314V8.686a2,2,0,0,1,.586-1.414L7.272,2.586A2,2,0,0,1,8.686,2Zm0,2H8.686L4,8.686v6.628L8.686,20h6.628L20,15.314V8.686ZM12,15a1,1,0,1,1-1,1,1,1,0,0,1,1-1m0-9a1,1,0,0,1,1,1v6a1,1,0,0,1-2,0V7a1,1,0,0,1,1-1"/></g></g></svg>

src/assets/images/analysis.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a,.d{fill:#333;}.b{clip-path:url(#a);}.c{fill:none;}.c,.d{fill-rule:evenodd;}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(20 548)"/></clipPath></defs><g class="b" transform="translate(-20 -548)"><g transform="translate(20 548)"><path class="c" d="M24,0V24H0V0ZM12.594,23.258l-.012,0-.071.035-.02,0-.014,0-.071-.036a.022.022,0,0,0-.024.006l0,.01-.017.428.005.02.01.013.1.074.015,0,.012,0,.1-.074.012-.016,0-.017-.017-.427a.022.022,0,0,0-.016-.018m.264-.113-.014,0-.184.093-.01.01,0,.011.018.43.005.012.008.008.2.092a.025.025,0,0,0,.029-.008l0-.014-.034-.614a.027.027,0,0,0-.02-.022m-.715,0a.023.023,0,0,0-.027.006l-.006.014-.034.614a.025.025,0,0,0,.017.024l.015,0,.2-.093.01-.008,0-.011.018-.43,0-.012-.01-.01Z"/><path class="d" d="M12,2a1,1,0,0,0-1,1v9a1,1,0,0,0,1,1h9a1,1,0,0,0,1-1A10,10,0,0,0,12,2m1,9V4.062A8,8,0,0,1,19.938,11ZM8.89,4.627a1,1,0,0,0-.78-1.842,10,10,0,1,0,13.105,13.1,1,1,0,0,0-1.842-.78A8,8,0,1,1,8.89,4.627"/></g></g></svg>

src/assets/images/maintenance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a,.d{fill:#333;}.b{clip-path:url(#a);}.c{fill:none;}.c,.d{fill-rule:evenodd;}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(20 716)"/></clipPath></defs><g class="b" transform="translate(-20 -716)"><g transform="translate(20 716)"><path class="c" d="M24,0V24H0V0ZM12.593,23.258l-.011,0-.071.035-.02,0-.014,0-.071-.035a.02.02,0,0,0-.024,0l0,.01-.017.428.005.02.01.013.1.074.015,0,.012,0,.1-.074.012-.016,0-.017-.017-.427a.021.021,0,0,0-.017-.018m.265-.113-.013,0-.185.093-.01.01,0,.011.018.43.005.012.008.007.2.093a.025.025,0,0,0,.029-.008l0-.014-.034-.614a.027.027,0,0,0-.02-.022m-.715,0a.023.023,0,0,0-.027.006l-.006.014-.034.614a.025.025,0,0,0,.017.024l.015,0,.2-.093.01-.008,0-.011.017-.43,0-.012-.01-.01Z"/><path class="d" d="M6.8,2.884a7,7,0,0,1,9.294,8.565l4.394,3.718a3.76,3.76,0,1,1-5.3,5.3l-3.717-4.394A7,7,0,0,1,2.9,6.778,1.238,1.238,0,0,1,4.967,6.4l3.2,3.478L9.616,9.6l.29-1.449-3.48-3.2A1.239,1.239,0,0,1,6.8,2.884ZM8.805,4.42l2.763,2.54a1.248,1.248,0,0,1,.38,1.165l-.47,2.354a1.25,1.25,0,0,1-.982.981l-2.35.467a1.25,1.25,0,0,1-1.164-.38L4.438,8.785a5,5,0,0,0,6.8,5.25,1.257,1.257,0,0,1,1.422.355l4.05,4.786a1.76,1.76,0,1,0,2.48-2.48l-4.785-4.05a1.257,1.257,0,0,1-.355-1.422A5,5,0,0,0,8.8,4.42Z"/></g></g></svg>

src/assets/images/query.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#333;}.b{clip-path:url(#a);}.c{fill:none;}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(20 604)"/></clipPath></defs><g class="b" transform="translate(-20 -604)"><g transform="translate(20 604)"><path class="c" d="M24,0V24H0V0ZM12.594,23.258l-.012,0-.071.035-.02,0-.014,0-.071-.036a.022.022,0,0,0-.024.006l0,.01-.017.428.005.02.01.013.1.074.015,0,.012,0,.1-.074.012-.016,0-.017-.017-.427a.022.022,0,0,0-.016-.018m.264-.113-.014,0-.184.093-.01.01,0,.011.018.43.005.012.008.008.2.092a.025.025,0,0,0,.029-.008l0-.014-.034-.614a.027.027,0,0,0-.02-.022m-.715,0a.023.023,0,0,0-.027.006l-.006.014-.034.614a.025.025,0,0,0,.017.024l.015,0,.2-.093.01-.008,0-.011.018-.43,0-.012-.01-.01Z"/><path class="a" d="M4,4A1,1,0,0,0,4,6H20a1,1,0,0,0,0-2ZM3,12a1,1,0,0,1,1-1H7a1,1,0,0,1,0,2H4a1,1,0,0,1-1-1m0,7a1,1,0,0,1,1-1H8a1,1,0,0,1,0,2H4a1,1,0,0,1-1-1m7-5a5,5,0,1,1,9.172,2.757l1.535,1.536a1,1,0,1,1-1.414,1.414l-1.536-1.535A5,5,0,0,1,10,14m5-3a3,3,0,1,0,3,3,3,3,0,0,0-3-3"/></g></g></svg>

src/assets/images/system.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a,.d{fill:#333;}.b{clip-path:url(#a);}.c{fill:none;}.c,.d{fill-rule:evenodd;}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(20 660)"/></clipPath></defs><g class="b" transform="translate(-20 -660)"><g transform="translate(20 660)"><path class="c" d="M24,0V24H0V0ZM12.594,23.258l-.012,0-.071.035-.02,0-.014,0-.071-.036a.022.022,0,0,0-.024.006l0,.01-.017.428.005.02.01.013.1.074.015,0,.012,0,.1-.074.012-.016,0-.017-.017-.427a.022.022,0,0,0-.016-.018m.264-.113-.014,0-.184.093-.01.01,0,.011.018.43.005.012.008.008.2.092a.025.025,0,0,0,.029-.008l0-.014-.034-.614a.027.027,0,0,0-.02-.022m-.715,0a.023.023,0,0,0-.027.006l-.006.014-.034.614a.025.025,0,0,0,.017.024l.015,0,.2-.093.01-.008,0-.011.018-.43,0-.012-.01-.01Z"/><path class="d" d="M16,15a3,3,0,0,1,2.83,2H20a1,1,0,0,1,0,2H18.83a3,3,0,0,1-5.66,0H4a1,1,0,0,1,0-2h9.17A3,3,0,0,1,16,15m0,2a1,1,0,1,0,1,1,1,1,0,0,0-1-1M8,9a3,3,0,0,1,2.762,1.828l.067.172H20a1,1,0,0,1,.117,1.993L20,13H10.83a3,3,0,0,1-5.592.172L5.17,13H4a1,1,0,0,1-.117-1.993L4,11H5.17A3,3,0,0,1,8,9m0,2a1,1,0,1,0,1,1,1,1,0,0,0-1-1m8-8a3,3,0,0,1,2.83,2H20a1,1,0,0,1,0,2H18.83a3,3,0,0,1-5.66,0H4A1,1,0,0,1,4,5h9.17A3,3,0,0,1,16,3m0,2a1,1,0,1,0,1,1,1,1,0,0,0-1-1"/></g></g></svg>

src/assets/json/authMenuList.json

@@ -6,7 +6,6 @@
             "redirect": "/alarm/allData",
             "meta": {
                 "icon": "alarm",
-                "iconActive": "alarmActive",
                 "title": "实时监测报警",
                 "isLink": "",
                 "isHide": false,
@@ -113,7 +112,6 @@
             "redirect": "/analysis/dataSynthesis",
             "meta": {
                 "icon": "analysis",
-                "iconActive": "analysisActive",
                 "title": "数据分析显示",
                 "isLink": "",
                 "isHide": false,
@@ -194,7 +192,6 @@
             "redirect": "/query/queryObservationData",
             "meta": {
                 "icon": "query",
-                "iconActive": "queryActive",
                 "title": "数据查询输出",
                 "isLink": "",
                 "isHide": false,
@@ -314,7 +311,6 @@
             "redirect": "/system/user",
             "meta": {
                 "icon": "system",
-                "iconActive": "systemActive",
                 "title": "系统管理",
                 "isLink": "",
                 "isHide": false,
@@ -382,7 +378,6 @@
             "redirect": "/maintenance/siteRecords",
             "meta": {
                 "icon": "maintenance",
-                "iconActive": "maintenanceActive",
                 "title": "维护管理",
                 "isLink": "",
                 "isHide": false,
@@ -406,4 +401,4 @@
         }
     ],
     "msg": "成功"
-}
+}

src/layouts/components/Menu/SubMenu.vue

@@ -2,11 +2,11 @@
   <template v-for="subItem in menuList" :key="subItem.path">
     <el-sub-menu v-if="subItem.children?.length" :index="subItem.path">
       <template #title>
-        <img
-          v-if="subItem.meta.icon"
-          class="img-icons"
-          :src="getCustomIcon(isActive(subItem) ? subItem.meta.iconActive : subItem.meta.icon)"
-        />
+        <img class="img-icons"
+             v-if="subItem.meta.icon"
+             :src="getCustomIcon(subItem.meta.icon)"
+             alt="SVG Image"
+             :class="isActive(subItem)?'menu-img':'menu-img2'"/>
         <span class="sle" :class="isActive(subItem) ? 'menu-title-active' : 'menu-title'">{{ subItem.meta.title }}</span>
       </template>
       <SubMenu :menu-list="subItem.children" />
@@ -28,16 +28,12 @@
 
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import alarm from "@/assets/images/alarm.png";
-import alarmActive from "@/assets/images/alarm-active.png";
-import analysis from "@/assets/images/analysis.png";
-import analysisActive from "@/assets/images/analysis-active.png";
-import query from "@/assets/images/query.png";
-import queryActive from "@/assets/images/query-active.png";
-import system from "@/assets/images/system.png";
-import systemActive from "@/assets/images/system-active.png";
-import maintenance from "@/assets/images/maintenance.png";
-import maintenanceActive from "@/assets/images/maintenance-active.png";
+
+import alarm from "@/assets/images/alarm.svg"
+import analysis from "@/assets/images/analysis.svg";
+import query from "@/assets/images/query.svg";
+import system from "@/assets/images/system.svg";
+import maintenance from "@/assets/images/maintenance.svg";
 
 defineProps<{ menuList: Menu.MenuOptions[] }>();
 
@@ -55,15 +51,10 @@ const isActive = (subItem: Menu.MenuOptions) => {
 const getCustomIcon = (iconName: string) => {
   const icons = {
     alarm: alarm,
-    alarmActive: alarmActive,
     analysis: analysis,
-    analysisActive: analysisActive,
     query: query,
-    queryActive: queryActive,
     system: system,
-    systemActive: systemActive,
-    maintenance: maintenance,
-    maintenanceActive: maintenanceActive
+    maintenance: maintenance
   };
   return icons[iconName] || null;
 };
@@ -83,8 +74,6 @@ const getCustomIcon = (iconName: string) => {
 }
 
 .img-icons {
-  width: 24px;
-  height: 24px;
   margin-right: 5px;
 }
 
@@ -133,4 +122,14 @@ const getCustomIcon = (iconName: string) => {
     }
   }
 }
+
+.menu-img{
+  filter: drop-shadow(100px 0px 0px var(--el-menu-active-color));
+  transform: translateX(-100px);
+}
+
+.menu-img2{
+  filter: drop-shadow(100px 0px 0px var(--el-menu-hover-text-color));
+  transform: translateX(-100px);
+}
 </style>