pbl-admin/src/components/tools/leftBar.vue

<template>
  <div class="bottom">
    <!-- <div
      class="item"
      @click="clickItem('/')"
      :class="{ active: $route.path === '/' }"
    >
      <p>首页</p>
    </div>
    <div
      class="item"
      @click="clickItem('/b')"
      :class="{ active: $route.path === '/b' }"
    >
      <p>学习中心</p>
    </div> -->

    <el-aside style="width: 180px; font-size: 16px">
      <el-row class="tac">
        <el-col :span="12">
          <el-menu
            :default-active="path"
            background-color="#fff"
            text-color="#777"
            active-text-color="#fff"
            router
            style="text-align: left"
          >
            <el-menu-item index="/">
              <div class="img" style="padding-bottom: 5px" v-if="path == '/'">
                <img src="../../assets/icon/home-active.png" alt="" />
              </div>
              <div class="img" style="padding-bottom: 5px" v-else>
                <img src="../../assets/icon/home.png" alt="" />
              </div>
              <span>首页管理</span>
            </el-menu-item>
            <el-menu-item index="/curriculum">
              <div class="img" v-if="path == '/curriculum'">
                <img src="../../assets/icon/course-active.png" alt="" />
              </div>
              <div class="img" v-else>
                <img src="../../assets/icon/course.png" alt="" />
              </div>
              <span slot="title">课程管理</span>
            </el-menu-item>
            <el-menu-item index="/template">
              <div class="img" v-if="path == '/template'">
                <img src="../../assets/icon/works-active.png" alt="" />
              </div>
              <div class="img" v-else>
                <img src="../../assets/icon/works.png" alt="" />
              </div>
              <span slot="title">模板管理</span>
            </el-menu-item>
            <el-menu-item index="/notice">
              <div class="img" v-if="path == '/notice'">
                <img src="../../assets/icon/notice-active.png" alt="" />
              </div>
              <div class="img" v-else>
                <img src="../../assets/icon/notice.png" alt="" />
              </div>
              <span slot="title">通知公告</span>
            </el-menu-item>
            <el-menu-item index="/grouping">
              <div class="img" v-if="path == '/grouping'">
                <img src="../../assets/icon/group-active.png" alt="" />
              </div>
              <div class="img" v-else>
                <img src="../../assets/icon/group.png" alt="" />
              </div>
              <span slot="title">分组管理</span>
            </el-menu-item>
            <el-menu-item index="/organization">
              <div class="img" v-if="path == '/organization'">
                <img src="../../assets/icon/class-active.png" alt="" />
              </div>
              <div class="img" v-else>
                <img src="../../assets/icon/class.png" alt="" />
              </div>
              <span slot="title">组织管理</span>
            </el-menu-item>
            <el-menu-item index="/class">
              <div class="img" v-if="path == '/class'">
                <img src="../../assets/icon/class-active.png" alt="" />
              </div>
              <div class="img" v-else>
                <img src="../../assets/icon/class.png" alt="" />
              </div>
              <span slot="title">班级管理</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
  </div>
</template>

<script>
export default {
  props: {
    luyou: Number,
  },
  data() {
    return {
      path: this.$route.path,
    };
  },
  methods: {
    clickItem: function (path) {
      this.$router.push(path);
    },
  },
  watch: {
    luyou: {
      handler(n, o) {
        this.path = this.$route.path;
      },
      deep: true, // 深度监听父组件传过来对象变化
    },
  },
};
</script>

<style scoped>
.bottom {
  position: absolute;
  left: 20px;
  margin-top: 20px;
  background-color: #fff;
  width: 180px;
  height: calc(100% - 100px);
  min-height: 500px;
  z-index: 999;
  display: inline-block;
  border-radius: 5px;
  overflow: hidden;
}
.item {
  margin: 5px 20%;
  float: left;
}
.item p {
  margin: 0;
  font-size: 15px;
}
.active {
  color: #108b70;
}
.bottom >>> .el-menu-item.is-active {
  background: #3d67bc !important;
}
.tac >>> .el-col-12 {
  width: 100%;
}
.tac >>> .el-menu {
  border-right: none;
}
.tac >>> .el-menu-item {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  font-size: 16px;
  padding-left: 40px !important;
}
.img {
  width: 20px;
  padding-right: 5px;
  /* padding-bottom: 5px; */
}
.img > img {
  width: 100%;
  height: 100%;
}
</style>