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-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"},
            {id:2,label:"活动管理",goto:"/makerActvity",icon:"iconfont icon-yinliang"},
            {id:3,label:"资金使用管理",goto:"/makerfund",icon:"iconfont icon-zijinguanli"},
            {id:4,label:"项目管理",goto:"/ProjectManagement",icon:"iconfont icon-project_management"},
            {id:5,label:"项目结项",goto:"/projectSettlement",icon:"iconfont icon-_yuanhuanchong"},
            {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"},
          ]
        }
      },
      methods:{
        goto(url){
          // console.log(this.$route.path);
          this.$router.push(url)
        },
        homeExit(){
        // console.log(this.$route.path)
          this.$router.push('/login')
        }
      },
      mounted(){
        // console.log(this.$route.path)
      }
    }
</script>

<style lang="less" scoped>

.homePage{
        // 减去公共部分使页面铺满浏览器
        height:  calc(100% - 60px);
        width: 100%;
      .homeBody{
          margin: 20px 20px;
          .aside{
              background-color: #fff;
              color: #909399;
              height: 100%;
              border-radius: 5px;
              display: flex;
              align-items: center;
              flex-direction: column;
              .btns{
                display: flex;
                width: 100%;
                height: 80px;
                align-items: center;  
                font-size: 16px;
                cursor: pointer;
                box-sizing: border-box;
                padding-left: 20%;
                span{
                  display: flex;
                  // background: red;
                  align-items: center;
                  i{
                    position: relative;
                    top: 1px;
                    font-size: 16px;
                    margin-right: 3px;
                  }
                }
              }
            }
            .main {
              // height: 100%;
              background-color: #fff;
              color: #333;
              text-align: center;
              margin-left: 20px;
            }
        }
    }
</style>