universal-wechat-uniapp-241007/components/list/fansList.vue

<template>
    <view class="fansList">
        <view class="fanst" v-for="(item, index) in list" :key="item.id || index">
            <view class="profilepicture">
                <image :src="getItem(item).headImage" mode="aspectFill"></image>
            </view>
            <view class="name">
                <view class="namea">
                    {{ getItem(item).nickName }}
                </view>
                <view class="nameb">
                    {{ getItem(item).createTime }}
                </view>
            </view>
            <view class="Dot" v-if="showDot">
                <uv-icon name="more-dot-fill"></uv-icon>
            </view>
        </view>
    </view>

</template>

<script>
export default {
    name: 'FansList',
    props: {
        list: {
            type: Array,
            default: () => []
        },
        showDot: {
            type: Boolean,
            default: false
        },
    },
    methods: {
        getItem(item){
            return item && item.user || item
        }
    }
}
</script>

<style scoped lang="scss">
.fansList {
    margin: 20rpx 10rpx;
    background-color: white;

    .fanst {
        margin: 20rpx 0rpx;
        display: flex;
        align-items: center;
        padding: 20rpx;

        .profilepicture {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;

            image {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
            }
        }

        .name {
            letter-spacing: 2rpx;
            font-size: 25rpx;
            margin-left: 20rpx;

            .namea {
                font-weight: bold;
            }

            .nameb {
                color: rgba(0, 0, 0, 0.5);
            }
        }

        .Dot {
            margin-left: auto;
        }

    }
}
</style>