index.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <view class="workbench-page">
  3. <view class="section white-wrap" v-for="item in tabs" :key="item.label">
  4. <view class="tab-title">{{item.label}}</view>
  5. <view class="tab-ul">
  6. <view class="tab-item" @click="handleGoNext(tab.url)" v-for="tab in item.child" :key="tab.label">
  7. <image :src="tab.img" mode="aspectFill" class="icon"/>
  8. <view class="label">{{tab.label}}</view>
  9. </view>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. import {shareData} from '@/utils/config.js'
  16. export default{
  17. data() {
  18. return {
  19. tabs: [
  20. {
  21. label: '审批',
  22. child: [
  23. {
  24. label: '客户审批',
  25. url: '/pages-approve/custome/list',
  26. img: require('@/static/icon-1.png')
  27. },
  28. {
  29. label: '合同审批',
  30. url: '/pages-approve/contract/list',
  31. img: require('@/static/icon-2.png')
  32. },
  33. {
  34. label: '用印审批',
  35. url: '/pages-approve/seal/list',
  36. img: require('@/static/icon-3.png')
  37. },
  38. // {
  39. // label: '活动审批',
  40. // url: '/pages-approve/activity/list',
  41. // img: require('@/static/icon-4.png')
  42. // },
  43. ]
  44. },
  45. {
  46. label: '路演管理',
  47. child: [
  48. {
  49. label: '研究员日历',
  50. url: '/pages-roadshow/researcherCalendar/index',
  51. img: require('@/static/icon-5.png')
  52. },
  53. {
  54. label: '我的日历',
  55. url: '/pages-roadshow/myCalendar/index',
  56. img: require('@/static/icon-6.png')
  57. }
  58. ]
  59. },
  60. {
  61. label: '问答社区',
  62. child: [
  63. {
  64. label: '分配提问',
  65. url: '/pages-question/detail/index?type=question',
  66. img: require('@/static/icon-question.png')
  67. },
  68. {
  69. label: '评论管理',
  70. url: '/pages-question/detail/index?type=comment',
  71. img: require('@/static/icon-comment.png')
  72. }
  73. ]
  74. }
  75. ]
  76. }
  77. },
  78. onShareAppMessage() {
  79. return shareData
  80. },
  81. methods: {
  82. handleGoNext(url) {
  83. uni.navigateTo({
  84. url
  85. })
  86. }
  87. },
  88. }
  89. </script>
  90. <style lang="scss">
  91. .workbench-page{
  92. padding: 20rpx;
  93. display: flex;
  94. flex-wrap: wrap;
  95. }
  96. .section{
  97. width: 100%;
  98. padding: 30rpx;
  99. box-shadow: 0px 3px 12px rgba(175, 175, 175, 0.16);
  100. font-size: 12px;
  101. font-weight: 400;
  102. color: #666;
  103. margin-bottom: 30rpx;
  104. .tab-title {
  105. font-size: 32rpx;
  106. font-weight: bold;
  107. color: #222;
  108. }
  109. .tab-ul {
  110. margin-top: 40rpx;
  111. display: flex;
  112. align-items: center;
  113. .tab-item {
  114. margin-right: 60rpx;
  115. text-align: center;
  116. .icon{
  117. width: 78rpx;
  118. height: 78rpx;
  119. margin: 0 auto 10rpx;
  120. }
  121. }
  122. }
  123. }
  124. </style>