list.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <view
  3. class="list"
  4. v-for="item in items"
  5. :key="item.id"
  6. >
  7. <view class="list-top">
  8. <text class="list-top-person">牛人:{{ item.sendPerson?.name }}</text>
  9. <text class="list-top-time">{{ timesTampChange(item.createTime) }}</text>
  10. </view>
  11. <view class="list-remuneration">
  12. 薪酬:
  13. {{ item.job?.payFrom }}
  14. {{ item.job?.payFrom && item.job?.payTo ? ' - ' : '' }}
  15. {{ item.job?.payTo }}
  16. </view>
  17. <view class="list-company">
  18. <text>{{ item.enterprise?.anotherName }}</text>
  19. <text>{{ item.enterprise?.anotherName && item.job?.name ? ' · ' : '' }}</text>
  20. <text>{{ item.job?.name }}</text>
  21. </view>
  22. </view>
  23. </template>
  24. <script setup>
  25. import { timesTampChange } from '@/utils/date'
  26. const props = defineProps({
  27. items: {
  28. type: Array,
  29. default: () => []
  30. }
  31. })
  32. </script>
  33. <style lang="scss" scoped>
  34. .list {
  35. background: #FFF;
  36. margin-top: 20rpx;
  37. &-top {
  38. padding: 20rpx;
  39. display: flex;
  40. justify-content: space-between;
  41. align-items: center;
  42. &-person {
  43. font-size: .9em;
  44. color: #333;
  45. }
  46. &-time {
  47. font-size: .75em;
  48. color: #999;
  49. }
  50. }
  51. &-company {
  52. padding: 30rpx 20rpx;
  53. font-size: 28rpx;
  54. color: #666;
  55. background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
  56. }
  57. &-remuneration {
  58. padding: 20rpx;
  59. font-size: 28rpx;
  60. color: #666;
  61. }
  62. }
  63. </style>