<template>
	<div class="card-name-module">
		<div class="member-avatar">
			<cl-avatar :size="60" :src="data.avatarUrl | default_avatar" :style="{ margin: 'auto' }"></cl-avatar>
		</div>
		<div class="source-wrap">
			<span class="member-name">{{ data.userName }}</span>
		</div>
	</div>
</template>

<script>
export default {
	name: 'card-name',
	props: {
		data: {
			type: Object,
			default: () => {}
		}
	}
};
</script>

<style lang="scss" scoped>
.card-name-module {
	.source-wrap {
		@include disFlex(center, center);
		margin: 10px 0 16px;
		.member-name {
			font-size: 16px;
			text-align: center;
		}
		.iconfont {
			margin-left: 10px;
		}
		.iconweixinlaiyuan {
			color: #35b801;
		}
		.iconzhifubao {
			color: #00aaed;
		}
		.iconshoujihao1 {
			color: #fc2e47;
		}
	}

	.label-wrap {
		color: $fontColor2;
		.label-list {
			margin: 6px 0;
		}
	}
}
</style>
