Nav.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <div class="aside-menu">
  3. <ul class="floor1">
  4. <li>
  5. <router-link to="/main">
  6. <i class="iconfont icon-home"></i>
  7. <span >首页</span>
  8. </router-link>
  9. <!-- <ul class="floor2" :class="{left300: isSpread}" >
  10. <li>11111</li>
  11. <li>22222</li>
  12. <li>11111</li>
  13. <li>22222</li>
  14. </ul> -->
  15. </li>
  16. <li>
  17. <router-link to="/equipment">
  18. <i class="iconfont icon-zonglan"></i>
  19. <span >设备详情</span>
  20. </router-link>
  21. <!-- <ul class="floor2" :class="{left300: isSpread}" style="top:94px;">
  22. <li>dsa</li>
  23. <li>dasd</li>
  24. <li>dasd</li>
  25. <li>222dasd22</li>
  26. </ul> -->
  27. </li>
  28. <li>
  29. <router-link to="/rooms">
  30. <i class="iconfont icon-anquancanshu"></i>
  31. <span >空间详情</span>
  32. </router-link>
  33. </li>
  34. <li>
  35. <router-link to="/vr">
  36. <i class="iconfont icon-qushi"></i>
  37. <span >空间</span>
  38. </router-link>
  39. </li>
  40. <!-- <li>
  41. <router-link to="/spread">
  42. <i class="iconfont icon-anquancanshu"></i>
  43. <span >设备</span>
  44. </router-link>
  45. </li> -->
  46. <li>
  47. <router-link to="/asset">
  48. <i class="iconfont icon-anquancanshu"></i>
  49. <span >资产</span>
  50. </router-link>
  51. </li>
  52. <li>
  53. <router-link to="/system">
  54. <i class="iconfont icon-qiangdianzhuanyexitong"></i>
  55. <span >系统详情</span>
  56. </router-link>
  57. </li>
  58. </ul>
  59. </div>
  60. </template>
  61. <script>
  62. // import axios from 'axios'
  63. export default {
  64. components: {},
  65. mixins: [],
  66. props: {
  67. isSpread: {
  68. type: Boolean,
  69. default: false
  70. }
  71. },
  72. data () {
  73. return {
  74. }
  75. },
  76. computed: {},
  77. mounted () {
  78. },
  79. methods: {
  80. }
  81. }
  82. </script>
  83. <style scoped lang="less" >
  84. .aside-menu {
  85. z-index:99999;
  86. box-shadow: 2px 0 4px 0 rgba(44,48,62,0.06);
  87. ul.floor1 {
  88. > li {
  89. position: relative;
  90. ul.floor2{
  91. display: none;
  92. position: fixed;
  93. top: 50px;
  94. left: 80px;
  95. background: #fff;
  96. transition: all 0.3s ease-in-out;
  97. z-index: 2;
  98. }
  99. ul.left200 {
  100. left: 200px;
  101. }
  102. &:hover {
  103. background: #eee;
  104. > ul.floor2 {
  105. display: block;
  106. }
  107. }
  108. > a {
  109. display: inline-block;
  110. white-space: nowrap;
  111. padding: 10px 23px;
  112. width: 100%;
  113. color: #b6bccb;
  114. span {
  115. padding-left: 37px;
  116. color: black;
  117. font-size: 15px;
  118. }
  119. }
  120. .router-link-active {
  121. color: #57a4f7;
  122. }
  123. .iconfont{
  124. padding-left: 4px;
  125. font-size: 22px;
  126. }
  127. }
  128. }
  129. }
  130. </style>