follow.vue 984 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <view class="page">
  3. <view class="tabs">
  4. <view class="tab active">关注</view>
  5. <view class="tab">粉丝</view>
  6. </view>
  7. <view class="follow-list">
  8. <view class="follow-item" v-for="(item, index) in followList" :key="index">
  9. <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
  10. <view class="info">
  11. <view class="name">{{item.name}}</view>
  12. <view class="desc">{{item.description}}</view>
  13. </view>
  14. <button class="unfollow-btn">取消关注</button>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. followList: [
  24. {
  25. avatar: '/static/demo/avatar1.jpg',
  26. name: '冷落',
  27. description: 'AI设计师'
  28. },
  29. {
  30. avatar: '/static/demo/avatar2.jpg',
  31. name: '雾里',
  32. description: '感谢你的关注,远方的陌生人'
  33. }
  34. ]
  35. }
  36. },
  37. methods: {
  38. }
  39. }
  40. </script>
  41. <style scoped lang="scss">
  42. @import 'follow.scss';
  43. </style>