index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <view class="sidebar-container">
  3. <view class="container">
  4. <view class="sidebar-title">
  5. <image :src="$getImages(`${titleIcon}`)" class="title-image" v-if="titleIcon"></image>
  6. {{ label }}
  7. </view>
  8. <u-row class="sidebar-row">
  9. <template v-for="(item,index) in children">
  10. <u-col :span="span" :index="index" class="sidebar-col">
  11. <image :src="$getImages(item.backImg)" class="hbg-image"></image>
  12. <view @click="handleFun(item)">
  13. <SidebarItem :info="item" :hint="himObj[item.perms]"></SidebarItem>
  14. </view>
  15. </u-col>
  16. </template>
  17. </u-row>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import SidebarItem from './module/sidebarItem.vue'
  23. export default {
  24. components: {
  25. SidebarItem,
  26. },
  27. props: {
  28. label: {
  29. type: String,
  30. default: ''
  31. },
  32. children: {
  33. type: Array,
  34. default: () => {
  35. return []
  36. }
  37. },
  38. span: {
  39. type: Number,
  40. default: 3
  41. },
  42. titleIcon:{
  43. type: String,
  44. default: ''
  45. },
  46. himObj: {
  47. type: Object,
  48. default: () => {
  49. return {}
  50. }
  51. },
  52. },
  53. computed: {
  54. allPermission() {
  55. return this.children.map((e) => e.perms)
  56. }
  57. },
  58. data() {
  59. return {
  60. }
  61. },
  62. onLoad() {
  63. },
  64. methods: {
  65. handleFun(item) {
  66. if(item.event) {
  67. this.$emit(`${item.event}`)
  68. } else if (item.path) {
  69. uni.navigateTo({
  70. url: item.path,
  71. })
  72. }else {
  73. uni.showToast({
  74. title: '功能正在开发',
  75. icon: 'none'
  76. })
  77. }
  78. }
  79. }
  80. }
  81. </script>
  82. <style lang="scss" scoped>
  83. .sidebar-container {
  84. position: relative;
  85. width: 100%;
  86. height: auto;
  87. .container {
  88. position: relative;
  89. width: 100%;
  90. height: auto;
  91. display: flex;
  92. flex-flow: column nowrap;
  93. align-items: flex-start;
  94. .sidebar-title {
  95. font-family: PingFangSC, PingFang SC;
  96. width: 100%;
  97. font-weight: bold;
  98. color: #333333;
  99. font-size: 16px;
  100. margin-bottom: 24rpx;
  101. display: flex;
  102. align-items: center;
  103. }
  104. .title-image{
  105. width: 40rpx;
  106. height: 40rpx;
  107. margin-right: 6rpx;
  108. }
  109. .sidebar-list{
  110. width: 100%;
  111. height: 144rpx;
  112. margin-bottom: 16rpx;
  113. .sidebar-item{
  114. height: 100%;
  115. position: relative;
  116. .background-image {
  117. position: absolute;
  118. bottom: 0;
  119. right: 0;
  120. width: 100%;
  121. height: 100%;
  122. }
  123. .icon-image{
  124. width: 28rpx;
  125. height: 28rpx;
  126. margin-left: 12rpx;
  127. }
  128. .info{
  129. position: absolute;
  130. left: 40rpx;
  131. top: 28rpx;
  132. color: #fff;
  133. font-size: 24rpx;
  134. .label-title{
  135. font-size: 32rpx;
  136. }
  137. .icon-warp{
  138. display: flex;
  139. align-items: center;
  140. margin-top: 12rpx;
  141. }
  142. }
  143. }
  144. }
  145. .hbg-image{
  146. position: absolute;
  147. width: 146rpx;
  148. height: 148rpx;
  149. }
  150. .sidebar-row{
  151. width: 100%;
  152. flex-wrap: wrap;
  153. // margin-bottom: 20rpx;
  154. }
  155. .sidebar-col{
  156. height: 148rpx;
  157. margin-bottom: 20rpx;
  158. display: flex;
  159. align-items: center !important;
  160. }
  161. }
  162. }
  163. ::v-deep {
  164. }
  165. </style>