llh_project/src/components/SideBar.vue

<template>
  <scroll-bar>
    <div class="logo">
      <img src="https://img.alicdn.com/tfs/TB13UQpnYGYBuNjy0FoXXciBFXa-242-134.png" width="40" />
      <span class="site-name">ADMIN LITE</span>
    </div>
    <el-menu mode="vertical" :show-timeout="200" :router="true" background-color="#00142a" text-color="hsla(0, 0%, 100%, .65)" active-text-color="#409EFF">
      <el-menu-item index="/404">404</el-menu-item>
      <el-menu-item index="/user">用户管理</el-menu-item>
      <el-menu-item index="/views/certificate/index">凭证管理</el-menu-item>
      <el-menu-item index="/views/account/register">账号管理</el-menu-item>
      <el-menu-item index="/views/duty/duty">责任认定</el-menu-item>
      <el-submenu index="">
        <template #title>
          权限管理
        </template>
        <el-menu-item index="/group">群组管理</el-menu-item>
        <el-menu-item index="/resources">资源管理</el-menu-item>
        <el-menu-item index="/role">角色管理</el-menu-item>
        <el-menu-item index="/right">权限管理</el-menu-item>
        <el-menu-item index="/confer">权限授予</el-menu-item>
      </el-submenu>
    </el-menu>
  </scroll-bar>
</template>

<script>
import ScrollBar from './ScrollBar.vue';
export default {
  components: { ScrollBar },
  name: 'SideBar',
  props: {},
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  line-height: 64px;
  background: #002140;
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  overflow: hidden;
}
.site-name {
  margin-left: 10px;
}
.sidebar-container {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  transition: width 0.28s;
  width: 256px !important;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  a {
    display: inline-block;
    width: 100%;
  }
  .el-menu {
    padding-top: 16px;
    width: 100% !important;
    border: none;
  }
  .el-submenu .el-menu-item {
    min-width: 256px !important;
    padding-left: 48px !important;
    background-color: #000c17 !important;
    &:hover {
      color: #fff !important;
    }
  }
  .el-menu-item,
  .el-submenu .el-menu-item {
    &.is-active {
      background-color: #188fff !important;
      color: #fff !important;
    }
  }
  .el-submenu__title i {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.65);
  }
}
</style>