vinRecord.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <view class="vinRecord">
  3. <view class="des">仅可查看最近7天的VIN查询记录</view>
  4. <view class="list-box">
  5. <view class="list-item flex align_center justify_between" v-for="item in 35">
  6. <view>
  7. <u-image shape="circle" src="@/static/share1.jpg" width='90' height="90"></u-image>
  8. </view>
  9. <view>
  10. <view class="flex align_center justify_between">
  11. <text class="vin-text">LFV2A21K0G4053021</text>
  12. <text class="time-text">2022-05-21 15:23:33</text>
  13. </view>
  14. <view>马自达 CX-5(KE 2012-2017) 2.0L | 手自一体 2014款 都市型</view>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. data() {
  23. return {
  24. }
  25. },
  26. methods: {
  27. }
  28. }
  29. </script>
  30. <style lang="less">
  31. .vinRecord{
  32. width: 100%;
  33. background: #f8f8f8;
  34. .des{
  35. text-align: center;
  36. color: #999;
  37. font-size: 12px;
  38. padding: 20rpx 15rpx;
  39. }
  40. .list-item{
  41. margin: 20rpx 30rpx;
  42. border:2rpx solid #f8f8f8;
  43. box-shadow: 2rpx 2rpx 6rpx #eee;
  44. border-radius: 20rpx;
  45. padding: 20rpx 15rpx;
  46. background: #ffffff;
  47. > view{
  48. padding: 0 10rpx;
  49. &:last-child{
  50. >view{
  51. padding: 10rpx 0;
  52. }
  53. }
  54. }
  55. .time-text{
  56. font-size: 10px;
  57. color: #999;
  58. }
  59. &:first-child{
  60. margin-top: 10rpx;
  61. }
  62. &:active{
  63. opacity: 0.6;
  64. transform:scale(0.9);
  65. }
  66. }
  67. }
  68. </style>