页面样式调整

src/views/ems/dzjk/index.vue

@@ -3,14 +3,20 @@
 <template>
   <div class="ems-dashboard-editor-container">
   <zd-select :get-list-by-store="true" :default-site-id="$route.query.siteId" @submitSite="submitSite"/>
-<!--  这里是单站监控的二级菜单栏 需要循环拿到数据 显示在页面上-->
-    <div class="router-container">
-      <div class="route-link" :class="{'active':item.name === $route.meta.activeSecondMenuName}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
-        <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
+  <el-menu
+    class="ems-second-menu"
+    :default-active="$route.meta.activeSecondMenuName"
+    background-color="#1890ff"
+    text-color="#ffffff"
+    active-text-color="#ffffff"
+    mode="horizontal"
+  >
+    <el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
+      <router-link  style="height: 100%;width: 100%;display: block;padding:0 20px;" :to="{path:item.path,query:$route.query}">
         {{item.meta.title}}
-        </router-link>
-      </div>
-    </div>
+      </router-link>
+    </el-menu-item>
+  </el-menu>
   <div class="ems-content-container ems-content-container-padding dzjk-ems-content-container">
     <keep-alive>
       <router-view></router-view>
@@ -56,23 +62,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .router-container{
-    display: flex;
-    .route-link{
-      width: 104px;
-      height: 40px;
-      line-height: 40px;
-      background-color: #FFBE29 ;
-      color: #666666;
-      font-size: 14px;
-      text-align: center;
-    }
-    .route-link.active{
-      background-color: #ffffff;
-      color: #333333;
-      font-weight: 500;
-    }
-  }
   .dzjk-ems-content-container{
     margin-top:0;
   }