menuList.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <!-- 顶部路由 -->
  3. <div class='menu'>
  4. <div class='home' @click='$emit("update:modelNum", 0)'>福建三明万达广场</div>
  5. <div>
  6. <div
  7. v-for='(item, index) in list'
  8. :key='index'
  9. :class='{ "is-active": item.state }'
  10. @click='clickEventAcitve(item, index)'
  11. >{{ item.name }}</div>
  12. </div>
  13. <div class='home-right'>
  14. <span @click='dumpLegend'>
  15. <img class='img1' src='../assets/imgs/scj.png' alt />
  16. <span class='span1'>图例库</span>
  17. </span>
  18. <span class='span-out'>
  19. <img class='img2' src='../assets/imgs/cgx.png' alt />
  20. <span class='span2'>草稿箱</span>
  21. <span class='span2-num' v-if='value<=99'>{{value}}</span>
  22. <span class='span2-num' style='line-height:10px' v-else>...</span>
  23. </span>
  24. <span>
  25. <img class='img3' src='../assets/imgs/clock.png' alt />
  26. <span class='span3'>{{times}}</span>
  27. </span>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. import { formatTime } from '@/utils/format.js'
  33. export default {
  34. data() {
  35. return {
  36. state: '',
  37. list: [
  38. { name: '首页', state: false, route: 'first' },
  39. { name: '项目概况', state: false, route: 'overview' },
  40. { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
  41. { name: '设备设施', state: false, route: 'equipment' }, //设备设施
  42. { name: '其他事项', state: false, route: 'other' }, //其他
  43. { name: '分析 | 报表', state: false, route: 'analysis' }
  44. ],
  45. times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
  46. new Date().getHours()
  47. )}:${formatTime(new Date().getMinutes())}`,
  48. value: 190
  49. }
  50. },
  51. computed: {},
  52. created() {},
  53. mounted() {
  54. let val = ''
  55. if (location.pathname.split('/')[3] == 'first') {
  56. this.modelNum(1)
  57. } else if (location.pathname.split('/')[3] == 'overview') {
  58. this.modelNum(2)
  59. } else if (location.pathname.split('/')[3] == 'floorFunc') {
  60. this.modelNum(3)
  61. } else if (location.pathname.split('/')[3] == 'equipment') {
  62. this.modelNum(4)
  63. } else if (location.pathname.split('/')[3] == 'other') {
  64. this.modelNum(5)
  65. } else if (location.pathname.split('/')[3] == 'analysis') {
  66. this.modelNum(6)
  67. }
  68. },
  69. watch: {},
  70. methods: {
  71. modelNum(val) {
  72. console.log(val)
  73. this.list = this.list.map((item, index) => {
  74. if (val == index + 1) {
  75. item.state = true
  76. } else {
  77. item.state = false
  78. }
  79. return item
  80. })
  81. },
  82. clickEventAcitve(item) {
  83. console.log(item)
  84. this.list.forEach(ele => {
  85. ele.state = false
  86. })
  87. item.state = true
  88. this.state = item.state
  89. this.$router.push({ path: `/home/${item.route}` })
  90. },
  91. dumpLegend() {
  92. this.$router.push({ path: `/home/legendLibrary` })
  93. }
  94. },
  95. components: {}
  96. }
  97. </script>
  98. <style scoped lang="less">
  99. .menu {
  100. height: 48px;
  101. min-width: 1366px;
  102. color: #1f2429;
  103. font-size: 16px;
  104. background: rgba(255, 255, 255, 1);
  105. box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  106. .home {
  107. width: 430px;
  108. height: 48px;
  109. font-size: 20px;
  110. line-height: 48px;
  111. text-align: center;
  112. cursor: pointer;
  113. color: #ffffff;
  114. float: left;
  115. margin-right: 83px;
  116. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  117. }
  118. & > div:nth-of-type(2) {
  119. & > div {
  120. line-height: 48px;
  121. text-align: center;
  122. //background: url('../assets/images/topbar1.png') no-repeat;
  123. float: left;
  124. width: 80px;
  125. height: 48px;
  126. cursor: pointer;
  127. transition: all 0.2s;
  128. }
  129. .is-active {
  130. color: #025baa;
  131. font-weight: bolder;
  132. border-bottom: 2px solid #025baa;
  133. background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  134. }
  135. }
  136. .home-right {
  137. float: right;
  138. margin-right: 20px;
  139. line-height: 48px;
  140. color: #646c73;
  141. font-size: 14px;
  142. cursor: pointer;
  143. display: flex;
  144. align-content: center;
  145. img {
  146. margin-top: -2px;
  147. }
  148. .span-out {
  149. position: relative;
  150. margin: 0 16px;
  151. .span2-num {
  152. position: absolute;
  153. right: -5px;
  154. top: 5px;
  155. display: inline-block;
  156. width: 18px;
  157. height: 18px;
  158. background: red;
  159. border-radius: 90px;
  160. font-size: 12px;
  161. text-align: center;
  162. line-height: 18px;
  163. color: #ffffff;
  164. }
  165. }
  166. }
  167. .span1,
  168. .span2 {
  169. padding: 0 6px 0 3px;
  170. }
  171. .span3 {
  172. padding-left: 3px;
  173. }
  174. }
  175. </style>
  176. <style lang="less">
  177. .menu {
  178. .el-badge__content.is-fixed {
  179. top: 10px;
  180. }
  181. }
  182. </style>