list.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <view class="list-box">
  3. <view class="item-box" v-for="item in list" :key="item.shareuserid">
  4. <navigator class="item-top" url="'#">
  5. <view class="avatar-info">
  6. <u--image shape="circle" :width="tovw(44)" :height="tovw(44)" :lazy-load="true" :src="item.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg'" mode="widthFix"></u--image>
  7. <view class="detail-info">
  8. <text class="title">{{ item.name }}</text>
  9. <view class="address">
  10. <i class="iconfont icon-dizhi-hui1"></i>
  11. <text>{{ item.province+item.city+item.county+item.address }}</text>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="origin-info">
  16. <text class="origin">来自:{{ item.sharename }}</text>
  17. <text class="createdate">{{ item.createdate }}</text>
  18. </view>
  19. </navigator>
  20. <view class="footer-info">
  21. <view class="left">来源:{{ item.type }}</view>
  22. <navigator class="right" url="#" @click="callPhoneFun('17757302859')">
  23. <i class="iconfont icon-dianhua-hong" style="color:#C30D23"></i>
  24. <text>{{ item.phonenumber }}</text>
  25. </navigator>
  26. </view>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. props:['list'],
  33. data () {
  34. return {
  35. }
  36. }
  37. }
  38. </script>
  39. <style lang="scss">
  40. .list-box {
  41. padding: 10px 10px 0 10px;
  42. .item-box {
  43. background: #ffffff;
  44. padding: 10px 0 10px 10px;
  45. display: flex;
  46. flex-direction: column;
  47. border-radius: 8px 8px 8px 8px;
  48. .item-top {
  49. display: flex;
  50. flex-direction: column;
  51. padding-bottom: 10px;
  52. border-bottom: 1px solid #DDDDDD;
  53. font-family: Source Han Sans SC, Source Han Sans SC;
  54. .avatar-info {
  55. display: flex;
  56. .avatar {
  57. width: 44px;
  58. height: 44px;
  59. margin-right: 10px;
  60. }
  61. .detail-info {
  62. display: flex;
  63. flex-direction: column;
  64. margin-left: 10px;
  65. .title {
  66. font-weight: 500;
  67. font-size: 16px;
  68. color: #333333;
  69. margin-bottom: 5px;
  70. }
  71. .address {
  72. font-weight: 400;
  73. font-size: 12px;
  74. color: #666666;
  75. display: flex;
  76. align-items: center;
  77. align-content: center;
  78. text {
  79. margin-left: 5px;
  80. }
  81. }
  82. }
  83. }
  84. .origin-info {
  85. display: flex;
  86. justify-content: space-between;
  87. font-size: 14px;
  88. color: #888888;
  89. margin-top: 6px;
  90. .origin {
  91. margin-left: 64px;
  92. }
  93. .createdate {
  94. margin-right: 10px;
  95. }
  96. }
  97. }
  98. .footer-info {
  99. display: flex;
  100. justify-content: space-between;
  101. margin-top: 10px;
  102. .left{
  103. font-weight: 400;
  104. font-size: 14px;
  105. color: #888888;
  106. }
  107. .right{
  108. display: flex;
  109. align-items: center;
  110. align-content: center;
  111. text {
  112. font-size: 14px;
  113. color: #333333;
  114. margin: 0 10px 0 10px;
  115. }
  116. }
  117. }
  118. }
  119. }
  120. </style>