zw-service-list.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template>
  2. <view class="service-list-box">
  3. <template v-if="serviceObj.thirdApplications && serviceObj.thirdApplications.length > 0">
  4. <view class="service-list-title"> <text class="label-name skeleton-fillet">{{serviceObj.name}}</text>
  5. </view>
  6. <view class="service-list">
  7. <u-row gutter="14">
  8. <block v-for="(item , index) in serviceObj.thirdApplications">
  9. <u-col span="3" :key="`${item.thirdName}_${index}`">
  10. <view class="service-list-item" @click.stop="$openPage(item)">
  11. <image class="skeleton-fillet" :src="$getImgPath(item.icon)" mode="aspectFit"></image>
  12. <view class="skeleton-fillet service-name zw-two-row">{{item.thirdName}}</view>
  13. </view>
  14. </u-col>
  15. </block>
  16. </u-row>
  17. </view>
  18. </template>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. name: "zw-service-list",
  24. props: {
  25. serviceObj: {
  26. type: Object,
  27. default: () => {}
  28. }
  29. },
  30. data() {
  31. return {
  32. };
  33. }
  34. }
  35. </script>
  36. <style lang="scss" scoped>
  37. .service-list-box {
  38. width: 100%;
  39. padding: 0 13rpx;
  40. border-bottom: 1rpx solid $zw-border-color;
  41. margin-bottom: 20rpx;
  42. .service-list-title {
  43. height: 90rpx;
  44. font-size: 28rpx;
  45. font-family: PingFang SC;
  46. font-weight: 600;
  47. color: #1a1a1a;
  48. padding: 0 17rpx;
  49. display: flex;
  50. align-items: center;
  51. .label-name {
  52. display: inline-block;
  53. width: 100%;
  54. min-height: 50rpx;
  55. }
  56. }
  57. .service-list {
  58. width: 100%;
  59. padding: 0 0 30rpx;
  60. ::v-deep .u-row {
  61. align-items: stretch !important;
  62. }
  63. .service-list-item {
  64. width: 100%;
  65. // height: 138rpx;
  66. display: flex;
  67. flex-direction: column;
  68. align-items: center;
  69. padding-bottom: 20rpx;
  70. image {
  71. width: 86rpx;
  72. height: 86rpx;
  73. }
  74. .service-name {
  75. width: 100%;
  76. margin-top: 15rpx;
  77. min-height: 30rpx;
  78. line-height: 1.4;
  79. // height: 100rpx;
  80. font-size: 22rpx;
  81. font-family: PingFang SC;
  82. font-weight: 300;
  83. text-align: center;
  84. color: #4d4d4d;
  85. }
  86. }
  87. }
  88. }
  89. </style>