hasten.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <div class="hasten" v-if="hastenList.length">
  3. <div class="hastenItem" v-for="(item, index) in hastenList" :key="index">
  4. <div class="date item">
  5. <div class="label">催办时间:</div>
  6. <div class="value">{{ item.createTime }}</div>
  7. </div>
  8. <div class="number item">
  9. <div class="label">催办次数:</div>
  10. <div class="value">{{ index + 1 }}</div>
  11. </div>
  12. <div class="content item">
  13. <div class="label">催办内容:</div>
  14. <div class="value">{{ item.urgeMessage }}</div>
  15. </div>
  16. </div>
  17. </div>
  18. </template>
  19. <script>
  20. export default {
  21. name: 'hasten',
  22. props: {
  23. hastenList: {
  24. type: Array,
  25. defaule: () => [],
  26. },
  27. },
  28. data() {
  29. return {};
  30. },
  31. };
  32. </script>
  33. <style lang="scss" scoped>
  34. .hasten {
  35. background: #fff;
  36. padding: 10px 16px;
  37. margin: 6px 10px 10px;
  38. .hastenItem {
  39. border-bottom: 1px solid #ccc;
  40. margin-bottom: 5px;
  41. padding-bottom: 5px;
  42. &:last-child {
  43. border-bottom: none;
  44. }
  45. .item {
  46. display: flex;
  47. padding: 3px 0;
  48. font-size: 14px;
  49. color: #444;
  50. .label {
  51. width: 110px;
  52. }
  53. .value {
  54. flex: 1;
  55. }
  56. }
  57. }
  58. }
  59. </style>