borrow-record.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <view class="home">
  3. <view class="list-area" v-for="item in dataList" :key="item.id">
  4. <u-cell :isLink="true">
  5. <view slot="title" class="u-slot-title">
  6. <i class="iconfont icon-shijian"></i>
  7. <text>{{item.updateTime}}</text>
  8. </view>
  9. <view slot="label" class="u-slot-label">
  10. <text class="list-name">设备:{{item.name}}</text>
  11. <text class="list-status">{{item.status | statusFilter}}</text>
  12. </view>
  13. </u-cell>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. name:"zzzzzssd78",
  22. dataList:[
  23. {
  24. id:1,
  25. name:"23242524",
  26. status:0,
  27. updateTime:"2022-2-2 18:20"
  28. },
  29. {
  30. id:2,
  31. name:"34dsvsdf2",
  32. status:1,
  33. updateTime:"2022-3-2 18:20"
  34. },
  35. {
  36. id:3,
  37. name:"34dsvsdf2",
  38. status:1,
  39. updateTime:"2022-3-2 18:20"
  40. },
  41. {
  42. id:4,
  43. name:"34dsvsdf2",
  44. status:1,
  45. updateTime:"2022-3-2 18:20"
  46. },
  47. {
  48. id:5,
  49. name:"34dsvsdf2",
  50. status:1,
  51. updateTime:"2022-3-2 18:20"
  52. },
  53. {
  54. id:6,
  55. name:"34dsvsdf2",
  56. status:1,
  57. updateTime:"2022-3-2 18:20"
  58. },
  59. {
  60. id:7,
  61. name:"34dsvsdf2",
  62. status:1,
  63. updateTime:"2022-3-2 18:20"
  64. },
  65. {
  66. id:8,
  67. name:"34dsvsdf2",
  68. status:1,
  69. updateTime:"2022-3-2 18:20"
  70. },
  71. {
  72. id:9,
  73. name:"34dsvsdf2",
  74. status:1,
  75. updateTime:"2022-3-2 18:20"
  76. },
  77. {
  78. id:10,
  79. name:"34dsvsdf2",
  80. status:1,
  81. updateTime:"2022-3-2 18:20"
  82. }
  83. ]
  84. };
  85. },
  86. filters:{
  87. statusFilter(val){
  88. let status;
  89. switch(val){
  90. case 0:
  91. status = "借用中"
  92. break;
  93. case 1:
  94. status = "已归还"
  95. break;
  96. default:
  97. status = "请联系管理员"
  98. break;
  99. }
  100. return status;
  101. }
  102. }
  103. }
  104. </script>
  105. <style lang="scss">
  106. page{
  107. background-color: #eae9e9;
  108. }
  109. .home{
  110. width: 100%;
  111. height: 100%;
  112. padding:20rpx 30rpx;
  113. background-color: #eae9e9;
  114. box-sizing: border-box;
  115. .ul-area{
  116. padding: 20rpx 30rpx 0;
  117. box-sizing: border-box;
  118. }
  119. }
  120. .list-area{
  121. background-color: $uni-bg-color;
  122. margin: 0 0 20rpx 0;
  123. line-height: 150%;
  124. .u-slot-title{
  125. display: flex;
  126. align-items: center;
  127. .iconfont{
  128. margin-right: 20rpx;
  129. font-size: 38rpx;
  130. font-weight: bold;
  131. }
  132. }
  133. .u-slot-label{
  134. position: relative;
  135. .list-status{
  136. position: absolute;
  137. right: 140rpx;
  138. }
  139. }
  140. }
  141. </style>