fix: 添加icon

src/layout/components/topMenu/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="top-menu-row" v-if="routeData.length">
     <span v-for="(item,index) in routeData" :key="index" :class="['s-span',{'active-span':currentPath === item.path}]">
-      <router-link :to="item.path" >{{ item.title }}
-<!--        <span class="s-line" v-show="index+1 != routeData.length">|</span>-->
-      </router-link>
+      <el-button :icon="item.icon" @click="router.push(item.path)">
+        {{ item.title }}
+      </el-button>
     </span>
   </div>
 </template>
@@ -35,35 +35,34 @@ onMounted(() => {
 </script>
 <style scoped lang="scss">
 .top-menu-row {
-  border-bottom: 1px solid #e6e6e6;
-  background: #f9f9f9;
-  padding: 10px;
+  border-bottom: 1px solid rgba($color: #e6e6e6, $alpha: .6);
+  background: rgba($color: #f9f9f9, $alpha: .3);
   display: flex;
   align-items: flex-start;
+  padding-left: 20px;
+  margin-bottom: 5px;
+  box-shadow: 0 1px 2px 0 rgba($color: #000000, $alpha: .05);
 
   .s-span {
-    font-size: 14px;
-    border:1px solid #e6e6e6;
-    margin-right:15px;
-    background: white;
-    padding:4px 10px;
-    border-radius: 4px;
-    .s-line {
-      margin: 0 10px;
-      color: #888;
-    }
+    margin-right: 30px;
 
-    &:hover{
-      @extend .active-span;
-      transition: all 0.5s;
+    .el-button--default {
+      background: none;
+      border: 0;
+      padding: 0;
     }
+
+    padding: 4px 0;
   }
 
-  .active-span{
-    color: #409eff;
-    font-weight: bold;
-    border-color: #409eff;
-    background: rgba($color: #409eff, $alpha: 0.1);
+  .active-span {
+    border-bottom: 3px solid #409eff;
+    margin-bottom: -1px;
+
+    .el-button--default {
+      color: #409eff;
+      font-weight: bold;
+    }
   }
 }
 </style>

src/layout/components/topMenu/menu.js

@@ -1,31 +1,31 @@
 export const menuData = [
     [
-        {title: '运行风险查询', path: '/pxf-risk-monitor-web/alarm/record'},
-        {title: '业务类型统计', path: '/pxf-risk-monitor-web/alarm/bizType'},
-        {title: '应用组件统计', path: '/pxf-risk-monitor-web/alarm/bizSort'},
-        {title: '系统压力排名', path: '/pxf-risk-monitor-web/alarm/bizAccess'}
+        {title: '运行风险查询', path: '/pxf-risk-monitor-web/alarm/record', icon: "Position"},
+        {title: '业务类型统计', path: '/pxf-risk-monitor-web/alarm/bizType', icon: "PieChart"},
+        {title: '应用组件统计', path: '/pxf-risk-monitor-web/alarm/bizSort', icon: "DataAnalysis"},
+        {title: '系统压力排名', path: '/pxf-risk-monitor-web/alarm/bizAccess', icon: "DataLine"}
     ],
     [
-        {title: '异类组件分析', path: '/pxf-risk-monitor-web/risk/heterogeneous'},
-        {title: '异常状态分析', path: '/pxf-risk-monitor-web/risk/frequency'},
-        {title: '异常趋势分析', path: '/pxf-risk-monitor-web/risk/numerical'},
-        {title: '业务主机及运行载体风险分析', path: '/pxf-risk-monitor-web/risk/bizHost'},
-        {title: '业务网络状况评估分析', path: '/pxf-risk-monitor-web/risk/bizNetwork'},
-        {title: '业务应用可持续性服务评估分析', path: '/pxf-risk-monitor-web/risk/bizServer'},
+        {title: '异类组件分析', path: '/pxf-risk-monitor-web/risk/heterogeneous', icon: "Odometer"},
+        {title: '异常状态分析', path: '/pxf-risk-monitor-web/risk/frequency', icon: "Compass"},
+        {title: '异常趋势分析', path: '/pxf-risk-monitor-web/risk/numerical', icon: "DataBoard"},
+        {title: '业务主机及运行载体风险分析', path: '/pxf-risk-monitor-web/risk/bizHost', icon: "DataAnalysis"},
+        {title: '业务网络状况评估分析', path: '/pxf-risk-monitor-web/risk/bizNetwork', icon: "Reading"},
+        {title: '业务应用可持续性服务评估分析', path: '/pxf-risk-monitor-web/risk/bizServer', icon: "SetUp"},
     ],
     [
-        {title: '指标类别定义', path: '/pxf-risk-monitor-web/ms/type'},
-        {title: '运行指标定义', path: '/pxf-risk-monitor-web/ms/def'},
-        {title: '运行模板定义', path: '/pxf-risk-monitor-web/ms/mstpl'},
+        {title: '指标类别定义', path: '/pxf-risk-monitor-web/ms/type', icon: "EditPen"},
+        {title: '运行指标定义', path: '/pxf-risk-monitor-web/ms/def', icon: "Edit"},
+        {title: '运行模板定义', path: '/pxf-risk-monitor-web/ms/mstpl', icon: "Memo"},
     ],
     [
-        {title: '推送配置', path: '/pxf-risk-monitor-web/sendMsg/pushConfig'},
-        {title: '短信推送记录', path: '/pxf-risk-monitor-web/sendMsg/pushRecordSms'},
-        {title: '邮件推送记录', path: '/pxf-risk-monitor-web/sendMsg/pushRecordMail'},
+        {title: '推送配置', path: '/pxf-risk-monitor-web/sendMsg/pushConfig', icon: "Setting"},
+        {title: '短信推送记录', path: '/pxf-risk-monitor-web/sendMsg/pushRecordSms', icon: "Document"},
+        {title: '邮件推送记录', path: '/pxf-risk-monitor-web/sendMsg/pushRecordMail', icon: "Tickets"},
     ],
     [
-        {title: '定时任务', path: '/pxf-risk-monitor-web/monitor/job'},
-        {title: '参数设置', path: '/pxf-risk-monitor-web/system/config'},
-        {title: '字典管理', path: '/pxf-risk-monitor-web/system/dict'},
+        {title: '定时任务', path: '/pxf-risk-monitor-web/monitor/job', icon: "Clock"},
+        {title: '参数设置', path: '/pxf-risk-monitor-web/system/config', icon: "Setting"},
+        {title: '字典管理', path: '/pxf-risk-monitor-web/system/dict', icon: "Collection"},
     ]
 ]