瑶都万能墙
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

86 lines
1.8 KiB

  1. <template>
  2. <view class="fansList">
  3. <view class="fanst" v-for="(item, index) in list" :key="item.id || index">
  4. <view class="profilepicture">
  5. <image :src="getItem(item).headImage" mode="aspectFill"></image>
  6. </view>
  7. <view class="name">
  8. <view class="namea">
  9. {{ getItem(item).nickName }}
  10. </view>
  11. <view class="nameb">
  12. {{ getItem(item).createTime }}
  13. </view>
  14. </view>
  15. <view class="Dot" v-if="showDot">
  16. <uv-icon name="more-dot-fill"></uv-icon>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. name: 'FansList',
  24. props: {
  25. list: {
  26. type: Array,
  27. default: () => []
  28. },
  29. showDot: {
  30. type: Boolean,
  31. default: false
  32. },
  33. },
  34. methods: {
  35. getItem(item){
  36. return item && item.user || item
  37. }
  38. }
  39. }
  40. </script>
  41. <style scoped lang="scss">
  42. .fansList {
  43. margin: 20rpx 10rpx;
  44. background-color: white;
  45. .fanst {
  46. margin: 20rpx 0rpx;
  47. display: flex;
  48. align-items: center;
  49. padding: 20rpx;
  50. .profilepicture {
  51. width: 100rpx;
  52. height: 100rpx;
  53. border-radius: 50%;
  54. image {
  55. width: 100rpx;
  56. height: 100rpx;
  57. border-radius: 50%;
  58. }
  59. }
  60. .name {
  61. letter-spacing: 2rpx;
  62. font-size: 25rpx;
  63. margin-left: 20rpx;
  64. .namea {
  65. font-weight: bold;
  66. }
  67. .nameb {
  68. color: rgba(0, 0, 0, 0.5);
  69. }
  70. }
  71. .Dot {
  72. margin-left: auto;
  73. }
  74. }
  75. }
  76. </style>