#

src/views/home.vue

@@ -4,12 +4,53 @@
 
       <el-container class="homeBody">
         <el-aside width="12%" class="aside">
-            <div class="btns" v-for="item in navList" :key="item.id" @click="goto(item.goto)" :style="{background: !$route.path.indexOf(item.goto)?'#3D67BC':'',color:!$route.path.indexOf(item.goto)?'#fff':''}">
+            <!-- <div class="btns" v-for="item in navList" :key="item.id" @click="goto(item.goto)" :style="{background: !$route.path.indexOf(item.goto)?'#3D67BC':'',color:!$route.path.indexOf(item.goto)?'#fff':''}">
               <span>
                 <i :class="item.icon"></i>
                 {{ item.label }}
               </span>
-            </div>
+            </div> -->
+              <el-col :span="12">
+                <el-menu
+                  default-active="2"
+                  class="el-menu-vertical-demo"
+                  @open="handleOpen"
+                  @close="handleClose"
+                  :unique-opened="true">
+                  <div v-for="(item,ind) in navList" :key="ind">
+                    <el-submenu v-if="item.group.length" :index='ind.toString()'>
+                      <template slot="title">
+                        <i :class="item.icon" style="margin-right: 15px;width: 15px;"></i>
+                        {{ item.label }}
+                      </template>
+                      <el-menu-item-group v-if="item.group.length">
+                        <el-menu-item  v-for="(i,num) in item.group" :key="num" :index='ind+"-"+num' @click="goto(i.goto)">{{ i.label }}</el-menu-item>
+                      </el-menu-item-group>
+                    </el-submenu>
+                    <el-menu-item :index="ind.toString()" v-else @click="goto(item.goto)">
+                      <template slot="title">
+                          <i :class="item.icon" style="margin-right: 15px;width: 15px;"></i>
+                          {{ item.label }}
+                      </template>
+                    </el-menu-item>
+                  </div>
+
+                  
+
+                  <!-- <el-menu-item index="2">
+                    <i class="el-icon-menu"></i>
+                    <span slot="title">导航二</span>
+                  </el-menu-item>
+                  <el-menu-item index="3" disabled>
+                    <i class="el-icon-document"></i>
+                    <span slot="title">导航三</span>
+                  </el-menu-item>
+                  <el-menu-item index="4">
+                    <i class="el-icon-setting"></i>
+                    <span slot="title">导航四</span>
+                  </el-menu-item> -->
+                </el-menu>
+              </el-col>
         </el-aside>
 
         <el-main class="main  core_dialogue">
@@ -29,16 +70,16 @@
       data() {
         return {
           navList:[
-            {id:1,label:"项目立项申请",goto:"/projectApplication",icon:"iconfont icon-shuben"},
-            {id:2,label:"活动管理",goto:"/makerActvity",icon:"el-icon-wind-power"},
-            {id:3,label:"资金使用管理",goto:"/makerfund",icon:"iconfont icon-zijinguanli"},
-            {id:4,label:"项目管理",goto:"/ProjectManagement",icon:"el-icon-receiving"},
-            {id:5,label:"项目结项",goto:"/projectSettlement",icon:"iconfont icon-_yuanhuanchong"},
+            {id:1,label:"事前申报",goto:"/projectApplication",icon:"iconfont icon-shuben",group:[{label:"项目立项申请",goto:"/projectApplication"}]},
+            {id:2,label:"活动管理",goto:"/makerActvity",icon:"el-icon-wind-power",group:[]},
+            {id:3,label:"资金使用管理",goto:"/makerfund",icon:"iconfont icon-zijinguanli",group:[]},
+            {id:4,label:"项目管理",goto:"/ProjectManagement",icon:"el-icon-receiving",group:[]},
+            {id:5,label:"项目结项",goto:"/projectSettlement",icon:"iconfont icon-_yuanhuanchong",group:[]},
             // {id:6,label:"学分登记",goto:"/credit",icon:"iconfont icon-yonghu"},
-            {id:7,label:"成果展示",goto:"/resultsShow",icon:"iconfont icon-xiangmuguanli2"},
-            {id:8,label:"创业公司登记",goto:"/firm",icon:"iconfont icon-zuzhijiegou"},
-            {id:9,label:"消息通知",goto:"/messageNotification",icon:"iconfont icon-xiaoxitongzhi3"},
-            {id:10,label:"数据监测",goto:"/echarts",icon:"iconfont icon-qushi"},
+            {id:7,label:"成果展示",goto:"/resultsShow",icon:"iconfont icon-xiangmuguanli2",group:[]},
+            {id:8,label:"创业公司登记",goto:"/firm",icon:"iconfont icon-zuzhijiegou",group:[]},
+            {id:9,label:"消息通知",goto:"/messageNotification",icon:"iconfont icon-xiaoxitongzhi3",group:[]},
+            {id:10,label:"数据监测",goto:"/echarts",icon:"iconfont icon-qushi",group:[]},
           ]
         }
       },
@@ -50,6 +91,12 @@
         homeExit(){
         // console.log(this.$route.path)
           this.$router.push('/login')
+        },
+        handleOpen(key, keyPath) {
+          console.log(key, keyPath);
+        },
+        handleClose(key, keyPath) {
+          console.log(key, keyPath);
         }
       },
       mounted(){
@@ -60,6 +107,9 @@
 
 <style lang="less" scoped>
 
+
+
+
 .homePage{
         // 减去公共部分使页面铺满浏览器
         height:  calc(100% - 70px);
@@ -74,6 +124,7 @@
               display: flex;
               align-items: center;
               flex-direction: column;
+              min-width: 170px;
               .btns{
                 display: flex;
                 width: 100%;
@@ -113,5 +164,11 @@
               border-radius: 5px;
             }
         }
+      .el-menu{
+        border-right:none;
+      }
+      .el-col-12{
+        width: 100%;
+      }
     }
 </style>