has-person.wpy 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <style lang="less" scoped>
  2. .has-person {
  3. margin-left: 24rpx;
  4. height: 40rpx;
  5. width: 110rpx;
  6. border-radius: 20rpx;
  7. background: #edf1f5;
  8. display: flex;
  9. justify-content: center;
  10. align-items: center;
  11. .img-box {
  12. height: 32rpx;
  13. width: 32rpx;
  14. }
  15. .text-box {
  16. margin-left: 4rpx;
  17. font-family: Inter;
  18. font-size: 24rpx;
  19. font-weight: 400;
  20. line-height: 32rpx;
  21. color: #626c78;
  22. .notHas {
  23. color: #8b949e;
  24. }
  25. }
  26. }
  27. </style>
  28. <template>
  29. <div class="has-person">
  30. <image
  31. lazyload
  32. class="img-box"
  33. :src="imgType"
  34. />
  35. <div
  36. class="text-box"
  37. :class="{'notHas': !isPassengerPass}"
  38. >
  39. <span>{{isPassengerPass?'有人':'无人'}} </span>
  40. </div>
  41. </div>
  42. </template>
  43. <script>
  44. import wepy from '@wepy/core';
  45. import config from '@/config';
  46. wepy.component({
  47. props: {
  48. isPassengerPass: Boolean
  49. },
  50. data: {
  51. h5StaticPath: config.h5StaticPath + '/page-officehome/',
  52. imgType: ''
  53. },
  54. watch: {
  55. isPassengerPass: {
  56. handler(val) {
  57. this.imgType = val ? `${this.h5StaticPath}has_person.svg` : `${this.h5StaticPath}not_has_person.svg`
  58. },
  59. immediate: true
  60. }
  61. }
  62. })
  63. </script>