deviceManage.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="">
  3. <view class="cu-list menu-avatar">
  4. <view class="cu-item deviceTypeItem" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in deviceData"
  5. :key="index" :data-target="'move-box-' + index" @tap="goDeviceDetail">
  6. <view class="cu-avatar round lg" :style="`background-image:url(${item.imgUrl})`"></view>
  7. <view class="content" >
  8. <view class="">{{item.title}}</view>
  9. </view>
  10. <view class="nav-right num">
  11. <view class="text-grey">
  12. {{item.status}}
  13. <text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. data() {
  23. return {
  24. deviceData: [{
  25. imgUrl: '../../static/jx.png',
  26. title: '进线一',
  27. status:'在线'
  28. }, {
  29. imgUrl: '../../static/jx.png',
  30. title: '进线二',
  31. status:'离线'
  32. }
  33. ],
  34. modalName: null,
  35. };
  36. },
  37. methods: {
  38. // 页面跳转
  39. goDeviceDetail() {
  40. uni.navigateTo({
  41. url: '/pages/deviceManage/deviceDetail/deviceDetail',
  42. success: res => {},
  43. fail: () => {},
  44. complete: () => {}
  45. });
  46. },
  47. }
  48. }
  49. </script>
  50. <style lang="scss">
  51. .cu-list.menu-avatar>.cu-item .content>uni-view:first-child {
  52. font-size: 32rpx;
  53. }
  54. .num {
  55. font-size: 30rpx;
  56. color: #666;
  57. }
  58. </style>