menuList.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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. props: ['modelNum'],
  35. data() {
  36. return {
  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. watch: {
  55. modelNum(val) {
  56. this.list = this.list.map((item, index) => {
  57. if (val == index + 1) {
  58. item.state = true
  59. } else {
  60. item.state = false
  61. }
  62. return item
  63. })
  64. }
  65. },
  66. methods: {
  67. clickEventAcitve(item) {
  68. this.list.forEach(ele => {
  69. ele.state = false
  70. })
  71. item.state = true
  72. this.$router.push({ path: `/home/${item.route}` })
  73. },
  74. dumpLegend() {
  75. this.$router.push({ path: `/home/legendLibrary` })
  76. }
  77. },
  78. components: {}
  79. }
  80. </script>
  81. <style scoped lang="less">
  82. .menu {
  83. height: 48px;
  84. min-width: 1366px;
  85. color: #1f2429;
  86. font-size: 16px;
  87. background: rgba(255, 255, 255, 1);
  88. box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  89. .home {
  90. width: 430px;
  91. height: 48px;
  92. font-size: 20px;
  93. line-height: 48px;
  94. text-align: center;
  95. cursor: pointer;
  96. color: #ffffff;
  97. float: left;
  98. margin-right: 83px;
  99. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  100. }
  101. & > div:nth-of-type(2) {
  102. & > div {
  103. line-height: 48px;
  104. text-align: center;
  105. //background: url('../assets/images/topbar1.png') no-repeat;
  106. float: left;
  107. width: 88px;
  108. height: 48px;
  109. cursor: pointer;
  110. transition: all 0.2s;
  111. }
  112. .is-active {
  113. // background: url('../assets/images/topbar2.png') no-repeat;
  114. color: #025baa;
  115. font-weight: bolder;
  116. background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  117. }
  118. }
  119. .home-right {
  120. float: right;
  121. margin-right: 20px;
  122. line-height: 48px;
  123. color: #646c73;
  124. font-size: 14px;
  125. cursor: pointer;
  126. display: flex;
  127. align-content: center;
  128. img {
  129. margin-top: -2px;
  130. }
  131. .span-out {
  132. position: relative;
  133. margin: 0 16px;
  134. .span2-num {
  135. position: absolute;
  136. right: -5px;
  137. top: 5px;
  138. display: inline-block;
  139. width: 18px;
  140. height: 18px;
  141. background: red;
  142. border-radius: 90px;
  143. font-size: 12px;
  144. text-align: center;
  145. line-height: 18px;
  146. color: #ffffff;
  147. }
  148. }
  149. }
  150. .span1,
  151. .span2 {
  152. padding: 0 6px 0 3px;
  153. }
  154. .span3 {
  155. padding-left: 3px;
  156. }
  157. }
  158. </style>
  159. <style lang="less">
  160. .menu {
  161. .el-badge__content.is-fixed {
  162. top: 10px;
  163. }
  164. }
  165. </style>