Nav_20190319165330.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <div class="nav">
  3. <el-button type="primary" icon="el-icon-arrow-right" circle @click="open"></el-button>
  4. <el-menu
  5. default-active="1-4-1"
  6. :collapse="isCollapse"
  7. class="el-menu-vertical-demo"
  8. background-color="#545c64"
  9. text-color="#fff"
  10. active-text-color="#ffd04b"
  11. :router="true"
  12. :default-active="$route.path"
  13. >
  14. <el-menu-item index="/manage/query">
  15. <i class="el-icon-menu"></i>
  16. <span slot="title">经营数据查询</span>
  17. </el-menu-item>
  18. <el-menu-item index="/manage/cost">
  19. <i class="el-icon-menu"></i>
  20. <span slot="title">经营数据成本</span>
  21. </el-menu-item>
  22. <el-menu-item index="/manage/index">
  23. <span slot="title">经营数据收入</span>
  24. </el-menu-item>
  25. <el-menu-item index="/team/index">
  26. <span slot="title">部门管理</span>
  27. </el-menu-item>
  28. <el-menu-item index="/project/index">
  29. <span slot="title">项目管理</span>
  30. </el-menu-item>
  31. <el-menu-item index="/product/index">
  32. <span slot="title">产品管理</span>
  33. </el-menu-item>
  34. <el-menu-item index="/costType/index">
  35. <span slot="title">成本类型管理</span>
  36. </el-menu-item>
  37. <!--
  38. <el-menu-item index="/costTeam/index">
  39. <span slot="title">成本部门/单位/人管理</span>
  40. </el-menu-item>
  41. -->
  42. </el-menu>
  43. </div>
  44. </template>
  45. <script>
  46. export default {
  47. data() {
  48. return {
  49. isCollapse: true
  50. };
  51. },
  52. methods: {
  53. open() {
  54. this.isCollapse = !this.isCollapse;
  55. }
  56. }
  57. };
  58. </script>
  59. <style>
  60. .nav {
  61. transition: width 0.28s;
  62. width: 180px !important;
  63. height: 100%;
  64. position: fixed;
  65. font-size: 0px;
  66. top: 0;
  67. bottom: 0;
  68. left: 0;
  69. z-index: 1001;
  70. overflow: hidden;
  71. }
  72. .el-menu {
  73. height: 100%;
  74. }
  75. </style>