index.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view class="empty">
  3. <view class="empty-content" :class="{ emptyOnly: !isRecommendShow }">
  4. <text class="iconfont iconnodata-search" :class="'text-'+themeColor.name"></text>
  5. <text class="empty-content-info">{{ info }}</text>
  6. </view>
  7. <rf-recommend :bottom="bottom" v-if="isRecommendShow" :list="list" class="recommend" />
  8. </view>
  9. </template>
  10. <script>
  11. import rfRecommend from '@/components/rf-recommend/rf-recommend';
  12. export default {
  13. components: {
  14. rfRecommend
  15. },
  16. props: {
  17. src: {
  18. type: String,
  19. default: 'empty'
  20. },
  21. isRecommendShow: {
  22. type: Boolean,
  23. default: true
  24. },
  25. info: {
  26. type: String,
  27. default: ''
  28. },
  29. bottom: {
  30. type: Number,
  31. default: 0
  32. },
  33. list: {
  34. type: Array,
  35. default() {
  36. return [];
  37. }
  38. }
  39. },
  40. data() {
  41. return {};
  42. },
  43. computed: {}
  44. };
  45. </script>
  46. <style lang="scss">
  47. .empty {
  48. background-color: $color-white;
  49. .empty-content {
  50. width: 100%;
  51. display: flex;
  52. align-items: center;
  53. justify-content: center;
  54. flex-direction: column;
  55. padding: 20upx 0 80upx;
  56. .empty-content-info {
  57. font-size: $font-base - 2upx;
  58. }
  59. .iconfont {
  60. font-size: 240upx;
  61. }
  62. &-image {
  63. width: 200upx;
  64. height: 200upx;
  65. }
  66. }
  67. .emptyOnly {
  68. position: fixed;
  69. left: 0;
  70. top: 0;
  71. right: 0;
  72. bottom: 0;
  73. }
  74. }
  75. </style>