Usercard 人员信息卡

平台人员信息卡，常用于人员管理。

基础使用

该组件结合了 Avatar、Qrcode 组件。qrcode 为可扫码的卡片二维码信息，avatar 为头像地址。

查看代码

<template>
	<demo-container>
		<gov-usercard
			title="XXX工作证"
			name="陈某某"
			qrcode="https://www.baidu.com/"
			avatar="/usercard.jpg"
			place="XXX社区"
			job="某某某文员"
			nums="922876444732219273"
			expiration="2020年12月1日 ~ 2030年12月1日"
		/>
	</demo-container>
</template>

自定义头部

查看代码

<template>
	<demo-container class="gov-demo-usercard">
		<gov-usercard
			name="陈某某"
			qrcode="https://www.baidu.com/"
			avatar="/usercard.jpg"
			place="XXX社区"
			job="某某某文员"
			nums="922876444732219273"
			expiration="2020年12月1日 ~ 2030年12月1日"
		>
			<template #header>
				<div class="custom-header">
					<gov-danghui width="40" type="yellow" />
					<span>XXX党支部</span>
				</div>
			</template>
		</gov-usercard>
	</demo-container>
</template>

<script setup></script>
<style lang="scss">
.gov-demo-usercard {
	.custom-header {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 30px;
		gap: 9px;
	}
}
</style>

Attributes

参数	类型	默认值	描述
title	String	-	顶部标题
avatar	String	-	头像图片的URL
name	String	-	姓名
nums	Number | String	-	编号
place	String	-	工作单位
job	String	-	职务
qrcode	String	-	二维码的值
background	String	-	自定义背景图的URL
expiration	String	-	有效期

Slots

Slot Name	描述
header	用于自定义工作证头部内容的插槽。默认情况下，会显示传递给title属性的标题。