SideBar.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <scroll-bar>
  3. <div class="logo">
  4. <img src="https://img.alicdn.com/tfs/TB13UQpnYGYBuNjy0FoXXciBFXa-242-134.png" width="40" />
  5. <span class="site-name">ADMIN LITE</span>
  6. </div>
  7. <el-menu mode="vertical" :show-timeout="200" :router="true" background-color="#00142a" text-color="hsla(0, 0%, 100%, .65)" active-text-color="#409EFF">
  8. <el-menu-item index="/404">404</el-menu-item>
  9. <el-menu-item index="/user">用户管理</el-menu-item>
  10. <el-menu-item index="/views/certificate/index">凭证管理</el-menu-item>
  11. <el-menu-item index="/views/account/register">账号管理</el-menu-item>
  12. <el-menu-item index="/views/duty/duty">责任认定</el-menu-item>
  13. <el-submenu index="">
  14. <template #title>
  15. 权限管理
  16. </template>
  17. <el-menu-item index="/group">群组管理</el-menu-item>
  18. <el-menu-item index="/resources">资源管理</el-menu-item>
  19. <el-menu-item index="/role">角色管理</el-menu-item>
  20. <el-menu-item index="/right">权限管理</el-menu-item>
  21. <el-menu-item index="/confer">权限授予</el-menu-item>
  22. </el-submenu>
  23. </el-menu>
  24. </scroll-bar>
  25. </template>
  26. <script>
  27. import ScrollBar from './ScrollBar.vue';
  28. export default {
  29. components: { ScrollBar },
  30. name: 'SideBar',
  31. props: {},
  32. data() {
  33. return {};
  34. },
  35. };
  36. </script>
  37. <style lang="scss" scoped>
  38. .logo {
  39. display: flex;
  40. justify-content: center;
  41. align-items: center;
  42. height: 64px;
  43. line-height: 64px;
  44. background: #002140;
  45. color: #fff;
  46. text-align: center;
  47. font-size: 20px;
  48. font-weight: 600;
  49. overflow: hidden;
  50. }
  51. .site-name {
  52. margin-left: 10px;
  53. }
  54. .sidebar-container {
  55. box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  56. transition: width 0.28s;
  57. width: 256px !important;
  58. height: 100%;
  59. position: fixed;
  60. top: 0;
  61. bottom: 0;
  62. left: 0;
  63. z-index: 1001;
  64. overflow: hidden;
  65. a {
  66. display: inline-block;
  67. width: 100%;
  68. }
  69. .el-menu {
  70. padding-top: 16px;
  71. width: 100% !important;
  72. border: none;
  73. }
  74. .el-submenu .el-menu-item {
  75. min-width: 256px !important;
  76. padding-left: 48px !important;
  77. background-color: #000c17 !important;
  78. &:hover {
  79. color: #fff !important;
  80. }
  81. }
  82. .el-menu-item,
  83. .el-submenu .el-menu-item {
  84. &.is-active {
  85. background-color: #188fff !important;
  86. color: #fff !important;
  87. }
  88. }
  89. .el-submenu__title i {
  90. font-size: 16px;
  91. color: rgba(255, 255, 255, 0.65);
  92. }
  93. }
  94. </style>