ssti-CollegeManage/src/views/home.vue

<template>
  <!-- 左边导航栏 -->
    <el-container class="homePage">

      <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':''}">
              <span>
                <i :class="item.icon"></i>
                {{ item.label }}
              </span>
            </div> -->
              <el-col :span="12">
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  :unique-opened="true">
                  <div class="submenu" v-for="(item,ind) in navList" :key="ind">
                    <el-submenu v-if="item['group'].length" :index='ind.toString()' >
                      <template slot="title">
                        <div class="subTitle" @click="goto(item.goto)" :style="$route.path.indexOf(item.goto)!=-1?'color:#40aaff':''">
                          <i :class="item.icon" style="margin-right: 15px;width: 15px;" :style="$route.path.indexOf(item.goto)!=-1?'color:#40aaff':''"></i>
                          {{ item.label }}
                        </div>
                      </template>
                      <div class="submenu" v-for="(item2,ind2) in item['group']" :key="ind2">
                        <el-submenu v-if="item2['group']" :index="ind+'-'+ind2">
                          <template slot="title" >
                            <div class="subTitle" @click="goto(item2.goto)" :style="$route.path.indexOf(item2.goto)!=-1?'color:#40aaff':''">
                              {{ item2.label }}
                            </div>
                          </template>
                          <el-menu-item-group>
                            <el-menu-item  v-for="(item3,ind3) in item2['group']" :key="ind3" :index='ind+"-"+ind2+"-"+ind3' @click="goto(item3.goto)">
                              <div class="subTitle" :style="$route.path.indexOf(item3.goto)!=-1?'color:#40aaff':''">{{ item3.label }}</div>
                            </el-menu-item>
                          </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item :index="ind2.toString()" v-else @click="goto(item2.goto)">
                          <template slot="title">
                            <div class="subTitle" :style="$route.path.indexOf(item2.goto)!=-1?'color:#40aaff':''">
                              <i :class="item2.icon" style="margin-right: 15px;width: 15px;"></i>
                              {{ item2.label }}
                            </div>
                          </template>
                        </el-menu-item>
                      </div>
                    </el-submenu>
                    <el-menu-item :index="ind.toString()" v-else @click="goto(item.goto)">
                      <template slot="title">
                        <div class="subTitle" :style="$route.path.indexOf(item.goto)!=-1?'color:#40aaff':''">
                          <i :class="item.icon" style="margin-right: 15px;width: 15px;" :style="$route.path.indexOf(item.goto)!=-1?'color:#40aaff':''"></i>
                          {{ item.label }}
                        </div>
                      </template>
                    </el-menu-item>
                  </div>

                </el-menu>
              </el-col>
        </el-aside>

        <el-main class="main  core_dialogue">
          <router-view></router-view>
        </el-main>
      </el-container>

    </el-container>
    
    
</template>

<script>
// import { BackgroundClass } from 'quill';
// import App from '../App.vue'
    export default {
      data() {
        return {
          navList:[
            {id:1,label:"项目立项申请",goto:"/projectApplication",icon:"iconfont icon-shuben",group:[
              {label:"创客空间",goto:"/projectApplication"},
              {label:"创客项目",goto:"/newStudentProjectApply"},
              {label:"活动申请",icon:"el-icon-wind-power",goto:"/newMarkerActivity",group:[
                {label:"创客活动",icon:"iconfont icon-shuben",goto:"/newMarkerActivity"},
                {label:"个人创客",icon:"iconfont icon-shuben",goto:"/newNomMarker"},
              ]}]},
            {id:2,label:"事后汇总",goto:"/newMarkerfundApply",icon:"iconfont icon-zijinguanli",group:[
              {label:"创客活动资金申请",goto:"/newMarkerfundApply"},
              {label:"个人创客资金申请",goto:"/newNomMarkerFundApply"}
            ]},
            // {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",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:[]},
          ]
        }
      },
      methods:{
        goto(url){
          // console.log(this.$route.path);
          this.$router.push(url)
          console.log('1111')
        },
        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(){
        // console.log(this.$route.path)
      }
    }
</script>

<style lang="less" scoped>




.homePage{
        // 减去公共部分使页面铺满浏览器
        height:  calc(100% - 70px);
        width: 100%;
      .homeBody{
          margin: 20px 20px 30px 20px;
          .aside{
              background-color: #fff;
              color: #909399;
              height: 100%;
              border-radius: 5px;
              display: flex;
              align-items: center;
              flex-direction: column;
              min-width: 220px;
              .btns{
                display: flex;
                width: 100%;
                height: 70px;
                align-items: center;  
                font-size: 16px;
                cursor: pointer;
                box-sizing: border-box;
                padding-left: 20%;
                &:hover{
                  background-color: #cccccc;
                }

                span{
                  align-items: center;
                  width: 80%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow:ellipsis;
                  i{
                    position: relative;
                    top: 1px;
                    font-size: 17px;
                    margin-right: 3px;
                  }
                }
              }
            }
            .main {
              background-color: #fff;
              color: #333;
              // text-align: center;
              // overflow: hidden ;
              margin-left: 20px;
              box-sizing: border-box;
              padding: 20px 30px;
              border-radius: 5px;
            }
        }
      .el-menu{
        border-right:none;
      }
      .el-col-12{
        width: 100%;
      }
    }
.subTitle{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20%;
  // background-color: red;
}
:deep(.el-menu-item.is-active){
  color: #333 !important;
  i{
    color: #909399;
  }
}



</style>