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 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 :class="item.icon" style="margin-right: 15px;width: 15px;"></i> -->
                          {{ 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>
              </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:"事前申报",icon:"iconfont icon-shuben",group:[{label:"项目立项申请",icon:"iconfont icon-shuben",goto:"/projectApplication"},{label:"活动申请",icon:"el-icon-wind-power",goto:"/makerActvity"}]},
            // {id:2,label:"活动管理",goto:"/makerActvity",icon:"el-icon-wind-power",group:[]},
            {id:1,label:"事后汇总",icon:"iconfont icon-zijinguanli",group:[{label:"创客活动资金申请",icon:"el-icon-wind-power",goto:"/makerfund"},{label:"非创客活动资金申请",icon:"el-icon-wind-power",goto:"/makerfund"}]},
            // {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)
        },
        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: 170px;
              .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%;
      }
    }
:deep(.el-submenu){
  .el-submenu__title{
      padding-left: 20% !important;
  }
  .el-menu{
    .el-menu-item{
      // background-color: blue;
      padding-left: 20% !important;
    }
    // padding-left: 25% !important;
  }
}

:deep(.el-menu-item){
  padding-left: 20% !important;
  // background-color: red;
}
</style>